:root{
  --void:#050A14;--deep:#0A1628;--navy:#0F2044;--blue:#1E4DB7;--blue-l:#2E6BE6;
  --cyan:#00C2FF;--cdim:rgba(0,194,255,0.12);--gold:#C9A84C;--gold-l:#E8C96A;
  --gdim:rgba(201,168,76,0.1);--white:#fff;--off:#E8EEF8;--g3:#94A3B8;
  --g5:#475569;--g7:#1E293B;--green:#10B981;--grdim:rgba(16,185,129,0.1);
  --amber:#F59E0B;--adim:rgba(245,158,11,0.1);--red:#EF4444;--rdim:rgba(239,68,68,0.1);
  --purple:#8B5CF6;--pdim:rgba(139,92,246,0.1);
  --card:rgba(255,255,255,0.04);--bdr:rgba(255,255,255,0.07);--r:10px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--void);color:var(--off);
  height:100vh;overflow:hidden;display:flex;flex-direction:column;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,194,255,0.025)1px,transparent 1px),
  linear-gradient(90deg,rgba(0,194,255,0.025)1px,transparent 1px);
  background-size:56px 56px;}
/* RAIL */
.app{flex:1;display:flex;overflow:hidden;position:relative;z-index:1;}
.rail{width:218px;min-width:218px;height:100%;display:flex;flex-direction:column;
  background:rgba(5,10,20,0.96);border-right:1px solid var(--bdr);flex-shrink:0;}
.rail-brand{padding:26px 18px 18px;border-bottom:1px solid var(--bdr);}
.rail-logo{width:38px;height:38px;background:linear-gradient(135deg,var(--blue),var(--cyan));
  border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px;}
.rail-name{font-family:'Bebas Neue',sans-serif;font-size:1.45rem;letter-spacing:0.1em;color:var(--white);line-height:1;}
.rail-tag{font-size:0.63rem;color:var(--cyan);letter-spacing:0.12em;text-transform:uppercase;margin-top:4px;line-height:1.4;}
.rail-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.ni{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:7px;cursor:pointer;
  font-size:0.81rem;font-weight:500;color:var(--g3);border:none;background:none;
  width:100%;text-align:left;transition:all 0.15s;font-family:'DM Sans',sans-serif;}
.ni:hover{color:var(--white);background:rgba(255,255,255,0.05);}
.ni.on{color:var(--cyan);background:var(--cdim);}
.ni-ic{font-size:0.9rem;width:16px;text-align:center;}
.nsep{height:1px;background:var(--bdr);margin:6px 8px;}
.rail-bot{padding:12px 10px;border-top:1px solid var(--bdr);display:flex;flex-direction:column;gap:7px;}
.rb{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px;
  border-radius:7px;font-size:0.76rem;font-weight:600;cursor:pointer;border:none;
  font-family:'DM Sans',sans-serif;transition:all 0.15s;}
.rb-gold{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#0A1628;}
.rb-gold:hover{transform:translateY(-1px);}
.rb-out{background:transparent;border:1px solid var(--bdr);color:var(--g3);}
.rb-out:hover{border-color:var(--cyan);color:var(--cyan);}
/* MAIN */
.main{flex:1;height:100%;overflow:hidden;display:flex;flex-direction:column;}
/* TOPBAR */
.topbar{height:50px;min-height:50px;display:flex;align-items:center;
  justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--bdr);
  background:rgba(5,10,20,0.82);backdrop-filter:blur(18px);}
