/* ============================================================
   ETARI CLIENT DASHBOARD - design system lifted 1:1 from
   etaridigitals.com (style.css). Same tokens, same texture.
   ============================================================ */

/* self-hosted fonts (GDPR: no third-party font CDNs) */
@font-face{font-family:'Clash Display';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ClashDisplay-400.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ClashDisplay-500.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ClashDisplay-600.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ClashDisplay-700.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Satoshi-700.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/Satoshi-900.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/JetBrainsMono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/JetBrainsMono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/JetBrainsMono-600.woff2') format('woff2')}

:root{
  --bg:#080D0D;
  --surface:#0F1A1A;
  --surface-2:#0C1414;
  --deep:#002f2a;
  --teal:#1fa79a;
  --teal-soft:rgba(31,167,154,.12);
  --gold:#C9A227;
  --gold-light:#E8C84A;
  --text:#F5F6F4;
  --muted:#C2C9C7; /* was #8A9090 — brightened for readability on the dark bg (client feedback 2026-07) */
  --green:#28d943;
  --red:#e05252;
  --line:rgba(31,167,154,.14);
  --gold-line:rgba(201,162,39,.25);
  --sidebar-w:248px;
  --topbar-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Satoshi',Helvetica,Arial,sans-serif;
  font-weight:500;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#080D0D}

/* grain overlay - same texture as the website */
body::before{
  content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{font-family:'Clash Display','Satoshi',Helvetica,sans-serif;font-weight:600;line-height:1.1;letter-spacing:.025em;color:var(--text)}
.mono{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:600}
.mono.gold{color:var(--gold-light)}
a{color:var(--teal);text-decoration:none}
button{font-family:inherit}

/* ============ APP LAYOUT ============ */
.app{display:flex;min-height:100vh}

/* ============ SIDEBAR ============ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:50;
  background:var(--surface-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:26px 0 20px;
  transition:transform .3s ease;
}
.sb-brand{display:flex;align-items:center;gap:11px;padding:0 24px 24px;text-decoration:none}
.sb-brand img{height:34px;width:auto;display:block}
.sb-brand .brand-name{font-weight:800;font-size:.98rem;color:var(--text);letter-spacing:-.01em}
.sb-brand .brand-name span{color:var(--teal)}

.sb-client{
  margin:0 18px 26px;padding:14px 16px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(150deg,rgba(0,47,42,.5),var(--surface) 70%);
}
.sb-client .mono{display:block;margin-bottom:6px;font-size:.56rem;color:var(--muted)}
.sb-client .cname{font-weight:700;font-size:.95rem;color:var(--text);line-height:1.3}
.sb-client .cplan{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--teal);letter-spacing:.1em;margin-top:4px}

.sb-nav{
  flex:1;display:flex;flex-direction:column;gap:2px;padding:0 12px;
  overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(31,167,154,.3) transparent;
}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(31,167,154,.25);border-radius:3px}
.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(31,167,154,.4)}
.sb-nav::-webkit-scrollbar-track{background:transparent}
.sb-nav .nav-label{padding:6px 14px 8px;font-size:.56rem;color:var(--muted)}

/* standout Home + Start Here pair */
.sb-home{
  border:1px solid var(--gold-line);background:rgba(201,162,39,.06);color:var(--text);
  margin-bottom:8px;font-weight:600;
}
.sb-home svg{opacity:1;color:var(--gold-light)}
.sb-home:hover{background:rgba(201,162,39,.12);color:var(--text)}
.sb-home.active{background:rgba(201,162,39,.13);color:var(--gold-light);border-color:var(--gold)}
.sb-home.active::before{display:none}
.sb-start{
  border:1px solid rgba(31,167,154,.35);background:rgba(31,167,154,.06);color:var(--text);
  margin-bottom:12px;font-weight:600;
}
.sb-start svg{opacity:1;color:var(--teal)}
.sb-start:hover{background:rgba(31,167,154,.12);color:var(--text)}
.sb-start.active{background:rgba(31,167,154,.14);color:var(--teal);border-color:var(--teal)}
.sb-start.active::before{display:none}

/* collapsible groups */
.sb-grp{display:flex;flex-direction:column}
.sb-grp + .sb-grp{margin-top:8px}
.sb-grp-foot{margin-top:auto}
.sb-grp-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;cursor:pointer;
  background:none;border:none;text-align:left;padding:7px 14px 9px;transition:opacity .2s;
}
.sb-grp-head:hover{opacity:.75}
.sb-grp-head .chev{font-size:.62rem;color:var(--muted);transition:transform .25s}
.sb-grp.collapsed .sb-grp-head .chev{transform:rotate(-90deg)}
.sb-grp-body{display:flex;flex-direction:column;gap:2px;overflow:hidden;max-height:340px;opacity:1;transition:max-height .28s ease,opacity .2s ease}
.sb-grp.collapsed .sb-grp-body{max-height:0;opacity:0}
.sb-link{
  display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:2px;
  color:var(--muted);font-size:.9rem;font-weight:500;cursor:pointer;background:none;border:none;
  width:100%;text-align:left;transition:color .2s,background .2s;position:relative;
}
.sb-link svg{width:17px;height:17px;flex:none;opacity:.75}
.sb-link:hover{color:var(--text);background:rgba(31,167,154,.06)}
.sb-link.active{color:var(--gold-light);background:rgba(201,162,39,.07)}
.sb-link.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--gold)}
.sb-link.active svg{opacity:1}

.sb-foot{padding:14px 24px 0;border-top:1px solid var(--line);margin-top:14px}
.sb-foot .user{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.sb-foot .avatar{
  width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--deep);border:1px solid var(--line);color:var(--teal);
  font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;
}
.sb-foot .uname{font-size:.8rem;font-weight:600;color:var(--text);line-height:1.2}
.sb-foot .uemail{font-size:.66rem;color:var(--muted);font-family:'JetBrains Mono',monospace}
.sb-foot .logout{
  display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:.74rem;font-family:'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  transition:color .2s;padding:2px 0;
}
.sb-foot .logout:hover{color:var(--red)}

/* ============ MAIN ============ */
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;transition:margin-left .3s ease}

/* full sidebar collapse - content goes full width */
body.nav-collapsed .sidebar{transform:translateX(-100%)}
body.nav-collapsed .main{margin-left:0}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:2px;padding:8px;color:var(--text);
  transition:border-color .2s,color .2s;
}
.nav-toggle svg{width:18px;height:18px;display:block}
.nav-toggle:hover{border-color:var(--teal);color:var(--teal)}
body.nav-collapsed .nav-toggle{border-color:var(--gold-line);color:var(--gold-light)}

/* topbar */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 36px;background:rgba(8,13,13,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar h1{font-size:1.45rem;font-weight:600}
.topbar .tb-right{display:flex;align-items:center;gap:14px}

.demo-badge{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-light);border:1px dashed var(--gold-line);padding:6px 12px;border-radius:2px;
  background:rgba(201,162,39,.05);white-space:nowrap;
}

