:root{--bg:#f5f4f1;--bg2:#ffffff;--bg3:#f0eeea;--bg4:#e8e5e0;--bg5:#d8d4ce;--b:rgba(0,0,0,0.07);--b2:rgba(0,0,0,0.12);--b3:rgba(0,0,0,0.22);--t:#1a1917;--t2:#5a5652;--t3:#9a9590;--g:#b8903a;--g2:#d4a845;--g3:#e8c060;--gd:rgba(184,144,58,0.10);--gd2:rgba(184,144,58,0.16);--r:#c94040;--rd:rgba(201,64,64,0.10);--gr:#2e9460;--grd:rgba(46,148,96,0.10);--bl:#3d6abf;--bld:rgba(61,106,191,0.10);--rr:8px;--rr2:12px;--rr3:18px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t);font-family:'Outfit',sans-serif;font-weight:400;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:2px}
::selection{background:var(--gd2);color:var(--g3)}
.screen{display:none;min-height:100vh}
.screen.active{display:flex;flex-direction:column;animation:fu .28s cubic-bezier(.4,0,.2,1);animation-fill-mode:forwards}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.screen.active{opacity:1}

/* TOPBAR */
.tb{display:flex;align-items:center;gap:12px;padding:0 28px;height:54px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--b);position:sticky;top:0;z-index:200}
.logo{display:flex;align-items:center;gap:9px}
.lm{width:34px;height:34px;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:1px}
.lm svg{width:22px;height:22px}
.lt{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:500;color:var(--t);letter-spacing:.01em}
.lt em{color:var(--g);font-style:normal}
.tnav{display:flex;gap:2px;margin-left:20px}
.tn{padding:5px 13px;font-size:13px;font-weight:500;color:var(--t3);border-radius:6px;cursor:pointer;border:none;background:none;transition:color .15s,background .15s;font-family:'Outfit',sans-serif}
.tn:hover{color:var(--t2);background:var(--bg3)}
.tn.on{color:var(--t);background:var(--bg3)}
.tr{display:flex;align-items:center;gap:8px;margin-left:auto}
.xbtn{display:flex;align-items:center;gap:5px;padding:6px 13px;border-radius:var(--rr);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid var(--b2);background:transparent;color:var(--t2);font-family:'Outfit',sans-serif}
.xbtn:hover{border-color:var(--b3);color:var(--t)}
.xbtn.gld{background:var(--g);color:#fff;border-color:var(--g);font-weight:700}
.xbtn.gld:hover{background:var(--g2)}
.xbtn.ntn{border-color:rgba(79,168,118,.35);color:var(--gr)}
.upill{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--bg3);border:1px solid var(--b2);cursor:pointer;transition:border-color .2s}
.upill:hover{border-color:var(--b3)}
.uav{width:26px;height:26px;border-radius:50%;background:var(--gd2);color:var(--g);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.02em}
.unm{font-size:12px;font-weight:500;color:var(--t)}

/* SIDEBAR */
.pb{display:flex;flex:1;overflow:hidden;height:calc(100vh - 54px)}
.sb{width:210px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--b);display:flex;flex-direction:column;overflow-y:auto;padding:18px 0 24px}
.sbs{margin-bottom:20px}
.sbl{font-size:9.5px;font-weight:600;color:var(--t3);letter-spacing:.1em;text-transform:uppercase;padding:0 16px;margin-bottom:5px}
.sbi{display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;transition:all .15s;border-left:2px solid transparent}
.sbi:hover{color:var(--t2);background:var(--bg3)}
.sbi.on{color:var(--t);background:linear-gradient(90deg,var(--gd) 0%,transparent 100%);border-left-color:var(--g)}
.sico{width:15px;height:15px;flex-shrink:0;opacity:.5}
.sbi.on .sico{opacity:1}
.sbadge{margin-left:auto;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--rd);color:var(--r)}
.pbox{margin:auto 12px 0;padding:12px 13px;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rr2)}
.pnm{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--g);text-transform:uppercase;margin-bottom:4px}
.pst{font-size:11px;color:var(--t3);margin-bottom:8px}
.pbar{height:3px;background:var(--bg5);border-radius:2px;overflow:hidden}
.pfill{height:100%;background:var(--g);border-radius:2px;width:40%}

/* MAIN */
.mc{flex:1;overflow-y:auto;padding:28px 32px}
.ph{margin-bottom:26px}
.pht{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:500;color:var(--t);line-height:1.15}
.phs{font-size:13px;color:var(--t3);margin-top:4px}

/* STAT CARDS */
.sts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.sc2{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:18px 20px;transition:border-color .2s;position:relative;overflow:hidden}
.sc2::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gd2),transparent)}
.sc2:hover{border-color:var(--b2)}
.scl{font-size:10.5px;font-weight:600;color:var(--t3);letter-spacing:.07em;text-transform:uppercase;margin-bottom:10px}
.scv{font-family:'DM Mono',monospace;font-size:26px;font-weight:500;color:var(--t);line-height:1;margin-bottom:5px}
.scs{font-size:11px;color:var(--t3)}
.scs.up{color:var(--gr)}.scs.wn{color:var(--g)}.scs.dg{color:var(--r)}