.tb-title{display:flex;flex-direction:row;align-items:center;gap:12px;}
.tb-page-name{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.06em;color:var(--white);}
.tb-tagline{font-size:0.65rem;color:var(--g3);font-style:italic;letter-spacing:0.01em;white-space:nowrap;font-family:'DM Sans',sans-serif;border-left:1px solid var(--bdr);padding-left:12px;}
.tb-right{display:flex;align-items:center;gap:10px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px var(--green);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
/* BADGES */
.b{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;
  font-size:0.66rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;}
.bc{background:var(--cdim);color:var(--cyan);border:1px solid rgba(0,194,255,0.2);}
.bg{background:var(--gdim);color:var(--gold-l);border:1px solid rgba(201,168,76,0.2);}
.bgr{background:var(--grdim);color:var(--green);border:1px solid rgba(16,185,129,0.2);}
.ba{background:var(--adim);color:var(--amber);border:1px solid rgba(245,158,11,0.2);}
.br{background:var(--rdim);color:var(--red);border:1px solid rgba(239,68,68,0.2);}
.bp{background:var(--pdim);color:var(--purple);border:1px solid rgba(139,92,246,0.2);}
/* PAGES */
.pg{display:none;flex:1;overflow-y:auto;padding:12px 16px;flex-direction:column;gap:10px;}
.pg.on{display:flex;}
/* CARDS */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:12px 14px;}
.card:hover{border-color:rgba(0,194,255,0.15);}
.cc{border-color:rgba(0,194,255,0.2);}
.cg{border-color:rgba(201,168,76,0.2);}
.cgr{border-color:rgba(16,185,129,0.2);}
.cr{border-color:rgba(239,68,68,0.2);}
/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
/* STAT */
.sv{font-family:'Bebas Neue',sans-serif;font-size:2.3rem;letter-spacing:0.04em;line-height:1;}
.sl{font-size:0.7rem;color:var(--g3);text-transform:uppercase;letter-spacing:0.08em;}
/* PILLAR */
.pillar{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--bdr);
  border-radius:var(--r);padding:18px;}
.pillar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.p1::before{background:linear-gradient(90deg,var(--cyan),var(--blue));}
.p2::before{background:linear-gradient(90deg,var(--gold),var(--amber));}
.p3::before{background:linear-gradient(90deg,var(--green),var(--cyan));}
.pn{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;opacity:.06;
  position:absolute;top:6px;right:12px;line-height:1;}
.pt{font-size:0.92rem;font-weight:700;margin:8px 0 5px;}
.pd{font-size:0.76rem;color:var(--g3);line-height:1.6;}
/* MODE CARD */
.mc{background:var(--card);border:1px solid var(--bdr);border-radius:8px;
  padding:10px 14px;display:flex;justify-content:space-between;align-items:center;}
.mn{font-size:0.8rem;font-weight:600;}
.md{font-size:0.7rem;color:var(--g3);margin-top:2px;}
/* DOMAIN */
.dom{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;}
/* KPI */
.krow{display:flex;gap:10px;}
.kpi{flex:1;background:var(--card);border:1px solid var(--bdr);border-radius:8px;
  padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.kv{font-family:'Bebas Neue',sans-serif;font-size:1.75rem;line-height:1;}
.kl{font-size:0.66rem;color:var(--g3);text-transform:uppercase;letter-spacing:0.07em;}
/* SIG */
.sig{display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;border-radius:6px;margin-bottom:5px;}
.sg{background:var(--grdim);border:1px solid rgba(16,185,129,0.15);}
.sr{background:var(--rdim);border:1px solid rgba(239,68,68,0.15);}
.sa{background:var(--adim);border:1px solid rgba(245,158,11,0.15);}
/* TABLES */
.t{width:100%;border-collapse:collapse;font-size:0.78rem;}
.t th{text-align:left;padding:7px 10px;font-size:0.63rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--g3);border-bottom:1px solid var(--bdr);}
.t td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.03);vertical-align:middle;}
.t tr:hover td{background:rgba(255,255,255,0.02);}
.mono{font-family:'DM Mono',monospace;font-size:0.73rem;color:var(--cyan);}
/* GATE */
.gate{background:var(--card);border:1px solid var(--bdr);border-radius:7px;
  padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.gate:hover{border-color:rgba(0,194,255,0.25);}
.gn{font-size:0.78rem;font-weight:600;}
.gd{font-size:0.7rem;color:var(--g3);}
/* GLOW */
.gh{position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:500px;height:350px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(30,77,183,0.18)0%,transparent 65%);z-index:0;}
/* SCROLLBAR */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;}
/* STATS PAGE SPECIFIC */
.stats-wrap{flex:1;display:flex;overflow:hidden;min-height:0;}
.tab-rail{width:150px;min-width:150px;border-right:1px solid var(--bdr);
  background:rgba(5,10,20,0.5);display:flex;flex-direction:column;padding:8px 6px;gap:2px;}