/* timeframe selector */
.tf{position:relative}
.tf-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--text);
  font-size:.8rem;font-weight:500;padding:10px 16px;transition:border-color .2s;white-space:nowrap;
}
.tf-btn:hover{border-color:var(--teal)}
.tf-btn .cal{color:var(--teal)}
.tf-btn .caret{font-size:.55rem;color:var(--muted);transition:transform .25s}
.tf.open .tf-btn .caret{transform:rotate(180deg)}
.tf-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:250px;z-index:60;
  background:rgba(12,20,20,.97);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:2px;padding:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,visibility .2s,transform .2s;
}
.tf.open .tf-menu{opacity:1;visibility:visible;transform:none}
.tf-menu button.preset{
  display:flex;align-items:center;justify-content:space-between;width:100%;gap:18px;cursor:pointer;
  padding:10px 14px;border:none;background:none;border-radius:0;color:var(--muted);font-size:.84rem;text-align:left;
  transition:background .2s,color .2s;
}
.tf-menu button.preset:hover{background:rgba(201,162,39,.07);color:var(--gold)}
.tf-menu button.preset.sel{color:var(--gold-light)}
.tf-menu button.preset.sel::after{content:"●";font-size:.5rem;color:var(--gold)}
.tf-custom{border-top:1px solid var(--line);margin-top:8px;padding:14px 14px 8px}
.tf-custom .mono{display:block;margin-bottom:10px;font-size:.56rem;color:var(--muted)}
.tf-custom .dates{display:flex;align-items:center;gap:8px}
.tf-custom input[type=date]{
  background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--text);
  font-family:'JetBrains Mono',monospace;font-size:.68rem;padding:8px;width:100%;color-scheme:dark;
}
.tf-custom input[type=date]:focus{outline:none;border-color:var(--teal)}
.tf-custom .apply{
  margin-top:10px;width:100%;cursor:pointer;
  background:var(--gold);color:#080D0D;border:1px solid var(--gold);border-radius:0;
  font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:10px;
  transition:background .2s;
}
.tf-custom .apply:hover{background:var(--gold-light)}

/* live clock */
.clock{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--text);
  font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:500;padding:10px 14px;
  font-variant-numeric:tabular-nums;
}
.clock svg{width:15px;height:15px;color:var(--teal);flex:none}
@media(max-width:560px){.clock{display:none}}

/* notifications bell */
.bell{position:relative}
.bell-btn{
  display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
  width:38px;height:38px;border-radius:50%;flex:none;background:var(--surface);border:1px solid var(--line);color:var(--text);
  transition:border-color .2s,color .2s,background .2s;
}
.bell-btn svg{width:18px;height:18px}
.bell-btn:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(201,162,39,.06)}
.bell.open .bell-btn{border-color:var(--gold);color:var(--gold-light);background:rgba(201,162,39,.08)}
.bell-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--gold);color:#080D0D;font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;
  display:none;align-items:center;justify-content:center;border:2px solid var(--bg);
}
.bell-menu{
  position:absolute;top:calc(100% + 10px);right:0;width:320px;z-index:60;
  background:rgba(12,20,20,.97);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:2px;padding:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,visibility .2s,transform .2s;
  max-height:60vh;overflow-y:auto;
}
.bell.open .bell-menu{opacity:1;visibility:visible;transform:none}
.bell-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.bell-item{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-radius:2px;padding:11px 10px;color:var(--text);transition:background .2s;
}
.bell-item:hover{background:rgba(201,162,39,.07)}
.bell-ico{flex:none;width:20px;text-align:center;color:var(--gold-light);font-size:.8rem;line-height:1.4}
.bell-txt{font-size:.84rem;line-height:1.4}
.bell-empty{color:var(--text);font-size:.84rem;padding:14px 10px;text-align:center}
@media(max-width:560px){.bell-menu{width:min(340px,calc(100vw - 24px));right:0}}

/* follow-everywhere strategy-call button */
.float-book{
  position:fixed;right:24px;bottom:24px;z-index:70;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#080D0D;border:1px solid var(--gold-light);
  font-weight:700;font-size:.74rem;letter-spacing:.06em;padding:14px 20px;border-radius:99px;
  box-shadow:0 10px 34px rgba(201,162,39,.4);transition:transform .25s,box-shadow .25s;
}
.float-book svg{width:17px;height:17px}
.float-book:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(201,162,39,.55)}
@media(max-width:560px){.float-book{right:16px;bottom:16px;padding:13px 16px}.float-book span{display:none}}

/* contact popover */
.contact{position:relative}
.contact-btn{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--surface);border:1px solid var(--line);color:var(--teal);
  font-family:'Clash Display',sans-serif;font-size:1.05rem;font-weight:600;line-height:1;
  transition:border-color .2s,color .2s,background .2s;
}
.contact-btn:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(201,162,39,.06)}
.contact.open .contact-btn{border-color:var(--gold);color:var(--gold-light);background:rgba(201,162,39,.08)}
.contact-menu{
  position:absolute;top:calc(100% + 10px);right:0;width:300px;z-index:60;
  background:rgba(12,20,20,.97);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:2px;padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,visibility .2s,transform .2s;
}
.contact.open .contact-menu{opacity:1;visibility:visible;transform:none}
.cm-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.cm-head .avatar{
  width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--deep);border:1px solid var(--gold-line);color:var(--gold-light);
  font-family:'Clash Display',sans-serif;font-size:1rem;font-weight:600;
}
.cm-head .who h4{font-size:1rem;font-family:'Satoshi',sans-serif;font-weight:700}
.cm-head .who .role{font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-top:3px;line-height:1.5}
.cm-note{color:var(--text);font-size:.82rem;line-height:1.55;margin-bottom:16px}
.cm-acts{display:flex;gap:10px;margin-bottom:14px}
.cm-act{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:11px 10px;border-radius:2px;border:1px solid var(--line);text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:all .2s ease;
}
.cm-act svg{width:15px;height:15px;flex:none}
.cm-act.wa{color:var(--green);border-color:rgba(40,217,67,.35)}
.cm-act.wa:hover{background:rgba(40,217,67,.1);border-color:rgba(40,217,67,.6)}
.cm-act.em{color:var(--gold-light);border-color:var(--gold-line)}
.cm-act.em:hover{background:rgba(201,162,39,.1);border-color:var(--gold)}
.cm-link{
  width:100%;cursor:pointer;background:none;border:none;border-top:1px solid var(--line);padding:14px 0 2px;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;transition:color .2s;
}
.cm-link:hover{color:var(--gold)}
@media(max-width:560px){.contact-menu{width:min(340px,calc(100vw - 24px));right:0}}