/* PANELS */
.pc{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:20px 22px}
.pch{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pct{font-size:13px;font-weight:600;color:var(--t)}
.pca{font-size:11.5px;color:var(--g);cursor:pointer;font-weight:500}
.pca:hover{color:var(--g3)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g3{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-bottom:14px}

/* DIMENSIONS */
.dr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dr:last-child{margin-bottom:0}
.dn{font-size:12px;color:var(--t2);width:150px;flex-shrink:0}
.dtr{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.dfi{height:100%;border-radius:3px;transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.dsc{font-size:11.5px;font-family:'DM Mono',monospace;color:var(--t3);width:30px;text-align:right}
.dtg{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0;letter-spacing:.03em}
.tc{background:var(--rd);color:var(--r)}.tw{background:var(--gd);color:var(--g)}.tf{background:var(--bld);color:var(--bl)}.tg{background:var(--grd);color:var(--gr)}

/* REPORT LIST */
.ri2{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--b);cursor:pointer;transition:opacity .15s}
.ri2:last-child{border-bottom:none}
.ri2:hover{opacity:.82}
.ric{width:36px;height:36px;border-radius:var(--rr);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.ia{background:var(--gd2)}.ib{background:var(--grd)}.ic{background:var(--bld)}.id{background:rgba(160,100,230,.12)}.ie{background:var(--rd)}
.rin{flex:1}
.rinm{font-size:12.5px;font-weight:500;color:var(--t);margin-bottom:2px}
.rimt{font-size:11px;color:var(--t3)}
.rbdg{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px}
.rdy{background:var(--grd);color:var(--gr)}.rlk{background:var(--bg4);color:var(--t3)}
.dlb{font-size:11.5px;color:var(--t3);cursor:pointer;white-space:nowrap;padding:5px 10px;border:1px solid var(--b);border-radius:6px;transition:all .18s}
.dlb:hover{border-color:var(--g);color:var(--g)}

/* CHECKLIST */
.ci{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--b)}
.ci:last-child{border-bottom:none}
.chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--b3);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:1px}
.chk.on{background:var(--g);border-color:var(--g)}
.chk.on::after{content:'✓';font-size:9.5px;color:#fff;font-weight:800}
.ctxt{font-size:12.5px;color:var(--t2);line-height:1.55;flex:1}
.ctxt.dn{text-decoration:line-through;color:var(--t3)}
.cpr{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0}
.cc{background:var(--rd);color:var(--r)}.ch{background:var(--gd);color:var(--g)}.cm{background:var(--bld);color:var(--bl)}

/* AUTH */
#screen-auth{align-items:center;justify-content:center;background:var(--bg);background-image:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(184,144,58,.09) 0%,transparent 70%);position:relative}
.agrid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent)}
.acard{position:relative;z-index:1;width:100%;max-width:424px;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rr3);padding:36px 36px 32px;box-shadow:0 8px 40px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06)}
.alg{display:flex;align-items:center;gap:9px;margin-bottom:26px}
.alm{width:34px;height:34px;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1px}
.alm svg{width:22px;height:22px}
.alt{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:var(--t)}
.alt em{color:var(--g);font-style:normal}
.aeb{font-size:10px;font-weight:700;color:var(--g);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.ah1{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500;color:var(--t);margin-bottom:5px}
.asb{font-size:13px;color:var(--t3);margin-bottom:22px}
.atbs{display:flex;gap:3px;background:var(--bg3);border-radius:9px;padding:3px;margin-bottom:20px}
.atb{flex:1;padding:7px;text-align:center;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;border-radius:7px;transition:all .2s;border:none;background:none;font-family:'Outfit',sans-serif}
.atb.on{background:var(--bg4);color:var(--t)}
.fg{margin-bottom:13px}
.fl{font-size:10.5px;font-weight:600;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;display:block}
.fi{width:100%;padding:10px 13px;background:var(--bg3);border:1px solid var(--b);border-radius:var(--rr);color:var(--t);font-family:'Outfit',sans-serif;font-size:13.5px;transition:border-color .18s;outline:none}
.fi:focus{border-color:var(--g)}
.fi::placeholder{color:var(--t3)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fsp{grid-column:span 2}
.fs{width:100%;padding:10px 13px;background:var(--bg3);border:1px solid var(--b);border-radius:var(--rr);color:var(--t);font-family:'Outfit',sans-serif;font-size:13.5px;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 3.5l4 4 4-4' stroke='%23555250' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;transition:border-color .18s}
.fs:focus{border-color:var(--g)}
.fs option,.fs optgroup{background:var(--bg3)}
.btnp{width:100%;padding:11px;background:var(--g);color:#fff;border:none;border-radius:var(--rr);font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:background .18s,transform .1s}
.btnp:hover{background:var(--g2)}
.btnp:active{transform:scale(.99)}
.dvd{display:flex;align-items:center;gap:10px;margin:16px 0}
.dvdl{flex:1;height:1px;background:var(--b)}
.dvdt{font-size:11px;color:var(--t3)}
.btng{width:100%;padding:10px;background:transparent;color:var(--t2);border:1px solid var(--b2);border-radius:var(--rr);font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .18s}
.btng:hover{border-color:var(--b3);color:var(--t)}

/* AUDIT */
#screen-audit{background:var(--bg)}
.aw{max-width:660px;margin:0 auto;padding:40px 20px 60px;flex:1}
.prog{margin-bottom:32px}
.pss{display:flex;gap:6px;margin-bottom:10px}
.ps2{flex:1;height:2px;background:var(--bg5);border-radius:1px;transition:background .3s}
.ps2.dn{background:var(--g)}.ps2.on{background:linear-gradient(90deg,var(--g),var(--gd2))}
.plbl{font-size:11px;color:var(--t3)}
.astep{display:none}
.astep.on{display:block;animation:fu .22s ease}
.ey{font-size:10px;font-weight:700;color:var(--g);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.st{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:500;color:var(--t);margin-bottom:7px}
.sd{font-size:13.5px;color:var(--t2);margin-bottom:26px;line-height:1.65}

/* PLATFORM GRID */
.pltg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pltc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:var(--bg3);border:1px solid var(--b);border-radius:var(--rr2);cursor:pointer;transition:all .18s;text-align:center}
.pltc:hover{border-color:var(--b2);background:var(--bg4)}
.pltc.sel{border-color:var(--g);background:var(--gd)}
.pltic{font-size:22px;line-height:1}
.pltnm{font-size:11.5px;font-weight:500;color:var(--t2)}
.pltc.sel .pltnm{color:var(--g)}
.plturl{display:none;margin-top:6px;flex-direction:column;gap:3px;width:100%}
.pltc.sel .plturl{display:flex}
.plturi{width:100%;padding:5px 8px;background:var(--bg);border:1px solid var(--b2);border-radius:5px;color:var(--t);font-size:11px;font-family:'Outfit',sans-serif;outline:none}
.plturi:focus{border-color:var(--g)}

/* RATING */
.rrow{margin-bottom:18px}
.rlb{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--t);margin-bottom:8px}
.rlb span{font-size:11.5px;color:var(--t3);font-weight:400}
.rsc{display:flex;gap:5px}
.rb{flex:1;padding:8px 0;text-align:center;font-size:12.5px;font-weight:500;background:var(--bg3);border:1px solid var(--b);border-radius:6px;color:var(--t3);cursor:pointer;transition:all .13s;font-family:'Outfit',sans-serif}
.rb:hover{border-color:var(--b2);color:var(--t2)}
.rb.on{background:var(--gd);border-color:var(--g);color:var(--g)}

/* STEP NAV */
.snv{display:flex;justify-content:space-between;align-items:center;margin-top:28px}
.btnbk{padding:9px 20px;background:transparent;border:1px solid var(--b2);border-radius:var(--rr);font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;transition:all .18s}
.btnbk:hover{color:var(--t);border-color:var(--b3)}
.btnnx{padding:9px 26px;background:var(--g);border:none;border-radius:var(--rr);font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:#080808;cursor:pointer;transition:background .18s}
.btnnx:hover{background:var(--g2)}

/* GENERATING */
.gensc{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:55vh;gap:18px}
.gensc.on{display:flex;animation:fu .3s ease}
.genrg{width:44px;height:44px;border:2px solid var(--bg5);border-top-color:var(--g);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.gent{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--t)}
.gens{display:flex;flex-direction:column;gap:7px;min-width:270px}
.gs{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t3)}
.gs.on{color:var(--t)}.gs.dn{color:var(--gr)}
.gd{width:5px;height:5px;border-radius:50%;background:var(--t3);flex-shrink:0}
.gs.on .gd{background:var(--g);animation:blk 1s ease infinite}
.gs.dn .gd{background:var(--gr)}
@keyframes blk{0%,100%{opacity:1}50%{opacity:.3}}

/* REPORT */
#screen-report{background:var(--bg)}
.rw{max-width:760px;margin:0 auto;padding:32px 24px 60px;flex:1}
.rph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--b)}
.rpey{font-size:10px;font-weight:700;color:var(--g);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.rpco{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:500;color:var(--t);margin-bottom:4px}
.rpmt{font-size:12.5px;color:var(--t3)}
.racts{display:flex;gap:7px;flex-shrink:0}
.ract{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--rr);font-size:12px;font-weight:500;cursor:pointer;transition:all .18s;border:1px solid var(--b2);background:var(--bg2);color:var(--t2);font-family:'Outfit',sans-serif}
.ract:hover{border-color:var(--g);color:var(--g)}
.ract.p{background:var(--g);color:#080808;border-color:var(--g);font-weight:700}
.ract.p:hover{background:var(--g2)}
.shr{display:flex;align-items:center;gap:24px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:22px 26px;margin-bottom:22px;position:relative;overflow:hidden}
.shr::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,162,74,.3),transparent)}
.scir{width:96px;height:96px;border-radius:50%;flex-shrink:0;border:2.5px solid var(--g);display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,var(--gd) 0%,transparent 70%)}
.scn{font-family:'DM Mono',monospace;font-size:28px;font-weight:500;color:var(--g);line-height:1}
.scd{font-size:11px;color:var(--t3);margin-top:2px}
.sctg{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;margin-bottom:7px;background:var(--gd2);color:var(--g);letter-spacing:.04em}
.scvd{font-size:16px;font-weight:600;color:var(--t);margin-bottom:5px}
.scsm{font-size:12.5px;color:var(--t2);line-height:1.65;max-width:460px}
.rsec{margin-bottom:22px}
.rsl{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px;padding-bottom:8px;border-bottom:1px solid var(--b)}
.dc{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:16px 18px;margin-bottom:9px;cursor:pointer;transition:border-color .18s}
.dc:hover{border-color:var(--b2)}
.dch{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.dcn{font-size:13.5px;font-weight:600;color:var(--t);flex:1}
.dcs{font-size:12px;font-family:'DM Mono',monospace;color:var(--t3)}
.db{height:3px;background:var(--bg5);border-radius:2px;margin-bottom:11px;overflow:hidden}
.dbf{height:100%;border-radius:2px}
.dbd{font-size:12.5px;color:var(--t2);line-height:1.65}
.dqw{margin-top:10px;padding:9px 12px;background:var(--gd);border-left:2px solid var(--g);border-radius:0 var(--rr) var(--rr) 0;font-size:12px;color:var(--g2);line-height:1.55}
.dqw strong{font-weight:700}

/* SETTINGS */
#screen-settings{background:var(--bg)}
.setw{max-width:620px;margin:0 auto;padding:32px 24px 60px;flex:1}
.sset{margin-bottom:28px}
.sstl{font-size:12px;font-weight:700;color:var(--t2);letter-spacing:.04em;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--b);text-transform:uppercase}
.srow{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--b);gap:16px}
.srow:last-child{border-bottom:none}
.srl{font-size:13px;font-weight:500;color:var(--t)}
.srs{font-size:11.5px;color:var(--t3);margin-top:2px}
.tgl{width:34px;height:19px;background:var(--bg5);border-radius:999px;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.tgl.on{background:var(--g)}
.tgl::after{content:'';position:absolute;width:13px;height:13px;background:var(--t);border-radius:50%;top:3px;left:3px;transition:transform .2s,background .2s}
.tgl.on::after{transform:translateX(15px);background:#080808}
.sws{display:flex;gap:7px;flex-wrap:wrap}
.sw2{width:26px;height:26px;border-radius:50%;cursor:pointer;transition:transform .15s;border:2px solid transparent;flex-shrink:0}
.sw2:hover{transform:scale(1.12)}
.sw2.on{border-color:var(--t)}
.ccr{display:flex;align-items:center;gap:10px;margin-top:10px}
.ccr input[type=color]{width:38px;height:30px;border:1px solid var(--b2);border-radius:6px;background:var(--bg3);cursor:pointer;padding:2px}
.ccr span{font-size:12px;color:var(--t3)}
.nbox{display:flex;align-items:center;gap:14px;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rr2);padding:16px 18px}
.nlg{width:34px;height:34px;background:white;border-radius:var(--rr);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ntl{font-size:13.5px;font-weight:600;color:var(--t);margin-bottom:3px}
.nts{font-size:11.5px;color:var(--t3)}
.btncn{padding:7px 16px;background:var(--bg4);border:1px solid var(--b2);border-radius:var(--rr);font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .18s;font-family:'Outfit',sans-serif}
.btncn:hover{border-color:var(--b3);color:var(--t)}
.btncn.on{border-color:rgba(79,168,118,.4);color:var(--gr);background:var(--grd)}

/* NOTION */
.nti{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;border-radius:var(--rr);margin-bottom:5px;background:var(--bg3)}
.ntck{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--b2);flex-shrink:0;margin-top:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ntck.dn{background:var(--gr);border-color:var(--gr)}
.ntck.dn::after{content:'✓';font-size:8.5px;color:white;font-weight:800}
.nttx{font-size:12px;color:var(--t2);flex:1;line-height:1.45}
.nttx.dn{text-decoration:line-through;color:var(--t3)}
.ntwk{font-size:10px;color:var(--t3);flex-shrink:0;margin-top:1px}

/* PRICING */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.pcd{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:20px 18px;position:relative;transition:border-color .2s}
.pcd:hover{border-color:var(--b2)}
.pcd.pp{border-color:rgba(200,162,74,.35)}
.pcd.pp::after{content:'Most popular';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--g);color:#080808;font-size:9.5px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.04em}
.pcdnm{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.pcdp{font-size:22px;font-weight:600;font-family:'DM Mono',monospace;color:var(--t);line-height:1}
.pcdp sub{font-size:12px;font-weight:400;color:var(--t3);font-family:'Outfit',sans-serif;vertical-align:baseline}
.pcdan{font-size:11px;color:var(--gr);margin:4px 0 10px}
.pcdst{font-size:11.5px;color:var(--t2);margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--b)}
.pcdfl{list-style:none}
.pcdfl li{font-size:11.5px;color:var(--t2);padding:3.5px 0;display:flex;gap:7px;line-height:1.4}
.pcdfl li::before{content:'✓';color:var(--gr);font-size:10.5px;flex-shrink:0;margin-top:1px;font-weight:700}

/* TOAST */
.tst{position:fixed;bottom:22px;right:22px;z-index:999;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rr2);padding:11px 16px;font-size:12.5px;color:var(--t);display:flex;align-items:center;gap:9px;box-shadow:0 12px 36px rgba(0,0,0,.45);animation:tsu .25s ease;max-width:300px}
.tst.hd{display:none}
@keyframes tsu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.td{width:7px;height:7px;border-radius:50%;background:var(--gr);flex-shrink:0}
.td.w{background:var(--g)}

/* AUDIENCE CHIPS */
.aud-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;border:1.5px solid var(--b2);background:var(--bg2);color:var(--t2);transition:all .15s;user-select:none}
.aud-chip:hover{border-color:var(--g);color:var(--g)}
.aud-chip.on{background:var(--gd2);border-color:var(--g);color:var(--g)}
.aud-chip .chip-x{font-size:14px;line-height:1;opacity:.6;margin-left:2px}
.aud-chip.on .chip-x{opacity:1}
.aud-custom-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--gd2);border:1.5px solid var(--g);color:var(--g)}
.aud-custom-tag button{background:none;border:none;cursor:pointer;color:var(--g);font-size:14px;line-height:1;padding:0;opacity:.7}
.aud-custom-tag button:hover{opacity:1}