.tb{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:7px;
  cursor:pointer;border:none;background:none;width:100%;text-align:left;
  transition:all 0.15s;font-family:'DM Sans',sans-serif;}
.tb:hover{background:rgba(255,255,255,0.05);}
.tb.on{background:var(--cdim);border:1px solid rgba(0,194,255,0.15);}
.tc{font-family:'DM Mono',monospace;font-size:0.6rem;color:var(--cyan);letter-spacing:0.08em;}
.tl{font-size:0.74rem;font-weight:600;color:var(--off);}
.tsep{height:1px;background:var(--bdr);margin:4px 6px;}
.panels{flex:1;overflow:hidden;display:flex;flex-direction:column;}
.panel{display:none;flex:1;overflow-y:auto;padding:14px 16px;
  flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(0,194,255,0.4) rgba(255,255,255,0.04);}
.panel.on{display:flex;}
.ad-rail{width:185px;min-width:185px;border-left:1px solid var(--bdr);
  background:rgba(5,10,20,0.4);display:flex;flex-direction:column;
  padding:10px 8px;gap:10px;overflow-y:auto;}
.ad-lbl{font-size:0.56rem;color:var(--g5);letter-spacing:0.1em;text-transform:uppercase;
  text-align:center;padding:3px 0;border-bottom:1px solid var(--bdr);margin-bottom:2px;}
.adc{background:var(--card);border:1px solid var(--bdr);border-radius:8px;
  padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;cursor:pointer;transition:all 0.15s;}
.adc:hover{border-color:rgba(0,194,255,0.2);transform:translateY(-1px);}
.adi{font-size:1.5rem;}
.adb{font-size:0.7rem;font-weight:700;color:var(--white);}
.adp{font-size:0.63rem;color:var(--g3);line-height:1.4;}
.adcta{font-size:0.63rem;font-weight:600;color:var(--cyan);background:var(--cdim);
  border:1px solid rgba(0,194,255,0.15);padding:3px 8px;border-radius:5px;width:100%;}
.ad-up{background:linear-gradient(135deg,rgba(201,168,76,0.12),rgba(201,168,76,0.04));
  border:1px solid rgba(201,168,76,0.22);border-radius:8px;padding:12px 10px;text-align:center;}
.stats-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:10px 16px;border-bottom:1px solid var(--bdr);flex-shrink:0;}
/* MATCH */
.mgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px;}
.mcard{background:rgba(255,255,255,0.03);border:1px solid var(--bdr);border-radius:8px;
  padding:10px 6px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:5px;transition:all 0.2s;}
.mcard:hover{transform:translateY(-2px);}
.mcirs{display:flex;gap:3px;justify-content:center;}
.mcir{width:10px;height:10px;border-radius:50%;border:1.5px solid;}
.mcir.hit{box-shadow:0 0 5px currentColor;}
.mnum{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;line-height:1;}
.mlbl{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--g3);}
.mpct{font-size:0.68rem;font-weight:600;}
.mrate{font-size:0.63rem;color:var(--g5);}
/* CHART */
.ch{position:relative;height:170px;}
/* BAR */
.fbw{width:65px;height:5px;background:rgba(255,255,255,0.06);
  border-radius:3px;overflow:hidden;display:inline-block;}
.fb{height:100%;border-radius:3px;}
/* LOCK */
.lk{position:relative;}
.lk-ov{position:absolute;inset:0;backdrop-filter:blur(4px);
  background:rgba(5,10,20,0.78);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;z-index:5;}