/* compare toggle */
.cmp{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;
  font-size:.74rem;color:var(--muted);padding:10px 14px;transition:border-color .2s,color .2s;white-space:nowrap;
}
.cmp:hover{border-color:var(--teal)}
.cmp .sw{width:30px;height:16px;border-radius:99px;background:rgba(138,144,144,.25);position:relative;transition:background .25s;flex:none}
.cmp .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:left .25s,background .25s}
.cmp.on{color:var(--text);border-color:var(--gold-line)}
.cmp.on .sw{background:rgba(201,162,39,.35)}
.cmp.on .sw::after{left:16px;background:var(--gold-light)}

/* content area */
.content{padding:34px 36px 70px;position:relative}
.content::before{
  content:"";position:absolute;top:0;left:0;right:0;height:420px;z-index:0;pointer-events:none;opacity:.45;
  background:radial-gradient(ellipse 70% 100% at 80% 0%,rgba(0,47,42,.5) 0%,transparent 65%);
}
.content>*{position:relative;z-index:1}

.range-note{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.06em;color:var(--text);margin-bottom:24px}
.range-note em{color:var(--teal);font-style:normal}

/* ============ KPI CARDS ============ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px}

/* featured tier - money/outcome metrics, bigger */
.kpis-hero{grid-template-columns:repeat(auto-fit,minmax(218px,1fr));margin-bottom:14px}
.kpi.feat{padding:26px 24px 22px;background:linear-gradient(155deg,rgba(0,47,42,.32),var(--surface) 62%)}
.kpi.feat::before{opacity:.85}
.kpi.feat .label{font-size:.62rem;color:var(--text);opacity:.9}
.kpi.feat .value{font-size:2.6rem}
.kpi.feat .delta{margin-top:14px;font-size:.7rem}
@media(max-width:560px){.kpi.feat .value{font-size:2.1rem}}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:22px 22px 18px;
  position:relative;overflow:visible;transition:transform .3s,border-color .3s;
}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent 65%);opacity:0;transition:opacity .3s}
.kpi:hover{transform:translateY(-3px);border-color:var(--gold-line);z-index:20}
.kpi:hover::before{opacity:1}
.kpi .label{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:12px}
.kpi .label .info-tip{width:15px;height:15px;font-size:.54rem;letter-spacing:0}
.kpi .info-pop{width:220px;letter-spacing:normal}
.kpi .value{font-family:'Clash Display',sans-serif;font-size:1.85rem;font-weight:600;color:var(--text);line-height:1;letter-spacing:.01em}
.kpi .value em{color:var(--gold);font-style:normal}
.kpi .delta{display:inline-flex;align-items:center;gap:5px;margin-top:11px;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.06em}
.kpi .delta.up{color:var(--green)}
.kpi .delta.down{color:var(--red)}
.kpi .delta.flat{color:var(--muted)}
.kpi .delta .vs{color:var(--muted);letter-spacing:.04em}

/* ============ CARDS / PANELS ============ */
.grid{display:grid;gap:16px;margin-bottom:26px}
.grid.c2{grid-template-columns:2fr 1fr}
.grid.c2e{grid-template-columns:1fr 1fr}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:26px;
  min-width:0;
}
.panel .p-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.panel .p-head h3{font-size:1.08rem}
.panel .p-head .mono{font-size:.56rem;color:var(--muted)}
.chart-wrap{position:relative;height:300px}
.chart-wrap.tall{height:340px}
.chart-wrap.short{height:230px}

/* legend chips */
.legend{display:flex;gap:18px;flex-wrap:wrap}
.legend .li{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.legend .dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ============ OVERVIEW: goals roll-up, contribution, movers ============ */
.goals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.goal-tile{border:1px solid var(--line);border-radius:2px;padding:16px;background:var(--surface-2)}
.goal-tile.clickable{cursor:pointer;transition:border-color .2s,background .2s}
.goal-tile.clickable:hover{border-color:var(--teal);background:rgba(31,167,154,.06)}
.scope-note{font-size:.78rem;color:var(--text);line-height:1.5;margin:-12px 0 18px;border-left:2px solid var(--gold-line);padding:6px 0 6px 12px}
.admin-lock-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:11px 14px;background:rgba(201,162,39,.10);border:1px solid var(--gold-line);border-radius:4px;color:var(--gold-light);font-size:.82rem;line-height:1.5}
.admin-lock-banner .alb-tag{font:600 9px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#0b0f0e;background:var(--gold);padding:4px 7px;border-radius:4px;flex:none}
.gt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.gt-label{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gt-bar{position:relative;height:8px;background:var(--surface);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.gt-fill{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.gt-fill.dim{background:rgba(138,144,144,.5)}
.gt-mark{position:absolute;top:0;bottom:0;width:2px;background:var(--text);opacity:.6}
.gt-foot{margin-top:11px;font-size:.84rem;color:var(--text);font-variant-numeric:tabular-nums}

.contrib-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;border:1px solid var(--line);margin-bottom:18px}
.contrib-bar .cb-seg{height:100%}
.contrib-legend{display:flex;flex-direction:column;gap:12px}
.contrib-legend>div{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--text)}
.contrib-legend .dot{width:9px;height:9px;border-radius:50%;flex:none}
.contrib-legend strong{color:var(--text);font-weight:600}
.contrib-legend .dim{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.66rem}

.movers{display:flex;flex-direction:column}
.mover{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:1px dashed rgba(138,144,144,.14)}
.mover:last-child{border-bottom:none}
.mover .mv-l{font-size:.9rem;color:var(--text)}
.mover .mv-v{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:500}
.mover .mv-v.pos{color:var(--green)}.mover .mv-v.neg{color:var(--red)}.mover .mv-v.dim{color:var(--muted)}
.contrib-chart{height:150px;margin-top:18px}

/* ============ ANALYTICS: funnel + table dots ============ */
.funnel{display:flex;flex-direction:column;gap:16px}
.fs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.fs-label{font-size:.9rem;color:var(--text);font-weight:600}
.fs-count{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text);font-variant-numeric:tabular-nums}
.fs-bar{height:26px;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.fs-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:2px;transition:width .4s ease}
.fs-drop{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-top:6px;text-align:right}
.tbl .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:middle}

/* ============ PLATFORM SUMMARY CARDS (home) ============ */
.spark{height:38px;margin:4px 0 16px;pointer-events:none}
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-bottom:26px}
.plat{
  background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:28px;
  display:flex;flex-direction:column;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;text-align:left;
}
.plat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent 65%);opacity:0;transition:opacity .3s}
.plat:hover{transform:translateY(-5px);border-color:var(--gold-line);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.plat:hover::before{opacity:1}
.plat .mono{display:block;margin-bottom:14px}
.plat h3{font-size:1.22rem;margin-bottom:18px}
.plat .pm{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);padding-top:18px}
.plat .pm .v{font-size:1.22rem;font-weight:800;color:var(--gold);font-family:'Satoshi',sans-serif}
.plat .pm .l{font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:5px;line-height:1.5}
.plat .go{
  margin-top:20px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  transition:gap .25s;
}
.plat:hover .go{gap:13px}

