/* ===== HEXA SALESKIT — Shared Styles ===== */
/* Included by all sub-pages loaded in iframe */

*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#f5f4ef;--card:#fff;--card2:#faf9f5;--bdr:#e5e2d9;--bdr2:#ede9e2;
--tx:#1a1a1a;--tx2:#444;--tx3:#777;--tx4:#aaa;
--red:#c41c1c;--red2:#a01616;--red-bg:#fef0f0;--red-bd:#f5c0c0;
--blk:#141414;--blk2:#222;
--blue:#2563eb;--blue-bg:#eff5ff;--blue-bd:#bfdbfe;
--green:#059669;--green-bg:#ecfdf5;--green-bd:#a7f3d0;
--amber:#d97706;--amber-bg:#fffbeb;--amber-bd:#fde68a;
--purple:#7c3aed;--purple-bg:#f5f3ff;--purple-bd:#c4b5fd;
--teal:#0d9488;--teal-bg:#f0fdfa;--teal-bd:#99f6e4;
--rose:#e11d48;--rose-bg:#fff1f2;--rose-bd:#fecdd3;
--r:14px;--rs:10px;
--f:'Plus Jakarta Sans',system-ui,sans-serif;
--m:'JetBrains Mono',monospace;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--f);overflow-x:hidden}

/* Content wrapper */
.cw{max-width:460px;margin:0 auto;padding:20px 16px 40px}

/* Section titles */
.sec-t{font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-t .ln{width:16px;height:2px;border-radius:1px}

/* Cards */
.cc{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);padding:16px;margin-bottom:10px}
.cc h4{font-size:13px;font-weight:700;margin-bottom:6px}
.cc p,.cc li{font-size:12.5px;color:var(--tx2);line-height:1.7}
.cc ul{padding-left:16px;margin-top:4px}.cc li{margin-bottom:3px}

/* Highlight cards */
.hlc{border-radius:var(--r);padding:16px;margin-bottom:10px;border:1.5px solid}
.hlc h4{font-size:12px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.hlc p{font-size:12.5px;line-height:1.7}

/* Script cards */
.sc{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);padding:16px;margin-bottom:10px;position:relative}
.sc .sl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.sc .st{font-size:12.5px;color:var(--tx2);line-height:1.8;font-style:italic}
.sc .cp{position:absolute;top:10px;right:10px;padding:5px 9px;border:1.5px solid var(--bdr);border-radius:7px;background:var(--card);font-size:10px;font-weight:600;cursor:pointer;color:var(--tx3)}
.sc .cp:active{background:var(--card2)}

/* Tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:10px}
.tc{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);overflow:hidden;margin-bottom:10px}
table{width:100%;border-collapse:collapse;font-size:11.5px;min-width:340px}
th{background:var(--blk);color:#fff;padding:9px 12px;text-align:left;font-weight:600;font-size:10px;letter-spacing:.3px;white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--bdr2);color:var(--tx2);white-space:nowrap}
tr:last-child td{border-bottom:none}
.cat-r td{background:var(--card2);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);padding:6px 12px}

/* Price cards */
.pc{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.pc .ph{padding:14px 16px;border-bottom:1px solid var(--bdr);background:var(--card2);display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pc .pn{font-size:13px;font-weight:700;color:var(--blk)}.pc .ps{font-size:10.5px;color:var(--tx3);margin-top:2px}
.pc .ptag{font-family:var(--m);font-size:9px;padding:3px 8px;border-radius:20px;background:var(--red);color:#fff;font-weight:500;letter-spacing:.3px;white-space:nowrap;flex-shrink:0;margin-top:2px}
.pc .ptag.n{background:var(--blk)}.pc .ptag.o{background:transparent;color:var(--tx);border:1px solid var(--bdr)}
.pc .pb{padding:14px 16px}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-bottom:12px}
.sg .sl2{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3);margin-bottom:1px}
.sg .sv{font-size:12px;font-weight:600;color:var(--tx)}
.pstrip{display:flex;background:var(--blk);border-radius:8px;overflow:hidden;margin-top:4px}
.pcell{flex:1;padding:10px 12px}.pcell+.pcell{border-left:1px solid rgba(255,255,255,.1)}
.pcell .pl{font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:2px}
.pcell .pv{font-family:var(--m);font-size:12px;font-weight:500;color:#fff}
.pcell .pv.rd{color:#ff8080}
.nt{margin-top:10px;padding:8px 12px;background:var(--card2);border-left:3px solid var(--red-bd);border-radius:0 8px 8px 0;font-size:11px;color:var(--tx2);line-height:1.5}

/* Banner grid */
.bg2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bi2{background:var(--card);border:1.5px solid var(--bdr);border-radius:8px;padding:12px}
.bi2 .bl{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);margin-bottom:3px}
.bi2 .bn{font-size:12px;font-weight:700;color:var(--blk);margin-bottom:4px}
.bi2 .bp2{font-family:var(--m);font-size:14px;font-weight:500;color:var(--red)}
.bi2 .bs{font-size:9px;color:var(--tx3);margin-top:1px}

/* Info banner */
.ib{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;border-radius:8px;font-size:12px;line-height:1.5;border-left:4px solid}
.ib-r{background:var(--red-bg);border-color:var(--red);color:var(--red2)}
.ib-g{background:var(--green-bg);border-color:var(--green);color:#065f46}
.ib-a{background:var(--amber-bg);border-color:var(--amber);color:#92400e}
.ib-p{background:var(--purple-bg);border-color:var(--purple);color:#5b21b6}

/* Inputs */
.ig{margin-bottom:14px}
.ig label{display:block;font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:6px}
.iw{display:flex;align-items:center;background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--rs);overflow:hidden;transition:border-color .2s}
.iw:focus-within{border-color:var(--blue)}
.iw .px,.iw .sx{padding:0 12px;font-size:13px;font-family:var(--m);color:var(--tx4);user-select:none;flex-shrink:0}
.iw input,.iw select{flex:1;border:none;outline:none;background:transparent;padding:12px;font-size:14px;font-family:var(--m);font-weight:600;color:var(--tx);width:100%;min-width:0}
.iw select{font-family:var(--f);-webkit-appearance:none;appearance:none}
.iw input::placeholder{color:#ccc}
.iw.warn{border-color:var(--red)!important;background:var(--red-bg)}

/* Stats */
.sts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.st2{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);padding:14px 12px;position:relative;overflow:hidden}
.st2.alt{border-color:var(--red-bd);background:var(--red-bg)}
.st2.alta{border-color:var(--amber-bd);background:var(--amber-bg)}
.st2 .si{font-size:10.5px;color:var(--tx3);margin-bottom:5px}
.st2 .sv2{font-size:18px;font-weight:800;font-family:var(--m);letter-spacing:-.5px;line-height:1.2}
.st2 .ss{font-size:10.5px;color:var(--tx3);margin-top:4px}

/* Bars */
.brg{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);padding:14px;margin-bottom:14px}
.brg .bt2{font-size:10.5px;color:var(--tx3);margin-bottom:10px;letter-spacing:.5px;font-weight:600}
.bri{margin-bottom:8px}.bri:last-child{margin-bottom:0}
.brh{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx3);margin-bottom:3px}
.brh .bpv{font-family:var(--m);font-weight:700}
.brt{height:5px;background:var(--bdr2);border-radius:3px;overflow:hidden}
.brf{height:100%;border-radius:3px;transition:width .5s ease}

/* Toggles & Tabs */
.tg{display:flex;gap:4px;padding:3px;margin-bottom:14px;background:var(--card2);border:1px solid var(--bdr);border-radius:var(--rs)}
.tb{flex:1;padding:8px;border:none;border-radius:7px;background:transparent;color:var(--tx3);font-family:var(--f);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.tb.act{background:var(--card);color:var(--amber);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.tabs2{display:flex;gap:4px;padding:4px;margin-bottom:18px;background:var(--card2);border:1px solid var(--bdr);border-radius:var(--rs)}
.tab2{flex:1;padding:9px 6px;border:none;border-radius:8px;background:transparent;color:var(--tx3);font-family:var(--f);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;line-height:1.3}
.tab2.act{background:var(--card);color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,.06)}

/* Divider */
.hdiv{display:flex;align-items:center;gap:12px;margin:22px 0 14px}
.hdiv .hl2{flex:1;height:1.5px;background:var(--bdr)}
.hdiv .hlb2{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border:1.5px solid;border-radius:20px;white-space:nowrap}

/* Flow steps */
.flow{display:flex;flex-direction:column;gap:0;margin-bottom:10px}
.fs{display:flex;gap:0}
.fl{display:flex;flex-direction:column;align-items:center;width:42px;flex-shrink:0}
.fc{width:30px;height:30px;border-radius:50%;background:var(--blk);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fln{width:2px;background:var(--bdr);flex:1;min-height:10px}
.fs:last-child .fln{display:none}
.fb{padding:0 0 1rem;flex:1}
.fb .ft{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:3px;margin-top:4px}
.fb .fd{font-size:12px;color:var(--tx2);line-height:1.6}

/* Problem box */
.prb{border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin-bottom:10px;border-left:4px solid}
.prb h5{font-size:12.5px;font-weight:600;margin-bottom:3px}
.prb p{font-size:12px;line-height:1.6}
.prb .fix{font-size:11px;margin-top:5px;font-weight:500}

/* Tips */
.tips2{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);padding:16px;margin-top:20px}
.tips2 .tt2{font-size:10px;color:var(--blue);font-weight:700;letter-spacing:1.2px;margin-bottom:12px}
.tips2 .tp2{font-size:12px;color:var(--tx2);line-height:1.7;margin-bottom:6px}
.tips2 .tp2:last-child{margin-bottom:0}
.tips2 strong{color:var(--tx)}

/* Profit badge */
.profit-badge{display:inline-block;background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green);padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;font-family:var(--m);margin-left:8px}

/* Formula footer */
.formula-footer{background:var(--card2);border:1.5px solid var(--bdr);border-radius:var(--r);padding:12px 14px;margin-top:14px;font-size:10.5px;color:var(--tx3);line-height:1.8}
.formula-footer strong{color:var(--tx2)}

/* Qty warning */
.qty-warn{font-size:10px;color:var(--red);font-weight:600;margin-top:4px;display:none}

/* Colors */
.c-red{color:var(--red)}.c-blue{color:var(--blue)}.c-green{color:var(--green)}.c-amber{color:var(--amber)}.c-purple{color:var(--purple)}.c-teal{color:var(--teal)}.c-rose{color:var(--rose)}

/* Placeholder */
.placeholder{text-align:center;padding:80px 24px;color:var(--tx4)}
.placeholder .ico{font-size:48px;margin-bottom:16px;opacity:.4}
.placeholder p{font-size:13px;line-height:1.6}

/* Book reco */
.book{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);padding:14px;margin-bottom:10px}
.book h5{font-size:12px;font-weight:700;margin-bottom:6px}
.book .bk{margin-bottom:6px;font-size:12px;line-height:1.6;color:var(--tx2)}
.book .bk:last-child{margin-bottom:0}
.book .bk strong{color:var(--tx)}

/* Action items */
.al{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ai{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--bdr);border-radius:var(--rs);padding:12px 14px}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade{animation:fadeIn .3s ease}

@media(max-width:360px){.sts{grid-template-columns:1fr}.st2 .sv2{font-size:16px}.tab2{font-size:10px;padding:8px 4px}.sg{grid-template-columns:1fr}.bg2{grid-template-columns:1fr}}