/* ── TEAM MONITOR ── */
.activity-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--b)}
.activity-row:last-child{border-bottom:none}
.av-sm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.act-body{flex:1}
.act-meta{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.act-name{font-size:13px;font-weight:600;color:var(--t)}
.act-time{font-size:11px;color:var(--t3)}
.act-task{font-size:12.5px;color:var(--t2);line-height:1.5}
.act-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;flex-shrink:0}
.ab-aligned{background:var(--grd);color:var(--gr)}
.ab-review{background:var(--gd);color:var(--g)}
.ab-flagged{background:var(--rd);color:var(--r)}
.ab-done{background:var(--bg4);color:var(--t3)}
.act-note{margin-top:6px;padding:8px 11px;background:var(--bg3);border-radius:var(--rr);font-size:12px;color:var(--t2);line-height:1.55}
.act-note.flag{background:var(--rd);border-left:3px solid var(--r);border-radius:0 var(--rr) var(--rr) 0}
.act-actions{display:flex;gap:6px;margin-top:8px}
.act-btn{padding:4px 10px;font-size:11.5px;font-weight:500;border-radius:999px;cursor:pointer;border:1px solid var(--b2);background:var(--bg2);color:var(--t2);transition:all .15s;font-family:Outfit,sans-serif}
.act-btn:hover{border-color:var(--g);color:var(--g)}
.act-btn.primary{background:var(--g);color:#fff;border-color:var(--g)}
.act-btn.primary:hover{background:var(--g2)}

/* ── TEAM MEMBERS TABLE ── */
.tm-row{display:grid;grid-template-columns:36px 1fr 1fr 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--b)}
.tm-row:last-child{border-bottom:none}
.tm-header{font-size:10.5px;font-weight:600;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--b2);display:grid;grid-template-columns:36px 1fr 1fr 1fr auto;gap:12px;margin-bottom:2px}
.tm-name{font-size:13px;font-weight:500;color:var(--t)}
.tm-email{font-size:12px;color:var(--t3)}
.tm-role-badge{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg3);color:var(--t2);white-space:nowrap}
.tm-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.tms-active{background:var(--grd);color:var(--gr)}
.tms-invited{background:var(--gd);color:var(--g)}
.tm-remove-btn{padding:5px 10px;font-size:11.5px;font-weight:500;color:var(--r);background:transparent;border:1px solid transparent;border-radius:var(--rr);cursor:pointer;transition:all .15s;font-family:Outfit,sans-serif;white-space:nowrap}
.tm-remove-btn:hover{border-color:var(--r);background:var(--rd)}

/* ═══════════════════════════════════════
   RESPONSIVE + CROSS-PLATFORM STYLES
   Targets: mobile 320px+, tablet 768px+,
   laptop 1024px+, desktop 1440px+
   ═══════════════════════════════════════ */

/* Base: ensure all touch targets are ≥44px on mobile */
@media (max-width: 768px) {
  /* Topbar: collapse nav, stack elements */
  .tb { padding: 0 14px; gap: 8px; flex-wrap: nowrap; }
  .tnav { display: none; }
  .tr { gap: 6px; }
  .xbtn.ntn { display: none; }
  .unm { display: none; }
  .xbtn.gld { padding: 7px 11px; font-size: 11px; }

  /* Page body: hide sidebar, go full-width */
  .pb { flex-direction: column; height: auto; min-height: calc(100vh - 54px); }
  .sb { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--b); padding: 10px 0 4px; flex-direction: row; overflow-x: auto; flex-wrap: nowrap; align-items: flex-start; }
  .sb::-webkit-scrollbar { display: none; }
  .sbs { display: flex; gap: 2px; margin: 0 8px 0 0; padding: 0; }
  .sbl { display: none; }
  .sbi { flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; font-size: 10px; border-left: none; border-bottom: 2px solid transparent; min-width: 64px; text-align: center; white-space: nowrap; }
  .sbi.on { border-left: none; border-bottom-color: var(--g); background: var(--gd); }
  .sico { opacity: .7; }
  .sbadge { display: none; }
  .pbox { display: none; }
  .mc { padding: 16px; overflow-y: visible; }

  /* Stat cards: 2 per row */
  .sts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .scv { font-size: 20px; }

  /* Grids: stack to single column */
  .g2, .g3 { grid-template-columns: 1fr; }

  /* Platform grid: 2 columns */
  .pltg { grid-template-columns: repeat(2, 1fr); }

  /* Rating scale: smaller buttons */
  .rsc { gap: 3px; }
  .rb { padding: 7px 0; font-size: 11px; }

  /* Audit container */
  .aw { padding: 20px 14px 40px; }
  .st { font-size: 24px; }

  /* Report container */
  .rw { padding: 20px 14px 40px; }
  .rep-wrap { padding: 20px 14px 40px; }
  .rph { flex-direction: column; gap: 14px; }
  .racts { flex-wrap: wrap; gap: 6px; }
  .shr { flex-direction: column; gap: 16px; }

  /* Team members grid */
  .tm-row { grid-template-columns: 32px 1fr auto; gap: 8px; }
  .tm-header { display: none; }
  .tm-row > div:nth-child(3),
  .tm-row > div:nth-child(4) { display: none; }

  /* Settings */
  .setw { padding: 20px 14px 40px; }
  .set-wrap { padding: 20px 14px 40px; }

  /* Auth card */
  .acard { padding: 28px 22px 24px; margin: 16px; max-width: 100%; }

  /* Pricing grid: 1 column */
  .pgrid { grid-template-columns: 1fr; }

  /* Dim rows: hide status badge */
  .dtg { display: none; }
  .dn { width: 120px; font-size: 11px; }

  /* Add member form: stack */
  #v-team-members .pc .fgrid,
  #v-team-members .pc > div[style*="grid"] { grid-template-columns: 1fr; }

  /* Report list: hide download buttons */
  .dlb { display: none; }

  /* Notion tasks: tighter */
  .nti { padding: 7px 8px; }
}