/* ============ TABLES ============ */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:right;padding:0 14px 12px;border-bottom:1px solid var(--line);font-weight:500;white-space:nowrap;
}
.tbl th:first-child{text-align:left;padding-left:2px}
.tbl td{
  padding:13px 14px;border-bottom:1px dashed rgba(138,144,144,.14);
  font-size:.85rem;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tbl td:first-child{text-align:left;padding-left:2px;font-weight:600;white-space:normal}
.tbl tr:last-child td{border-bottom:none}
.tbl tfoot .tbl-total td{border-top:1px solid var(--line);border-bottom:none;font-weight:700;color:var(--text);padding-top:14px}
.tbl tfoot .tbl-total td:first-child{font-family:'Satoshi',sans-serif}
.tbl tr:hover td{background:rgba(31,167,154,.03)}
.tbl .sub{display:block;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--muted);letter-spacing:.08em;margin-top:3px;font-weight:500}
.tbl .pos{color:var(--green)}
.tbl .neg{color:var(--red)}
.tbl .dim{color:var(--muted)}
.badge{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(31,167,154,.4);color:var(--teal);padding:3px 9px;border-radius:99px;
}
.badge.gold{border-color:var(--gold-line);color:var(--gold-light)}
.badge.green{border-color:rgba(40,217,67,.4);color:var(--green)}
.badge.dim{border-color:rgba(138,144,144,.3);color:var(--muted)}
.badge.neg{border-color:rgba(224,82,82,.4);color:var(--red)}

/* ---- SEO content calendar ---- */
.cc-head{margin-bottom:12px}
.cc-status{margin-bottom:16px}
.rmf-n{font-family:'JetBrains Mono',monospace;font-size:.82em;opacity:.7;margin-left:2px}
.cc-sub{color:var(--text);font-size:.72rem;margin-top:3px}
.inv-links a{color:var(--teal);text-decoration:none;margin-right:14px;white-space:nowrap}
.inv-links a:hover{color:var(--gold-light);text-decoration:underline}
.calc-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.calc-save .btn:disabled{opacity:.6;cursor:default}
.calc-save-note{color:var(--text);font-size:.78rem;flex:1;min-width:140px}

/* ============ TEAM UPDATES FEED ============ */
.feed{display:flex;flex-direction:column}
.feed .item{display:flex;gap:16px;padding:18px 2px;border-bottom:1px dashed rgba(138,144,144,.14)}
.feed .item:last-child{border-bottom:none}
.feed .when{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--teal);letter-spacing:.08em;white-space:nowrap;padding-top:4px;min-width:74px}
.feed .body{font-size:.88rem;color:var(--text);line-height:1.55}
.feed .body strong{color:var(--text);font-weight:600;display:block;margin-bottom:2px}

/* ============ ONBOARDING ============ */
.ob-hero{
  border:1px solid var(--gold-line);border-radius:2px;padding:44px;margin-bottom:26px;
  background:linear-gradient(135deg,rgba(201,162,39,.06),transparent 55%),var(--surface);
  position:relative;overflow:hidden;
}
.ob-hero .mono{display:block;margin-bottom:16px}
.ob-hero h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:22ch;margin-bottom:14px}
.ob-hero p{color:var(--text);max-width:60ch;font-size:.95rem}
.ob-hero p strong{color:var(--text)}

.steps-v{display:flex;flex-direction:column}
.step-v{display:flex;gap:20px;padding:20px 2px;border-bottom:1px dashed rgba(138,144,144,.14);align-items:flex-start}
.step-v:last-child{border-bottom:none}
.step-v .ico{
  width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600;margin-top:2px;
  border:1px solid var(--line);color:var(--muted);background:var(--surface-2);
}
.step-v.done .ico{border-color:rgba(40,217,67,.5);color:var(--green);background:rgba(40,217,67,.07)}
.step-v.now .ico{border-color:var(--gold);color:var(--gold-light);background:rgba(201,162,39,.08)}
.step-v h4{font-size:.98rem;font-weight:700;font-family:'Satoshi',sans-serif}
.step-v p{color:var(--text);font-size:.85rem;margin-top:3px}
.step-v .st{margin-left:auto;flex:none;margin-top:4px}

.step-v .subs{list-style:none;margin:10px 0 4px;display:flex;flex-direction:column;gap:0}
.step-v .subs li{
  padding:7px 0 7px 20px;position:relative;color:var(--text);font-size:.84rem;
  border-bottom:1px dashed rgba(138,144,144,.12);
}
.step-v .subs li:last-child{border-bottom:none}
.step-v .subs li::before{content:"+";position:absolute;left:2px;color:var(--gold);font-weight:700}
.step-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  background:transparent;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border:1px solid var(--gold-line);padding:9px 16px;
  transition:all .25s ease;
}
.step-link:hover{background:var(--gold);color:#080D0D;border-color:var(--gold)}

.ob-note{
  border:1px solid var(--gold-line);border-radius:2px;padding:26px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(201,162,39,.07),transparent 60%),var(--surface);
}
.ob-note .mono{display:block;margin-bottom:12px}
.ob-note p{color:var(--text);font-size:.92rem;line-height:1.6}

/* ============ HELP CENTER ============ */
.qa-filters{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.fbtn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--muted);
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 18px;transition:all .25s ease;
}
.fbtn span{color:var(--teal);font-size:.58rem;opacity:.9}
.fbtn:hover{border-color:var(--gold-line);color:var(--text)}
.fbtn.on{background:rgba(201,162,39,.08);border-color:var(--gold-line);color:var(--gold-light)}
.fbtn.on span{color:var(--gold)}

.qa-sec{margin-bottom:34px}
.qa-sec-head{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.qa-sec-head .mono{flex:none}
.qa-line{flex:1;height:1px;background:var(--line)}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.qa-card{
  background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:26px 24px;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;cursor:pointer;
  position:relative;overflow:hidden;min-height:170px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.qa-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent 65%);opacity:0;transition:opacity .3s}