/* PROG */
.prog-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.prog-bar{height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-top:3px;}
.pg-title{font-size:0.88rem;font-weight:700;color:var(--white);margin-bottom:7px;}
.sec{font-size:0.78rem;color:var(--g3);line-height:1.5;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pg.on{display:flex;animation:fadeIn 0.22s ease both;}

/* ── RESPONSIVE — THREE DEVICE LAYOUT ────────────────────────────────── */
/* Tablet (768-1024px) */
@media(max-width:900px){
  .rail{width:52px;min-width:52px;}
  .rail-brand .rail-name,.rail-brand .rail-tag,.ni span:last-child{display:none;}
  .rail-brand{padding:14px 7px;}
  .rail-logo{margin:0 auto;}
  .ni{justify-content:center;padding:10px;}
  .ni-ic{width:auto;font-size:1.1rem;}
  .rail-bot .rb span{display:none;}
  .rail-bot .rb{padding:8px;}
}
/* CN-MOB-09: mobile-only visibility utility base rule — must appear before
   the mobile media query below, not after, so the override inside it wins
   by source order (equal specificity otherwise). Placing it after was the
   bug: it made display:none win on every viewport, permanently hiding the
   Sign Out icon regardless of login state. */
.mob-only{display:none;}
/* Mobile (max 767px) */
@media(max-width:767px){
  body{overflow:auto;height:auto;flex-direction:column;}
  .app{flex-direction:column;height:auto;overflow:visible;}
  /* Hide left rail — use bottom nav instead */
  .rail{display:none;}
  /* Bottom navigation bar */
  .mob-nav{display:flex!important;position:fixed;bottom:0;left:0;right:0;
    height:58px;background:rgba(5,10,20,0.97);border-top:1px solid rgba(255,255,255,0.07);
    z-index:999;justify-content:space-around;align-items:center;}
  .mob-nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 12px;border:none;background:none;cursor:pointer;
    color:#475569;font-size:0.55rem;font-family:'DM Sans',sans-serif;
    text-transform:uppercase;letter-spacing:0.06em;min-height:44px;justify-content:center;}
  .mob-nav-btn.on{color:#00C2FF;}
  .mob-nav-btn .mni{font-size:1.2rem;}
  /* Main content area */
  .main{padding:12px 12px 70px!important;overflow:visible!important;height:auto!important;}
  /* Pages */
  .pg{gap:10px!important;padding:0!important;flex:none!important;overflow:visible!important;}
  /* KPI strip — 2x2 on mobile */
  .stats-kpi{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  /* Stats layout — stack vertically */
  .stats-wrap{flex-direction:column!important;height:auto!important;}
  .tab-rail{flex-direction:row!important;width:100%!important;height:auto!important;
    overflow-x:auto!important;border-right:none!important;border-bottom:1px solid rgba(255,255,255,0.07)!important;
    padding:6px 8px!important;gap:4px!important;min-height:auto!important;flex-shrink:0!important;}
  .tb{flex-direction:row!important;min-height:36px!important;padding:6px 10px!important;
    white-space:nowrap!important;font-size:0.7rem!important;}
  .tc{font-size:0.65rem!important;}
  .tl{font-size:0.7rem!important;}
  .panels{height:auto!important;overflow:hidden!important;}
  .main{padding-bottom:70px!important;}
  .mob-nav{z-index:1000!important;background:rgba(5,10,20,0.98)!important;}
  /* Cards */
  .card{padding:12px!important;}
  /* Tables — horizontal scroll on mobile */
  .t{font-size:0.72rem!important;}
  .t th,.t td{padding:5px 7px!important;}
  /* Grid — single column */
  .g2{grid-template-columns:1fr!important;}
  .g3{grid-template-columns:1fr!important;}
  /* CN-MOB-05: .g4 (Home stat-card row) was missed when .g2/.g3 were
     converted above — the row stayed a rigid 4-column grid whose 1fr
     tracks have an implicit min-content floor, so it overflowed the
     mobile viewport and clipped the 4th card (Archetypes). 2x2 matches
     the existing .stats-kpi pattern used for a similar 4-item strip. */
  .g4{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  /* CN-MOB-02: Portfolio Engineering — Draw Selection/Your Plan and Row
     Count/Collision Detector, single column on mobile */
  .s-e1357c22{grid-template-columns:1fr!important;}
  .s-f2c564f4{grid-template-columns:1fr!important;}
  /* CN-MOB-07: Portfolio Engineering status banner (Download Rows +
     generation counter) — keep it reachable while scrolling down to the
     Generate button, instead of scrolling fully out of view. This is what
     was making Download Rows unreachable once the Generate button
     disabled itself after the 3rd generation. */
  .s-853f80c8{position:sticky!important;top:0!important;z-index:10!important;}
  /* CN-MOB-03: Result Checker tabs — wrap instead of overflowing */
  .s-09d07c30{flex-wrap:wrap!important;}
  /* Charts — shorter on mobile */
  .ch{height:160px!important;}
  /* Hide columns on very small screens */
  .t .mob-hide{display:none!important;}
  /* Snap card snapshot */
  .snap-card{font-size:0.8rem!important;}
  /* Page title */
  .ptitle{font-size:0.8rem!important;}
  /* CN-MOB-09: topbar — hide non-interactive badges and the tagline, which
     had no mobile treatment and were forcing horizontal scroll. Share
     Feedback and the mobile Sign Out icon are excluded here; their own
     visibility is login-gated in JS via applyRBAC(). */
  .tb-tagline{display:none!important;}
  .tb-right > *:not(#tb-feedback-btn):not(#tb-mob-signout-btn){display:none!important;}
  /* CN-MOB-09: generic mobile-only visibility utility. Base rule below
     hides on desktop always; JS still layers isLoggedIn() on top via
     inline style.display, which overrides this cleanly either way. */
  .mob-only{display:inline-flex;align-items:center;gap:4px;}
}
/* Hide mobile nav on desktop/tablet */
.mob-nav{display:none;}

/* ── DEAD ZONE TABLE ──────────────────────────────────────────────────── */
.dead-zone-table td{word-break:break-word;max-width:180px;}
.dead-zone-table .dead-values{font-size:0.68rem;line-height:1.3;}
/* ── HEALTH CHECK ────────────────────────────────────────────────────── */
.slot-dot{font-size:1.2rem;color:var(--g5);transition:color 0.3s;}
.slot-dot.good{color:var(--green);}
.slot-dot.warn{color:var(--amber);}
.slot-dot.bad{color:var(--red);}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}
input[type=number]{-moz-appearance:textfield;}

/* ── ADVERTISEMENT ZONES ──────────────────────────────────────────────── */
.ad-zone{display:none;} /* hidden by default — shown for Free tier only */
.ad-banner{
  background:linear-gradient(135deg,rgba(15,32,68,0.95),rgba(30,77,183,0.15));
  border:1px solid rgba(30,77,183,0.25);border-radius:8px;
  padding:8px 14px;display:flex;align-items:center;gap:12px;
  font-family:'DM Sans',sans-serif;position:relative;overflow:hidden;
}
.ad-banner::before{
  content:'AD';position:absolute;top:4px;right:6px;
  font-size:0.55rem;color:rgba(148,163,184,0.5);letter-spacing:0.08em;
}
.ad-banner-img{
  width:48px;height:48px;border-radius:6px;
  background:linear-gradient(135deg,#1E4DB7,#0F2044);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;
}
.ad-banner-body{flex:1;}
.ad-banner-title{font-size:0.76rem;font-weight:700;color:var(--off);margin-bottom:2px;}
.ad-banner-sub{font-size:0.68rem;color:var(--g3);line-height:1.4;}
.ad-banner-cta{
  background:var(--blue);color:var(--white);border:none;
  padding:5px 12px;border-radius:6px;font-size:0.7rem;font-weight:600;
  cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;
}
.ad-banner-cta:hover{opacity:0.85;}
.ad-skyscraper{
  width:160px;min-width:160px;background:var(--card);
  border:1px solid rgba(30,77,183,0.2);border-radius:8px;
  padding:12px;display:flex;flex-direction:column;align-items:center;
  gap:8px;font-family:'DM Sans',sans-serif;position:relative;
}
.ad-skyscraper::before{
  content:'ADVERTISEMENT';position:absolute;top:5px;left:50%;
  transform:translateX(-50%);font-size:0.5rem;color:rgba(148,163,184,0.4);
  letter-spacing:0.1em;white-space:nowrap;
}
.ad-upgrade-strip{
  background:linear-gradient(90deg,rgba(201,168,76,0.12),rgba(201,168,76,0.05));
  border:1px solid rgba(201,168,76,0.25);border-radius:8px;padding:8px 14px;
  display:flex;align-items:center;gap:10px;
}
/* Free tier: show ads */
body.tier-free .ad-zone{display:block;}
body.tier-free .ad-zone-flex{display:flex;}
/* Practitioner: hide all ads */
body.tier-practitioner .ad-zone{display:none!important;}
body.tier-practitioner .ad-zone-flex{display:none!important;}
/* Responsive — hide skyscraper on tablet/mobile */
@media(max-width:1024px){.ad-skyscraper{display:none!important;}}

.match-tab-btn{background:transparent;border:1px solid var(--bdr);color:var(--g5);border-radius:5px;cursor:pointer;transition:all 0.15s;letter-spacing:0.03em;font-weight:500;transform:translateY(0);position:relative;top:0;}
.match-tab-btn.on{background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.45);color:var(--cyan);font-weight:700;top:-1px;}
.match-tab-btn:hover{border-color:rgba(0,194,255,0.3);color:var(--off);top:-1px;}
.mr-tab-btn{background:transparent;border:1px solid var(--bdr);color:var(--g5);border-radius:5px;cursor:pointer;transition:all 0.15s;letter-spacing:0.03em;font-weight:500;position:relative;top:0;}
.mr-tab-btn.on{background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.45);color:var(--cyan);font-weight:700;top:-1px;}
.mr-tab-btn:hover{border-color:rgba(0,194,255,0.3);color:var(--off);top:-1px;}
/* ── GLOSSARY & TOOLTIPS ──────────────────────────────────────────────── */
.gloss-term{
  border-bottom:1px dotted var(--cyan);cursor:help;color:inherit;
  position:relative;display:inline;
}
.gloss-tooltip{
  display:none;position:fixed;left:0;top:0;
  background:#0d1424;
  border:1px solid rgba(0,194,255,0.4);border-radius:6px;
  padding:8px 11px;font-size:0.72rem;color:#e2e8f0;
  white-space:normal;width:230px;z-index:9999;line-height:1.5;
  box-shadow:0 8px 28px rgba(0,0,0,0.85);pointer-events:none;
  font-style:normal;font-weight:normal;
}
/* gloss-tooltip shown via JS */
/* Glossary page */
.gloss-section{margin-bottom:16px;}
.gloss-letter{
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;
  color:var(--cyan);border-bottom:1px solid rgba(0,194,255,0.2);
  padding-bottom:4px;margin-bottom:8px;
}
.gloss-entry{
  display:grid;grid-template-columns:180px 1fr;gap:8px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.04);
  align-items:start;
}
.gloss-entry-term{
  font-size:0.8rem;font-weight:700;color:var(--gold);
  font-family:'DM Sans',sans-serif;
}
.gloss-entry-def{font-size:0.78rem;color:var(--off);line-height:1.5;}
.gloss-entry-ref{font-size:0.68rem;color:var(--g5);margin-top:2px;}
.gloss-search{
  width:100%;background:var(--g7);border:1px solid rgba(0,194,255,0.2);
  color:var(--off);padding:8px 12px;border-radius:8px;
  font-size:0.82rem;font-family:'DM Sans',sans-serif;outline:none;
  margin-bottom:12px;
}
.gloss-search:focus{border-color:var(--cyan);}
.gloss-quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.gloss-quick-btn{
  padding:3px 10px;border-radius:12px;font-size:0.68rem;
  background:var(--cdim,rgba(0,194,255,0.1));border:1px solid rgba(0,194,255,0.2);
  color:var(--cyan);cursor:pointer;font-family:'DM Sans',sans-serif;
}
.gloss-quick-btn:hover{background:rgba(0,194,255,0.2);}

/* ── VISIBLE SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px;}
#pg-statistics::-webkit-scrollbar{width:10px;}
#pg-statistics::-webkit-scrollbar-thumb{background:rgba(16,185,129,0.5);border-radius:5px;}
.panel::-webkit-scrollbar{width:8px;}
.panel::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:4px;}
.panel::-webkit-scrollbar-thumb{background:rgba(0,194,255,0.45);border-radius:4px;}
.panel::-webkit-scrollbar-thumb:hover{background:rgba(0,194,255,0.75);}
.tp::-webkit-scrollbar{width:8px;}
.tp::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:4px;}
.tp::-webkit-scrollbar-thumb{background:rgba(0,194,255,0.45);border-radius:4px;}
.tp::-webkit-scrollbar-thumb:hover{background:rgba(0,194,255,0.75);}
#pg-statistics{scrollbar-color:rgba(16,185,129,0.5) rgba(255,255,255,0.04);}
::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);border-radius:5px;}
::-webkit-scrollbar-thumb{background:rgba(0,194,255,0.45);border-radius:5px;border:2px solid rgba(0,0,0,0.25);}
::-webkit-scrollbar-thumb:hover{background:rgba(0,194,255,0.75);}
*{scrollbar-width:thin;scrollbar-color:rgba(0,194,255,0.45) rgba(255,255,255,0.04);}

::-webkit-scrollbar{width:10px;height:10px;}
#pg-statistics::-webkit-scrollbar{width:10px;}
#pg-statistics::-webkit-scrollbar-thumb{background:rgba(16,185,129,0.5);border-radius:5px;}
.panel::-webkit-scrollbar{width:8px;}
.panel::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:4px;}
.panel::-webkit-scrollbar-thumb{background:rgba(0,194,255,0.45);border-radius:4px;}
.panel::-webkit-scrollbar-thumb:hover{background:rgba(0,194,255,0.75);}
.tp::-webkit-scrollbar{width:8px;}
.tp::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:4px;}
.tp::-webkit-scrollbar-thumb{background:rgba(0,194,255,0.45);border-radius:4px;}
.tp::-webkit-scrollbar-thumb:hover{background:rgba(0,194,255,0.75);}
#pg-statistics{scrollbar-color:rgba(16,185,129,0.5) rgba(255,255,255,0.04);}
::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);border-radius:5px;}
::-webkit-scrollbar-thumb{background:rgba(0,194,255,0.45);border-radius:5px;border:2px solid rgba(0,0,0,0.2);}
::-webkit-scrollbar-thumb:hover{background:rgba(0,194,255,0.75);}
*{scrollbar-width:thin;scrollbar-color:rgba(0,194,255,0.45) rgba(255,255,255,0.04);}

/* ── STORY TOOLTIP SYSTEM ──────────────────────────────────── */
.tip-wrap{position:relative;display:inline-flex;align-items:center;gap:6px;}
.tip-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:rgba(0,194,255,0.12);border:1px solid rgba(0,194,255,0.3);
  color:var(--cyan);font-size:0.6rem;font-weight:700;
  cursor:pointer;flex-shrink:0;font-style:normal;
  transition:background 0.2s;font-family:'DM Sans',sans-serif;
}
.tip-icon:hover{background:rgba(0,194,255,0.25);}
.tip-box{
  display:none;position:fixed;z-index:9998;
  left:0;top:0;
  width:280px;background:#0d1424;
  border:1px solid rgba(0,194,255,0.35);
  border-left:3px solid var(--cyan);
  border-radius:8px;padding:10px 12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.9);
  pointer-events:none;
}
.tip-box.left{left:auto;right:24px;}
/* tip-box shown via JS */
.tip-line1{display:block;font-size:0.76rem;font-weight:700;color:var(--white);margin-bottom:4px;line-height:1.4;}
.tip-line2{display:block;font-size:0.71rem;color:var(--g3);line-height:1.5;}
/* ── ONBOARDING OVERLAY ─────────────────────────────────────── */
.onboard-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.82);
  z-index:500;align-items:center;justify-content:center;
}
.onboard-overlay.on{display:flex;}
.onboard-card{
  background:var(--card);border:1px solid rgba(0,194,255,0.2);
  border-radius:14px;padding:36px 40px;width:100%;max-width:480px;
  text-align:center;position:relative;
}
.onboard-step{font-size:0.65rem;color:var(--g5);text-transform:uppercase;
  letter-spacing:0.1em;margin-bottom:8px;}