@media (max-width: 480px) {
  /* Very small phones */
  .sts { grid-template-columns: 1fr 1fr; }
  .sc2 { padding: 12px 14px; }
  .scv { font-size: 18px; }
  .pltg { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pltic { font-size: 18px; }
  .pltnm { font-size: 10px; }
  .pht { font-size: 22px; }
  .rsc { flex-wrap: wrap; }
  .rb { min-width: 28px; }
  /* Step nav: stack */
  .snv { flex-direction: column-reverse; gap: 8px; }
  .btnnx, .btnbk { width: 100%; text-align: center; }
  /* Report actions */
  .racts { gap: 5px; }
  .ract { padding: 6px 10px; font-size: 11px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablets: narrow sidebar, 2-col grids */
  .sb { width: 180px; }
  .sbi { font-size: 12px; padding: 7px 12px; }
  .mc { padding: 20px 24px; }
  .sts { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr 1fr; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pltg { grid-template-columns: repeat(3, 1fr); }
  .rw, .rep-wrap { padding: 24px 20px 48px; }
  .tm-row { grid-template-columns: 32px 1fr 1fr auto; gap: 10px; }
  .tm-header { grid-template-columns: 32px 1fr 1fr auto; gap: 10px; }
  .tm-row > div:nth-child(4) { display: none; }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  /* Laptops: standard layout, slightly tighter */
  .mc { padding: 22px 28px; }
  .sts { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
  /* Large desktops: more breathing room */
  .mc { padding: 32px 40px; }
  .sb { width: 230px; }
  .aw { max-width: 720px; }
  .rw, .rep-wrap { max-width: 840px; }
  .set-wrap, .setw { max-width: 700px; }
}

/* ── TOUCH DEVICE OPTIMISATIONS (iOS + Android) ── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover states that don't make sense on touch */
  .sbi:hover { background: transparent; color: var(--t3); }
  .sbi.on:hover { background: var(--gd); color: var(--t); }
  .ri2:hover { opacity: 1; }
  /* Increase tap target sizes */
  .chk { width: 20px; height: 20px; }
  .ntck { width: 18px; height: 18px; }
  .atb { padding: 10px; }
  .tn { padding: 8px 14px; }
  .xbtn { padding: 9px 14px; }
  /* Prevent text selection on repeated taps */
  .sbi, .ri2, .chk, .ntck, .pltc, .rb, .tbtn,
  .aud-chip, .act-btn, .tm-remove-btn { -webkit-user-select: none; user-select: none; }
  /* iOS momentum scrolling */
  .sb, .mc, .main { -webkit-overflow-scrolling: touch; }
}

/* ── SAFE AREA (iPhone notch / Dynamic Island) ── */
@supports (padding-top: env(safe-area-inset-top)) {
  .tb { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  @media (max-width: 768px) {
    .tb { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    .mc { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  }
}

/* ── WINDOWS HIGH-CONTRAST MODE ── */
@media (forced-colors: active) {
  .chk, .ntck, .tgl, .sw2 { forced-color-adjust: none; }
  .sc2::after { display: none; }
}

/* ── PRINT (for report printing) ── */
@media print {
  .tb, .sb, .pbox, #user-menu-wrap, .topbar-right { display: none !important; }
  .pb { height: auto; }
  .mc { padding: 0; overflow: visible; }
  .pc, .sc2 { break-inside: avoid; page-break-inside: avoid; }
  .shr { border: 1px solid #ccc; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.1ms !important; }
}

/* ── MOBILE NAV HAMBURGER ── */
.mob-nav-btn { display: none; background: none; border: 1px solid var(--b2); border-radius: var(--rr); padding: 6px 9px; cursor: pointer; color: var(--t2); }
@media (max-width: 768px) { .mob-nav-btn { display: flex; align-items: center; justify-content: center; } }

/* ── MOBILE MENU OVERLAY ── */
.mob-menu { display: none; position: fixed; inset: 54px 0 0 0; background: var(--bg2); z-index: 150; padding: 16px; overflow-y: auto; border-top: 1px solid var(--b); flex-direction: column; gap: 4px; }
.mob-menu.open { display: flex; animation: fadeUp .2s ease; }
.mob-menu-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--rr); font-size: 14px; font-weight: 500; color: var(--t2); cursor: pointer; transition: all .15s; }
.mob-menu-item:hover, .mob-menu-item.on { background: var(--bg3); color: var(--t); }
.mob-menu-sep { height: 1px; background: var(--b); margin: 6px 0; }


/* ── PLAN GATING ── */
.lock-overlay{position:relative}
.lock-overlay::after{content:'';position:absolute;inset:0;background:rgba(245,244,241,.7);border-radius:var(--rr2);z-index:10;pointer-events:none}
.lock-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:11;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rr2);padding:14px 20px;text-align:center;pointer-events:all;cursor:pointer;min-width:200px;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.lock-icon{font-size:22px;margin-bottom:6px}
.lock-title{font-size:13px;font-weight:600;color:var(--t);margin-bottom:3px}
.lock-sub{font-size:11.5px;color:var(--t3);margin-bottom:10px}
.lock-btn{display:inline-block;padding:6px 16px;background:var(--g);color:#fff;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:Outfit,sans-serif}
/* Upgrade modal */
.upgrade-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:600;align-items:center;justify-content:center}
.upgrade-modal.open{display:flex}
.upgrade-box{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rr3);padding:30px 32px;max-width:420px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,.18);text-align:center}
.upgrade-icon{font-size:32px;margin-bottom:12px}
.upgrade-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--t);margin-bottom:6px}
.upgrade-sub{font-size:13px;color:var(--t2);margin-bottom:20px;line-height:1.6}
.upgrade-plans{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.uplan{padding:12px;border:1.5px solid var(--b2);border-radius:var(--rr2);cursor:pointer;transition:all .15s;text-align:left}
.uplan:hover,.uplan.sel{border-color:var(--g);background:var(--gd)}
.uplan-name{font-size:12.5px;font-weight:600;color:var(--t);margin-bottom:2px}
.uplan-price{font-size:11.5px;color:var(--t3)}
.upgrade-cta{width:100%;padding:12px;background:var(--g);color:#fff;border:none;border-radius:var(--rr);font-size:14px;font-weight:700;cursor:pointer;font-family:Outfit,sans-serif;margin-bottom:10px}
.upgrade-close{font-size:12px;color:var(--t3);cursor:pointer;background:none;border:none;font-family:Outfit,sans-serif}
/* Plan badge in topbar */
.plan-chip{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.04em}
.pc-free{background:var(--bg4);color:var(--t3)}
.pc-solo{background:var(--bg4);color:var(--t3)}
.pc-team{background:var(--bld);color:var(--bl)}
.pc-agency{background:var(--gd2);color:var(--g)}
.pc-enterprise{background:rgba(160,100,230,.12);color:#7F77DD}
/* Support widget */
.support-fab{position:fixed;bottom:24px;right:24px;z-index:400;width:44px;height:44px;border-radius:50%;background:var(--g);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(184,144,58,.4);transition:transform .2s}
.support-fab:hover{transform:scale(1.08)}
.support-panel{display:none;position:fixed;bottom:80px;right:24px;z-index:400;width:320px;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rr3);box-shadow:0 12px 40px rgba(0,0,0,.18);overflow:hidden}
.support-panel.open{display:block;animation:fu .22s ease}
.sp-head{padding:14px 16px;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:space-between}
.sp-title{font-size:14px;font-weight:700}
.sp-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;opacity:.8}
.sp-close:hover{opacity:1}
.sp-body{padding:14px}
.sp-tabs{display:flex;gap:3px;background:var(--bg3);border-radius:var(--rr);padding:3px;margin-bottom:14px}
.sp-tab{flex:1;padding:6px;text-align:center;font-size:12px;font-weight:500;color:var(--t3);cursor:pointer;border-radius:6px;transition:all .15s;border:none;background:none;font-family:Outfit,sans-serif}
.sp-tab.on{background:var(--bg2);color:var(--t)}
.faq-item{border-bottom:0.5px solid var(--b);cursor:pointer}
.faq-item:last-child{border-bottom:none}
.faq-q{padding:10px 12px;font-size:12.5px;font-weight:500;color:var(--t);display:flex;justify-content:space-between;align-items:center}
.faq-a{display:none;padding:0 12px 10px;font-size:12px;color:var(--t2);line-height:1.6}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-arrow{font-size:10px;color:var(--t3);transition:transform .2s}
/* Share modal */
.share-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:600;align-items:center;justify-content:center}
.share-modal.open{display:flex}
.share-box{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rr3);padding:26px 28px;max-width:400px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,.18)}
/* PDF print frame */
#pdf-frame{display:none}
/* Client portal badge */
.client-mode-bar{display:none;background:var(--gd);border-bottom:2px solid var(--g);padding:8px 28px;font-size:12.5px;color:var(--g);font-weight:600;display:flex;align-items:center;justify-content:space-between}


/* ── ENTERPRISE FEATURES ── */
.ent-hero{background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid var(--b2);border-radius:var(--rr3);padding:24px 28px;margin-bottom:18px;position:relative;overflow:hidden}
.ent-hero::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:var(--gd);border-radius:50%;opacity:.5}
.ent-plan-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(160,100,230,.12);color:#7F77DD;letter-spacing:.07em;text-transform:uppercase;margin-bottom:10px}
.ent-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--t);margin-bottom:5px}
.ent-sub{font-size:13px;color:var(--t2);line-height:1.6}
.ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ent-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:16px 18px;transition:border-color .18s}
.ent-card:hover{border-color:var(--b2)}
.ent-card-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:16px}
.ent-card-title{font-size:13px;font-weight:600;color:var(--t);margin-bottom:3px}
.ent-card-desc{font-size:12px;color:var(--t3);line-height:1.55;margin-bottom:10px}
.ent-card-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.ecs-active{background:var(--grd);color:var(--gr)}
.ecs-pending{background:var(--gd);color:var(--g)}
.ecs-config{background:var(--bld);color:var(--bl)}
/* SSO */
.sso-provider{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg3);border-radius:var(--rr2);margin-bottom:8px;border:1px solid var(--b)}
.sso-logo{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.sso-info{flex:1}
.sso-name{font-size:13px;font-weight:500;color:var(--t);margin-bottom:1px}
.sso-desc{font-size:11.5px;color:var(--t3)}
/* API */
.api-key-row{display:flex;align-items:center;gap:8px;padding:11px 13px;background:var(--bg3);border-radius:var(--rr);border:1px solid var(--b);margin-bottom:8px}
.api-key-val{flex:1;font-family:'DM Mono',monospace;font-size:12px;color:var(--t2);letter-spacing:.04em;word-break:break-all}
.api-key-badge{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0}
.akb-live{background:var(--grd);color:var(--gr)}
.akb-test{background:var(--bld);color:var(--bl)}
/* CRM */
.crm-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--b);border-radius:var(--rr2);margin-bottom:10px;cursor:pointer;transition:all .18s}
.crm-card:hover{border-color:var(--b2)}
.crm-card.connected{border-color:var(--gr);background:var(--grd)}
.crm-logo{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.crm-info{flex:1}
.crm-name{font-size:13.5px;font-weight:600;color:var(--t);margin-bottom:2px}
.crm-desc{font-size:12px;color:var(--t3)}
/* KPI */
.kpi-framework{background:var(--bg3);border:1px solid var(--b);border-radius:var(--rr2);padding:14px 16px;margin-bottom:10px}
.kpi-fw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-fw-name{font-size:13px;font-weight:600;color:var(--t)}
.kpi-fw-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--grd);color:var(--gr)}
.kpi-metric{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:.5px solid var(--b);font-size:12px;color:var(--t2)}
.kpi-metric:last-child{border-bottom:none}
.kpi-weight{font-size:11px;font-weight:700;color:var(--g);min-width:30px;text-align:right}
/* SLA */
.sla-tier{background:var(--bg3);border:1px solid var(--b);border-radius:var(--rr2);padding:14px 16px;margin-bottom:10px}
.sla-tier-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sla-tier-name{font-size:13px;font-weight:600;color:var(--t)}
.sla-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:.5px solid var(--b);color:var(--t2)}
.sla-row:last-child{border-bottom:none}
.sla-val{font-weight:600;color:var(--t)}
.csm-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--bg3);border:1px solid var(--b);border-radius:var(--rr2);margin-bottom:10px}
.csm-av{width:44px;height:44px;border-radius:50%;background:var(--gd2);color:var(--g);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}


/* ── FAQ STYLES ── */
.faq-plan-tab{display:flex;gap:4px;background:var(--bg3);border-radius:var(--rr);padding:4px;margin-bottom:18px;flex-wrap:wrap}
.fpt{flex:1;min-width:80px;padding:7px 10px;text-align:center;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;border-radius:6px;border:none;background:none;font-family:Outfit,sans-serif;transition:all .15s}
.fpt.on{background:var(--bg2);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.plan-faq-section{display:none}.plan-faq-section.on{display:block}
.faq-group{margin-bottom:6px;border:0.5px solid var(--b);border-radius:var(--rr2);overflow:hidden;background:var(--bg2)}
.faq-group-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;transition:background .15s;user-select:none}
.faq-group-head:hover{background:var(--bg3)}
.faq-q-text{font-size:13px;font-weight:500;color:var(--t);flex:1;line-height:1.45}
.faq-chevron{font-size:11px;color:var(--t3);transition:transform .2s;flex-shrink:0;margin-left:10px}
.faq-group.open .faq-chevron{transform:rotate(180deg)}
.faq-answer{display:none;padding:0 16px 14px;font-size:12.5px;color:var(--t2);line-height:1.65;border-top:0.5px solid var(--b)}
.faq-group.open .faq-answer{display:block}
.role-selector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
@media(max-width:768px){.role-selector-grid{grid-template-columns:repeat(2,1fr)}}
.role-card{padding:10px 12px;border:1.5px solid var(--b);border-radius:var(--rr2);cursor:pointer;transition:all .18s;text-align:center}
.role-card:hover{border-color:var(--g)}
.role-card.on{border-color:var(--g);background:var(--gd)}
.role-card .rc-tier{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:3px}
.role-card .rc-name{font-size:12px;font-weight:600;color:var(--t)}
.role-detail{display:none}.role-detail.on{display:block}
.role-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.rfc{background:var(--bg3);border-radius:var(--rr);padding:10px 12px;border:0.5px solid var(--b)}
.rfc-icon{font-size:16px;margin-bottom:5px}
.rfc-label{font-size:11px;font-weight:600;color:var(--t);margin-bottom:2px}
.rfc-val{font-size:11px;color:var(--t3)}