.qa-card:hover{transform:translateY(-4px);border-color:var(--gold-line);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.qa-card:hover::before{opacity:1}
.qa-card h3{font-size:1.02rem;font-family:'Satoshi',sans-serif;font-weight:700;line-height:1.35;margin-bottom:10px;transition:color .25s}
.qa-card:hover h3{color:var(--gold-light)}
.qa-card p{color:var(--text);font-size:.84rem;line-height:1.55;flex:1;margin-bottom:16px}
.qa-card .go{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:7px;transition:gap .25s;
}
.qa-card:hover .go{gap:12px}

.art-back{
  display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);padding:0 0 18px;transition:color .2s;
}
.art-back:hover{color:var(--gold)}
.art{max-width:860px;padding:40px 44px}
.art>.mono{display:block;margin-bottom:14px}
.art h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:16px}
.art-intro{color:var(--text);font-size:1rem;max-width:64ch;margin-bottom:8px}
.art-h{font-size:1.05rem;font-weight:700;font-family:'Satoshi',sans-serif;margin:30px 0 6px;color:var(--gold-light)}
.art-p{color:var(--text);font-size:.92rem;max-width:64ch;margin-top:8px}
.art-steps{list-style:none;counter-reset:st;margin-top:12px}
.art-steps li{
  counter-increment:st;position:relative;padding:12px 0 12px 44px;
  color:var(--text);font-size:.92rem;border-bottom:1px dashed rgba(138,144,144,.14);max-width:64ch;
}
.art-steps li:last-child{border-bottom:none}
.art-steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:13px;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--gold);letter-spacing:.06em;
  border:1px solid var(--gold-line);padding:3px 7px;border-radius:2px;
}
.art-note{margin-top:30px}
.art-foot{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

.sub-link{
  display:inline-flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;
  color:var(--text);font-size:.84rem;font-family:'Satoshi',sans-serif;padding:0;text-align:left;
  transition:color .2s;
}
.sub-link .arr{
  font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);opacity:.85;transition:color .2s;
}
.sub-link:hover{color:var(--gold-light)}
.sub-link:hover .arr{color:var(--gold)}

.check{display:flex;flex-direction:column}
.check .ck{display:flex;align-items:flex-start;gap:13px;padding:13px 2px;border-bottom:1px dashed rgba(138,144,144,.14);font-size:.88rem;color:var(--text)}
.check .ck:last-child{border-bottom:none}
.check .box{
  width:17px;height:17px;border:1px solid var(--line);border-radius:2px;flex:none;margin-top:3px;
  display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--green);
}
.check .ck.done .box{border-color:rgba(40,217,67,.5);background:rgba(40,217,67,.07)}
.check .ck.done{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(138,144,144,.4)}

.contact-card{display:flex;align-items:center;gap:18px}
.contact-card .avatar{
  width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--deep);border:1px solid var(--gold-line);color:var(--gold-light);
  font-family:'Clash Display',sans-serif;font-size:1.1rem;font-weight:600;
}
.contact-card .who h4{font-size:1.05rem;font-family:'Satoshi',sans-serif;font-weight:700}
.contact-card .who .role{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-top:2px}
.contact-card .who .mail{font-size:.8rem;color:var(--text);margin-top:6px}
.contact-card .who .mail a{color:var(--gold)}

/* ============ HOME HERO ============ */
.home-hero{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  border:1px solid var(--gold-line);border-radius:2px;padding:30px 34px;margin-bottom:26px;
  background:linear-gradient(135deg,rgba(201,162,39,.08),transparent 55%),var(--surface);
  position:relative;overflow:hidden;
}
.home-hero .hh-l{min-width:0;flex:1}
.home-hero .mono{display:block;margin-bottom:10px}
.home-hero h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:8px}
.home-hero p{color:var(--text);font-size:.92rem;max-width:56ch}
.home-hero p strong{color:var(--text)}
.home-hero .hh-r{display:flex;flex-direction:column;gap:10px;flex:none}
@media(max-width:680px){.home-hero{padding:26px 22px}.home-hero .hh-r{width:100%}.home-hero .hh-r .btn{width:100%;justify-content:center}}

.muted-p{color:var(--text);font-size:.88rem;line-height:1.6;padding:8px 2px}

/* ============ TASKS ============ */
.task-add{display:flex;gap:10px;margin-bottom:18px}
.task-add input{
  flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;color:var(--text);
  font-family:'Satoshi',sans-serif;font-size:.88rem;padding:13px 15px;transition:border-color .2s;min-width:0;
}
.task-add input:focus{outline:none;border-color:var(--teal)}
.task-add input::placeholder{color:rgba(169,177,175,.65)}
.task-add .add{
  cursor:pointer;background:var(--gold);color:#080D0D;border:1px solid var(--gold);border-radius:0;white-space:nowrap;
  font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:0 20px;transition:background .2s;
}
.task-add .add:hover{background:var(--gold-light)}

.tasklist{display:flex;flex-direction:column}
.task{display:flex;align-items:flex-start;gap:14px;padding:16px 2px;border-bottom:1px dashed rgba(138,144,144,.14)}
.task:last-child{border-bottom:none}
.task.mini{padding:12px 2px}
.task .box{
  width:20px;height:20px;border:1px solid var(--line);border-radius:3px;flex:none;margin-top:2px;cursor:pointer;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  font-size:.66rem;color:var(--green);transition:border-color .2s,background .2s;
}
.task .box:hover{border-color:var(--gold)}
.task .box.static{cursor:default;color:var(--teal);font-size:.82rem}
.task .box.static:hover{border-color:var(--line)}
.task .tbody{flex:1;min-width:0}
.task .ttl{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.4}
.task .det{font-size:.82rem;color:var(--text);margin-top:4px;line-height:1.55}
.task .meta{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.task.mini .meta{margin-top:7px}
.task.done .box{border-color:rgba(40,217,67,.5);background:rgba(40,217,67,.08)}
.task.done .ttl{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(138,144,144,.4)}
.task.done .det{opacity:.7}
.t-due{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.t-due.soon{color:var(--gold-light)}
.t-due.over{color:var(--red)}
.step-link.sm{margin-top:0;padding:6px 12px;font-size:.56rem}

/* locked nav (onboarding gating) */
.sb-link.locked{opacity:.4}
.sb-link.locked::after{content:"🔒";margin-left:auto;font-size:.6rem;opacity:.85}

/* onboarding checkboxes + progress */
.ob-box{
  width:22px;height:22px;border:1px solid var(--line);border-radius:3px;flex:none;margin-top:2px;cursor:pointer;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--green);
  transition:border-color .2s,background .2s;
}
.ob-box:hover{border-color:var(--gold)}
.ob-box.ro{cursor:default;pointer-events:none}
.step-v.done .ob-box{border-color:rgba(40,217,67,.5);background:rgba(40,217,67,.08)}
.ob-progress{height:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin-bottom:18px}
.ob-progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:99px;transition:width .35s ease}

/* scrollable activity feed + completed items */
.feed.scroll{max-height:330px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(31,167,154,.3) transparent}
.feed.scroll::-webkit-scrollbar{width:6px}
.feed.scroll::-webkit-scrollbar-thumb{background:rgba(31,167,154,.25);border-radius:3px}
.feed.scroll::-webkit-scrollbar-track{background:transparent}
.feed .item.done{align-items:center}
.feed .item.done .body{flex:1}
.feed .done-tick{color:var(--green);font-size:.8rem;flex:none}

