: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;}
}
/* 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;}
  /* 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;}
  /* 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;}
}
/* 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;
}