/* ── ALIGNMENT & DISPARITY REPORTS ── */
.team-matrix{overflow-x:auto;margin-bottom:14px}
.matrix-table{border-collapse:collapse;font-size:12px;width:100%}
.matrix-table th{background:var(--bg4);padding:8px 12px;font-size:10.5px;font-weight:700;color:var(--t3);letter-spacing:.05em;text-transform:uppercase;border:0.5px solid var(--b);text-align:center}
.matrix-table th:first-child{text-align:left}
.matrix-table td{padding:9px 12px;border:0.5px solid var(--b);text-align:center}
.matrix-table tr:nth-child(even) td{background:var(--bg3)}
.matrix-table td:first-child{text-align:left;font-weight:500;color:var(--t);min-width:130px}
.score-chip{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;font-size:12.5px;font-weight:700}
.alignment-task{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;background:var(--bg3);border-radius:var(--rr);margin-bottom:8px;border:0.5px solid var(--b)}
.at-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.at-body{flex:1}
.at-title{font-size:12.5px;font-weight:600;color:var(--t);margin-bottom:2px}
.at-meta{font-size:11px;color:var(--t3)}
.at-added{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--grd);color:var(--gr);flex-shrink:0}
.disparity-bar{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:0.5px solid var(--b)}
.disparity-bar:last-child{border-bottom:none}
.disp-label{font-size:12px;color:var(--t2);width:160px;flex-shrink:0}
.disp-track{flex:1;height:8px;background:var(--bg4);border-radius:4px;overflow:hidden;position:relative}
.disp-fill{height:100%;border-radius:4px;transition:width 1.1s ease}
.disp-range{font-size:11px;font-family:'DM Mono',monospace;color:var(--t3);min-width:80px;text-align:right}

/* ── GROWTH ANALYSIS ── */
.growth-stat{background:var(--bg2);border:0.5px solid var(--b);border-radius:var(--rr2);padding:16px 18px;text-align:center;position:relative;overflow:hidden}
.growth-stat::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.growth-stat.up::after{background:var(--gr)}
.growth-stat.dn::after{background:var(--r)}
.growth-stat.same::after{background:var(--g)}
.gs-delta{font-size:22px;font-weight:700;font-family:'DM Mono',monospace;line-height:1}
.gs-label{font-size:11px;color:var(--t3);margin-top:4px}
.gs-from{font-size:10.5px;color:var(--t3);margin-top:2px}
.audit-selector{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.audit-pill{padding:5px 14px;border-radius:999px;border:1.5px solid var(--b2);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .15s;background:var(--bg2)}
.audit-pill.on{border-color:var(--g);color:var(--g);background:var(--gd)}
.growth-chart-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gcr-dim{font-size:12px;color:var(--t2);width:160px;flex-shrink:0}
.gcr-bars{flex:1;display:flex;flex-direction:column;gap:3px}
.gcr-bar{height:7px;border-radius:4px;transition:width 1.1s ease}
.gcr-legend{display:flex;gap:14px;font-size:11px;color:var(--t3);margin-bottom:12px;flex-wrap:wrap}
.gcr-leg-dot{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:4px}

/* ── SEO AUDIT ── */
.seo-source-tabs{display:flex;gap:4px;background:var(--bg3);border-radius:var(--rr);padding:4px;margin-bottom:16px}
.sst{flex:1;padding:7px;text-align:center;font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;border-radius:6px;border:none;background:none;font-family:Outfit,sans-serif;transition:all .15s}
.sst.on{background:var(--bg2);color:var(--t)}
.seo-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
@media(max-width:600px){.seo-metric-grid{grid-template-columns:1fr 1fr}}
.seo-metric{background:var(--bg3);border-radius:var(--rr2);padding:12px 14px;border:0.5px solid var(--b)}
.sem-label{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.sem-val{font-size:20px;font-weight:700;font-family:'DM Mono',monospace;color:var(--t);margin-bottom:2px}
.sem-note{font-size:11px;color:var(--t3)}
.seo-issue-row{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-radius:var(--rr);margin-bottom:7px;border:0.5px solid var(--b)}
.seo-sev-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px}
.seo-issue-body{flex:1}
.seo-issue-title{font-size:12.5px;font-weight:600;color:var(--t);margin-bottom:2px}
.seo-issue-desc{font-size:12px;color:var(--t2);line-height:1.55}
.seo-tag{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0}


/* ── STRATEGY & GROWTH GOAL PANEL ── */
.strategy-panel{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:14px;margin-bottom:14px}
@media(max-width:1024px){.strategy-panel{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.strategy-panel{grid-template-columns:1fr}}

.sp-card{background:var(--bg2);border:0.5px solid var(--b);border-radius:var(--rr2);padding:18px 20px;position:relative;overflow:hidden}
.sp-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.sp-title{font-size:15px;font-weight:600;color:var(--t);margin-bottom:5px;line-height:1.35}
.sp-sub{font-size:12px;color:var(--t3);line-height:1.55}
.sp-pillars{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.sp-pillar{font-size:11px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--bg3);border:0.5px solid var(--b2);color:var(--t2)}
.sp-pillar.active{background:var(--gd);border-color:var(--g);color:var(--g)}

/* Fuel bar */
.fuel-wrap{position:relative;margin-top:10px}
.fuel-label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.fuel-pct{font-size:22px;font-weight:700;font-family:'DM Mono',monospace;color:var(--t);line-height:1}
.fuel-status{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.fuel-track{width:100%;height:22px;background:var(--bg4);border-radius:4px;overflow:hidden;position:relative;border:0.5px solid var(--b)}
.fuel-fill{height:100%;border-radius:3px;transition:width 1.4s cubic-bezier(.4,0,.2,1);position:relative;display:flex;align-items:center}
.fuel-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0px,rgba(255,255,255,.07) 12px,transparent 12px,transparent 24px);border-radius:3px}
.fuel-segments{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;pointer-events:none}
.fuel-seg-tick{position:absolute;top:0;height:100%;width:0.5px;background:var(--bg2)}
.fuel-milestones{display:flex;justify-content:space-between;margin-top:5px}
.fuel-ms{font-size:9.5px;color:var(--t3);text-align:center}
.fuel-ms.reached{color:var(--gr);font-weight:600}

/* Goal context strip */
.goal-context{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--gd);border-radius:var(--rr);margin-top:12px;border:0.5px solid var(--g)}
.goal-icon{font-size:18px;flex-shrink:0}
.goal-context-text{flex:1}
.goal-context-label{font-size:11px;font-weight:700;color:var(--g);letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.goal-context-val{font-size:12.5px;color:var(--t);font-weight:500;line-height:1.5}

/* Strategy pillars in detail */
.strategy-detail-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:0.5px solid var(--b)}
.strategy-detail-row:last-child{border-bottom:none}
.sdr-num{font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'DM Mono',monospace}
.sdr-label{font-size:12.5px;color:var(--t);flex:1}
.sdr-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;flex-shrink:0}
.sds-done{background:var(--grd);color:var(--gr)}
.sds-prog{background:var(--gd);color:var(--g)}
.sds-todo{background:var(--bg4);color:var(--t3)}


/* ═══════════════════════════════════
   GROWTH PLAYBOOK STYLES
   ═══════════════════════════════════ */
.pb-mode-toggle{display:flex;background:var(--bg3);border-radius:var(--rr);padding:3px;gap:2px;border:0.5px solid var(--b)}
.pb-mode-btn{flex:1;padding:7px 16px;font-size:12.5px;font-weight:600;color:var(--t3);border:none;background:none;border-radius:6px;cursor:pointer;font-family:Outfit,sans-serif;transition:all .18s;white-space:nowrap}
.pb-mode-btn.on{background:var(--bg2);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* Playbook panel */
.playbook-panel{display:none}.playbook-panel.on{display:block}
.checklist-panel{display:block}.checklist-panel.hidden{display:none}

/* Channel / category tabs */
.pb-channel-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;scrollbar-width:none}
.pb-channel-bar::-webkit-scrollbar{display:none}
.pb-ch{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--b2);background:var(--bg2);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0}
.pb-ch:hover{border-color:var(--g);color:var(--g)}
.pb-ch.on{border-color:var(--g);background:var(--gd);color:var(--g)}
.pb-ch-icon{font-size:14px}

/* Top-level digital / offline tabs */
.pb-top-tabs{display:flex;gap:4px;background:var(--bg4);border-radius:var(--rr);padding:3px;margin-bottom:16px;width:fit-content}
.pb-top-tab{padding:6px 20px;font-size:12.5px;font-weight:600;color:var(--t3);border:none;background:none;border-radius:5px;cursor:pointer;font-family:Outfit,sans-serif;transition:all .18s}
.pb-top-tab.on{background:var(--bg2);color:var(--t)}

/* Phase accordion */
.pb-phase{border:0.5px solid var(--b);border-radius:var(--rr2);margin-bottom:10px;overflow:hidden;background:var(--bg2)}
.pb-phase-head{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;transition:background .15s;user-select:none}
.pb-phase-head:hover{background:var(--bg3)}
.pb-phase-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;font-family:'DM Mono',monospace}
.pb-phase-info{flex:1}
.pb-phase-title{font-size:13.5px;font-weight:600;color:var(--t);margin-bottom:1px}
.pb-phase-meta{font-size:11.5px;color:var(--t3)}
.pb-phase-arrow{font-size:11px;color:var(--t3);transition:transform .2s}
.pb-phase.open .pb-phase-arrow{transform:rotate(180deg)}
.pb-phase-body{display:none;border-top:0.5px solid var(--b)}
.pb-phase.open .pb-phase-body{display:block}

/* Task rows inside phase */
.pb-task{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:0.5px solid var(--b)}
.pb-task:last-child{border-bottom:none}
.pb-task-chk{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--b2);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:1px}
.pb-task-chk.on{background:var(--g);border-color:var(--g)}
.pb-task-chk.on::after{content:'✓';font-size:10px;color:#fff;font-weight:800}
.pb-task-body{flex:1}
.pb-task-title{font-size:13px;font-weight:500;color:var(--t);margin-bottom:3px;line-height:1.4}
.pb-task-title.done{text-decoration:line-through;color:var(--t3)}
.pb-task-desc{font-size:12px;color:var(--t3);line-height:1.55}
.pb-task-tags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.pb-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px}
.pb-tag-goal{background:var(--gd);color:var(--g)}
.pb-tag-time{background:var(--bld);color:var(--bl)}
.pb-tag-impact{background:var(--rd);color:var(--r)}
.pb-tag-free{background:var(--grd);color:var(--gr)}

/* Progress bar for each phase */
.pb-phase-progress{height:3px;background:var(--bg4);overflow:hidden}
.pb-phase-pfill{height:100%;transition:width .6s ease}

/* Goal-link badge */
.pb-goal-link{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--gd);border-radius:var(--rr);margin:0 16px 10px;font-size:12px;color:var(--g);font-weight:500}