/* client request management */
.task.req .meta{align-items:center}
.task.req.paused{opacity:.62}
.req-actions{display:inline-flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.req-act{
  background:none;border:1px solid var(--line);border-radius:2px;color:var(--muted);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;transition:all .2s;
}
.req-act:hover{border-color:var(--teal);color:var(--text)}
.req-act.danger:hover{border-color:var(--red);color:var(--red)}
.req-edit{
  background:var(--surface-2);border:1px solid var(--teal);border-radius:2px;color:var(--text);
  font-family:'Satoshi',sans-serif;font-size:.88rem;padding:6px 10px;width:62%;min-width:160px;margin-right:8px;
}
.req-edit:focus{outline:none}

/* ============ INSIGHT CALLOUT ============ */
.insight{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:2px;
  background:linear-gradient(120deg,rgba(201,162,39,.06),transparent 60%),var(--surface);
  padding:18px 22px;margin-bottom:26px;
}
.insight .ins-ico{color:var(--gold-light);font-size:.95rem;line-height:1.5;flex:none}
.insight .ins-body .mono{display:block;margin-bottom:5px}
.insight .ins-body p{color:var(--text);font-size:.92rem;line-height:1.6;margin:0}

/* ============ SINCE-LAST-VISIT BANNER ============ */
.whatsnew{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);border-radius:2px;background:rgba(31,167,154,.05);
  padding:14px 18px;margin-bottom:18px;
}
.whatsnew .mono{display:block;margin-bottom:9px}
.wn-items{display:flex;gap:8px;flex-wrap:wrap}
.wn-chip{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.05em;color:var(--text);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;background:var(--surface);white-space:nowrap;
}
.wn-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;flex:none;padding:4px;transition:color .2s}
.wn-x:hover{color:var(--text)}

/* ============ DATA FRESHNESS ============ */
.range-note .synced{color:var(--green);letter-spacing:.06em}