.onboard-icon{font-size:2.8rem;margin-bottom:12px;}
.onboard-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;
  color:var(--white);letter-spacing:0.06em;margin-bottom:10px;}
.onboard-body{font-size:0.84rem;color:var(--g3);line-height:1.6;margin-bottom:24px;}
.onboard-dots{display:flex;gap:6px;justify-content:center;margin-bottom:20px;}
.onboard-dot{width:8px;height:8px;border-radius:50%;background:var(--g5);transition:background 0.2s;}
.onboard-dot.on{background:var(--cyan);}
.onboard-nav{display:flex;gap:10px;justify-content:center;}
.onboard-btn{
  padding:9px 22px;border-radius:8px;font-size:0.82rem;
  font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;border:none;
}
.onboard-btn-primary{background:linear-gradient(90deg,var(--blue),var(--cyan));color:var(--white);}
.onboard-btn-skip{background:transparent;color:var(--g5);border:1px solid var(--bdr);}

/* ── GLOSSARY INLINE TERMS ─────────────────────────────────── */
.gterm {
  border-bottom: 1px dashed var(--cyan);
  color: inherit;
  cursor: help;
  position: relative;
  display: inline;
  white-space: normal;
}
.gterm-tip {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 274px;
  background: #0d1424;
  border: 1px solid rgba(0,194,255,0.4);
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 10px 13px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.85);
  pointer-events: none;
  font-style: normal;
  font-weight: normal;
}
/* gterm-tip shown/hidden via JS */
.gterm-label {
  display: block;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 5px;
  font-family: 'DM Sans', sans-serif;
  text-transform: capitalize;
}
.gterm-body {
  display: block;
  font-size: 0.71rem;
  color: #94a3b8;
  line-height: 1.55;
  font-family: 'DM Sans', sans-serif;
}

/* Share Feedback button (CN-XXX) -- .b/.bc give it the header-badge look,
   but a native <button> needs its font-family and border explicitly reset
   since browsers don't inherit these onto form controls by default. */
#tb-feedback-btn{font-family:inherit;cursor:pointer;}
#tb-feedback-btn:disabled{opacity:0.4;cursor:not-allowed;}

/* Results Checker — Full List (CN-XXX): header alignment was left while its
   numeric/ball column values render right-aligned; Tag stays left-aligned
   since its values are text, not numbers. Scoped utility class, not a
   change to .t th's base rule, so no other table in the app is affected. */
.th-r{text-align:right;}

/* CN-MOB-06: browser-update recommendation banner. Not mobile-only by
   design — a genuinely outdated browser on desktop gets the same
   recommendation. See the feature-detection script in index.html <head>. */
.mob-browser-banner{
  position:fixed;top:0;left:0;right:0;z-index:99999;
  background:#1F3B57;color:#fff;padding:10px 16px;
  font-family:'DM Sans',sans-serif;font-size:14px;text-align:center;
}