/* ═══════════ AI TOOLS CHECKLIST ═══════════ */
.aitool-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--rr2);margin-bottom:18px;border:1px solid var(--b2)}
.aitool-logo{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;font-weight:800}
.aitool-info{flex:1}
.aitool-name{font-size:14px;font-weight:700;color:var(--t);margin-bottom:1px}
.aitool-tagline{font-size:12px;color:var(--t3);line-height:1.4}
.aitool-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all .18s;flex-shrink:0}
.aitool-free{background:var(--grd);color:var(--gr)}
.aitool-paid{background:var(--gd);color:var(--g)}
.aitool-freemium{background:var(--bld);color:var(--bl)}

.desig-cl-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:3px;margin-bottom:16px;scrollbar-width:none}
.desig-cl-tabs::-webkit-scrollbar{display:none}
.dct{padding:6px 14px;border-radius:999px;border:1.5px solid var(--b2);background:var(--bg2);font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0;font-family:Outfit,sans-serif}
.dct:hover{border-color:var(--g);color:var(--g)}
.dct.on{border-color:var(--g);background:var(--gd);color:var(--g)}

.desig-checklist-panel{display:none}.desig-checklist-panel.on{display:block}
.ai-task-row{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:.5px solid var(--b)}
.ai-task-row:last-child{border-bottom:none}
.ai-task-chk{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--b2);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:2px}
.ai-task-chk.on{background:var(--g);border-color:var(--g)}
.ai-task-chk.on::after{content:'\2713';font-size:10px;color:#fff;font-weight:800}
.ai-task-body{flex:1}
.ai-task-title{font-size:13px;font-weight:500;color:var(--t);line-height:1.4;margin-bottom:2px}
.ai-task-title.done{text-decoration:line-through;color:var(--t3)}
.ai-task-desc{font-size:12px;color:var(--t3);line-height:1.55;margin-bottom:5px}
.ai-task-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ai-pri{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px}
.ai-pri-c{background:var(--rd);color:var(--r)}
.ai-pri-h{background:var(--gd);color:var(--g)}
.ai-pri-m{background:var(--bld);color:var(--bl)}
.ai-tool-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg4);color:var(--t2);border:.5px solid var(--b2);cursor:pointer;transition:all .15s;text-decoration:none}
.ai-tool-chip:hover{border-color:var(--g);color:var(--g);background:var(--gd)}
.ai-tool-chip-icon{font-size:12px}

.week-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--bg4);border-radius:var(--rr);margin-bottom:8px;margin-top:14px}
.week-header:first-child{margin-top:0}
.week-label{font-size:11px;font-weight:700;color:var(--t2);letter-spacing:.05em;text-transform:uppercase}
.week-badge{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:999px}