/* ============ BUDGET PACING ============ */
.pace-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.pace-amt .v{font-family:'Clash Display',sans-serif;font-size:1.6rem;font-weight:600;color:var(--text)}
.pace-amt .l{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.pace-bar{position:relative;height:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.pace-fill{position:absolute;top:0;left:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.pace-fill.over{background:linear-gradient(90deg,var(--gold),var(--red))}
.pace-marker{position:absolute;top:0;bottom:0;width:2px;background:var(--text);opacity:.65}
.pace-foot{display:flex;justify-content:space-between;gap:12px;margin-top:11px;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.05em;color:var(--muted);flex-wrap:wrap}

/* ============ INFO TOOLTIP (?) ============ */
.ph-right{display:inline-flex;align-items:center;gap:10px}
.info-tip{
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;flex:none;
  border:1px solid var(--line);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.62rem;cursor:help;position:relative;
  transition:border-color .2s,color .2s;
}
.info-tip:hover,.info-tip:focus{border-color:var(--gold);color:var(--gold-light);outline:none}
.info-pop{
  position:absolute;top:calc(100% + 9px);right:0;width:250px;z-index:55;
  background:rgba(12,20,20,.98);border:1px solid var(--line);border-radius:2px;padding:13px 15px;
  font-family:'Satoshi',sans-serif;font-size:.78rem;font-weight:500;line-height:1.55;color:var(--text);
  letter-spacing:normal;text-transform:none;text-align:left;box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,visibility .2s,transform .2s;
}
.info-tip:hover .info-pop,.info-tip:focus .info-pop{opacity:1;visibility:visible;transform:none}

/* ============ PROFIT & LOSS + CALCULATOR ============ */
.pnl{display:flex;flex-direction:column}
.pnl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:1px dashed rgba(138,144,144,.14);font-size:.9rem}
.pnl-row .pnl-l{color:var(--text)}
.pnl-row.neg-row .pnl-l,.pnl-row.neg-row .pnl-v{color:var(--muted)}
.pnl-row .pnl-v{font-variant-numeric:tabular-nums;color:var(--text)}
.pnl-row.total{border-bottom:none;border-top:1px solid var(--line);margin-top:6px;padding-top:16px}
.pnl-row.total .pnl-l{font-family:'Satoshi',sans-serif;font-weight:700;font-size:1rem}
.pnl-row.total .pnl-v{font-family:'Clash Display',sans-serif;font-size:1.45rem;font-weight:600}
.pnl-row.total .pnl-v.pos{color:var(--green)}
.pnl-row.total .pnl-v.neg{color:var(--red)}
.calc{display:flex;flex-direction:column;gap:18px}
.calc-lead{margin:0;font-size:.9rem;line-height:1.5;color:var(--text)}
.calc-lead strong{color:var(--text)}
.calc-q{display:flex;flex-direction:column;gap:6px}
.calc-qt{font-size:.92rem;font-weight:600;color:var(--text);line-height:1.4}
.calc-qt em{font-style:italic;color:var(--gold)}
.calc-qh{font-size:.78rem;color:var(--text);line-height:1.45}
.calc-in{display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.calc-in .calc-cur{font-family:'Clash Display',sans-serif;font-size:1.05rem;color:var(--muted)}
.calc-in input{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:600;padding:10px 12px;width:88px;text-align:center}
.calc-in input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px rgba(31,167,154,.18)}
.calc-in .calc-suf{font-size:.78rem;color:var(--muted)}
.calc-result{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.calc-result .cr-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.calc-result .cr-l{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calc-result .cr-v{font-family:'Clash Display',sans-serif;font-size:2rem;font-weight:600;color:var(--text)}
.calc-result .cr-v.gold{color:var(--gold)}
.calc-result .cr-plain{margin:0;font-size:.86rem;line-height:1.55;color:var(--text)}
.calc-result .cr-plain strong{color:var(--text)}
.calc-result .cr-compare{margin:0;font-size:.86rem;line-height:1.5;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:11px 13px}
.calc-result .cr-compare strong{color:var(--gold)}

/* ============ SEO: revenue blocks + tags ============ */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.rev-block{border:1px solid var(--line);border-radius:2px;padding:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px;min-width:0}
.rev-block .rb-src{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rev-block .rb-dot{width:9px;height:9px;border-radius:50%;flex:none}
.rev-block .rb-val{font-family:'Clash Display',sans-serif;font-size:1.3rem;font-weight:600;color:var(--text)}
.rev-block .rb-val.gold{color:var(--gold)}
.rev-block.total{border-color:var(--gold-line);background:linear-gradient(135deg,rgba(201,162,39,.08),transparent 60%),var(--surface-2)}
.tag-brand{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);border:1px solid var(--gold-line);border-radius:99px;padding:2px 7px;margin-left:6px;white-space:nowrap}
.tag-type{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);border:1px solid var(--line);border-radius:99px;padding:2px 7px;margin-left:6px;white-space:nowrap}
.roas-blocks.two{grid-template-columns:repeat(2,1fr)}

/* ============ ROADMAP (scrollable, expandable) ============ */
.rm-progress{margin-bottom:16px}
.rm-progress-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.rm-pct{font-family:'Clash Display',sans-serif;font-weight:600;font-size:1.05rem;color:var(--gold)}
.rm-controls{display:flex;justify-content:flex-end;margin-bottom:6px}
.rm-comp-toggle.on,.rm-comp-toggle:hover{border-color:var(--gold-line);color:var(--gold-light)}
.roadmap-scroll{max-height:520px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(31,167,154,.3) transparent}
.roadmap-scroll::-webkit-scrollbar{width:6px}
.roadmap-scroll::-webkit-scrollbar-thumb{background:rgba(31,167,154,.25);border-radius:3px}
.roadmap-scroll::-webkit-scrollbar-track{background:transparent}
.rm-group{margin-bottom:10px}
.rm-group-head{display:flex;align-items:center;gap:10px;margin:8px 0 4px}
.rm-gcount{font-family:'JetBrains Mono',monospace;font-size:.54rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px}
.rm-item{border-bottom:1px dashed rgba(138,144,144,.14)}
.rm-item:last-child{border-bottom:none}
.rm-head{display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:13px 2px;color:var(--text);transition:color .2s}
.rm-head:hover{color:var(--gold-light)}
.rm-ico{flex:none;width:16px;text-align:center;color:var(--muted)}
.rm-item.done .rm-ico{color:var(--green)}
.rm-title{flex:1;font-size:.9rem;font-weight:600;min-width:0}
.rm-item.done .rm-title{color:var(--muted)}
.rm-head .st{flex:none}
.rm-caret{flex:none;font-size:.55rem;color:var(--muted);transition:transform .25s}
.rm-item.open .rm-caret{transform:rotate(180deg)}
.rm-detail{max-height:0;overflow:hidden;opacity:0;transition:max-height .28s ease,opacity .2s,padding .2s;padding:0 2px 0 31px}
.rm-item.open .rm-detail{max-height:220px;opacity:1;padding:0 2px 14px 31px}
.rm-detail p{color:var(--text);font-size:.85rem;line-height:1.55}
.rm-eta{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-top:9px}

/* ============ NEXT STEPS: filter + auto-scroll ============ */
.rmf-row{display:flex;gap:6px;flex-wrap:wrap}
.rmf{
  background:var(--surface-2);border:1px solid var(--line);border-radius:2px;color:var(--muted);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;transition:all .2s;
}
.rmf:hover{color:var(--text);border-color:var(--teal)}
.rmf.on{background:rgba(201,162,39,.08);border-color:var(--gold-line);color:var(--gold-light)}
.rmf-cats{margin:12px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
.rm-cat{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);border:1px solid var(--line);border-radius:99px;padding:2px 7px;margin-left:6px;white-space:nowrap;font-weight:500;vertical-align:middle}
.auto-scroll{height:248px;overflow:hidden;position:relative}
.auto-scroll.tall{height:560px}
.auto-scroll::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.auto-scroll-track{display:flex;flex-direction:column;animation:scrollUp 20s linear infinite}
.auto-scroll:hover .auto-scroll-track{animation-play-state:paused}
@keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.as-item{display:flex;gap:14px;padding:14px 2px;border-bottom:1px dashed rgba(138,144,144,.14)}
.as-item .when{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--teal);white-space:nowrap;padding-top:3px;min-width:42px}
.as-item strong{display:block;color:var(--text);font-size:.84rem;font-weight:600;margin-bottom:3px}
.as-item p{color:var(--text);font-size:.78rem;line-height:1.5}
@media(prefers-reduced-motion:reduce){.auto-scroll-track{animation:none}}

/* ============ ADS GOALS (ROAS vs target) ============ */
.roas-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.roas-blocks .rb{border:1px solid var(--line);border-radius:2px;padding:14px;text-align:center;background:var(--surface-2)}
.roas-blocks .rb .l{display:block;font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.roas-blocks .rb .v{font-family:'Clash Display',sans-serif;font-size:1.5rem;font-weight:600;color:var(--text)}
.roas-blocks .rb .v.gold{color:var(--gold)}
.roas-bar{position:relative;height:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;margin-top:30px}
.roas-fill{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.roas-tick{position:absolute;top:-6px;bottom:-6px;width:1px;background:rgba(240,240,238,.4)}
.roas-tick span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tbl .rank{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--deep);border:1px solid var(--gold-line);color:var(--gold-light);font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:600;margin-right:9px;vertical-align:middle}

/* ============ REPORTS ARCHIVE ============ */
.reports{display:flex;flex-direction:column}
.report{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;border-bottom:1px dashed rgba(138,144,144,.14);flex-wrap:wrap}
.report:last-child{border-bottom:none}
.rep-l{display:flex;align-items:center;gap:16px;min-width:0}
.rep-badge{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.1em;color:var(--gold-light);border:1px solid var(--gold-line);border-radius:2px;padding:9px 10px;flex:none}
.report h4{font-size:.95rem;font-family:'Satoshi',sans-serif;font-weight:700}
.rep-meta{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.05em;color:var(--muted);margin-top:4px}
.rep-r{display:flex;align-items:center;gap:16px;flex:none;flex-wrap:wrap}
.rep-date{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted);white-space:nowrap}
.rep-dl{padding:10px 18px;font-size:.62rem}

/* ============ INVOICING ============ */
.invoice-due-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--gold-line);border-radius:2px;margin-bottom:18px;padding:14px 18px;
  background:linear-gradient(120deg,rgba(201,162,39,.09),transparent 60%),var(--surface);
  font-size:.9rem;color:var(--text);
}
.invoice-due-banner .idb-l{min-width:0}
.invoice-due-banner .mono{margin-right:8px}
.invoice-due-banner .t-due{margin-left:4px}
.invoice-due-banner .btn{padding:11px 20px;font-size:.66rem;flex:none}

.inv-due{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border:1px solid var(--gold-line);border-radius:2px;padding:28px 30px;
  background:linear-gradient(135deg,rgba(201,162,39,.08),transparent 55%),var(--surface);
}
.inv-due .invd-l{min-width:0}
.inv-due .mono{display:block;margin-bottom:9px}
.inv-due h3{font-size:1.35rem;margin-bottom:8px}
.inv-due p{color:var(--text);font-size:.88rem;max-width:62ch}
.inv-due .btn{flex:none}

.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:14px}
.inv-card{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:22px;transition:border-color .3s}
.inv-card:hover{border-color:var(--gold-line)}
.inv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.inv-amt{font-family:'Clash Display',sans-serif;font-size:1.7rem;font-weight:600;color:var(--text);line-height:1;margin-bottom:18px}
.inv-meta{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:15px;margin-bottom:16px}
.inv-meta>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inv-meta .l{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}
.inv-meta .v{color:var(--text);font-size:.8rem;font-variant-numeric:tabular-nums}
.inv-acts{display:flex;gap:8px}
.inv-acts .req-act{flex:1;text-align:center;text-decoration:none;padding:8px 10px}

/* ============ EMPTY / NOT-CONNECTED STATES ============ */
.plat.plat-empty{cursor:default;border-style:dashed;align-items:flex-start}
.plat.plat-empty:hover{transform:none;border-color:var(--line);box-shadow:none}
.plat.plat-empty:hover::before{opacity:0}
.plat.plat-empty .muted-p{padding:0;margin:6px 0 16px}
.empty-state{
  max-width:520px;margin:60px auto;text-align:center;padding:48px 32px;
  border:1px dashed var(--line);border-radius:2px;background:var(--surface);
}
.empty-state .es-ico{font-size:2rem;color:var(--muted);display:block;margin-bottom:16px}
.empty-state h2{font-size:1.4rem;margin-bottom:12px}
.empty-state p{color:var(--text);font-size:.92rem;line-height:1.6;margin-bottom:24px}

/* ============ SKELETON LOADER ============ */
.skel{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:2px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(31,167,154,.08),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-hero{height:120px;margin-bottom:26px}
.skel-kpi{height:118px}
.skel-kpi.sm{height:94px}
.skel-panel{height:300px}
@media(prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--gold);color:#080D0D;text-decoration:none;
  font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;border-radius:0;border:1px solid var(--gold);white-space:nowrap;
  transition:all .25s ease;
}
.btn:hover{background:var(--gold-light);border-color:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,162,39,.25)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(138,144,144,.55)}
.btn-ghost:hover{background:rgba(31,167,154,.08);border-color:var(--teal);color:var(--text);box-shadow:none}

/* shiny primary - home dashboard CTA */
.btn-shiny{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));border-color:var(--gold-light);
  box-shadow:0 8px 30px rgba(201,162,39,.32);
}
.btn-shiny::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:btnShine 3.4s ease-in-out infinite;
}
.btn-shiny:hover{background:linear-gradient(135deg,#f0d35e,var(--gold-light));transform:translateY(-2px);box-shadow:0 14px 44px rgba(201,162,39,.5)}
@keyframes btnShine{0%,55%{left:-130%}100%{left:170%}}
@media(prefers-reduced-motion:reduce){.btn-shiny::after{animation:none;display:none}}

/* The login page and its styles were removed for the demo: there is
   nothing to sign in to. See README. */

/* ============ MOBILE ============ */
.burger{display:none;background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;padding:9px 11px;color:var(--text)}
.scrim{display:none}

@media(max-width:1080px){
  .grid.c2,.grid.c2e{grid-template-columns:1fr}
}
/* very narrow phones: stop fixed multi-column metric blocks from overflowing */
@media(max-width:520px){
  .roas-blocks{grid-template-columns:repeat(2,1fr)}
  .plat .pm{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:380px){
  .roas-blocks,.roas-blocks.two,.plat .pm{grid-template-columns:1fr}
}
@media(max-width:880px){
  .sidebar{transform:translateX(-100%);transition:transform .3s ease;box-shadow:24px 0 60px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .burger{display:block}
  .nav-toggle{display:none}
  body.nav-collapsed .sidebar{transform:translateX(-100%)}
  .scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(8,13,13,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s}
  .scrim.show{opacity:1;visibility:visible}
  .topbar{padding:0 18px;gap:10px;height:auto;min-height:var(--topbar-h);flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  .topbar h1{font-size:1.15rem}
  .topbar .tb-right{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;gap:10px;max-width:100%}
  .admin-switch select{max-width:130px}
  .tf-menu{right:0;max-width:calc(100vw - 36px)}
  .content{padding:24px 18px 60px}
  .demo-badge{display:none}
  .login-card{padding:40px 28px}
}

/* change-password modal */
#changepw:hover{color:var(--teal)}
.pw-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.pw-modal .pw-backdrop{position:absolute;inset:0;background:rgba(8,13,13,.78);backdrop-filter:blur(3px)}
.pw-modal .pw-card{
  position:relative;width:min(400px,calc(100vw - 40px));background:var(--surface);
  border:1px solid var(--line);border-radius:2px;padding:30px 28px;
}
.pw-modal h3{font-family:'Clash Display',sans-serif;font-size:1.1rem;margin:0 0 6px}
.pw-modal .pw-sub{color:var(--text);font-size:.8rem;margin:0 0 20px}
.pw-modal .pw-actions{display:flex;gap:12px;align-items:center;margin-top:4px}
.pw-modal .btn-cancel{
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;border-radius:2px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;
}
.pw-modal .btn-cancel:hover{color:var(--text);border-color:var(--muted)}
.pw-modal .pw-ok{color:var(--green);font-size:.8rem;margin:12px 0 0}

/* inline FAQ deep-link + learn-more note bar */
.help-link{
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--teal);font-family:'JetBrains Mono',monospace;font-size:.72rem;
  letter-spacing:.04em;font-weight:600;white-space:nowrap;
}
.help-link:hover{color:var(--gold)}
.help-note{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;
  padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);
  border-left:2px solid var(--teal);border-radius:2px;
}
.help-note .hn-ico{color:var(--teal);font-size:.9rem;line-height:1.4;flex:none}
.help-note p{margin:0;color:var(--text);font-size:.82rem;line-height:1.5}

/* login: forgot-password link + reset-sent confirmation */
.link-btn{display:inline-block;margin-top:14px;background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:.8rem;text-decoration:underline;text-underline-offset:3px;padding:0}
.link-btn:hover{color:var(--teal)}
.login-sent{text-align:center;padding:8px 0}
.login-sent .sent-ico{font-size:1.6rem;color:var(--gold);margin-bottom:8px}
.login-sent h2{font-family:'Clash Display',sans-serif;font-size:1.15rem;margin:0 0 8px}
.login-sent p{color:var(--text);font-size:.85rem;line-height:1.5;margin:0 0 6px}

/*
 * Between the sidebar breakpoint and a wide desktop the top bar held the demo
 * badge, compare, the date range and the clock on one line and ran 189px off a
 * 1024px screen. It wraps here instead, and the clock, the least useful item,
 * steps aside. Found by the live gate on the preview, 2026-09-15.
 */
@media (min-width:881px) and (max-width:1280px){
  .topbar{height:auto;min-height:var(--topbar-h);flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .topbar .tb-right{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;gap:10px;min-width:0;max-width:100%}
  .clock{display:none}
}

/* Sidebar account actions meet the 24px minimum tap target. */
.logout{min-height:24px}

/*
 * The demo notice sits in the document flow above the app, but the sidebar is
 * fixed to the left edge from the top of the viewport, so on desktop it covered
 * the start of the notice ("...ri Digitals"). The notice now starts where the
 * main column starts, and follows the sidebar when it collapses.
 */
@media (min-width:881px){
  .etari-demo-notice{margin-left:var(--sidebar-w);transition:margin-left .3s ease}
  body.nav-collapsed .etari-demo-notice{margin-left:0}
}