/* ═══════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════ */
.adm-screen{max-width:1100px;margin:0 auto;padding:24px 28px;min-height:100vh;background:var(--bg)}
@media(max-width:768px){.adm-screen{padding:16px 14px}}
.adm-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.adm-back{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;padding:7px 12px;border-radius:var(--rr);border:1px solid var(--b);background:var(--bg2);transition:all .15s}
.adm-back:hover{border-color:var(--b2);color:var(--t)}
.adm-title-block{flex:1}
.adm-title{font-size:24px;font-weight:700;color:var(--t);font-family:'Cormorant Garamond',serif}
.adm-subtitle{font-size:12px;color:var(--t3);margin-top:2px}
.adm-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--rd);color:var(--r);letter-spacing:.06em;text-transform:uppercase}
/* Stat cards */
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:900px){.adm-stats{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.adm-stats{grid-template-columns:1fr}}
.adm-stat{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:18px 20px;position:relative;overflow:hidden}
.adm-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.adm-stat.total::before{background:var(--bl)}
.adm-stat.active::before{background:var(--gr)}
.adm-stat.inactive::before{background:var(--r)}
.adm-stat.renewing::before{background:var(--g)}
.adm-stat-val{font-size:36px;font-weight:700;font-family:'DM Mono',monospace;color:var(--t);line-height:1;margin-bottom:4px}
.adm-stat-label{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.adm-stat-delta{font-size:12px;font-weight:500}
.adm-stat-delta.up{color:var(--gr)}
.adm-stat-delta.dn{color:var(--r)}
.adm-stat-delta.warn{color:var(--g)}
/* Tabs */
.adm-tabs{display:flex;gap:4px;background:var(--bg3);border-radius:var(--rr);padding:3px;margin-bottom:20px;width:fit-content;flex-wrap:wrap}
.adm-tab{padding:7px 18px;font-size:12.5px;font-weight:600;color:var(--t3);border:none;background:none;border-radius:6px;cursor:pointer;font-family:Outfit,sans-serif;transition:all .18s;white-space:nowrap}
.adm-tab.on{background:var(--bg2);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* ── FINANCE PANEL ── */
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.fin-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:18px 20px}
.fin-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.fin-card-title{font-size:13px;font-weight:700;color:var(--t);letter-spacing:.01em}
.fin-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--b);font-size:13px}
.fin-row:last-child{border-bottom:none}
.fin-row-label{color:var(--t2)}
.fin-row-val{font-family:'DM Mono',monospace;color:var(--t);font-weight:600}
.fin-row.total{border-top:1px solid var(--b2);margin-top:4px;padding-top:12px;font-weight:700}
.fin-row.total .fin-row-val{font-size:15px}
.fin-row.pos .fin-row-val{color:var(--gr)}
.fin-row.neg .fin-row-val{color:var(--r)}
.fin-input-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.fin-input-row label{font-size:12.5px;color:var(--t2);flex:1}
.fin-input-row input{width:120px;padding:6px 10px;border:1px solid var(--b2);border-radius:6px;font-family:'DM Mono',monospace;font-size:12.5px;color:var(--t);background:var(--bg);text-align:right}
.fin-input-row input:focus{outline:none;border-color:var(--g)}
.fin-toggle{display:inline-flex;background:var(--bg3);border-radius:var(--rr);padding:3px;gap:2px;margin-bottom:18px}
.fin-toggle-btn{padding:7px 18px;font-size:12.5px;font-weight:600;color:var(--t3);border:none;background:none;border-radius:6px;cursor:pointer;font-family:'Outfit',sans-serif;transition:all .18s}
.fin-toggle-btn.on{background:var(--bg2);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.fin-summary-big{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.fin-bigcard{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rr2);padding:18px 20px;position:relative;overflow:hidden}
.fin-bigcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.fin-bigcard.revenue::before{background:var(--bl)}
.fin-bigcard.expense::before{background:var(--r)}
.fin-bigcard.tax::before{background:var(--g)}
.fin-bigcard.inhand::before{background:var(--gr)}
.fin-bigcard-label{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.fin-bigcard-val{font-size:24px;font-weight:700;font-family:'DM Mono',monospace;color:var(--t);line-height:1}
.fin-note{margin-top:18px;padding:14px 16px;background:var(--bg3);border:1px solid var(--b);border-radius:var(--rr2);font-size:11.5px;color:var(--t3);line-height:1.6}
.fin-plan-bd{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--b);font-size:13px}
.fin-plan-bd:last-child{border-bottom:none}
@media (max-width:768px){
  .fin-grid{grid-template-columns:1fr}
  .fin-summary-big{grid-template-columns:1fr 1fr}
}
/* Table */
.adm-table-wrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{background:var(--bg4);padding:10px 14px;font-size:10.5px;font-weight:700;color:var(--t3);letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--b);text-align:left;white-space:nowrap}
.adm-table td{padding:11px 14px;border-bottom:.5px solid var(--b);color:var(--t2);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:none}
.adm-table tr:hover td{background:var(--bg3)}
.adm-table td:first-child{color:var(--t);font-weight:500}
/* User avatar */
.adm-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-right:8px}
/* Status badges */
.adm-status{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.adm-s-active{background:var(--grd);color:var(--gr)}
.adm-s-inactive{background:var(--rd);color:var(--r)}
.adm-s-trial{background:var(--bld);color:var(--bl)}
.adm-s-expiring{background:var(--gd);color:var(--g)}
/* Plan badge */
.adm-plan{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px}
.adm-p-solo{background:#e8eaf6;color:#3949ab}
.adm-p-team{background:var(--gd);color:var(--g)}
.adm-p-agency{background:var(--gd2);color:#b8903a}
.adm-p-enterprise{background:rgba(160,100,230,.12);color:#7F77DD}
/* Alert card */
.adm-alert{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;background:var(--gd);border:1px solid var(--g);border-radius:var(--rr2);margin-bottom:10px}
.adm-alert.red{background:var(--rd);border-color:var(--r)}
.adm-alert-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.adm-alert-body{flex:1}
.adm-alert-title{font-size:13px;font-weight:600;color:var(--t);margin-bottom:2px}
.adm-alert-sub{font-size:12px;color:var(--t3);line-height:1.5}
.adm-alert-days{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;flex-shrink:0;align-self:center}
/* Search/filter bar */
.adm-filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.adm-search{flex:1;min-width:180px;padding:8px 12px;border-radius:var(--rr);border:1px solid var(--b2);background:var(--bg2);font-size:13px;color:var(--t);font-family:Outfit,sans-serif}
.adm-search:focus{outline:none;border-color:var(--g)}
.adm-filter-sel{padding:8px 10px;border-radius:var(--rr);border:1px solid var(--b2);background:var(--bg2);font-size:12.5px;color:var(--t2);font-family:Outfit,sans-serif;cursor:pointer}
/* Action buttons in table */
.adm-act{font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--b2);background:none;cursor:pointer;color:var(--t2);font-family:Outfit,sans-serif;transition:all .15s;margin-left:4px}
.adm-act:hover{border-color:var(--g);color:var(--g)}
.adm-act.danger:hover{border-color:var(--r);color:var(--r)}
/* Renewal ring */
.adm-ring-wrap{display:flex;align-items:center;gap:8px}
.adm-ring{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}






/* ── APP FOOTER ── */
.app-footer{padding:28px 32px 20px;border-top:1px solid var(--b);margin-top:40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.app-footer-left{font-size:11.5px;color:var(--t3);line-height:1.7}
.app-footer-right{display:flex;align-items:center;gap:16px}
.app-footer-link{font-size:11.5px;color:var(--t3);cursor:pointer;text-decoration:none;transition:color .15s}
.app-footer-link:hover{color:var(--g)}
.app-footer-sep{font-size:11.5px;color:var(--b2)}
/* ── LEGAL MODAL ── */
.legal-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:800;align-items:center;justify-content:center}
.legal-modal.open{display:flex}
.legal-box{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rr3);width:min(700px,94vw);max-height:82vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.legal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--b)}
.legal-title{font-size:16px;font-weight:700;color:var(--t)}
.legal-close{background:none;border:none;cursor:pointer;font-size:22px;color:var(--t3);line-height:1;font-family:Outfit,sans-serif}
.legal-body{overflow-y:auto;padding:24px;flex:1}
.legal-body h3{font-size:13.5px;font-weight:700;color:var(--t);margin:20px 0 6px}
.legal-body h3:first-child{margin-top:0}
.legal-body p{font-size:12.5px;color:var(--t2);line-height:1.75;margin-bottom:10px}
.legal-body ul{padding-left:18px;margin-bottom:10px}
.legal-body ul li{font-size:12.5px;color:var(--t2);line-height:1.75;margin-bottom:4px}
/* ── USER GUIDE VIEW ── */
.ug-section{margin-bottom:28px}
.ug-section-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--bg3);border-radius:var(--rr2);border:1px solid var(--b);cursor:pointer;transition:background .15s}
.ug-section-head:hover{background:var(--bg4)}
.ug-section-icon{width:32px;height:32px;border-radius:var(--rr);background:var(--gd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ug-section-title{font-size:13.5px;font-weight:600;color:var(--t);flex:1}
.ug-section-arrow{font-size:11px;color:var(--t3);transition:transform .2s}
.ug-section.open .ug-section-arrow{transform:rotate(180deg)}
.ug-section-body{display:none;padding:16px 18px 4px;border:1px solid var(--b);border-top:none;border-radius:0 0 var(--rr2) var(--rr2);background:var(--bg2)}
.ug-section.open .ug-section-body{display:block}
.ug-item{display:flex;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--b)}
.ug-item:last-child{border-bottom:none}
.ug-item-dot{width:6px;height:6px;border-radius:50%;background:var(--g);flex-shrink:0;margin-top:7px}
.ug-item-text{font-size:12.5px;color:var(--t2);line-height:1.65}
.ug-item-text strong{color:var(--t);font-weight:600}
.ug-tip{padding:10px 14px;background:var(--gd);border-left:3px solid var(--g);border-radius:0 var(--rr) var(--rr) 0;font-size:12px;color:var(--t2);line-height:1.65;margin:10px 0}
.ug-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.ug-step{padding:12px 14px;background:var(--bg3);border-radius:var(--rr2);border:1px solid var(--b)}
.ug-step-num{font-size:9px;font-weight:700;color:var(--g);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.ug-step-title{font-size:12.5px;font-weight:600;color:var(--t);margin-bottom:3px}
.ug-step-desc{font-size:11.5px;color:var(--t3);line-height:1.55}



/* ═══════════════════════════════════════════════════════════════
   MOBILE & TABLET RESPONSIVE SYSTEM
   Targets:
   • Android phones: 360–430px (5.5"–6.7")
   • iPhone 11–17 Pro Max: 375–430px (portrait), 844–932px (landscape)
   • iPads: 768–1024px (portrait), 1024–1366px (landscape)
   • Android tablets: 600–1280px
   Safari iOS / Chrome / Firefox / Samsung Internet
═══════════════════════════════════════════════════════════════ */

/* ── Safe area support (iPhone notch / Dynamic Island) ─────── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── Prevent iOS text size adjustment ──────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Smooth scrolling everywhere ───────────────────────────── */
* {
  -webkit-overflow-scrolling: touch;
}

/* ── Tap highlight removal ──────────────────────────────────── */
a, button, [onclick], .sbi, .rb, .xbtn, .btnnx {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Hamburger button (hidden on desktop) ───────────────────── */
.mob-ham {
  display: none;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.mob-ham span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--t);
  border-radius: 2px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.mob-ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.mob-ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── Sidebar drawer overlay ─────────────────────────────────── */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 90;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sb-overlay.active { display: block; }

/* ── Bottom navigation bar (phones only) ───────────────────── */
.mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: var(--bg2);
  border-top: 1px solid var(--b);
  padding-bottom: var(--safe-bottom);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mob-bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 56px;
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
  min-width: 52px;
}
.mob-nav-item:active { background: var(--gd); }
.mob-nav-item svg { width: 22px; height: 22px; color: var(--t3); transition: color .15s; }
.mob-nav-item span { font-size: 9.5px; font-weight: 500; color: var(--t3); transition: color .15s; }
.mob-nav-item.active svg, .mob-nav-item.active span { color: var(--g); }
.mob-nav-item.active { background: var(--gd); }

/* ── Floating action button (audit on mobile) ───────────────── */
.mob-fab {
  display: none;
  position: fixed;
  bottom: calc(68px + var(--safe-bottom));
  right: 18px;
  z-index: 81;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g), var(--g2, #d4aa5a));
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(184,144,58,.45);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--navy, #0d1b2a);
  font-size: 22px;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
}
.mob-fab:active { transform: scale(.93); box-shadow: 0 2px 8px rgba(184,144,58,.3); }


/* ═══════════════════════════════════════════════════════════════
   TABLET — iPad (768–1024px portrait, 1024–1366px landscape)
   Android tablets 600–1280px
═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  /* Topbar */
  .tb { padding: 0 16px; }
  .tnav { display: none; }
  .unm { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Sidebar: narrower on tablet */
  .sb { width: 190px; flex-shrink: 0; }
  .sbi { font-size: 12px; padding: 7px 12px; }
  .sbl { font-size: 9px; }
  .pbox { padding: 10px 12px; }

  /* Main content */
  .mc { padding: 20px 22px; }

  /* Grids: 2-col max on tablet */
  .g3 { grid-template-columns: 1fr 1fr !important; }
  .sts { grid-template-columns: repeat(2,1fr); gap: 10px; }

  /* Pricing: 2 col on tablet portrait, full on landscape */
  .pgrid { grid-template-columns: repeat(2,1fr); }

  /* Report action buttons: wrap */
  .racts { flex-wrap: wrap; gap: 6px; }

  /* Platform grid */
  .pltg { grid-template-columns: repeat(3,1fr); }

  /* Auth card */
  .acard { max-width: 440px; }

  /* Stat cards */
  .scv { font-size: 24px; }

  /* Settings */
  .setw, .set-wrap { padding: 22px 20px 48px; }

  /* Audit */
  .aw { padding: 22px 18px 48px; }

  /* Reduce dim card spacing */
  .dc { padding: 16px; }
  .dsc { gap: 10px; }
}

/* iPad landscape (1024px) */
@media screen and (min-width: 1024px) and (max-width: 1180px) {
  .sb { width: 195px; }
  .mc { padding: 22px 26px; }
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .g3 { grid-template-columns: repeat(2,1fr); }
}

/* iPad Pro 12.9" portrait (1024px) */
@media screen and (min-width: 1024px) and (max-width: 1024px) {
  .pgrid { grid-template-columns: repeat(2,1fr); }
}


/* ═══════════════════════════════════════════════════════════════
   PHONES — Android 5.5"–7" (360–430px) + iPhone 11–17 Pro Max
   iPhone 11: 414×896  iPhone 12/13/14: 390×844
   iPhone 15/16/17 Pro Max: 430×932  iPhone SE: 375×667
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  /* Show hamburger, hide desktop elements */
  .mob-ham { display: flex !important; }
  .mob-bottom-nav { display: block !important; }
  .tnav { display: none !important; }
  .unm  { display: none !important; }
  .xbtn.ntn { display: none !important; }

  /* Topbar — iPhone safe area */
  .tb {
    padding: 0 14px 0 calc(14px + var(--safe-left));
    height: 54px;
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: var(--safe-top);
    height: calc(54px + var(--safe-top));
  }

  /* Sidebar — slide-in drawer on mobile */
  .pb {
    flex-direction: row !important;
    height: calc(100vh - 54px - var(--safe-top)) !important;
    overflow: hidden;
    position: relative;
  }

  .sb {
    position: fixed !important;
    top: calc(54px + var(--safe-top));
    left: -260px;
    bottom: 0;
    width: 260px !important;
    height: auto !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 95;
    border-right: 1px solid var(--b) !important;
    border-bottom: none !important;
    transition: left .28s cubic-bezier(.4,0,.2,1);
    padding: 12px 0 calc(80px + var(--safe-bottom)) !important;
    background: var(--bg2) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }

  .sb.mob-open {
    left: 0 !important;
  }

  /* Restore vertical sidebar styles inside drawer */
  .sbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 8px !important;
  }
  .sbl {
    display: block !important;
    font-size: 9px !important;
    padding: 12px 12px 4px !important;
    letter-spacing: .1em !important;
  }
  .sbi {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-left: 2px solid transparent !important;
    border-bottom: none !important;
    border-radius: 6px !important;
    min-width: unset !important;
    white-space: normal !important;
  }
  .sbi.on {
    border-left-color: var(--g) !important;
    background: var(--gd) !important;
    border-bottom-color: transparent !important;
  }
  .sico { opacity: .75; width: 16px; height: 16px; flex-shrink: 0; }
  .sbadge { display: flex !important; }
  .pbox { display: block !important; margin: 12px 8px 0 !important; }

  /* Main content — full width on mobile */
  .mc {
    width: 100% !important;
    padding: 16px 14px calc(72px + var(--safe-bottom)) !important;
    overflow-y: auto !important;
    height: calc(100vh - 54px - var(--safe-top)) !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Page header */
  .ph { margin-bottom: 18px; }
  .pht { font-size: 22px !important; }
  .phs { font-size: 13px !important; }

  /* Stat cards — 2 column */
  .sts { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .sc2 { padding: 14px 12px !important; }
  .scv { font-size: 22px !important; }
  .scl { font-size: 11px !important; }

  /* All grids → single column */
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }
  .tc, .tc3, .sr-2, .sr-3, .sr-4 { grid-template-columns: 1fr !important; }

  /* Platform selector */
  .pltg { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .pltic { font-size: 22px !important; }
  .pltnm { font-size: 11px !important; }

  /* Rating buttons — larger touch targets */
  .rsc { gap: 3px !important; flex-wrap: wrap !important; }
  .rb  { padding: 10px 0 !important; font-size: 12px !important; min-height: 44px !important; }

  /* Buttons — min 44px touch target (Apple HIG) */
  .btnnx, .xbtn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  .xbtn { min-height: 38px !important; padding: 8px 14px !important; }

  /* Audit wrapper */
  .aw { padding: 16px 14px 80px !important; }
  .st { font-size: 22px !important; }
  .sl { font-size: 13.5px !important; }

  /* Form inputs — larger on mobile */
  .fi {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 12px 14px !important;
    min-height: 48px !important;
  }
  .fs {
    font-size: 16px !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
  }
  textarea.fi { font-size: 16px !important; }

  /* Report view */
  .rw, .rep-wrap { padding: 16px 14px 80px !important; }
  .rph { flex-direction: column !important; gap: 12px !important; }
  .racts { flex-wrap: wrap !important; gap: 6px !important; }
  .racts .btnnx, .racts .xbtn { flex: 1 !important; min-width: 120px !important; text-align: center !important; justify-content: center !important; }

  /* Dimension cards */
  .dc { padding: 14px 12px !important; }
  .dscore { font-size: 22px !important; }

  /* Pricing */
  .pgrid { grid-template-columns: 1fr !important; max-width: 400px !important; margin: 0 auto !important; }
  .pcd { min-width: unset !important; }
  .pcdp { font-size: 36px !important; }

  /* Auth */
  .acard { padding: 28px 20px 24px !important; margin: 16px !important; max-width: calc(100vw - 32px) !important; width: 100% !important; }
  .alm { width: 44px !important; height: 44px !important; }

  /* Settings */
  .setw, .set-wrap { padding: 16px 14px 80px !important; }
  .srow { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  .srow .tgl { margin-top: 4px !important; }

  /* Notion / checklist */
  .nti { padding: 10px 10px !important; }
  .nti .ntd { font-size: 12.5px !important; }

  /* Team */
  .tm-row { grid-template-columns: 36px 1fr auto !important; gap: 6px !important; }
  .tm-header { display: none !important; }
  .tm-row > div:nth-child(3), .tm-row > div:nth-child(4) { display: none !important; }

  /* PDF preview */
  .rph { flex-direction: column !important; }
  .rph > div:first-child { width: 100% !important; }

  /* Report action buttons row */
  .dlb { display: inline-flex !important; padding: 5px 8px !important; font-size: 11px !important; }

  /* SEO audit */
  .seo-grid { grid-template-columns: 1fr !important; }

  /* Market Research */
  #mr-input-panel .fg { margin-bottom: 10px !important; }

  /* Upgrade modal */
  .uplan { min-width: unset !important; width: 100% !important; }
  .uplans { flex-direction: column !important; }

  /* Tab panels */
  .tab-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .tab-bar::-webkit-scrollbar { display: none !important; }

  /* Hide dim table columns */
  .dtg { display: none !important; }
  .dn  { width: 110px !important; font-size: 11px !important; }

  /* Tooltips — disable on mobile (use tap instead) */
  .tooltip { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SMALL PHONES — iPhone SE (375px), Android 360px
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 390px) {
  .sts { grid-template-columns: 1fr 1fr !important; }
  .scv { font-size: 18px !important; }
  .pht { font-size: 20px !important; }
  .pltg { grid-template-columns: repeat(2,1fr) !important; }
  .pltic { font-size: 18px !important; }
  .pltnm { font-size: 10px !important; }
  .btnnx { font-size: 13px !important; }
  .acard { padding: 22px 16px 20px !important; }
  .mc { padding: 14px 12px calc(72px + var(--safe-bottom)) !important; }
  .pcdp { font-size: 30px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONES — iPhone & Android landscape mode
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .tb { height: calc(48px + var(--safe-top)) !important; }

  .sb {
    top: calc(48px + var(--safe-top)) !important;
    width: 220px !important;
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
  }

  .mc {
    height: calc(100vh - 48px - var(--safe-top)) !important;
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
  }

  /* Hide bottom nav in landscape — use drawer instead */
  .mob-bottom-nav { display: none !important; }

  .sts { grid-template-columns: repeat(4,1fr) !important; }
  .pgrid { grid-template-columns: repeat(2,1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SAFARI iOS SPECIFIC FIXES
═══════════════════════════════════════════════════════════════ */

/* Fix position:fixed elements with keyboard open */
@supports (-webkit-touch-callout: none) {
  .tb { position: sticky !important; }
  .mob-bottom-nav { position: fixed !important; }

  /* Fix 100vh on Safari iOS (excludes browser chrome) */
  .pb, .mc {
    height: -webkit-fill-available !important;
  }
}

/* Prevent rubber-band scrolling on non-scrollable areas */
.tb, .sb {
  overscroll-behavior: none;
}

/* Fix Safari button styling */
button, input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Fix Safari select styling */
select.fs {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6660' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px !important;
}


/* ═══════════════════════════════════════════════════════════════
   PRINT MEDIA — clean print output
═══════════════════════════════════════════════════════════════ */
@media print {
  .tb, .sb, .mob-bottom-nav, .mob-ham, .mob-fab,
  .sb-overlay, .toast-container { display: none !important; }
  .mc { padding: 0 !important; height: auto !important; overflow: visible !important; }
  .pb { height: auto !important; }
}


/* ── Mobile-specific component fixes ─────────────────────────── */

/* Audit form on mobile */
@media screen and (max-width: 768px) {
  /* Company name + industry row → single column */
  .inp-row-2 {
    grid-template-columns: 1fr !important;
  }

  /* Rating scale — larger touch targets */
  .rb {
    min-height: 44px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  /* Checklist items */
  .cl-item {
    grid-template-columns: 22px 1fr 60px !important;
  }
  .cl-item .cl-cell:nth-child(4),
  .cl-item .cl-cell:nth-child(5) { display: none !important; }
  .cl-col-header {
    grid-template-columns: 22px 1fr 60px !important;
  }
  .cl-col-h:nth-child(4),
  .cl-col-h:nth-child(5) { display: none !important; }

  /* Score table in audit report */
  .score-tbl td:nth-child(3),
  .score-tbl th:nth-child(3) { display: none !important; }

  /* Notion panel */
  .np-card {
    padding: 14px 12px !important;
  }

  /* PDF preview on mobile — show message to use desktop */
  #screen-pdf-preview .mc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px !important;
  }

  /* Upgrade modal on mobile */
  #upgrade-modal .umc {
    padding: 24px 18px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* All modals — bottom sheet on mobile */
  .modal-overlay > div,
  [id$="-modal"] > div:not(.sb-overlay) {
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  /* Tab navigation — scrollable */
  .tab-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  .tab-strip::-webkit-scrollbar { display: none !important; }
  .tab-btn { white-space: nowrap !important; flex-shrink: 0 !important; }

  /* Toast — above bottom nav */
  .toast, .toastc {
    bottom: calc(72px + var(--safe-bottom) + 8px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    text-align: center !important;
  }

  /* Insight box */
  .ib { padding: 12px 14px !important; }
  .ib-lbl { font-size: 8px !important; }
  .ib-txt { font-size: 12px !important; }

  /* Phase badge */
  .phase-badge { font-size: 9px !important; padding: 6px 10px !important; }

  /* Stat cards grid in reports */
  .sr-3, .sr-4 { grid-template-columns: repeat(2,1fr) !important; }
  .sr-4 .sc:last-child { grid-column: span 2 !important; }

  /* Persona cards */
  .persona-grid { grid-template-columns: 1fr !important; }

  /* Timeline */
  .tl-content { padding-bottom: 14px !important; }
  .tl-heading { font-size: 12.5px !important; }
  .tl-body { font-size: 11px !important; }

  /* Revenue leak table — hide cols on mobile */
  .tbl th:nth-child(3), .tbl td:nth-child(3) { display: none !important; }

  /* Section heading sizes */
  .st { font-size: 22px !important; line-height: 1.2 !important; }
  .sl { font-size: 13px !important; }
  .ey { font-size: 9px !important; }

  /* Two-column layout → stack */
  .two-col, .tc { grid-template-columns: 1fr !important; }

  /* Recommendations */
  .ri { gap: 12px !important; padding: 14px 0 !important; }
  .ri-num { width: 30px !important; height: 30px !important; font-size: 15px !important; }
  .ri-t { font-size: 12.5px !important; }
  .ri-b { font-size: 11.5px !important; }

  /* SWOT grid → 2x2 */
  .swot { grid-template-columns: 1fr 1fr !important; }
  .swot-cell { padding: 12px !important; }
  .swot-cell ul li { font-size: 10.5px !important; }

  /* Numbered list */
  .nl li::before { font-size: 16px !important; min-width: 22px !important; }
  .nl-t { font-size: 12px !important; }
  .nl-b { font-size: 11px !important; }

  /* Report page footer */
  .rp .pf { flex-direction: column !important; gap: 4px !important; }
  .pf-l, .pf-r { font-size: 8.5px !important; }

  /* Market Research input grid */
  #mr-input-panel > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Score rings */
  .rings { gap: 10px !important; justify-content: center !important; }
  .ring-item { min-width: 80px !important; }
  .ring-wrap { width: 60px !important; height: 60px !important; }

  /* Bar charts */
  .bar-row { margin-bottom: 10px !important; }
  .bar-name { font-size: 11px !important; }
  .bar-pct { font-size: 10.5px !important; }

  /* KPI items */
  .kpi-weight-input { width: 60px !important; }

  /* Admin / enterprise tables */
  .tbl th:nth-child(n+4),
  .tbl td:nth-child(n+4) {
    display: none !important;
  }
  .score-tbl th:nth-child(n+3),
  .score-tbl td:nth-child(n+3) {
    display: none !important;
  }
}

/* ── Tablet-specific component fixes (601–1024px) ─────────── */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .st { font-size: 26px !important; }
  .sts { grid-template-columns: repeat(2,1fr) !important; }
  .rings { gap: 12px !important; }
  .persona-grid { grid-template-columns: 1fr 1fr !important; }
  .swot { grid-template-columns: 1fr 1fr !important; }

  /* Toast position */
  .toast, .toastc {
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    width: auto !important;
    max-width: 380px !important;
  }

  /* Upgrade modal — centred card on tablet */
  #upgrade-modal .umc {
    max-width: 600px !important;
    border-radius: 12px !important;
  }
}

/* ── iOS html.ios specific ────────────────────────────────── */
html.ios .mc {
  /* Fix rubber band / overscroll on main area */
  overscroll-behavior-y: none;
}

html.ios input, html.ios textarea, html.ios select {
  /* Prevent iOS from zooming on focus */
  font-size: max(16px, 1em) !important;
}

/* ── Android specific ─────────────────────────────────────── */
html.android .mob-bottom-nav {
  /* Android has no home indicator — reduce safe area */
  padding-bottom: 4px;
}

/* ── Hover states — disable on touch devices ──────────────── */
@media (hover: none) {
  .sbi:hover { background: transparent !important; }
  .xbtn:hover { opacity: 1 !important; }
  .btnnx:hover { transform: none !important; }
}

/* ── Focus visible — accessibility ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--g) !important;
  outline-offset: 2px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(184,144,58,.3) !important;
}


/* Prevent pull-to-refresh on Chrome Android */
html {
  overscroll-behavior-y: none;
}
.mc {
  overscroll-behavior-y: auto;
}