/* ==========================================================================
   STRYKER TRADING ACADEMY — Design System
   Palette: deep terminal navy + Stryker gold + institutional teal
   Type: Archivo (display + body) / JetBrains Mono (data)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* surfaces — true-black tones (was charcoal/slate navy through v99, confirmed permanent) */
  --bg-0:#050506;          /* deepest background */
  --bg-1:#0b0b0d;          /* page background */
  --bg-2:#131316;          /* card surface */
  --bg-3:#1e1e22;          /* raised surface / hover */
  --line:#2c2c32;          /* hairline border */
  --line-soft:#19191d;

  /* text — light gray (image 2) */
  --ink-0:#eeeeee;         /* headings */
  --ink-1:#c9cdd3;         /* type wireframe */
  --ink-2:#8b93a0;         /* muted */
  --ink-3:#5c6472;         /* faint */

  /* brand — mint green primary (image 1), cyan secondary (image 2) */
  --gold:#03c988;
  --gold-bright:#4fe3ac;
  --gold-dim:#027a54;
  --teal:#00adb5;
  --teal-dim:#067b81;

  /* decorative depth accents — indigo/royal blue (image 1), used sparingly
     in hero/parallax glows for a layered, non-flat background */
  --indigo:#13005a;
  --royal-blue:#00337c;

  /* market data — used only for actual price-action context. Bull ties to
     the new mint accent; bear stays a conventional red since neither
     source palette included one and the up/down convention matters for
     comprehension on trading charts. */
  --bull:#03c988;
  --bear:#e5484d;

  /* warm secondary accent — used sparingly to break up the mostly cool
     green/teal palette on pages that read as monotone otherwise (dashboard
     stat cards, streak/engagement indicators). Not a new arbitrary choice —
     this was already the color used for "pending" states and streak
     achievement badges elsewhere; naming it here just makes that
     consistent and reusable instead of a repeated hardcoded hex. */
  --amber:#f5c542;
  --amber-dim:#b8901f;

  /* type scale */
  --font-display:'Archivo', sans-serif;
  --font-body:'Archivo', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-card: 0 8px 30px -12px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(3,201,136,0.15), 0 8px 40px -10px rgba(3,201,136,0.18);
}

:root{
  /* 14px padding top and bottom around a 30px .icon-btn, plus the 1px bottom
     border. Declared once because the sidebar's height and sticky offset are
     both derived from it — if they disagree the nav either overruns the
     viewport or slides under the header. */
  --topbar-h:59px;
}
@media (min-width:901px){
  /* Roomier on desktop, where the bar also carries the logo. */
  :root{ --topbar-h:68px; }
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg-1);
  color:var(--ink-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

::selection{ background:var(--gold-dim); color:var(--ink-0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){ .container{ padding:0 20px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px; height:1px;
  background:var(--gold);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-0);
  margin:0;
  font-weight:700;
  letter-spacing:-0.01em;
}

.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14.5px;
  border:1px solid transparent;
  transition:all .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#1a1305;
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 24px -10px rgba(3,201,136,0.55);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 28px -10px rgba(3,201,136,0.7); }
.btn-ghost{
  background:transparent;
  color:var(--ink-0);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--gold-dim); background:rgba(3,201,136,0.06); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:13px; }

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,13,19,0.78);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.beta-banner{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(3,201,136,0.10), rgba(0,173,181,0.05) 65%, transparent);
  border-bottom:1px solid var(--line-soft);
  padding:56px 32px 52px;
  text-align:center;
}
.beta-banner-glow{
  position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:680px; height:340px;
  background:radial-gradient(ellipse, rgba(3,201,136,0.22), transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}
.beta-banner-inner{
  position:relative; z-index:2;
  max-width:680px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.beta-pill{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:#08201f; background:var(--gold);
  padding:6px 16px; border-radius:999px;
  box-shadow:0 0 28px rgba(3,201,136,0.45);
}
.beta-banner-heading{
  font-family:var(--font-display);
  font-size:clamp(24px,3.6vw,36px);
  font-weight:600; line-height:1.2; letter-spacing:-0.01em;
  color:var(--ink-0); margin:0;
}
.beta-banner-heading em{
  font-style:normal; color:transparent;
  background:linear-gradient(180deg,var(--gold-bright,var(--gold)),var(--gold));
  -webkit-background-clip:text; background-clip:text;
}
.beta-banner-text{ font-size:15.5px; color:var(--ink-2); max-width:480px; margin:0; line-height:1.55; }
.beta-banner-cta{ margin-top:6px; }
.beta-banner-close{
  position:absolute; right:20px; top:20px;
  background:rgba(0,0,0,0.2); border:1px solid var(--line-soft); border-radius:50%;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); cursor:pointer; font-size:14px; line-height:1;
  transition:all .15s ease;
}
.beta-banner-close:hover{ color:var(--ink-0); border-color:var(--line); }
@media (max-width:640px){
  .beta-banner{ padding:44px 24px 40px; }
  .beta-banner-close{ right:14px; top:14px; }
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  max-width:1240px; margin:0 auto;
}
.brand{ display:flex; align-items:center; }
.brand-mark{
  /* Raised from 44px with the new logo. The previous artwork was 1.87:1 and
     rendered ~82px wide here; this one is 1.52:1, so at the same height it is
     only 66px — visibly lighter in the header, and too small for the dragon's
     line-art to survive. Height is what the CSS controls, so height is what
     had to change to keep the mark's optical weight. */
  height:52px; width:auto;
  object-fit:contain;
  flex-shrink:0;
}
@media (max-width:640px){ .brand-mark{ height:42px; } }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink-0); letter-spacing:-0.01em; }
.brand-name span{ color:var(--gold); }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:14px; color:var(--ink-2); font-weight:500;
  transition:color .15s ease; position:relative;
}
.nav-links a:hover{ color:var(--ink-0); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; background:none; border:1px solid var(--line); color:var(--ink-0); padding:8px 10px; border-radius:6px; }
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:104px 0 80px;
  border-bottom:1px solid var(--line-soft);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(3,201,136,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,201,136,0.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent);
  will-change:transform;
}
.hero-glow{
  position:absolute; top:-200px; right:-160px;
  width:640px; height:640px;
  background:radial-gradient(circle, rgba(3,201,136,0.16), rgba(0,51,124,0.12) 45%, transparent 70%);
  filter:blur(10px);
  will-change:transform;
}
.hero-glow-indigo{
  position:absolute; bottom:-160px; left:-140px;
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(19,0,90,0.35), transparent 68%);
  filter:blur(14px);
  will-change:transform;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
@media (max-width:960px){ .hero-inner{ grid-template-columns:1fr; } }

.hero-copy h1{
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.05;
  margin:18px 0 20px;
}
.hero-copy h1 em{
  font-style:normal; color:var(--gold);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p{ font-size:17px; color:var(--ink-2); max-width:520px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }

.hero-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-mono); font-size:22px; color:var(--ink-0); }
.hero-stat span{ font-size:12.5px; color:var(--ink-3); }

/* --- Signature: annotated market-structure chart --- */
.chart-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.chart-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
}
.chart-card-head .pair{ color:var(--ink-0); font-weight:600; }
.chart-dots{ display:flex; gap:6px; }
.chart-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.chart-svg-wrap{ padding:8px 6px 4px; }
.chart-legend{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:12px 18px 16px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
}
.chart-legend i{ width:10px; height:10px; display:inline-block; border-radius:2px; margin-right:6px; vertical-align:-1px; }

/* candle drawing animation */
.candle{ transform-origin:center bottom; animation:rise .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise{ from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:1; } }
.draw-path{
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 2.1s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.tag-pop{ opacity:0; animation:pop .5s ease forwards; }
@keyframes pop{ to{ opacity:1; } }

/* ---------------- SECTIONS ---------------- */
section{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(26px,3vw,38px); margin:16px 0 14px; line-height:1.15; }
.section-head p{ color:var(--ink-2); font-size:16px; }
.divider{ border-top:1px solid var(--line-soft); }

/* parallax band */
/* ==========================================================================
   PROOF MARQUEE — auto-scrolling payout proof carousel (homepage)
   ========================================================================== */
/* ==========================================================================
   MARKET NEWS — killzone tracker, mini-chart grid
   ========================================================================== */
.killzone-clock{ text-align:center; padding:20px 20px 24px; border-bottom:1px solid var(--line-soft); margin-bottom:4px; }
.killzone-clock-time{ display:block; font-family:var(--font-mono); font-size:32px; color:var(--ink-0); letter-spacing:-0.02em; }
.killzone-clock-label{ display:block; font-size:12px; color:var(--ink-3); margin-top:6px; }
.killzone-rows{ padding:6px 20px 20px; }
.killzone-row{
  display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line-soft);
}
.killzone-row:last-child{ border-bottom:none; }
.killzone-dot{
  width:10px; height:10px; border-radius:50%; background:var(--line); flex-shrink:0;
}
.killzone-row.active .killzone-dot{
  background:var(--bull);
  box-shadow:0 0 0 4px rgba(3,201,136,0.18);
  animation:killzone-pulse 2s ease-in-out infinite;
}
@keyframes killzone-pulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(3,201,136,0.18); }
  50%{ box-shadow:0 0 0 7px rgba(3,201,136,0.08); }
}
.killzone-info{ display:flex; flex-direction:column; flex:1; }
.killzone-name{ font-size:14px; font-weight:600; color:var(--ink-0); }
.killzone-range{ font-size:12px; color:var(--ink-3); font-family:var(--font-mono); margin-top:2px; }
.killzone-status{
  font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:20px;
  color:var(--ink-3); border:1px solid var(--line); flex-shrink:0;
}
.killzone-row.active .killzone-status{ color:var(--bull); border-color:rgba(3,201,136,0.3); background:rgba(3,201,136,0.08); }

.mini-chart-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .mini-chart-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .mini-chart-grid{ grid-template-columns:1fr; } }
.mini-chart-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; padding:14px 14px 4px;
}
.mini-chart-card h4{
  font-size:13px; font-weight:600; color:var(--ink-0); margin-bottom:2px; font-family:var(--font-mono);
}

.redfolder-panel{
  border:1px solid rgba(229,72,77,0.35);
  box-shadow:0 0 0 1px rgba(229,72,77,0.08), 0 20px 50px -25px rgba(229,72,77,0.35);
}
.redfolder-panel .panel-head h2{ display:flex; align-items:center; gap:10px; }
.redfolder-dot{
  width:9px; height:9px; border-radius:50%; background:#e5484d; flex-shrink:0;
  box-shadow:0 0 0 4px rgba(229,72,77,0.18);
  animation:redfolder-pulse 2s ease-in-out infinite;
}
@keyframes redfolder-pulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(229,72,77,0.18); }
  50%{ box-shadow:0 0 0 7px rgba(229,72,77,0.08); }
}

.proof-section{
  padding:72px 0 80px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-0);
}
.proof-section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.proof-section-head h2{ font-size:clamp(24px,3vw,32px); margin:14px 0 12px; }
.proof-section-head p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; }

.proof-marquee-wrap{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.proof-marquee-track{
  display:flex;
  align-items:center;
  gap:24px;
  width:max-content;
  animation:proof-scroll 48s linear infinite;
}
@keyframes proof-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.proof-card{
  flex:0 0 auto;
  width:340px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-2);
  box-shadow:var(--shadow-card);
}
.proof-card img{
  width:100%; height:auto; display:block;
}
@media (max-width:640px){
  .proof-card{ width:260px; }
  .proof-marquee-track{ gap:16px; animation-duration:34s; }
}

.parallax-band{
  position:relative;
  padding:120px 0;
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-0);
}
.parallax-layer{
  position:absolute; inset:-10% -10%;
  background-repeat:repeat;
  will-change:transform;
}
.pl-1{ opacity:0.5; background-image:radial-gradient(1px 1px at 20px 30px, rgba(3,201,136,0.35) 1px, transparent 0); background-size:120px 120px; }
.pl-2{ opacity:0.35; background-image:radial-gradient(1px 1px at 60px 80px, rgba(0,173,181,0.3) 1px, transparent 0); background-size:180px 180px; }
.pl-3{ opacity:0.6; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }

.band-content{ position:relative; z-index:2; text-align:center; }
.band-content .eyebrow{ justify-content:center; }
.band-content h2{ font-size:clamp(28px,4vw,44px); margin:16px auto 18px; max-width:760px; }
.band-content p{ color:var(--ink-2); max-width:600px; margin:0 auto; font-size:16.5px; }

/* feature grid */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px 24px; transition:transform .2s ease, border-color .2s ease;
}
.feature-card:hover{ transform:translateY(-3px); border-color:var(--gold-dim); }
.feature-icon{
  width:42px; height:42px; border-radius:9px;
  background:rgba(3,201,136,0.12); border:1px solid rgba(3,201,136,0.25);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  color:var(--gold);
}
.feature-card h3{ font-size:17px; margin-bottom:8px; }
.feature-card p{ font-size:14.5px; color:var(--ink-2); }

/* concept cards (ICT / SMT glossary) */
.concept-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:960px){ .concept-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .concept-grid{ grid-template-columns:1fr; } }
.concept-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px; position:relative; overflow:hidden;
}
.concept-card .abbr{ font-family:var(--font-mono); color:var(--teal); font-size:12px; letter-spacing:0.08em; }
.concept-card h4{ font-size:15.5px; margin:8px 0 6px; color:var(--ink-0); }
.concept-card p{ font-size:13.5px; color:var(--ink-2); margin:0; }

/* curriculum / chapters */
.level-tabs{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
.level-tab{
  -webkit-appearance:none; appearance:none;
  padding:9px 18px; border-radius:20px; border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-2); font-weight:600; background:transparent;
  transition:all .15s ease;
}
.level-tab.active, .level-tab:hover{ background:rgba(3,201,136,0.1); border-color:var(--gold-dim); color:var(--gold-bright); }

.chapter-list{ display:flex; flex-direction:column; gap:14px; }
.chapter{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 24px; transition:border-color .2s ease, background .2s ease;
}
.chapter:hover{ border-color:var(--gold-dim); background:var(--bg-3); }
.chapter-num{
  font-family:var(--font-mono); font-size:13px; color:var(--gold);
  width:44px; height:44px; border:1px solid var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chapter-body{ min-width:0; } /* lets the title/preview text wrap instead of forcing this grid column — and the whole row — wider than the screen */
.chapter-body h3{ font-size:16.5px; margin-bottom:6px; }
.chapter-body p{ font-size:13.5px; color:var(--ink-2); margin-bottom:10px; }
.chapter-meta{ display:flex; gap:14px; flex-wrap:wrap; }
.chapter-meta span{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }
.chapter-tag{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em;
  padding:3px 8px; border-radius:4px; text-transform:uppercase;
}
.tag-foundation{ background:rgba(0,173,181,0.12); color:var(--teal); }
.tag-intermediate{ background:rgba(3,201,136,0.12); color:var(--gold); }
.tag-advanced{ background:rgba(229,72,77,0.12); color:#f08488; }
.chapter-status{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.status-pill{
  font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:6px; border:1px solid var(--line);
  color:var(--ink-3); white-space:nowrap;
}
.status-pill.unlocked{ color:var(--bull); border-color:rgba(47,191,143,0.3); }
.status-pill.locked{ color:var(--ink-3); }

/* Below ~640px, the 3-column grid (number / text / status) no longer has
   room to stay on one row without forcing horizontal overflow — stack it
   into a single column instead, same pattern used by .record-card. */
@media (max-width:640px){
  .chapter{ grid-template-columns:1fr; }
  .chapter-num{ margin-bottom:12px; }
  .chapter-status{ margin-top:14px; }
}

/* progress bar */
.progress-track{ height:6px; background:var(--line); border-radius:6px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright)); border-radius:6px; }

/* testimonials */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; }
.testi-card p{ font-size:14.5px; color:var(--ink-1); margin-bottom:20px; }
.testi-who{ display:flex; align-items:center; gap:12px; }
.testi-avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dim)); }
.testi-who b{ font-size:13.5px; color:var(--ink-0); display:block; }
.testi-who span{ font-size:12px; color:var(--ink-3); }

/* pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 28px; display:flex; flex-direction:column; }
.price-card.featured{ border-color:var(--gold-dim); box-shadow:var(--shadow-glow); position:relative; }
.price-card.featured::before{
  content:'MOST CHOSEN'; position:absolute; top:-11px; left:28px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;
  background:var(--gold); color:#1a1305; padding:4px 10px; border-radius:20px; font-weight:700;
}
.price-card h3{ font-size:16px; color:var(--ink-2); font-weight:600; margin-bottom:6px; }
.price-amt{ font-family:var(--font-display); font-size:38px; color:var(--ink-0); margin-bottom:4px; }
.price-amt span{ font-size:14px; color:var(--ink-3); font-family:var(--font-body); }
.price-card ul{ margin:24px 0 28px; display:flex; flex-direction:column; gap:12px; }
.price-card li{ font-size:13.5px; color:var(--ink-1); display:flex; gap:10px; align-items:flex-start; }
.price-card li svg{ flex-shrink:0; margin-top:2px; color:var(--teal); }

/* footer */
footer{ border-top:1px solid var(--line-soft); padding:56px 0 32px; background:var(--bg-0); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:48px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h5{ font-size:12.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; font-family:var(--font-mono); font-weight:600; }
.footer-grid a{ display:block; font-size:14px; color:var(--ink-2); margin-bottom:10px; transition:color .15s ease; }
.footer-grid a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--ink-3); flex-wrap:wrap; gap:12px; }
.risk-disclaimer{ font-size:12px; color:var(--ink-3); max-width:640px; line-height:1.7; margin-top:18px; }

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } }
.auth-visual{
  position:relative; background:var(--bg-0);
  border-right:1px solid var(--line-soft);
  padding:48px; display:flex; flex-direction:column;
  overflow:hidden;
  /* Was space-between across three children, which on a tall screen threw the
     logo, the quote and the chart to opposite ends with huge dead gaps. */
  justify-content:flex-start;
  align-items:flex-start;
}
@media (max-width:900px){ .auth-visual{ display:none; } }
/* The logo stays IN the flow, pinned to the top by the body below it taking
   all remaining height. An earlier attempt used position:absolute, which
   removed it from the flow — so on a short viewport the vertically centred
   content rose up and collided with it. */
.auth-visual > .brand{ flex:0 0 auto; position:relative; z-index:3; }
/* Owns the leftover space and centres the quote and chart within it, so the
   two are grouped no matter how tall or short the window is. */
.auth-visual-body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:36px;
  width:100%;
}
.auth-visual-body > svg{ width:100%; max-width:440px; }
.auth-visual-quote{ position:relative; z-index:2; max-width:440px; }
.auth-visual-quote p{ font-family:var(--font-display); font-size:22px; color:var(--ink-0); line-height:1.4; }
.auth-visual-quote span{ font-size:13px; color:var(--ink-3); margin-top:14px; display:block; font-family:var(--font-mono); }

.auth-side{ display:flex; align-items:center; justify-content:center; padding:40px; }
@media (min-width:901px){
  /* Both columns cap their content at the same width and centre it, so the
     form and the quote read as one composition rather than two panes that
     happen to be side by side. */
  .auth-shell{ align-items:stretch; }
  .auth-side{ padding:48px 56px; }
  .auth-box{ max-width:420px; }
}
.auth-box{ width:100%; max-width:400px; }
.auth-box h1{ font-size:26px; margin:6px 0 8px; }
.auth-box > p{ color:var(--ink-2); font-size:14.5px; margin-bottom:28px; }

.social-row{ display:flex; gap:10px; margin-bottom:22px; }
.social-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px; border-radius:8px; border:1px solid var(--line); background:var(--bg-2);
  font-size:13px; font-weight:600; color:var(--ink-1); transition:all .15s ease;
}
.social-btn:hover{ background:var(--bg-3); border-color:var(--ink-3); }

.or-divider{ display:flex; align-items:center; gap:14px; margin:22px 0; }
.or-divider::before,.or-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.or-divider span{ font-size:11.5px; color:var(--ink-3); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--ink-1); margin-bottom:7px; font-weight:500; }
.field input, .field select{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-0); font-size:14px; transition:border-color .15s ease;
}
.field input:focus, .field select:focus{ border-color:var(--gold-dim); outline:none; }
.field-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.field-row label{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.field-row a{ font-size:13px; color:var(--gold); }

.auth-switch{ text-align:center; margin-top:24px; font-size:13.5px; color:var(--ink-2); }
.auth-switch a{ color:var(--gold); font-weight:600; }


/* ==========================================================================
   DASHBOARD SHELL (shared by user + admin)
   ========================================================================== */
.dash-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
@media (max-width:900px){ .dash-shell{ grid-template-columns:1fr; } }
@media (min-width:901px){
  /* Nav takes a quarter of the viewport so the trading floor resolves to a
     clean 25 / 50 / 25 across the whole page rather than 25 / 50 / 25 of
     whatever was left over. Applied site-wide, not just on the floor —
     scoping it to one page would make the sidebar visibly jump width every
     time you navigated in or out of it. */
  /* minmax(0,25%) rather than a bare 25%: a grid track's default min-width is
     auto, so the nav could grow past its share to fit its widest label and
     push the whole row wider than the viewport — which is what was clipping
     the right-hand column off the screen edge. */
  .dash-shell{ grid-template-columns:minmax(0,25%) minmax(0,1fr); }
}

.sidebar{
  background:var(--bg-0); border-right:1px solid var(--line-soft);
  padding:22px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  /* The nav is now taller than a short viewport. Without its own scroll
     container the overflow is simply unreachable. */
  overflow-y:auto;
  /* Stops a scroll that reaches the end of this list from continuing into the
     page behind it (scroll chaining) — on touch that reads as "the site moved
     instead of the menu". */
  overscroll-behavior:contain;
}
@media (max-width:900px){
  .sidebar{
    display:flex;
    position:fixed; top:0; left:0; width:280px; max-width:82vw;
    z-index:200; transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:20px 0 40px -20px rgba(0,0,0,0.6);
    /* dvh tracks the visible viewport as mobile browser chrome hides and
       shows; 100vh is the TALLER value, so the last item sat permanently
       under the address bar. Fallback first for older engines. */
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .sidebar.mobile-open{ transform:translateX(0); }
  /* Flex children default to min-height:auto and refuse to shrink below their
     content, which would push the footer out of the scroll area entirely. */
  .sidebar .side-section{ flex-shrink:0; }
  .sidebar .brand{ flex-shrink:0; }
  .sidebar .sidebar-foot{ flex-shrink:0; }
  /* Freezes the page behind the open drawer. Paired with a JS scroll lock so
     iOS Safari, which ignores this on body alone, behaves too. */
  body.sidebar-locked{ overflow:hidden; }
}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:190;
}
.sidebar-backdrop.visible{ display:block; }
.mobile-signout-btn{ color:var(--ink-2); }
.mobile-signout-btn:hover{ color:var(--bear); border-color:var(--bear); }
.sidebar .brand{ padding:8px 8px 26px; }
.side-section{ margin-bottom:8px; }
.side-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); padding:14px 12px 8px; }
.side-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px;
  font-size:14px; color:var(--ink-2); font-weight:500; margin-bottom:2px; transition:all .15s ease;
}
.side-link:hover{ background:var(--bg-2); color:var(--ink-0); }
.side-link.active{ background:rgba(3,201,136,0.1); color:var(--gold-bright); }
.side-link svg{ flex-shrink:0; }
.sidebar-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; }
.user-chip:hover{ background:var(--bg-2); }
.chip-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-bright),var(--gold-dim)); flex-shrink:0; }
.chip-name{ font-size:13px; color:var(--ink-0); font-weight:600; }
.chip-role{ font-size:11.5px; color:var(--ink-3); }

.dash-main{
  padding:28px 34px 60px; max-width:1180px;
  /* min-width:0 is load-bearing on mobile. As a flex/grid item it defaults to
     min-width:auto, meaning it refuses to shrink below its content's
     min-content width — so any wide child (the terminal's tab row, a long
     unbroken string on the floor) pushed the whole main column past the
     viewport. The visible symptom is a header that appears to stop halfway
     across the screen, because the sticky bar is viewport-width while the page
     behind it is wider. Measured at 701px inside a 390px viewport. */
  min-width:0;
}
@media (max-width:640px){ .dash-main{ padding:20px; } }
.dash-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:16px; }
.dash-topbar h1{ font-size:23px; }
.dash-topbar p{ color:var(--ink-2); font-size:13.5px; margin-top:4px; }

/* App header. Named .mobile-topnav for historical reasons — it is now shown at
   every width. Above 900px it drops the brand and hamburger (the sidebar
   already carries the logo, and there is no drawer to open) and keeps the
   notification bell and sign out, which previously had no desktop home at
   all. */
.mobile-topnav{ display:none; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-soft); background:var(--bg-0); position:sticky; top:0; z-index:50; }
@media (max-width:900px){ .mobile-topnav{ display:flex; } }
.topnav-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.topnav-right{ display:flex; align-items:center; gap:8px; }

/* Hamburger. Bigger than the other icon buttons because it is the primary
   navigation control on mobile and the first thing a thumb reaches for, and
   it now sits at the far left where that thumb naturally lands. */
.menu-toggle-btn{
  width:40px; height:40px; flex-shrink:0;
  border-radius:9px;
  color:var(--ink-1);
}
.menu-toggle-btn:hover{ color:var(--teal); border-color:var(--teal-dim); }
.menu-toggle-btn:active{ background:var(--bg-3); }

@media (min-width:901px){
  .mobile-topnav{
    display:flex;
    justify-content:space-between;
    /* Taller than the mobile bar and lifted off the page: a slightly raised
       surface plus a downward shadow, so content scrolls UNDER it rather than
       appearing to sit on the same plane. */
    height:var(--topbar-h);
    padding:0 26px;
    background:var(--bg-1);
    border-bottom:1px solid var(--line);
    box-shadow:0 2px 12px -2px rgba(0,0,0,0.55), 0 1px 0 0 rgba(255,255,255,0.03) inset;
  }
  /* Logo moves up here. The sidebar's copy is hidden rather than deleted so
     the mobile layout, where the sidebar is a drawer with no header above it,
     keeps its branding. */
  /* Descendant, not direct-child: the brand now sits inside .topnav-left
     alongside the hamburger, so `>` would no longer match it and the
     desktop header would lose its logo entirely. */
  .mobile-topnav .brand{ display:flex; align-items:center; }
  .sidebar > .brand{ display:none; }
  /* The nav column starts flush with the top of the header's border now that
     nothing sits above it. */
  .sidebar{ padding-top:14px; }
  .mobile-topnav #dash-menu-toggle{ display:none; }
  .mobile-topnav .brand-mark{ height:40px; }
  /* The header sits ABOVE .dash-shell in the document, so the sidebar's
     100vh would otherwise run past the bottom of the screen by exactly the
     header's height, and its sticky top:0 would slide underneath it. Both are
     offset by the same variable so they stay in agreement. */
  .sidebar{ height:calc(100vh - var(--topbar-h)); top:var(--topbar-h); }
  .dash-shell{ min-height:calc(100vh - var(--topbar-h)); }
}

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px; }
@media (max-width:960px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; }
.stat-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.stat-icon{ width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(3,201,136,0.1); color:var(--gold); }
.stat-icon.amber{ background:rgba(245,197,66,0.14); color:var(--amber); }
.stat-delta{ font-family:var(--font-mono); font-size:11.5px; padding:3px 7px; border-radius:5px; }
.stat-delta.up{ color:var(--bull); background:rgba(47,191,143,0.1); }
.stat-delta.down{ color:var(--bear); background:rgba(229,72,77,0.1); }
.stat-val{ font-family:var(--font-mono); font-size:26px; color:var(--ink-0); margin-bottom:4px; }
.stat-label{ font-size:12.5px; color:var(--ink-3); }

.panel{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; margin-bottom:22px; overflow-wrap:break-word; word-break:break-word; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.panel-head h2{ font-size:16.5px; }
.panel-head a{ font-size:13px; color:var(--gold); font-weight:600; }

.continue-row{ display:flex; align-items:center; gap:16px; padding:14px; border-radius:10px; transition:background .15s ease; }
.continue-row:hover{ background:var(--bg-3); }
.continue-thumb{ width:56px; height:56px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,var(--teal-dim),var(--bg-3)); display:flex; align-items:center; justify-content:center; color:var(--teal); font-family:var(--font-mono); font-size:12px; border:1px solid var(--line); }
.continue-body{ flex:1; }
.continue-body h4{ font-size:14.5px; color:var(--ink-0); margin-bottom:6px; font-weight:600; }
.continue-body .progress-track{ max-width:260px; }
.continue-meta{ font-size:12px; color:var(--ink-3); font-family:var(--font-mono); margin-top:6px; }

.two-col{ display:grid; grid-template-columns:1.6fr 1fr; gap:22px; }
@media (max-width:960px){ .two-col{ grid-template-columns:1fr; } }

/* Two-field form rows (date+instrument, direction+outcome, etc.) — always
   collapses to a single column on narrow screens, unlike raw inline
   grid-template-columns which can't respond to a media query. */
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:560px){ .form-row-2{ grid-template-columns:1fr; gap:0; } }
@media (max-width:560px){ .form-row-2 .field{ margin-bottom:16px; } }
@media (max-width:560px){ .form-row-2 .field:last-child{ margin-bottom:0; } }

/* 3-column stat row (admin analytics) — same collapse pattern as .stat-grid */
.stat-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px; }
@media (max-width:760px){ .stat-grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .stat-grid-3{ grid-template-columns:1fr; } }

/* Chapter content editor */
.chapter-edit-card{ border-top:1px solid var(--line-soft); padding-top:20px; margin-top:20px; }
.chapter-edit-card:first-child{ border-top:none; margin-top:0; padding-top:0; }
.lesson-edit-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start;
  background:var(--bg-3); border:1px solid var(--line); border-radius:8px;
  padding:12px; margin-bottom:10px;
}
.lesson-edit-row .field{ flex:1 1 220px; margin-bottom:0; }
.lesson-edit-row .icon-btn{
  -webkit-appearance:none; appearance:none; flex-shrink:0; margin-top:24px; }
.textarea-field{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-0); font-size:14px; font-family:inherit; resize:vertical;
}

/* Rich text editor toolbar (chapter-editor.html) */
.rte-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:8px; border:1px solid var(--line); border-bottom:none;
  border-radius:8px 8px 0 0; background:var(--bg-2);
}
.rte-btn{
  -webkit-appearance:none; appearance:none;
  min-width:32px; height:32px; padding:0 10px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--ink-1); font-size:13px; font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.rte-btn:hover{ background:var(--bg-3); border-color:var(--line); }
.rte-btn.active{ background:rgba(3,201,136,0.14); border-color:var(--gold-dim); color:var(--gold-bright); }
.rte-sep{ width:1px; height:20px; background:var(--line); margin:0 4px; }
.rte-editable{
  min-height:280px; padding:16px; border:1px solid var(--line); border-radius:0 0 8px 8px;
  background:var(--bg-2); color:var(--ink-1); font-size:14.5px; line-height:1.75;
}
.rte-editable:focus{ outline:none; border-color:var(--gold-dim); }
.rte-editable p{ margin:0 0 14px; }
.rte-editable h3{ font-family:var(--font-display); color:var(--ink-0); font-size:17px; margin:18px 0 10px; }
.rte-editable ul, .rte-editable ol{ margin:0 0 14px; padding-left:22px; }
.rte-editable li{ margin-bottom:6px; }
.rte-editable a, .reader-body a, .lesson-desc-rendered a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }
.rte-editable blockquote, .reader-body blockquote, .lesson-desc-rendered blockquote{
  margin:0 0 14px; padding:10px 16px; border-left:3px solid var(--gold-dim);
  color:var(--ink-2); font-style:italic; background:rgba(3,201,136,0.05); border-radius:0 8px 8px 0;
}
.rte-editable code, .reader-body code, .lesson-desc-rendered code{
  font-family:var(--font-mono); font-size:0.9em; background:var(--bg-3);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--gold-bright);
}
.rte-editable img, .reader-body img, .lesson-desc-rendered img{
  max-width:100%; border-radius:10px; border:1px solid var(--line-soft); margin:6px 0 14px; display:block;
}
.rte-editable:empty:before{ content:attr(data-placeholder); color:var(--ink-3); }

/* ==========================================================================
   TRADING FLOOR — post feed, reactions, replies, tags
   ========================================================================== */
.floor-post{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
  transition:border-color .15s ease;
}
.floor-post:hover{ border-color:var(--line-strong,var(--line)); }
.floor-post:last-child{ margin-bottom:0; }
.floor-post-head{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.floor-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--teal-dim));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:13px; color:#08201f;
}
.floor-post-name{ font-size:14.5px; font-weight:700; color:var(--ink-0); line-height:1.3; }
.floor-post-time{ font-size:12px; color:var(--ink-3); }
.floor-post-body{ font-size:15px; color:var(--ink-1); line-height:1.65; margin-bottom:12px; }
.floor-post-body p{ margin:0 0 10px; }
.floor-post-body p:last-child{ margin-bottom:0; }
.floor-post-image{
  max-width:380px; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:12px; border:1px solid var(--line-soft); margin-bottom:12px; display:block;
  cursor:pointer;
}
.floor-tag{ color:var(--teal); font-weight:500; cursor:pointer; }
.floor-tag:hover{ text-decoration:underline; }

.floor-actions{ display:flex; align-items:center; gap:2px; margin-left:-8px; }
.floor-action-btn{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:5px; height:34px; padding:0 10px; border-radius:999px;
  border:none; background:transparent; color:var(--ink-3); font-size:13px;
  font-family:var(--font-body); font-weight:500; transition:background .15s ease, color .15s ease;
}
.floor-action-btn svg{ flex-shrink:0; }
.floor-action-btn:hover{ background:var(--bg-3); color:var(--ink-1); }
.floor-action-btn.active{ color:var(--gold-bright); }
.floor-action-btn.active.downvote-active{ color:#f08488; }
.floor-action-btn.active.bookmark-active{ color:var(--teal); }
.floor-action-btn.reply-btn{ margin-left:auto; }

.floor-replies{ margin-top:6px; padding-left:14px; border-left:2px solid var(--line-soft); display:none; }
.floor-replies.open{ display:block; margin-top:14px; }
.floor-reply{ display:flex; gap:10px; padding:10px 0; }
.floor-reply .floor-avatar{ width:26px; height:26px; font-size:10.5px; flex-shrink:0; }
.floor-reply-body{ flex:1; }
.floor-reply-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.floor-reply-name{ font-size:13px; font-weight:600; color:var(--ink-0); }
.floor-reply-time{ font-size:11px; color:var(--ink-3); }
.floor-reply-text{ font-size:13.5px; color:var(--ink-1); line-height:1.5; }
.floor-reply-input-row{ display:flex; align-items:center; gap:10px; margin-top:8px; padding-bottom:4px; }
.floor-reply-input-row input{
  flex:1; padding:8px 2px; border:none; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink-0); font-size:13.5px;
}
.floor-reply-input-row input:focus{ outline:none; border-bottom-color:var(--gold-dim); }
.floor-reply-input-row input::placeholder{ color:var(--ink-3); }
.floor-reply-send{
  -webkit-appearance:none; appearance:none; border:none; background:none;
  color:var(--gold-bright); font-size:13px; font-weight:600; padding:6px 4px; flex-shrink:0;
}
.floor-reply-send:disabled{ color:var(--ink-3); }

.tag-active-banner{
  display:flex; align-items:center; gap:10px; background:rgba(0,173,181,0.08);
  border:1px solid rgba(0,173,181,0.25); border-radius:8px; padding:10px 14px; margin-bottom:16px;
  font-size:13px; color:var(--ink-1);
}
.tag-active-banner button{ margin-left:auto; font-size:12px; color:var(--teal); background:none; border:none; -webkit-appearance:none; appearance:none; }

.event-item{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.event-item:last-child{ border-bottom:none; }
.event-date{ font-family:var(--font-mono); font-size:11px; color:var(--gold); text-align:center; width:44px; flex-shrink:0; }
.event-date b{ display:block; font-size:17px; color:var(--ink-0); }
.event-body h4{ font-size:13.5px; color:var(--ink-0); font-weight:600; margin-bottom:3px; }
.event-body span{ font-size:12px; color:var(--ink-3); }

.badge-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:640px){ .badge-grid{ grid-template-columns:repeat(2,1fr); } }
.badge-item{ text-align:center; padding:16px 8px; border-radius:10px; border:1px solid var(--line); background:var(--bg-3); }
.badge-item.locked{ opacity:0.35; }
.badge-ic{ width:40px; height:40px; margin:0 auto 10px; border-radius:50%; background:rgba(3,201,136,0.12); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.badge-item span{ font-size:11px; color:var(--ink-2); }

/* Compact row layout, specifically for achievements.html — a 43-badge
   collection reads much better as scannable rows than as square tiles,
   which is what dashboard-user.html's small 4-badge preview widget still
   correctly uses .badge-grid/.badge-item/.badge-ic for, above. */
.badge-list{ display:grid; grid-template-columns:1fr; gap:9px; }
@media (min-width:780px){ .badge-list{ grid-template-columns:1fr 1fr; } }
.badge-row{
  display:flex; align-items:center; gap:13px; padding:11px 14px;
  border-radius:10px; border:1px solid var(--line); background:var(--bg-3);
  transition:border-color .15s ease;
}
.badge-row.locked{ opacity:0.38; }
.badge-row-ic{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
}
.badge-row-text{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.badge-row-title{ font-size:13px; font-weight:600; color:var(--ink-0); line-height:1.3; }
.badge-row-desc{ font-size:11.5px; color:var(--ink-3); line-height:1.35; }
.badge-row-status{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; }

/* table (admin) */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; min-width:640px; }
thead th{ text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3); padding:0 14px 12px; border-bottom:1px solid var(--line); font-weight:600; }
tbody td{ padding:14px; border-bottom:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-1); }
tbody tr:hover{ background:var(--bg-3); }
.cell-user{ display:flex; align-items:center; gap:10px; }

/* Responsive student/record cards — used instead of a wide table so nothing
   requires horizontal scrolling on a phone screen. */
.record-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:16px; border-bottom:1px solid var(--line-soft);
}
.record-card:last-child{ border-bottom:none; }
.record-card .cell-user{ flex:1 1 200px; min-width:180px; }
.record-stats{ display:flex; flex-wrap:wrap; gap:20px; flex:2 1 320px; }
.record-stat{ min-width:80px; }
.record-stat .rs-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3); display:block; margin-bottom:3px; }
.record-stat .rs-val{ font-size:13.5px; color:var(--ink-0); font-weight:600; }
.cell-avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dim)); flex-shrink:0; }
.cell-name{ color:var(--ink-0); font-weight:600; display:block; }
.cell-sub{ color:var(--ink-3); font-size:12px; }
.status-tag{ font-family:var(--font-mono); font-size:11px; padding:4px 9px; border-radius:5px; }
.status-tag.active{ color:var(--bull); background:rgba(47,191,143,0.1); }
.status-tag.trial{ color:var(--gold); background:rgba(3,201,136,0.1); }
.status-tag.expired{ color:var(--bear); background:rgba(229,72,77,0.1); }
.row-actions{ display:flex; gap:8px; }
.icon-btn{ width:30px; height:30px; border-radius:6px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-2); background:transparent; }
.icon-btn:hover{ border-color:var(--gold-dim); color:var(--gold); }

.mini-bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.mini-bar-row .label{ width:110px; font-size:12.5px; color:var(--ink-2); flex-shrink:0; }
.mini-bar-track{ flex:1; height:8px; background:var(--line); border-radius:6px; overflow:hidden; }
.mini-bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--teal-dim),var(--teal)); }
.mini-bar-val{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); width:38px; text-align:right; }

/* Variant for longer labels (full chapter titles rather than short names) —
   wraps to two lines on desktop instead of overflowing, and stacks the
   label above the bar entirely once the screen is too narrow for both. */
.mini-bar-row.wide-label{ align-items:flex-start; }
.mini-bar-row.wide-label .label{ width:200px; line-height:1.4; padding-top:2px; }
.mini-bar-row.wide-label .mini-bar-track{ margin-top:6px; }
.mini-bar-row.wide-label .mini-bar-val{ padding-top:2px; }
@media (max-width:640px){
  .mini-bar-row.wide-label{ flex-wrap:wrap; }
  .mini-bar-row.wide-label .label{ width:100%; margin-bottom:6px; }
  .mini-bar-row.wide-label .mini-bar-track{ margin-top:0; flex:1 1 auto; }
}

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:14px; flex-wrap:wrap; }
.search-box{ display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:9px 14px; min-width:240px; }
.search-box input{ background:none; border:none; color:var(--ink-0); font-size:13.5px; width:100%; }
.search-box input:focus{ outline:none; }
.search-box svg{ color:var(--ink-3); flex-shrink:0; }

.tabs-underline{ display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tabs-underline button{ background:none; border:none; padding:10px 2px; font-size:14px; color:var(--ink-2); font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs-underline button.active{ color:var(--ink-0); border-color:var(--gold); }

.notice{ display:flex; gap:12px; align-items:flex-start; background:rgba(3,201,136,0.07); border:1px solid var(--gold-dim); border-radius:10px; padding:14px 16px; margin-bottom:24px; }
.notice svg{ color:var(--gold); flex-shrink:0; margin-top:2px; }
.notice p{ font-size:13.5px; color:var(--ink-1); margin:0; }
.notice b{ color:var(--ink-0); }

.upload-drop{ border:1.5px dashed var(--line); border-radius:12px; padding:34px; text-align:center; }
.upload-drop svg{ color:var(--ink-3); margin-bottom:12px; }
.upload-drop p{ font-size:13.5px; color:var(--ink-2); margin-bottom:14px; }

/* fade-in-on-scroll utility */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }


/* ==========================================================================
   SINGLE-PAGE APP — view switching & chapter detail panels
   ========================================================================== */
.chapter[data-expand]{ cursor:pointer; }
.chapter-detail{
  grid-column:1 / -1;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, opacity .3s ease, margin .35s ease;
  opacity:0;
}
.chapter.expanded .chapter-detail{
  max-height:600px;
  opacity:1;
  margin-top:18px;
}
.chapter-detail-inner{
  border-top:1px solid var(--line-soft);
  padding-top:16px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:24px;
}
@media (max-width:700px){ .chapter-detail-inner{ grid-template-columns:1fr; } }
.chapter-detail h5{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.chapter-detail p{ font-size:13.5px; color:var(--ink-1); line-height:1.7; margin:0; }
.lesson-item{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  font-size:13.5px; color:var(--ink-1); border-bottom:1px solid var(--line-soft);
}
.lesson-item:last-child{ border-bottom:none; }
.lesson-item .lnum{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  width:20px; flex-shrink:0;
}
.chapter-chevron{ transition:transform .3s ease; color:var(--ink-3); }
.chapter.expanded .chapter-chevron{ transform:rotate(180deg); color:var(--gold); }

.part-heading{
  font-size:18px; color:var(--ink-0); margin:36px 0 16px; display:flex; align-items:center; gap:12px;
}
.part-heading .part-count{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:20px; padding:3px 10px;
}

.dash-back{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2);
  padding:8px 12px; border-radius:8px; margin-bottom:6px;
}
.dash-back:hover{ background:var(--bg-2); color:var(--ink-0); }


/* ==========================================================================
   CHAPTER READER VIEW
   ========================================================================== */
.reader-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }

/* Paywall-style gate for guest visitors — dims the real content underneath
   instead of hiding it outright, with a card overlaid on top. */
.reader-shell.paywall-dimmed, .dash-shell.paywall-dimmed{
  opacity:0.08; pointer-events:none; user-select:none; filter:blur(6px);
}
.paywall-overlay{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.paywall-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:36px 30px; max-width:400px; width:100%; text-align:center;
  box-shadow:0 20px 60px -15px rgba(0,0,0,0.7), 0 0 0 1px rgba(3,201,136,0.08);
}
.paywall-icon{
  width:48px; height:48px; margin:0 auto 18px; border-radius:50%;
  background:rgba(3,201,136,0.12); border:1px solid rgba(3,201,136,0.3);
  display:flex; align-items:center; justify-content:center; color:var(--gold-bright);
}
.paywall-card h2{ font-size:20px; margin-bottom:10px; }
.paywall-card p{ font-size:14px; color:var(--ink-2); line-height:1.6; margin-bottom:24px; }
.paywall-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
@media (max-width:960px){ .reader-shell{ grid-template-columns:1fr; } }

.reader-toc{
  background:var(--bg-0); border-right:1px solid var(--line-soft);
  padding:20px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media (max-width:960px){ .reader-toc{ display:none; } }
.reader-toc-head{ padding:6px 8px 18px; }
.reader-toc-head a{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.reader-toc-head a:hover{ color:var(--gold); }
.toc-part{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); padding:14px 8px 6px; }
.toc-item{
  display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:7px;
  font-size:13px; color:var(--ink-2); cursor:pointer; margin-bottom:1px;
}
.toc-item:hover{ background:var(--bg-2); color:var(--ink-0); }
.toc-item.current{ background:rgba(3,201,136,0.1); color:var(--gold-bright); }
.toc-num{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); width:20px; flex-shrink:0; }
.toc-item.current .toc-num{ color:var(--gold); }
.toc-check{ margin-left:auto; color:var(--bull); flex-shrink:0; opacity:0; }
.toc-item.done .toc-check{ opacity:1; }

.reader-main{ padding:32px 40px 80px; max-width:900px; }
@media (max-width:640px){ .reader-main{ padding:20px; } }

.reader-crumb{ font-size:12.5px; color:var(--ink-3); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.reader-crumb a{ color:var(--ink-2); }
.reader-crumb a:hover{ color:var(--gold); }

.reader-head{ margin-bottom:24px; }
.reader-head .chapter-meta{ margin-bottom:14px; }
.reader-head h1{ font-size:clamp(24px,3.4vw,32px); margin-bottom:10px; line-height:1.15; }

.video-frame{
  position:relative; width:100%; border-radius:var(--radius-md); overflow:hidden;
  background:#000; border:1px solid var(--line); margin-bottom:8px;
  aspect-ratio:16/9;
}
.video-frame video{ width:100%; height:100%; display:block; object-fit:cover; }
.video-note{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-3);
  margin-bottom:28px; font-family:var(--font-mono);
}
.video-note svg{ flex-shrink:0; color:var(--gold-dim); }

.reader-body p{ font-size:15.5px; color:var(--ink-1); line-height:1.85; margin-bottom:18px; }

.lesson-block{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px 22px; margin-bottom:12px; display:flex; gap:16px; align-items:flex-start;
}
.lesson-check{
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:transparent; margin-top:2px;
  transition:all .15s ease; cursor:pointer;
}
.lesson-check:hover{ border-color:var(--gold-dim); }
.lesson-check.done{ background:var(--bull); border-color:var(--bull); color:#08160f; }
.lesson-block h4{ font-size:14.5px; color:var(--ink-0); margin-bottom:6px; font-weight:600; }
.lesson-desc-rendered p{ margin:0; }

.tv-chart-embed{
  margin:20px 0; border:1px solid #1e1e22; border-radius:12px; overflow:hidden; background:#050506;
}
.tv-chart-caption{
  padding:12px 16px; font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
  border-bottom:1px solid #1e1e22; letter-spacing:0.02em;
}
.lesson-block p{ font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.6; }

.reader-nav{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:40px; padding-top:28px; border-top:1px solid var(--line-soft);
}
.reader-nav-btn{
  display:flex; flex-direction:column; gap:4px; max-width:280px; padding:14px 18px;
  border:1px solid var(--line); border-radius:10px; transition:all .15s ease;
}
.reader-nav-btn:hover{ border-color:var(--gold-dim); background:var(--bg-2); }
.reader-nav-btn.next{ text-align:right; margin-left:auto; }
.reader-nav-btn span{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.06em; }
.reader-nav-btn b{ font-size:13.5px; color:var(--ink-0); font-weight:600; }

.reader-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.reader-toc-toggle{ display:none; }
@media (max-width:960px){ .reader-toc-toggle{ display:inline-flex; } }

.mark-complete-row{ display:flex; align-items:center; gap:12px; margin:28px 0; }

/* Single column is the mobile/tablet default; the split is opted into at the
   desktop breakpoint rather than overridden back out of. */
.floor-layout-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
@media (min-width:901px){
  /* The nav already holds 25% of the viewport, so this grid is splitting the
     remaining 75%. 2fr / 1fr of that is 50% / 25% of the page — the target
     ratio — which is why it is 2:1 here and not 1:1.
     minmax(0,...) on both tracks because a grid item's default min-width is
     auto, so one wide chart image or long unbroken string would push the
     timeline past its share and squash the sidebar. */
  .floor-layout-grid{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; }
  /* Tighter side padding on this page only. The 34px default is the gutter
     between the nav and the feed, and at three columns it read as wasted
     space rather than breathing room. */
  #floor-page-main{ padding-left:20px; padding-right:20px; }
  /* The inherited 1360px cap would stop the percentages taking effect at all
     on a wide monitor, pinning the layout well short of the viewport. */
  #floor-page-main{ max-width:none; }
}
@media (max-width:900px){ #floor-sidebar-col{ order:-1; } }
#floor-page-main{ max-width:1360px; }
@media (max-width:640px){ #floor-sidebar-col{ display:none; } }

/* Floating "New post" button — replaces the old always-open composer so
   the post feed itself gets the visual dominance, not a big empty textarea. */
.floor-fab{
  position:fixed; right:28px; bottom:28px; z-index:400;
  display:flex; align-items:center; gap:9px;
  padding:14px 20px 14px 16px; border-radius:999px; border:none;
  background:var(--gold); color:#08201f; font-weight:700; font-size:14px;
  box-shadow:0 8px 24px -6px rgba(3,201,136,0.55), 0 0 0 1px rgba(3,201,136,0.3);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.floor-fab:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -6px rgba(3,201,136,0.6), 0 0 0 1px rgba(3,201,136,0.35); }
.floor-fab-label{ white-space:nowrap; }
@media (max-width:640px){
  .floor-fab{ right:18px; bottom:18px; padding:14px; }
  .floor-fab-label{ display:none; }
}

.floor-composer-modal-overlay{
  position:fixed; inset:0; z-index:800;
  background:rgba(6,8,12,0.72); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
}
@media (min-width:640px){
  .floor-composer-modal-overlay{ align-items:center; padding:24px; }
}
.floor-composer-modal{
  background:var(--bg-1); border:1px solid var(--line); width:100%; max-width:560px;
  border-radius:16px 16px 0 0; padding:22px 22px 26px; max-height:88vh; overflow-y:auto;
  box-shadow:0 -20px 60px -15px rgba(0,0,0,0.6);
}
@media (min-width:640px){
  .floor-composer-modal{ border-radius:16px; }
}
.floor-composer-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.floor-composer-modal-head h3{ font-size:17px; margin:0; }

/* ==========================================================================
   TRADE JOURNAL — tabs, calendar grid, tag editor, trade rows
   ========================================================================== */
.journal-select{
  padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-0); font-size:13.5px; width:100%;
}
.journal-select:focus{ border-color:var(--gold-dim); outline:none; }

.journal-tag-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink-2); font-size:12.5px;
  cursor:pointer; user-select:none; transition:all .15s ease;
}
.journal-tag-chip.active{ background:rgba(3,201,136,0.12); border-color:var(--gold-dim); color:var(--gold-bright); }

.journal-trade-row{
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .15s ease;
}
.journal-trade-row:hover{ border-color:var(--gold-dim); }
.journal-trade-row-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.journal-pnl-pos{ color:#03c988; font-weight:700; font-family:var(--font-mono); }
.journal-pnl-neg{ color:#e5484d; font-weight:700; font-family:var(--font-mono); }
.journal-pnl-flat{ color:var(--ink-3); font-weight:700; font-family:var(--font-mono); }

.journal-calendar-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.journal-cal-daylabel{ font-size:10.5px; color:var(--ink-3); text-align:center; font-family:var(--font-mono); padding-bottom:4px; }
.journal-cal-cell{
  aspect-ratio:1; border-radius:8px; border:1px solid var(--line); padding:6px;
  display:flex; flex-direction:column; justify-content:space-between; cursor:pointer;
  transition:border-color .15s ease; background:var(--bg-2); min-height:56px;
}
.journal-cal-cell:hover{ border-color:var(--gold-dim); }
.journal-cal-cell.empty{ border:none; background:transparent; cursor:default; }
.journal-cal-cell.win{ background:rgba(3,201,136,0.1); border-color:rgba(3,201,136,0.3); }
.journal-cal-cell.loss{ background:rgba(229,72,77,0.1); border-color:rgba(229,72,77,0.3); }
.journal-cal-daynum{ font-size:11px; color:var(--ink-3); font-family:var(--font-mono); }
.journal-cal-pnl{ font-size:10.5px; font-weight:700; font-family:var(--font-mono); }
.journal-cal-count{ font-size:9.5px; color:var(--ink-3); font-family:var(--font-mono); }
@media (max-width:560px){
  .journal-cal-pnl{ font-size:9px; }
  .journal-cal-daynum{ font-size:10px; }
}

.journal-tag-editor{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.journal-tag-editor .journal-tag-chip{ padding:6px 10px 6px 14px; }
.journal-tag-editor .journal-tag-remove{ display:flex; align-items:center; justify-content:center; opacity:0.6; }
.journal-tag-editor .journal-tag-remove:hover{ opacity:1; }
.journal-tag-add-input{
  padding:6px 12px; border-radius:999px; border:1px dashed var(--line); background:transparent;
  color:var(--ink-0); font-size:12.5px; width:140px;
}

.journal-analytics-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.journal-analytics-row:last-child{ border-bottom:none; }
.journal-analytics-bar-track{ flex:1; height:6px; border-radius:999px; background:var(--bg-3,#1e1e22); overflow:hidden; margin:0 12px; }
.journal-analytics-bar-fill{ height:100%; border-radius:999px; }

/* ==========================================================================
   SITE PAGES — legal/info pages (About, Support, Terms, Privacy, etc.)
   ========================================================================== */
.site-page-hero{ padding:64px 0 24px; border-bottom:1px solid var(--line-soft); margin-bottom:48px; }
.site-page-hero h1{ font-size:clamp(28px,4vw,40px); margin-bottom:10px; }
.site-page-hero .updated-note{ color:var(--ink-3); font-size:12.5px; font-family:var(--font-mono); }
.article-wrap{ max-width:760px; margin:0 auto; padding-bottom:80px; }
.article-body{ font-size:15.5px; color:var(--ink-1); line-height:1.75; }
.article-body h2{ font-family:var(--font-display); color:var(--ink-0); font-size:21px; margin:36px 0 14px; }
.article-body h3{ font-family:var(--font-display); color:var(--ink-0); font-size:17px; margin:24px 0 10px; }
.article-body p{ margin:0 0 16px; }
.article-body ul, .article-body ol{ margin:0 0 16px; padding-left:22px; }
.article-body li{ margin-bottom:6px; }
.article-body a{ color:var(--gold); }
.article-body strong{ color:var(--ink-0); }
.footer-legal-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }
.footer-legal-row a{ font-size:12.5px; color:var(--ink-3); }
.footer-legal-row a:hover{ color:var(--gold); }

/* ==========================================================================
   LOADING ANIMATION — shared Lottie-based loading state
   ========================================================================== */
.loading-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 16px; gap:10px;
}
.loading-lottie-wrap{ width:40px; height:40px; }
.loading-lottie-wrap svg{ width:100%; height:100%; }
.loading-state-text{ color:var(--ink-3); font-size:13px; margin:0; }

/* ==========================================================================
   ACCESS GATE — hides real content until an access check resolves, so
   gated chapters/models/indicators/pages never flash their real content
   before the paywall applies. Starts active by default (in the HTML);
   JS removes it only once a check has actually completed.
   ========================================================================== */
.access-gate-overlay{
  position:fixed; inset:0; z-index:700;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-0);
}
.reader-shell.gate-pending, .dash-shell.gate-pending{
  visibility:hidden;
}

/* ==========================================================================
   VIEW-ONLY ACCESS — a student can see a page's content but not interact
   with it (e.g. Starter can browse the Trading Floor but not post/react).
   Set via plan-guard.js adding .view-only-mode to <body> when
   getPageAccessLevel() returns 'view'. Trading Floor is the only page with
   specific restrictions wired up so far.
   ========================================================================== */
body.view-only-mode #floor-fab-btn{ display:none; }
body.view-only-mode #floor-view-only-notice{ display:flex; }
body.view-only-mode .floor-action-btn[data-action="like"],
body.view-only-mode .floor-action-btn[data-action="upvote"],
body.view-only-mode .floor-action-btn[data-action="downvote"],
body.view-only-mode .floor-action-btn[data-action="bookmark"]{ display:none; }
body.view-only-mode .floor-reply-input-row{ display:none; }

/* ==========================================================================
   NOTIFICATIONS — bell icon + badge in the mobile topnav, dropdown panel
   ========================================================================== */
.notif-bell-wrap{ position:relative; }
.notif-badge{
  display:none; align-items:center; justify-content:center;
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:var(--bear); color:#fff;
  font-size:9.5px; font-weight:700; font-family:var(--font-mono); line-height:1;
}
.notif-panel{
  display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:200;
  width:320px; max-width:calc(100vw - 32px); max-height:420px; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px -10px rgba(0,0,0,0.5);
}
.notif-panel-head{ padding:14px 16px; border-bottom:1px solid var(--line-soft); font-weight:700; font-size:13.5px; color:var(--ink-0); }
.notif-item{
  display:flex; gap:10px; align-items:flex-start; padding:12px 16px;
  border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit;
  transition:background .12s ease;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--bg-3); }
.notif-item.unread{ background:rgba(3,201,136,0.05); }
.notif-item-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(3,201,136,0.1); color:var(--gold); margin-top:1px;
}
.notif-item-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.notif-item-msg{ font-size:13px; color:var(--ink-1); line-height:1.4; }
.notif-item-time{ font-size:11px; color:var(--ink-3); font-family:var(--font-mono); }
@media (max-width:640px){
  .notif-panel{ position:fixed; top:60px; right:16px; left:16px; width:auto; }
}

/* ==========================================================================
   LIGHTBOX — click any Trading Floor post image to see it uncropped at
   full quality. One shared overlay, reused for every image on the page.
   ========================================================================== */
.floor-lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(6,8,12,0.92); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:32px;
  cursor:zoom-out;
}
.floor-lightbox-overlay img{
  max-width:100%; max-height:90vh; border-radius:8px; object-fit:contain;
  box-shadow:0 20px 60px -10px rgba(0,0,0,0.6); cursor:default;
}
.floor-lightbox-close{
  position:fixed; top:20px; right:20px; z-index:901;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:rgba(20,24,30,0.8); color:var(--ink-0); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
@media (max-width:640px){
  .floor-lightbox-overlay{ padding:16px; }
}

.badge-category{ margin-bottom:28px; }
.badge-category:last-child{ margin-bottom:0; }
.badge-category-heading{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}

.profile-badge-ic{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  border-style:solid; border-width:2px;
  cursor:default; transition:transform .15s ease;
}
.profile-badge-ic:hover{ transform:scale(1.12); }

/* ==========================================================================
   TRADING FLOOR — compact category tabs + filter pills, replacing the
   previous full .panel header (was taking too much vertical space).
   ========================================================================== */
.floor-page-topbar{ margin-bottom:14px; } /* was 30px via the shared .dash-topbar — too much gap above the tabs on this page specifically */
.floor-controls-bar{
  margin-bottom:16px; background:var(--bg-2); border:1px solid var(--line-soft);
  border-radius:12px; padding:10px 12px;
}
.floor-category-tabs{ display:flex; justify-content:center; gap:4px; margin-bottom:8px; }
.floor-cat-tab{
  -webkit-appearance:none; appearance:none;
  padding:7px 13px; border-radius:8px; border:1px solid transparent;
  font-size:13.5px; font-weight:600; color:var(--ink-3); background:transparent;
  transition:all .15s ease;
}
.floor-cat-tab.active{ background:var(--bg-3); border-color:var(--line); color:var(--ink-0); }
.floor-filter-row{ display:flex; align-items:center; gap:10px; }
.floor-filter-pills{
  display:flex; align-items:center; gap:6px; min-width:0; flex:1;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.floor-filter-pills::-webkit-scrollbar{ display:none; }
.floor-pill{
  -webkit-appearance:none; appearance:none; flex-shrink:0;
  padding:5px 12px; border-radius:14px; border:1px solid var(--line);
  font-size:12px; color:var(--ink-3); font-weight:500; background:transparent;
  transition:all .15s ease; white-space:nowrap;
}
.floor-pill.active, .floor-pill:hover{ background:rgba(3,201,136,0.08); border-color:var(--gold-dim); color:var(--gold-bright); }
.floor-pill-sep{ width:1px; height:16px; background:var(--line); flex-shrink:0; }

/* Flair picker inside the composer */
.floor-flair-picker{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.floor-flair-btn{
  -webkit-appearance:none; appearance:none;
  padding:5px 12px; border-radius:14px; border:1px solid var(--line);
  font-size:12px; color:var(--ink-2); font-weight:500; background:transparent;
  transition:all .15s ease;
}
.floor-flair-btn.selected{ background:rgba(3,201,136,0.12); border-color:var(--gold-dim); color:var(--gold-bright); }

/* Flair label on a published post — deliberately flat text, not a
   bordered pill, so it doesn't visually compete with the role tag. Lives
   on the timestamp row (see .floor-post-time), not the name row. */
.floor-flair-label{
  font-size:10.5px; font-weight:500; color:var(--ink-3);
  margin-left:7px;
}
.floor-post-edited{ color:var(--ink-3); font-weight:400; margin-left:5px; }

/* Post ⋮ menu — combined Edit/Delete, replacing two separate icon buttons */
.floor-post-menu-wrap{ position:relative; margin-left:auto; }
.floor-post-menu{
  position:absolute; top:calc(100% + 4px); right:0; z-index:20;
  background:var(--bg-3); border:1px solid var(--line); border-radius:8px;
  min-width:108px; padding:4px; box-shadow:0 8px 24px -6px rgba(0,0,0,0.45);
}
.floor-post-menu button{
  display:block; width:100%; text-align:left; padding:7px 10px; border-radius:5px;
  font-size:13px; color:var(--ink-1); background:transparent; transition:background .12s ease;
}
.floor-post-menu button:hover{ background:var(--bg-2); }
.floor-post-menu button[data-delete-post]{ color:var(--bear); }

/* Moderator badge — separate from the role tag (plan), shown next to it
   for anyone with moderator access. Deliberately a shaped emblem rather
   than a text pill: it reads as a distinct mark of authority and never
   gets mistaken for a plan tier tag like ELITE sitting beside it. All the
   internal shading, gloss and texture lives in the SVG itself (paint
   servers are defined once in trading-floor.html); the wrapper only
   handles size and the shadow the badge casts on the card. */
.floor-mod-shield{
  display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px;
  margin-left:7px; vertical-align:middle; flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(0,173,181,0.3));
}
.floor-mod-shield svg{ display:block; width:21px; height:21px; }

/* "Admin dashboard" entry point on student pages (injected by admin-link.js
   only for accounts with an /admins/{uid} doc). Tinted teal so it reads as a
   context switch out of the student area rather than another student link. */
.side-link.admin-jump{ color:var(--teal); }
.side-link.admin-jump svg{ color:var(--teal); }
.side-link.admin-jump:hover{ background:rgba(0,173,181,.10); color:var(--teal); }
.icon-btn.admin-jump-icon{ color:var(--teal); border-color:var(--teal-dim); }
.icon-btn.admin-jump-icon:hover{ border-color:var(--teal); color:var(--teal); background:rgba(0,173,181,.10); }

/* "Back to my account" on admin pages — the return trip for .admin-jump.
   Gold rather than teal so the two directions read as distinct at a glance. */
.side-link.student-jump{ color:var(--gold); }
.side-link.student-jump svg{ color:var(--gold); }
.side-link.student-jump:hover{ background:rgba(3,201,136,.10); color:var(--gold); }
.icon-btn.student-jump-icon{ color:var(--gold); border-color:var(--gold-dim); }
.icon-btn.student-jump-icon:hover{ border-color:var(--gold); color:var(--gold); background:rgba(3,201,136,.10); }

/* Activity log filters ---------------------------------------------------- */
.log-filter-input{
  width:100%; box-sizing:border-box;
  font-family:var(--font-mono); font-size:12.5px;
  padding:7px 9px; border-radius:6px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink-0);
}
.log-filter-input:focus{ outline:none; border-color:var(--teal); }

/* Admin sidebar accordion groups ------------------------------------------ */
.side-group{ margin-bottom:4px; }
.side-group-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-3);
  padding:14px 12px 8px; text-align:left;
  transition:color .15s ease;
}
.side-group-head:hover{ color:var(--ink-2); }
.side-group-chev{ transition:transform .2s ease; flex-shrink:0; opacity:0.7; }
.side-group.open .side-group-chev{ transform:rotate(180deg); }
/* grid-template-rows 0fr -> 1fr animates a container of unknown height, which
   max-height cannot do without hard-coding a value that clips or lags. */
.side-group-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .22s ease;
}
.side-group.open .side-group-body{ grid-template-rows:1fr; }
/* The single child is what actually gets clipped while the row collapses. */
.side-group-inner{ overflow:hidden; min-height:0; }

/* In-dashboard plan upgrade modal ----------------------------------------- */
.plan-modal-overlay{
  display:none; position:fixed; inset:0; z-index:800;
  background:rgba(5,5,6,0.88);
  align-items:center; justify-content:center; padding:20px;
  overflow-y:auto; overscroll-behavior:contain;
}
.plan-modal-overlay.open{ display:flex; }
.plan-modal{
  position:relative; width:100%; max-width:760px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; margin:auto;
}
.plan-modal-close{
  position:absolute; top:14px; right:14px;
  background:none; border:none; color:var(--ink-3); cursor:pointer;
  padding:6px; line-height:0; border-radius:6px;
}
.plan-modal-close:hover{ color:var(--ink-0); background:var(--bg-3); }
.plan-modal-title{ font-size:20px; margin:0 0 6px; padding-right:30px; }
.plan-modal-sub{ color:var(--ink-3); font-size:13.5px; line-height:1.6; margin:0 0 20px; }
.plan-modal-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.plan-modal-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:18px 16px; display:flex; flex-direction:column;
}
.plan-modal-pill{
  align-self:flex-start; font-family:var(--font-mono); font-size:10.5px;
  font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid; margin-bottom:12px;
}
.plan-modal-price{ font-size:26px; font-weight:700; color:var(--ink-0); margin-bottom:14px; }
.plan-modal-price span{ font-size:13px; font-weight:500; color:var(--ink-3); }
.plan-modal-features{ list-style:none; padding:0; margin:0 0 18px; flex:1; }
.plan-modal-features li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--ink-2); line-height:1.5; margin-bottom:8px;
}
.plan-modal-features svg{ color:var(--teal); flex-shrink:0; margin-top:3px; }
.plan-modal-pick{ width:100%; }
@media (max-width:600px){
  .plan-modal{ padding:22px 16px; }
  .plan-modal-grid{ grid-template-columns:1fr; }
}


/* Invite row: signup vs upgrade points broken out --------------------------- */
.invite-row{ align-items:flex-start; }
.invite-pts{ text-align:right; min-width:118px; margin-left:12px; }
.invite-pts-line{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3);
  margin-bottom:3px;
}
.invite-pts-line b{ color:#f5c542; font-size:12.5px; min-width:34px; text-align:right; }
.invite-pts-line.converted b{ color:#03c988; }
.invite-pts-line.pending b{ color:var(--ink-3); font-weight:400; }
.invite-pts-total{
  font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--ink-0);
  border-top:1px solid var(--line-soft); margin-top:6px; padding-top:5px;
}

/* Signup's visual pane ends in a stat row rather than a chart. It carried its
   layout inline, so it collapsed to content width once the pane switched to
   align-items:flex-start. */
.auth-visual-stats{
  display:flex; gap:14px; position:relative; z-index:2;
  width:100%; max-width:440px;
}
.auth-visual-stats .stat-card{ flex:1; background:var(--bg-2); }

/* Admin action queue ------------------------------------------------------- */
.todo-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 4px; border-bottom:1px solid var(--line-soft);
}
.todo-item:last-of-type{ border-bottom:none; }
.todo-icon{
  width:30px; height:30px; flex-shrink:0; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-3); color:var(--ink-2);
}
.todo-item.urgent .todo-icon{ background:rgba(229,72,77,0.12); color:var(--bear); }
.todo-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.todo-title{ font-size:14px; font-weight:600; color:var(--ink-0); }
a.todo-title:hover{ color:var(--teal); }
.todo-sub{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.todo-actions{ display:flex; gap:6px; flex-shrink:0; align-items:center; }

/* Icon actions. Sized to the 44px minimum touch target even though the glyph
   is 16px — the padding is the tappable area, not decoration. */
.todo-act{
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-2);
  cursor:pointer; transition:all .15s ease;
  position:relative;
}
.todo-act:hover{ color:var(--teal); border-color:var(--teal-dim); background:var(--bg-3); }
.todo-act-done:hover{ color:var(--bull); border-color:rgba(3,201,136,0.45); }
.todo-act:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.todo-act.is-busy{ opacity:.45; pointer-events:none; }

/* Tooltip. Driven by data-tip rather than the title attribute: the native
   tooltip takes about a second to appear, cannot be styled, and never shows
   at all on touch. */
.todo-act::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); right:0;
  white-space:nowrap;
  background:var(--bg-3); color:var(--ink-0);
  border:1px solid var(--line); border-radius:7px;
  padding:6px 9px; font-size:11.5px; font-weight:500; line-height:1;
  box-shadow:0 8px 20px -6px rgba(0,0,0,0.6);
  opacity:0; transform:translateY(3px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:20;
}
.todo-act:hover::after, .todo-act:focus-visible::after{ opacity:1; transform:translateY(0); }
@media (max-width:560px){
  /* No hover on touch, so the tooltip would only ever appear mid-tap and then
     risk running off-screen. Suppressed; aria-label still carries the meaning. */
  .todo-act::after{ display:none; }
}
.todo-empty{
  display:flex; align-items:center; gap:10px;
  padding:18px 4px; color:var(--ink-3); font-size:13.5px;
}
.todo-empty svg{ color:var(--bull); flex-shrink:0; }
.todo-empty p{ margin:0; }
.todo-add-row{
  display:flex; gap:8px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line-soft);
}
.todo-add-input{
  flex:1; min-width:0; padding:8px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink-0);
  font-size:13.5px;
}
.todo-add-input:focus{ outline:none; border-color:var(--teal); }
@media (max-width:560px){
  /* Icons are compact enough to stay on the same row now, so the label keeps
     its full width instead of wrapping to make room for buttons. */
  .todo-item{ flex-wrap:nowrap; }
}

/* Toast popups ------------------------------------------------------------- */
.toast-host{
  position:fixed; z-index:1000;
  top:calc(var(--topbar-h) + 14px); right:16px;
  display:flex; flex-direction:column; gap:10px;
  width:min(380px, calc(100vw - 32px));
  pointer-events:none;
}
@media (max-width:640px){
  /* Bottom on phones: closer to the thumb, and clear of the sticky header. */
  .toast-host{ top:auto; bottom:16px; right:12px; left:12px; width:auto; }
}
.toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 14px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:0 18px 44px -12px rgba(0,0,0,0.7);
  opacity:0; transform:translateY(-10px) scale(.98);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
@media (max-width:640px){ .toast{ transform:translateY(12px) scale(.98); } }
.toast.in{ opacity:1; transform:translateY(0) scale(1); }
.toast-icon{
  width:26px; height:26px; flex-shrink:0; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
}
.toast-success .toast-icon{ background:rgba(3,201,136,0.14); color:var(--bull); }
.toast-error   .toast-icon{ background:rgba(229,72,77,0.14); color:var(--bear); }
.toast-info    .toast-icon{ background:rgba(0,173,181,0.14); color:var(--teal); }
.toast-success{ border-color:rgba(3,201,136,0.32); }
.toast-error{ border-color:rgba(229,72,77,0.32); }
.toast-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.toast-title{ font-size:13.5px; font-weight:700; color:var(--ink-0); }
.toast-msg{ font-size:13px; color:var(--ink-1); line-height:1.5; word-break:break-word; }
.toast-close{
  flex-shrink:0; background:none; border:none; cursor:pointer;
  color:var(--ink-3); padding:2px; line-height:0; border-radius:5px;
}
.toast-close:hover{ color:var(--ink-0); }
@media (prefers-reduced-motion:reduce){
  .toast{ transition:opacity .15s linear; transform:none; }
  .toast.in{ transform:none; }
}

/* Students admin: collapsible rows ----------------------------------------- */
.student-row{ display:block; padding:0; }
.student-row-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px;
  background:none; border:none; cursor:pointer; text-align:left;
  color:inherit; font:inherit;
}
.student-row-head:hover{ background:var(--bg-2); }
.student-row-head:focus-visible{ outline:2px solid var(--teal); outline-offset:-2px; border-radius:10px; }
.student-row-head .cell-user{ min-width:0; flex:1; }
.student-row-chev{ color:var(--ink-3); flex-shrink:0; transition:transform .2s ease; }
.student-row.open .student-row-chev{ transform:rotate(180deg); }
/* 0fr -> 1fr animates a container whose height isn't known ahead of time,
   which max-height can only fake with a guessed value that clips or lags. */
.student-row-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .22s ease;
}
.student-row.open .student-row-body{ grid-template-rows:1fr; }
.student-row-inner{ overflow:hidden; min-height:0; }
.student-row-inner > *{ padding-left:16px; padding-right:16px; }
.student-row-inner > *:last-child{ padding-bottom:16px; }

/* Pending admin tasks pinned inside the notification panel ------------------ */
.notif-task-head{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-3);
  padding:10px 14px 6px;
}
.notif-item.notif-task{ background:rgba(0,173,181,0.05); }
.notif-item.notif-task:hover{ background:rgba(0,173,181,0.1); }
.notif-item-icon.urgent{ color:var(--bear); }
#notif-task-block{ border-bottom:1px solid var(--line); }

/* Header account menu ------------------------------------------------------ */
.account-menu-wrap{ position:relative; flex-shrink:0; }
.account-trigger{
  display:flex; align-items:center; justify-content:center;
  padding:0; background:none; cursor:pointer;
  border:1px solid var(--line); border-radius:50%;
  width:38px; height:38px; overflow:hidden;
  transition:border-color .15s ease;
}
.account-trigger:hover{ border-color:var(--teal-dim); }
.account-trigger:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.account-trigger img,
.account-trigger .floor-avatar{ width:100%; height:100%; border-radius:50%; }

.account-panel{
  display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:210;
  min-width:210px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px -10px rgba(0,0,0,0.6);
  overflow:hidden;
  padding:6px;
}
.account-menu-wrap.open .account-panel{ display:block; }
.account-panel-head{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 10px 12px; margin-bottom:4px;
  border-bottom:1px solid var(--line-soft);
}
.account-panel-name{ font-size:13.5px; font-weight:700; color:var(--ink-0); }
.account-panel-mail{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px;
}
.account-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px;
  background:none; border:none; cursor:pointer; text-align:left;
  font-size:13.5px; font-weight:500; color:var(--ink-1);
  transition:background .12s ease, color .12s ease;
}
.account-item:hover{ background:var(--bg-3); color:var(--ink-0); }
.account-item svg{ flex-shrink:0; color:var(--ink-3); }
.account-item:hover svg{ color:var(--teal); }
.account-item-danger{ color:var(--bear); }
.account-item-danger svg{ color:var(--bear); }
.account-item-danger:hover{ background:rgba(229,72,77,0.1); color:var(--bear); }
.account-item-danger:hover svg{ color:var(--bear); }

/* Messaging ---------------------------------------------------------------- */
.msg-layout{
  display:grid; grid-template-columns:320px minmax(0,1fr);
  gap:0;
  /* 190px covers .dash-main's top and bottom padding plus the page heading.
     Approximate by nature, so min-height guarantees a usable box even if the
     header or heading grows. */
  height:calc(100vh - var(--topbar-h) - 190px);
  min-height:520px;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--bg-1);
}
.msg-sidebar{
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  min-height:0; background:var(--bg-1);
}
.msg-sidebar-head{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-3);
  padding:16px 16px 10px; flex-shrink:0;
}
#msg-thread-list{ overflow-y:auto; flex:1; min-height:0; overscroll-behavior:contain; }

.msg-thread{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:11px 14px; background:none; border:none; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
  border-bottom:1px solid var(--line-soft);
  transition:background .12s ease;
}
.msg-thread:hover{ background:var(--bg-2); }
.msg-thread.active{ background:var(--bg-3); }
.msg-thread-body{ flex:1; min-width:0; }
.msg-thread-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.msg-thread-name{ font-size:14px; font-weight:600; color:var(--ink-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-thread-time{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); flex-shrink:0; }
.msg-thread-bottom{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:3px; }
.msg-thread-preview{
  font-size:12.5px; color:var(--ink-3); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg-you{ color:var(--ink-3); }
.msg-thread.has-unread .msg-thread-preview{ color:var(--ink-1); font-weight:500; }
.msg-thread-badge{
  flex-shrink:0; min-width:19px; height:19px; padding:0 6px;
  border-radius:999px; background:var(--teal); color:var(--bg-0);
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.msg-pane{ display:flex; flex-direction:column; min-height:0; background:var(--bg-0); }
.msg-pane-head{
  display:flex; align-items:center; gap:11px; flex-shrink:0;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg-1);
}
.msg-back{
  display:none; background:none; border:none; cursor:pointer;
  color:var(--ink-2); padding:2px; line-height:0;
}
.msg-peer-name{ font-size:14.5px; font-weight:700; color:var(--ink-0); min-width:0; }
.msg-peer-name:hover{ color:var(--teal); }

.msg-bubbles{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 16px; display:flex; flex-direction:column; gap:3px;
}
.msg-daysep{ text-align:center; margin:14px 0 10px; }
.msg-daysep span{
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3);
  background:var(--bg-2); border:1px solid var(--line-soft);
  padding:4px 10px; border-radius:999px;
}
.msg-row{ display:flex; }
.msg-row.mine{ justify-content:flex-end; }
.msg-bubble{
  max-width:min(78%, 520px);
  background:var(--bg-2); border:1px solid var(--line);
  padding:8px 11px 6px; border-radius:14px 14px 14px 4px;
  display:flex; flex-direction:column; gap:2px;
}
.msg-row.mine .msg-bubble{
  background:rgba(0,173,181,0.16); border-color:rgba(0,173,181,0.32);
  border-radius:14px 14px 4px 14px;
}
.msg-text{ font-size:14px; color:var(--ink-0); line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.msg-time{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); align-self:flex-end; }

.msg-composer{
  flex-shrink:0; display:flex; align-items:flex-end; gap:9px;
  padding:12px 14px; border-top:1px solid var(--line); background:var(--bg-1);
}
.msg-composer textarea{
  flex:1; min-width:0; resize:none; max-height:120px;
  padding:10px 13px; border-radius:20px;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink-0);
  font-size:14px; font-family:inherit; line-height:1.45;
}
.msg-composer textarea:focus{ outline:none; border-color:var(--teal-dim); }
.msg-send{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer; background:var(--teal); color:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, opacity .12s ease;
}
.msg-send:hover{ transform:scale(1.06); }
.msg-send:active{ transform:scale(0.96); }

.msg-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:36px 20px; text-align:center; color:var(--ink-3);
  margin:auto;
}
.msg-empty svg{ color:var(--line); }
.msg-empty p{ margin:0; font-size:14px; color:var(--ink-2); font-weight:600; }
.msg-empty span{ font-size:12.5px; }

@media (max-width:900px){
  /* One pane at a time. Splitting a phone screen in two gives neither the
     thread list nor the conversation enough width to be usable, so the
     conversation covers the list instead.
     
     The page gives up its padding, card border and heading here. On a phone
     the messages ARE the page — a rounded card floating inside gutters, under
     a title telling you what you can already see, was spending most of the
     screen on decoration. */
  #messages-main{ padding:0; max-width:none; }
  #messages-main .dash-topbar{ display:none; }

  /* Flex, not grid. The pane was an absolutely-positioned child of a grid
     container, whose containing block is resolved differently across engines —
     the result was a conversation floating in the middle of a mostly empty
     card. Flex plus a fixed overlay removes the ambiguity entirely. */
  .msg-layout{
    display:flex; flex-direction:column;
    height:calc(100dvh - var(--topbar-h));
    min-height:0;
    border:none; border-radius:0;
  }
  .msg-sidebar{ border-right:none; flex:1; min-height:0; }

  /* FULL viewport, not "below the header".
     
     Offsetting the top by --topbar-h assumed the site header was always
     sitting there — but the page scrolls, so once it had moved the pane was
     pinned 59px down with the thread list showing through the gap above it.
     
     inset:0 has no such assumption. The pane owns the screen and carries its
     own header with the back arrow, which is what a conversation should do on
     a phone anyway: one screen, one job. z-index clears both the site header
     (50) and the nav drawer (200). */
  .msg-pane{
    position:fixed; inset:0;
    z-index:300;
    transform:translateX(100%); transition:transform .22s ease;
    will-change:transform;
  }
  /* Its own header now sits against the top of the screen, so it takes the
     status-bar inset the site header would otherwise have absorbed. */
  .msg-pane .msg-pane-head{
    padding-top:calc(12px + env(safe-area-inset-top));
  }
  .msg-pane.open{ transform:translateX(0); }
  .msg-pane-head{ padding:10px 12px; }
  .msg-back{ display:block; }
  .msg-bubbles{ padding:14px 12px; }
  /* Clear of the home-bar gesture area on phones that have one. */
  .msg-composer{ padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
}

/* Header messages icon */
.msg-icon-wrap{ position:relative; flex-shrink:0; display:flex; }
.msg-icon-badge{
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--teal); color:var(--bg-0);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center;
}

/* Push notification prompt -------------------------------------------------- */
.push-prompt{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 44px 18px 18px; margin-bottom:26px;
  border-radius:14px;
  border:1px solid rgba(0,173,181,0.28);
  background:linear-gradient(135deg, rgba(0,173,181,0.09), rgba(3,201,136,0.05) 60%, transparent);
  opacity:0; transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.push-prompt.in{ opacity:1; transform:translateY(0); }
.push-prompt.out{ opacity:0; transform:translateY(-8px); }

/* Slow drifting highlight. Deliberately long and low-contrast: this sits on a
   page people load repeatedly, and anything faster becomes an irritation
   rather than a nudge. */
.push-prompt-glow{
  position:absolute; top:-60%; left:-30%;
  width:60%; height:220%;
  background:radial-gradient(ellipse at center, rgba(0,173,181,0.16), transparent 70%);
  animation:pushGlow 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pushGlow{
  0%,100%{ transform:translateX(0) rotate(8deg); opacity:.55; }
  50%    { transform:translateX(140%) rotate(8deg); opacity:.95; }
}

.push-prompt-icon{
  position:relative; flex-shrink:0;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,173,181,0.14); color:var(--teal);
  animation:pushRing 3.2s ease-in-out infinite;
  transform-origin:50% 15%;
}
/* A bell that rings occasionally rather than constantly — motion draws the eye
   once, then gets out of the way. */
@keyframes pushRing{
  0%,72%,100%{ transform:rotate(0); }
  76%{ transform:rotate(13deg); }
  80%{ transform:rotate(-11deg); }
  84%{ transform:rotate(8deg); }
  88%{ transform:rotate(-5deg); }
  92%{ transform:rotate(0); }
}

.push-prompt-body{ position:relative; flex:1; min-width:0; }
.push-prompt-body h3{ font-size:15.5px; color:var(--ink-0); margin:0 0 5px; }
.push-prompt-body p{ font-size:13.5px; color:var(--ink-2); line-height:1.6; margin:0 0 14px; }
.push-prompt-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.push-prompt-close{
  position:absolute; top:12px; right:12px;
  background:none; border:none; cursor:pointer;
  color:var(--ink-3); padding:5px; line-height:0; border-radius:6px;
  opacity:.55; transition:opacity .15s ease, color .15s ease, background .15s ease;
}
.push-prompt-close:hover{ opacity:1; color:var(--ink-0); background:var(--bg-3); }

@media (max-width:560px){
  .push-prompt{ padding:16px 40px 16px 15px; gap:12px; }
  .push-prompt-icon{ width:38px; height:38px; }
  .push-prompt-actions .btn{ flex:1; justify-content:center; }
}

/* Motion here is decoration, not information — it carries nothing the text
   does not already say, so it goes entirely when asked. */
@media (prefers-reduced-motion:reduce){
  .push-prompt{ transition:opacity .15s linear; transform:none; }
  .push-prompt.in, .push-prompt.out{ transform:none; }
  .push-prompt-glow, .push-prompt-icon{ animation:none; }
}

/* Online presence ---------------------------------------------------------- */
.msg-avatar-wrap{ position:relative; display:inline-flex; flex-shrink:0; }
.msg-avatar-wrap.online::after{
  content:''; position:absolute; right:0; bottom:0;
  width:12px; height:12px; border-radius:50%;
  background:#22e07a;
  /* Ring in the panel background, not a border on the dot — it reads as the
     dot sitting on top of the avatar rather than being cut out of it. */
  box-shadow:0 0 0 2.5px var(--bg-1), 0 0 8px rgba(34,224,122,0.7);
  animation:presencePulse 2.4s ease-in-out infinite;
}
.msg-thread.active .msg-avatar-wrap.online::after,
.msg-pane-head .msg-avatar-wrap.online::after{ box-shadow:0 0 0 2.5px var(--bg-3), 0 0 8px rgba(34,224,122,0.7); }
@keyframes presencePulse{
  0%,100%{ opacity:1; }
  50%    { opacity:.62; }
}
.msg-peer-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.msg-peer-status{ font-size:11.5px; color:var(--ink-3); }
.msg-peer-status.online{ color:#22e07a; }

.presence-choice{ display:flex; flex-direction:column; gap:8px; }
.presence-option{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 14px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg-2);
  transition:border-color .15s ease, background .15s ease;
}
.presence-option:hover{ background:var(--bg-3); }
.presence-option input{ margin-top:3px; flex-shrink:0; }
.presence-option:has(input:checked){ border-color:var(--teal-dim); background:rgba(0,173,181,0.07); }
.presence-option-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.presence-option-title{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--ink-0);
}
.presence-option-sub{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.presence-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--ink-3); flex-shrink:0;
}
.presence-dot.online{ background:#22e07a; box-shadow:0 0 7px rgba(34,224,122,0.65); }

/* Typing indicator --------------------------------------------------------- */
.msg-typing{
  display:flex; align-items:center; gap:9px; flex-shrink:0;
  padding:6px 18px 10px; font-size:12.5px; color:var(--ink-3);
}
.msg-typing-dots{ display:inline-flex; gap:4px; align-items:center; }
.msg-typing-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--teal);
  display:block; animation:typingBounce 1.25s ease-in-out infinite;
}
/* Staggered so the three read as a wave rather than one blinking blob. */
.msg-typing-dots i:nth-child(2){ animation-delay:.16s; }
.msg-typing-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes typingBounce{
  0%,60%,100%{ transform:translateY(0); opacity:.42; }
  30%        { transform:translateY(-5px); opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .msg-avatar-wrap.online::after{ animation:none; }
  .msg-typing-dots i{ animation:none; opacity:.85; }
}

/* Post-as selector + team account ------------------------------------------ */
.floor-postas{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 13px; margin-bottom:12px;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-2);
}
.floor-postas-label{ font-size:12px; color:var(--ink-3); flex-shrink:0; }
.floor-postas-opts{ display:flex; gap:7px; flex-wrap:wrap; }
.floor-postas-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg-3);
  color:var(--ink-2); font-size:12.5px; font-weight:600;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.floor-postas-btn:hover{ color:var(--ink-0); }
.floor-postas-btn.is-active{
  border-color:var(--teal-dim); background:rgba(0,173,181,0.10); color:var(--ink-0);
}
.floor-postas-avatar{
  width:22px; height:22px; border-radius:50%; object-fit:cover;
  flex-shrink:0; background:var(--bg-1);
}
.floor-postas-tag{
  font-style:normal; font-size:9.5px; letter-spacing:.08em;
  padding:2px 6px; border-radius:4px;
  background:rgba(0,173,181,0.16); color:var(--teal);
}

/* The OFFICIAL marker on a rendered team post. Deliberately not a plan badge:
   reusing one would put the brand account in the same visual class as
   students, which is the distinction this identity exists to draw. */
.floor-team-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
  padding:2px 7px; border-radius:4px; margin-left:7px;
  background:linear-gradient(135deg, rgba(0,173,181,0.22), rgba(3,201,136,0.18));
  color:var(--teal); border:1px solid rgba(0,173,181,0.32);
}
.floor-post.is-team{ border-color:rgba(0,173,181,0.26); }
.floor-post.is-team .floor-avatar,
.floor-post.is-team img.floor-avatar{
  /* Contain, not cover: the emblem is a logo with its own margins, and cover
     would crop the dragon's tail out of a circular frame. */
  object-fit:contain; padding:3px; background:var(--bg-2);
}

@media (max-width:560px){
  .floor-postas{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Bots admin ---------------------------------------------------------------- */
.bot-notice{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 16px; margin-bottom:22px;
  border-color:rgba(245,197,66,0.28); background:rgba(245,197,66,0.05);
}
.bot-notice svg{ color:var(--gold, #f5c542); flex-shrink:0; margin-top:1px; }
.bot-notice p{ margin:0; font-size:13px; color:var(--ink-2); line-height:1.6; }

.bot-card{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-1);
  padding:16px 18px; margin-bottom:14px;
  transition:border-color .2s ease, opacity .2s ease;
}
.bot-card.is-paused{ opacity:.62; }
.bot-card:hover{ border-color:var(--line-strong, #2c2c32); }

.bot-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.bot-icon{
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,173,181,0.12); color:var(--teal);
}
.bot-card-title{ flex:1; min-width:0; }
.bot-card-title h3{ font-size:15px; margin:0 0 2px; color:var(--ink-0); }
.bot-type{ font-size:11.5px; color:var(--ink-3); }

.bot-status{
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px;
  flex-shrink:0; letter-spacing:.02em;
}
.bot-status.ok{ background:rgba(3,201,136,0.14); color:#03c988; }
.bot-status.paused{ background:var(--bg-3); color:var(--ink-3); }
.bot-status.error{ background:rgba(229,72,77,0.14); color:#e5484d; }
.bot-status.pending{ background:rgba(245,197,66,0.14); color:#f5c542; }

.bot-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.bot-meta div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bot-meta span{ font-size:11px; color:var(--ink-3); }
.bot-meta b{ font-size:13.5px; color:var(--ink-1); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.bot-error{
  margin-top:12px; padding:10px 12px; border-radius:8px;
  background:rgba(229,72,77,0.07); border:1px solid rgba(229,72,77,0.22);
  display:flex; flex-direction:column; gap:3px;
}
.bot-error b{ font-size:11px; color:#e5484d; }
.bot-error span{ font-size:12px; color:var(--ink-2); word-break:break-word; }

.bot-card-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.bot-danger{ color:#e5484d; }
.bot-danger:hover{ background:rgba(229,72,77,0.10); }

.bot-blurb{ font-size:13px; color:var(--ink-2); line-height:1.6; margin:0 0 18px; }
.bot-field{ margin-bottom:16px; }
.bot-field > label{
  display:block; font-size:12.5px; color:var(--ink-1);
  font-weight:600; margin-bottom:6px;
}
.bot-field > label em{ font-style:normal; font-size:11px; color:var(--ink-3); font-weight:400; }
.bot-help{ font-size:11.5px; color:var(--ink-3); line-height:1.55; margin:6px 0 0; }
.bot-field.is-bool{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bot-field.is-bool > label{ margin-bottom:0; order:2; }
.bot-field.is-bool .bot-help{ order:3; flex-basis:100%; margin-top:2px; }

.bot-switch{ position:relative; display:inline-block; width:40px; height:23px; flex-shrink:0; }
.bot-switch input{ opacity:0; width:0; height:0; }
.bot-switch span{
  position:absolute; inset:0; cursor:pointer; border-radius:999px;
  background:var(--bg-3); border:1px solid var(--line); transition:background .2s ease;
}
.bot-switch span::before{
  content:''; position:absolute; width:17px; height:17px; left:2px; top:2px;
  border-radius:50%; background:var(--ink-3); transition:transform .2s ease, background .2s ease;
}
.bot-switch input:checked + span{ background:rgba(3,201,136,0.22); border-color:rgba(3,201,136,0.45); }
.bot-switch input:checked + span::before{ transform:translateX(17px); background:#03c988; }

@media (max-width:600px){
  .bot-meta{ grid-template-columns:1fr 1fr; }
  .bot-card-actions .btn{ flex:1; justify-content:center; }
}

/* Bot identity -------------------------------------------------------------- */
/* Distinct from the OFFICIAL badge: a relayed tweet is not an academy
   announcement, and giving them the same marker would tell students the
   opposite of the truth. */
/* Icon rather than a text tag. "BOT" in caps beside a name reads as a warning
   label; the point is to be honest about what the account is without making
   that the loudest thing in the row. Sized and weighted to sit next to the
   moderator shield. */
.floor-bot-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:6px;
  color:var(--ink-3); opacity:.72; flex-shrink:0;
  vertical-align:middle;
  transition:opacity .15s ease, color .15s ease;
}
.floor-bot-badge svg{ width:100%; height:100%; display:block; }
.floor-bot-badge:hover{ opacity:1; color:var(--teal); }

.bot-avatar-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bot-avatar-preview{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  flex-shrink:0; background:var(--bg-3); border:1px solid var(--line);
}
.bot-avatar-preview.is-empty{
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:18px;
}
.bot-avatar-controls{ display:flex; gap:7px; flex-wrap:wrap; }

/* Deep-linked record highlight ---------------------------------------------- */
/* Fades rather than switching off: an instant change is easy to miss if the
   scroll finishes first, which is exactly when the cue is needed. */
@keyframes recordFlash{
  0%   { background:rgba(0,173,181,0.16); border-color:var(--teal-dim); }
  100% { background:var(--bg-1); border-color:var(--line); }
}
.record-card-flash{ animation:recordFlash 2.4s ease-out; }

/* Staff badge --------------------------------------------------------------- */
/* Matches the bot badge's footprint so a row carrying both stays balanced. */
.floor-staff-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:6px;
  opacity:.9; flex-shrink:0;
  vertical-align:middle;
  transition:opacity .15s ease;
}
/* No `color` rule: the badge paints itself from its own teal-to-green
   gradient rather than inheriting currentColor, so setting one here would do
   nothing and mislead the next person to read this. */
.floor-staff-badge svg{ width:100%; height:100%; display:block; }
.floor-staff-badge:hover{ opacity:1; }

/* Users role filter --------------------------------------------------------- */
.users-filter-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin:14px 0 18px;
}
.users-role-filter{ display:flex; gap:7px; flex-wrap:wrap; }
.users-role-btn{
  padding:7px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg-2);
  color:var(--ink-2); font-size:12.5px; font-weight:600;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.users-role-btn:hover{ color:var(--ink-0); }
.users-role-btn.is-active{
  border-color:var(--teal-dim); background:rgba(0,173,181,0.10); color:var(--ink-0);
}
.users-filter-count{ font-size:12.5px; color:var(--ink-3); flex-shrink:0; }

@media (max-width:560px){
  .users-filter-row{ flex-direction:column; align-items:flex-start; }
  .users-role-filter{ width:100%; }
}

/* Terminal ------------------------------------------------------------------ */
.term-clock{
  font-family:var(--font-mono, monospace); font-size:14px;
  color:var(--teal); letter-spacing:.04em;
  padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-2);
}

.term-tabs{
  /* Scrolls itself rather than widening its parent — needs min-width:0 for the
     same reason as .dash-main above. */
  display:flex; gap:6px; overflow-x:auto; min-width:0; margin-bottom:18px;
  padding-bottom:4px; -webkit-overflow-scrolling:touch;
}
.term-tabs::-webkit-scrollbar{ height:0; }
.term-tab{
  flex-shrink:0; padding:9px 16px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg-2);
  color:var(--ink-2); font-size:13px; font-weight:600;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.term-tab:hover{ color:var(--ink-0); }
.term-tab.is-active{
  border-color:var(--teal-dim); background:rgba(0,173,181,0.12); color:var(--ink-0);
}

/* Map beside its readouts on desktop, stacked on mobile. The map keeps its
   aspect ratio rather than being letterboxed, since the projection is only
   meaningful undistorted. */
/* The panels are <section> elements, and style.css gives every section the
   landing page's vertical padding — which showed up as ~96px of dead space
   above the map. Reset here rather than switching the markup to <div>: section
   is the correct element for a titled region, and the padding belongs to the
   marketing pages, not to it. */
.term-panel{ padding:0; margin:0; }

.term-panel[data-tab="map"]{
  /* 340px, up from 300: the FinancialJuice newswire sits in this column and
     headlines wrap to unreadable slivers much below that. Their own sample
     uses 500px; the widget is given the measured container width instead, so
     the column decides rather than the vendor. */
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px;
  /* align-content:start is load-bearing. The panel stretches taller than its
     content inside the dashboard's column layout, and a grid's default
     align-content left the map floating in the vertical middle with ~96px of
     dead space above it. */
  align-content:start;
}
@media (max-width:1000px){
  .term-panel[data-tab="map"]{ grid-template-columns:1fr; }
}

.term-map-wrap{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:#08080a;
}
.term-map{ width:100%; }
.term-map-svg{ width:100%; height:auto; display:block; }

.term-map-side{ display:flex; flex-direction:column; gap:14px; }
.term-block{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-1);
  padding:14px 16px;
}
.term-block h3{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}
.term-badge{
  font-size:9.5px; letter-spacing:.06em; padding:2px 7px; border-radius:4px;
  background:rgba(3,201,136,0.14); color:#03c988; text-transform:none;
}
.term-badge.is-off{ background:var(--bg-3); color:var(--ink-3); }

.term-session{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px;
  align-items:center; padding:8px 0;
  border-bottom:1px solid var(--line);
}
.term-session:last-child{ border-bottom:none; }
.term-session-dot{ width:8px; height:8px; border-radius:50%; }
.term-session-name{ font-size:13px; color:var(--ink-2); font-weight:600; }
.term-session.is-open .term-session-name{ color:var(--ink-0); }
.term-session-state{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3);
}
.term-session.is-open .term-session-state{ color:#03c988; }
.term-session-next{
  grid-column:2 / -1; font-size:11.5px; color:var(--ink-3);
  font-family:var(--font-mono, monospace);
}

.term-event{
  display:block; padding:9px 0; border-bottom:1px solid var(--line);
  text-decoration:none;
}
.term-event:last-child{ border-bottom:none; }
.term-event-loc{
  display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:#ff6b4a; margin-bottom:3px;
}
.term-event-title{
  display:block; font-size:12.5px; color:var(--ink-2); line-height:1.45;
}
.term-event:hover .term-event-title{ color:var(--ink-0); }
.term-empty{ font-size:12.5px; color:var(--ink-3); margin:0; }

.term-legend{
  display:flex; flex-direction:column; gap:7px;
  font-size:11.5px; color:var(--ink-3); padding:0 4px;
}
.term-legend span{ display:flex; align-items:center; gap:8px; }
.term-legend i{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.lg-session{ background:#00adb5; }
.lg-econ{ background:none; border:1.5px solid #f5c542; }
.lg-event{ background:#ff6b4a; }

/* TradingView widgets are iframes and bring their own chrome; the host just
   provides the frame and a minimum height so the panel does not collapse
   before the iframe loads. */
.tv-host{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--bg-1); min-height:480px;
}

@media (max-width:640px){
  .tv-host{ min-height:420px; }
  .term-clock{ font-size:12.5px; padding:6px 10px; }
}

/* Terminal — interactive map ------------------------------------------------ */
.term-map-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.term-map-wrap{ position:relative; }

/* touch-action:none is required, not cosmetic: without it the browser claims
   drag gestures for page scrolling and the map cannot be panned on a phone. */
.term-map-svg{ touch-action:none; user-select:none; }

.term-zoom{
  position:absolute; top:12px; right:12px;
  display:flex; align-items:center; gap:4px;
  background:rgba(8,8,10,0.82); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:8px; padding:4px;
}
.term-zoom button{
  width:28px; height:28px; border-radius:5px; cursor:pointer;
  border:none; background:transparent; color:var(--ink-2);
  font-size:15px; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.term-zoom button:hover{ background:var(--bg-3); color:var(--ink-0); }
#term-zoom-level{
  font-family:var(--font-mono, monospace); font-size:11px;
  color:var(--ink-3); padding:0 7px 0 4px; min-width:38px; text-align:right;
}
.term-map-hint{
  position:absolute; left:12px; bottom:10px;
  font-size:10.5px; color:var(--ink-3); opacity:.65;
  pointer-events:none;
}
@media (max-width:640px){ .term-map-hint{ display:none; } }

.term-pin{ cursor:pointer; }
.term-pin-halo{ opacity:0; transition:opacity .15s ease; }
.term-pin.is-hot .term-pin-halo{ opacity:.9; }

/* Category filter ------------------------------------------------------------ */
.term-cats{ display:flex; gap:6px; flex-wrap:wrap; }
.term-cat{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg-2);
  color:var(--ink-3); font-size:12px; font-weight:600;
  transition:border-color .15s ease, color .15s ease, opacity .15s ease;
}
.term-cat i{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.term-cat b{ font-weight:600; opacity:.6; font-size:11px; }
.term-cat.is-on{ color:var(--ink-0); border-color:var(--line-strong, #2c2c32); }
/* Empty categories are dimmed, not hidden: a filter list that changes length
   on every refresh is disorienting, and "Conflict: 0" is itself information. */
.term-cat.is-empty{ opacity:.4; }

/* Tooltip -------------------------------------------------------------------- */
/* Fixed to the viewport, not the SVG. An SVG-internal tooltip is clipped by the
   viewBox and disappears the moment you zoom. */
.term-tip{
  position:fixed; z-index:9999; pointer-events:none;
  max-width:320px; padding:11px 13px;
  background:rgba(12,12,15,0.96); backdrop-filter:blur(8px);
  border:1px solid var(--line-strong, #2c2c32); border-radius:9px;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.9);
  display:flex; flex-direction:column; gap:5px;
}
.term-tip-cat{
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
}
.term-tip-title{ font-size:12.5px; color:var(--ink-0); line-height:1.45; }
.term-tip-meta{ font-size:11px; color:var(--ink-3); font-family:var(--font-mono, monospace); }

/* Event table ---------------------------------------------------------------- */
.term-table-block #term-table-body{ max-height:420px; overflow-y:auto; }
.term-table-count{ margin-left:auto; font-size:11px; color:var(--ink-3); text-transform:none; letter-spacing:0; }
.term-row{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 4px; border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .12s ease;
}
.term-row:last-child{ border-bottom:none; }
.term-row:hover{ background:var(--bg-2); }
.term-row-cat{ width:3px; align-self:stretch; border-radius:2px; flex-shrink:0; }
.term-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.term-row-title{ font-size:12.5px; color:var(--ink-1); line-height:1.45; }
.term-row-meta{ font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono, monospace); }
.term-row-link{
  flex-shrink:0; color:var(--ink-3); text-decoration:none; font-size:14px;
  padding:2px 5px; border-radius:4px;
}
.term-row-link:hover{ color:var(--teal); background:var(--bg-3); }

.term-shown{ font-size:12px; color:var(--ink-2); margin:0 0 10px; font-family:var(--font-mono, monospace); }
.term-news-block{ padding-bottom:4px; }
/* Newswire ------------------------------------------------------------------ */
.term-news-block{ padding-left:0; padding-right:0; }
.term-news-block h3{ padding:0 16px; }
.term-news-feed{
  max-height:520px; overflow-y:auto;
  /* Scrollbar kept visible: an auto-hiding one on a list that updates itself
     leaves no cue that there is more below. */
  scrollbar-width:thin;
}
.news-item{
  display:flex; gap:9px; align-items:stretch;
  padding:9px 16px; text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:background .12s ease;
}
.news-item:last-child{ border-bottom:none; }
.news-item:hover{ background:var(--bg-2); }
.news-bar{ width:2.5px; border-radius:2px; flex-shrink:0; opacity:.85; }
.news-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.news-title{ font-size:12.5px; line-height:1.45; color:var(--ink-1); }
.news-item:hover .news-title{ color:var(--ink-0); }
.news-meta{
  display:flex; gap:8px; align-items:center;
  font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3);
}
.news-src{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* New headlines get one slow fade rather than a persistent highlight. A wire
   that keeps items marked "new" until you interact accumulates highlights
   until everything is highlighted and the cue means nothing. */
@keyframes newsArrive{
  0%   { background:rgba(3,201,136,0.16); }
  100% { background:transparent; }
}
.news-item.is-new{ animation:newsArrive 6s ease-out; }
.news-item.is-new .news-title{ color:var(--ink-0); }

@media (prefers-reduced-motion:reduce){
  .news-item.is-new{ animation:none; border-left:2px solid var(--bull); }
}

/* Terminal — Intel panels ---------------------------------------------------- */
.intel-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
.intel-panel{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-1);
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.intel-panel h3{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0;
}
.intel-panel.is-empty{ opacity:.7; }
.intel-keys{
  font-family:var(--font-mono, monospace); font-size:10.5px;
  color:var(--ink-3); word-break:break-all; margin:0;
}

.intel-gauge{ align-items:center; }
.intel-gauge svg{ width:100%; max-width:180px; height:auto; }
.intel-gauge-num{
  font-family:var(--font-mono, monospace); font-size:30px; font-weight:700;
  fill:var(--ink-0);
}
.intel-gauge-label{
  font-size:12px; color:var(--ink-2); text-transform:capitalize;
  text-align:center;
}

.intel-rows{ display:flex; flex-direction:column; }
.intel-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.intel-row:last-child{ border-bottom:none; }
.intel-row-name{
  font-size:12.5px; color:var(--ink-2); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.intel-row-val{
  font-family:var(--font-mono, monospace); font-size:12.5px;
  color:var(--ink-0); flex-shrink:0;
}

.intel-notice{
  grid-column:1 / -1;
  border:1px solid rgba(245,197,66,0.28); border-radius:12px;
  background:rgba(245,197,66,0.05); padding:20px 22px;
}
.intel-notice h3{ font-size:14.5px; color:var(--ink-0); margin:0 0 6px; text-transform:none; letter-spacing:0; }
.intel-notice p{ font-size:13px; color:var(--ink-2); margin:0 0 10px; line-height:1.6; }
.intel-notice a{ font-size:13px; color:var(--gold, #f5c542); }

/* Intel — stale marker and weight bars --------------------------------------- */
.intel-stale{
  font-size:9px; letter-spacing:.06em; padding:2px 6px; border-radius:3px;
  margin-left:8px; background:var(--bg-3); color:var(--ink-3);
  text-transform:none; letter-spacing:0;
}
/* The bar sits BEHIND the row rather than beside it, so it costs no width and
   the text stays fully readable at any value. */
.intel-row{ position:relative; }
.intel-bar{
  position:absolute; left:0; top:2px; bottom:2px;
  background:rgba(0,173,181,0.12); border-radius:3px;
  pointer-events:none; z-index:0;
}
.intel-row-name, .intel-row-val{ position:relative; z-index:1; }
.intel-row-name{ padding-left:6px; }
.intel-row-val{ padding-right:6px; }

/* ==========================================================================
   GLOBAL MONITOR (global-monitor.html)
   Conflict-focused terminal. Reuses the Terminal's term-* building blocks;
   everything gm-* below is specific to this page.
   ========================================================================== */

/* Layout: map beside tension/newswire on desktop, stacked on mobile — same
   shape and breakpoint as the Terminal's map tab. */
.gm-map-panel{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px;
  align-content:start; padding:0; margin:0 0 14px;
}
@media (max-width:1000px){
  .gm-map-panel{ grid-template-columns:1fr; }
}
.gm-two{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:0; margin:0;
}
@media (max-width:1000px){
  .gm-two{ grid-template-columns:1fr; }
}
.gm-side-note{ font-size:11.5px; color:var(--ink-3); margin:-4px 0 12px; line-height:1.5; }
.gm-shown-note{
  font-size:11px; color:var(--ink-3); margin:10px 0 0;
  font-family:var(--font-mono, monospace);
}

/* Headline ticker ----------------------------------------------------------- */
.gm-ticker{
  display:flex; align-items:center; gap:0;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-1);
  margin-bottom:14px; overflow:hidden;
}
.gm-ticker-label{
  flex-shrink:0; padding:8px 12px;
  font-family:var(--font-mono, monospace); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; color:var(--bear);
  border-right:1px solid var(--line); background:var(--bg-2);
}
.gm-ticker-clip{ overflow:hidden; flex:1; min-width:0; }
.gm-ticker-track{
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:gmTick 60s linear infinite; will-change:transform;
}
/* Track content is rendered twice, so -50% lands exactly on the seam. */
@keyframes gmTick{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
.gm-ticker:hover .gm-ticker-track{ animation-play-state:paused; }
.gm-ticker-item{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 22px 8px 0; margin-left:22px;
  font-size:12px; color:var(--ink-2); text-decoration:none;
}
.gm-ticker-item:hover{ color:var(--ink-0); }
.gm-ticker-item i{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
@media (prefers-reduced-motion:reduce){
  .gm-ticker-track{ animation:none; }
  .gm-ticker-clip{ overflow-x:auto; }
}

/* Tension index ------------------------------------------------------------- */
.gm-tension-row{
  display:flex; gap:10px; align-items:center;
  padding:7px 0; cursor:pointer; border-bottom:1px solid var(--line-soft);
}
.gm-tension-row:last-child{ border-bottom:none; }
.gm-tension-rank{
  flex-shrink:0; width:18px; text-align:right;
  font-family:var(--font-mono, monospace); font-size:11px; color:var(--ink-3);
}
.gm-tension-main{ flex:1; min-width:0; }
.gm-tension-top{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.gm-tension-name{
  font-size:12.5px; color:var(--ink-1); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gm-tension-row:hover .gm-tension-name{ color:var(--ink-0); }
.gm-tension-val{
  margin-left:auto; flex-shrink:0;
  font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3);
}
.gm-tension-bar{
  height:4px; border-radius:3px; background:var(--bg-3); overflow:hidden;
}
.gm-tension-bar i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, #f5a524, var(--bear));
}
.gm-trend{ font-size:9px; flex-shrink:0; }
.gm-trend.is-up{ color:var(--bear); }    /* rising tension reads as risk, not gain */
.gm-trend.is-down{ color:var(--bull); }

/* Severity feed ------------------------------------------------------------- */
.gm-sev-feed{ max-height:440px; }
.gm-sev-feed .news-item{ padding-left:0; padding-right:6px; }
.gm-sev-tag{
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:9.5px;
}

/* Prediction markets -------------------------------------------------------- */
.gm-pred-row{
  display:block; padding:10px 0; text-decoration:none;
  border-bottom:1px solid var(--line-soft);
}
.gm-pred-row:last-child{ border-bottom:none; }
.gm-pred-top{ display:flex; gap:10px; align-items:baseline; margin-bottom:6px; }
.gm-pred-q{ font-size:12.5px; color:var(--ink-1); line-height:1.4; }
a.gm-pred-row:hover .gm-pred-q{ color:var(--ink-0); }
.gm-pred-pct{
  margin-left:auto; flex-shrink:0;
  font-family:var(--font-mono, monospace); font-size:13px; font-weight:700;
}
.gm-pred-bar{
  height:4px; border-radius:3px; background:var(--bg-3); overflow:hidden;
  margin-bottom:5px;
}
.gm-pred-bar i{ display:block; height:100%; border-radius:3px; }
.gm-pred-meta{
  display:flex; justify-content:space-between; gap:8px;
  font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   GLOBAL MONITOR v2 — tabs, wire, markets readout, risk, streams, motion
   -------------------------------------------------------------------------- */

.gm-topbar-right{ display:flex; align-items:center; gap:10px; }
.gm-live{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg-2);
  font-family:var(--font-mono, monospace); font-size:10px; font-weight:700;
  letter-spacing:.12em; color:var(--gold);
}
.gm-live i{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px var(--gold);
  animation:gmBlink 1.6s ease-in-out infinite;
}
.gm-live.is-off{ color:var(--ink-3); }
.gm-live.is-off i{ background:var(--ink-3); box-shadow:none; animation:none; }
@keyframes gmBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* Tab panels: only the active one exists visually; entering panels glide in. */
.gm-tabs{ margin-bottom:16px; }
.gm-panel{ display:none; padding:0; margin:0; }
.gm-panel.is-active{ display:block; animation:gmPanelIn .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes gmPanelIn{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* Staggered entrance for freshly rendered lists. Capped: rows past the 12th
   appear immediately rather than making long feeds take seconds to settle. */
.gm-anim > *{ animation:gmRowIn .35s ease-out both; }
.gm-anim > *:nth-child(1){ animation-delay:.02s; }
.gm-anim > *:nth-child(2){ animation-delay:.05s; }
.gm-anim > *:nth-child(3){ animation-delay:.08s; }
.gm-anim > *:nth-child(4){ animation-delay:.11s; }
.gm-anim > *:nth-child(5){ animation-delay:.14s; }
.gm-anim > *:nth-child(6){ animation-delay:.17s; }
.gm-anim > *:nth-child(7){ animation-delay:.20s; }
.gm-anim > *:nth-child(8){ animation-delay:.23s; }
.gm-anim > *:nth-child(9){ animation-delay:.26s; }
.gm-anim > *:nth-child(10){ animation-delay:.29s; }
.gm-anim > *:nth-child(11){ animation-delay:.32s; }
.gm-anim > *:nth-child(12){ animation-delay:.35s; }
@keyframes gmRowIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}

/* Map: faint scanlines + glow frame make the panel read as an instrument. */
.gm-map-wrap{ position:relative; box-shadow:0 0 60px -30px rgba(3,201,136,.5); }
.gm-map-wrap::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
}

/* Wire ---------------------------------------------------------------------- */
.gm-wire-block{ padding-bottom:0; }
.gm-wire-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.gm-wire-stats{ display:flex; gap:14px; align-items:center; }
.gm-stat{
  font-family:var(--font-mono, monospace); font-size:11px; font-weight:700;
  letter-spacing:.08em; color:var(--ink-3);
}
.gm-stat.is-high{ color:var(--bear); }
.gm-stat.is-elev{ color:var(--amber); }

.gm-wire-tools{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.gm-search{
  width:100%; padding:9px 13px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:8px;
  color:var(--ink-0); font-family:var(--font-mono, monospace); font-size:12.5px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.gm-search:focus{ border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(3,201,136,.12); }
.gm-search::placeholder{ color:var(--ink-3); }

.gm-wire-feed{ max-height:640px; overflow-y:auto; scrollbar-width:thin; margin:0 -16px; }
.gm-wire-item{
  position:relative; display:flex; gap:12px; padding:12px 16px 12px 18px;
  text-decoration:none; border-bottom:1px solid var(--line-soft);
  transition:background .12s ease;
}
.gm-wire-item::before{
  content:''; position:absolute; left:21px; top:0; bottom:0;
  width:1px; background:var(--line-soft);
}
.gm-wire-item:last-child{ border-bottom:none; }
.gm-wire-item:hover{ background:var(--bg-2); }
.gm-wire-dot{
  position:relative; z-index:1; flex-shrink:0;
  width:7px; height:7px; border-radius:50%; margin-top:5px;
}
.gm-wire-body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.gm-wire-meta-top{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.gm-wire-loc{
  font-family:var(--font-mono, monospace); font-size:9.5px; font-weight:700;
  letter-spacing:.08em; color:var(--teal);
  border:1px solid rgba(0,173,181,.35); background:rgba(0,173,181,.08);
  padding:2px 7px; border-radius:4px;
}
.gm-wire-sev{
  font-family:var(--font-mono, monospace); font-size:9.5px; font-weight:700;
  letter-spacing:.08em; border:1px solid; padding:2px 7px; border-radius:4px;
}
.gm-wire-time{
  margin-left:auto; font-family:var(--font-mono, monospace);
  font-size:10.5px; color:var(--ink-3);
}
.gm-wire-title{ font-size:13px; line-height:1.5; color:var(--ink-1); }
.gm-wire-item:hover .gm-wire-title{ color:var(--ink-0); }
.gm-wire-src{ font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3); }
.gm-wire-item.is-new{ animation:newsArrive 6s ease-out; }

.gm-chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.gm-chip{
  font-family:var(--font-mono, monospace); font-size:10px; font-weight:600;
  color:var(--ink-2); border:1px solid var(--line); border-radius:4px;
  padding:2px 7px;
}
.gm-chip.is-bad{ color:var(--bear); border-color:rgba(229,72,77,.4); }
.gm-chip.is-warn{ color:var(--amber); border-color:rgba(245,197,66,.4); }

.gm-active-country{
  font-family:var(--font-mono, monospace); font-size:10px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Markets ------------------------------------------------------------------- */
.gm-signals{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px;
}
.gm-sig{
  border:1px solid var(--line); border-radius:10px; background:var(--bg-2);
  padding:12px 14px; display:flex; flex-direction:column; gap:6px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.gm-sig:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -18px rgba(3,201,136,.4); }
.gm-sig-name{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600;
}
.gm-sig-val{ font-family:var(--font-mono, monospace); font-size:16px; font-weight:700; color:var(--ink-0); }
.gm-sig-sub{ font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3); }

.gm-mkt-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:14px; margin-top:14px;
}
.gm-mkt-table{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-1);
  padding:4px 14px 6px; transition:border-color .15s ease;
}
.gm-mkt-table:hover{ border-color:#3a3a42; }
.gm-mkt-head{
  display:flex; align-items:center; gap:7px;
  padding:10px 0 8px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); font-weight:700;
}
.gm-mkt-head span:first-child{ color:var(--gold); font-family:var(--font-mono, monospace); }
.gm-mkt-count{ margin-left:auto; color:var(--ink-3); font-family:var(--font-mono, monospace); }
.gm-mkt-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto 72px;
  gap:10px; align-items:center; padding:7px 0;
  border-bottom:1px solid var(--line-soft);
}
.gm-mkt-row:last-child{ border-bottom:none; }
.gm-mkt-label{
  font-size:12.5px; color:var(--ink-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gm-mkt-price{ font-family:var(--font-mono, monospace); font-size:12.5px; color:var(--ink-0); text-align:right; }
.gm-mkt-chg{ font-family:var(--font-mono, monospace); font-size:11.5px; font-weight:600; text-align:right; }
.gm-up{ color:var(--bull); }
.gm-down{ color:var(--bear); }
.gm-spark{ width:72px; height:22px; display:block; opacity:.9; }

.gm-sector-row{
  display:grid; grid-template-columns:minmax(0, 140px) 1fr auto;
  gap:10px; align-items:center; padding:6px 0;
}
.gm-sector-name{ font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-sector-bar{ height:5px; border-radius:3px; background:var(--bg-3); overflow:hidden; }
.gm-sector-bar i{ display:block; height:100%; border-radius:3px; transition:width .6s cubic-bezier(.2,.7,.3,1); }
.gm-sector-bar i.is-up{ background:var(--bull); }
.gm-sector-bar i.is-down{ background:var(--bear); }

/* DEFCON -------------------------------------------------------------------- */
.gm-defcon-hero{
  border:1.5px solid; border-radius:12px; padding:22px 18px 20px;
  text-align:center; margin-bottom:16px; background:rgba(245,165,36,.03);
}
.gm-defcon-num{
  font-family:var(--font-mono, monospace); font-size:64px; font-weight:700;
  line-height:1; animation:gmBreath 3.5s ease-in-out infinite;
}
@keyframes gmBreath{ 0%,100%{ opacity:1; } 50%{ opacity:.75; } }
.gm-defcon-word{
  font-size:15px; letter-spacing:.35em; color:var(--ink-0);
  font-weight:800; margin-top:8px;
}
.gm-defcon-name{
  font-family:var(--font-mono, monospace); font-size:13px; font-weight:700;
  letter-spacing:.2em; margin-top:6px;
}
.gm-defcon-desc{ font-size:12px; color:var(--ink-2); margin-top:8px; line-height:1.5; }
.gm-defcon-levels{ display:flex; flex-direction:column; gap:2px; }
.gm-defcon-level{
  display:flex; gap:12px; align-items:flex-start; padding:9px 10px;
  border-radius:8px;
}
.gm-defcon-level.is-current{ background:rgba(3,201,136,.06); border:1px solid rgba(3,201,136,.18); }
.gm-defcon-badge{
  flex-shrink:0; width:24px; height:24px; border:1.5px solid; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono, monospace); font-size:12px; font-weight:700;
}
.gm-defcon-level b{ font-size:12px; letter-spacing:.06em; color:var(--ink-0); }
.gm-defcon-cur{ color:var(--gold); font-family:var(--font-mono, monospace); font-size:10.5px; }
.gm-defcon-level p{ font-size:11.5px; color:var(--ink-3); margin:3px 0 0; line-height:1.5; }
.gm-fineprint{
  font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3);
  margin:12px 0 0;
}
.gm-warnprint{ color:var(--amber); margin-top:4px; }

.gm-outbreak-feed{ max-height:560px; }

/* Predictions grid on the risk tab ------------------------------------------ */
.gm-pred-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:0 24px;
}

/* Streams ------------------------------------------------------------------- */
.gm-stream-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.gm-onair{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono, monospace); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; color:var(--bear);
}
.gm-onair i{
  width:8px; height:8px; border-radius:50%; background:var(--bear);
  box-shadow:0 0 10px var(--bear); animation:gmBlink 1.2s ease-in-out infinite;
}
.gm-onair b{ color:var(--ink-1); }
.gm-stream-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
.gm-stream-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

@media (max-width:640px){
  .gm-mkt-grid{ grid-template-columns:1fr; }
  .gm-wire-time{ margin-left:0; }
  .gm-defcon-num{ font-size:48px; }
}

@media (prefers-reduced-motion:reduce){
  .gm-panel.is-active, .gm-anim > *, .gm-live i, .gm-onair i,
  .gm-defcon-num{ animation:none !important; }
  .gm-sig:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   GLOBAL MONITOR v3 — alert dot, load-more, prediction ladders, movers,
   stock strip, calendar, financial map, AI briefing
   -------------------------------------------------------------------------- */

.gm-alert-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#ff4444; box-shadow:0 0 10px #ff4444, 0 0 20px #ff444466;
  vertical-align:middle; margin-left:6px; flex-shrink:0;
  animation:gmBlink 1.4s ease-in-out infinite;
}
.side-link .gm-alert-dot{ width:6px; height:6px; margin-left:auto; }
h1 .gm-alert-dot{ width:10px; height:10px; margin-left:10px; }

.gm-loadmore{
  display:block; width:calc(100% - 12px); margin:10px 6px 6px;
  padding:9px 0; border:1px dashed var(--line); border-radius:8px;
  background:transparent; color:var(--ink-2); cursor:pointer;
  font-family:var(--font-mono, monospace); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.gm-loadmore:hover{ border-color:var(--gold-dim); color:var(--gold); background:rgba(3,201,136,.05); }

/* Prediction outcome ladders ------------------------------------------------ */
.gm-pred-outcome{
  display:grid; grid-template-columns:minmax(0,1fr) 90px 44px;
  gap:10px; align-items:center; padding:3px 0;
}
.gm-pred-olabel{
  font-size:12px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gm-pred-obar{ height:5px; border-radius:3px; background:var(--bg-3); overflow:hidden; display:block; }
.gm-pred-obar i{ display:block; height:100%; border-radius:3px; transition:width .6s cubic-bezier(.2,.7,.3,1); }
.gm-pred-opct{
  font-family:var(--font-mono, monospace); font-size:11.5px; font-weight:700;
  color:var(--ink-1); text-align:right;
}
.gm-pred-more{ font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3); padding:2px 0; }

/* Movers -------------------------------------------------------------------- */
.gm-movers{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gm-mover-head{
  font-family:var(--font-mono, monospace); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; margin-bottom:8px;
}
.gm-mover-row{
  display:flex; justify-content:space-between; gap:8px;
  padding:6px 0; border-bottom:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-1);
}
.gm-mover-row:last-child{ border-bottom:none; }

/* Stock strip --------------------------------------------------------------- */
.gm-stock-strip-wrap{ margin-bottom:14px; }
.gm-strip-label{ color:var(--gold); }
.gm-strip-track{ animation:gmTick 40s linear infinite; }
.gm-ticker:hover .gm-strip-track{ animation-play-state:paused; }
.gm-strip-item{
  display:inline-flex; gap:6px; align-items:center;
  padding:8px 0; margin-left:26px;
  font-family:var(--font-mono, monospace); font-size:12px; color:var(--ink-2);
  white-space:nowrap;
}
.gm-strip-item b{ color:var(--ink-0); font-weight:700; }

/* Calendar ------------------------------------------------------------------ */
.gm-cal-tools{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.gm-cal-tools-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.gm-cal-select{
  margin-left:auto; padding:6px 10px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:7px;
  color:var(--ink-1); font-family:var(--font-mono, monospace); font-size:11.5px;
  outline:none;
}
.gm-cal-list{ max-height:520px; overflow-y:auto; scrollbar-width:thin; }
.gm-cal-day{
  position:sticky; top:0; z-index:1;
  font-family:var(--font-mono, monospace); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  background:var(--bg-1); padding:8px 0 6px; border-bottom:1px solid var(--line);
}
.gm-cal-row{
  display:grid; grid-template-columns:42px 38px 10px minmax(0,1fr) auto;
  gap:8px; align-items:center; padding:7px 0;
  border-bottom:1px solid var(--line-soft);
}
.gm-cal-row.is-past{ opacity:.45; }
.gm-cal-time{ font-family:var(--font-mono, monospace); font-size:11px; color:var(--ink-3); }
.gm-cal-cty{
  font-family:var(--font-mono, monospace); font-size:10px; font-weight:700;
  color:var(--teal); border:1px solid rgba(0,173,181,.35); border-radius:4px;
  text-align:center; padding:1px 0;
}
.gm-cal-dot{ width:9px; height:9px; border-radius:50%; display:block; }
.gm-cal-title{
  font-size:12.5px; color:var(--ink-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gm-cal-vals{ font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3); white-space:nowrap; }

/* Financial map ------------------------------------------------------------- */
#gm-fin-map .term-map-svg{ touch-action:auto; }
.gm-fin-pin, .gm-fin-hub{ cursor:pointer; }
.gm-fin-pin:hover circle:last-child{ fill-opacity:1; }

/* AI briefing --------------------------------------------------------------- */
.gm-brief-shell{
  background:linear-gradient(180deg, rgba(3,201,136,.04), transparent 240px), var(--bg-1);
}
.gm-brief-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:16px;
}
.gm-brief-head .gm-onair{ color:var(--gold); }
.gm-brief-head .gm-onair i{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
.gm-brief-time{ font-family:var(--font-mono, monospace); font-size:10.5px; color:var(--ink-3); letter-spacing:.1em; }
.gm-brief-block{ margin-bottom:18px; }
.gm-brief-block h4{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px; font-weight:700;
}
.gm-brief-block p{ font-size:13px; color:var(--ink-1); line-height:1.65; margin:0 0 6px; }
.gm-brief-type.is-typing::after{
  content:'▌'; color:var(--gold); animation:gmBlink .8s step-end infinite;
}
.gm-brief-hotspot{
  display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-2);
}
.gm-brief-hotspot:last-child{ border-bottom:none; }
.gm-brief-hotspot b{ color:var(--ink-0); }
.gm-brief-hotspot p{ font-size:11.5px; color:var(--ink-3); margin:4px 0 0; line-height:1.5; }
.gm-brief-signal{
  display:block; padding:7px 0; border-bottom:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-1); line-height:1.55; text-decoration:none;
}
.gm-brief-signal:last-child{ border-bottom:none; }
a.gm-brief-signal:hover{ color:var(--ink-0); }
.gm-brief-watch{ margin:0; padding-left:18px; }
.gm-brief-watch li{ font-size:12.5px; color:var(--ink-1); line-height:1.7; }

@media (max-width:640px){
  .gm-cal-vals{ display:none; }
  .gm-movers{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .gm-alert-dot, .gm-strip-track{ animation:none !important; }
}

/* Header Global Monitor icon ------------------------------------------------ */
.gm-icon-wrap{ position:relative; flex-shrink:0; display:flex; }
.gm-icon-wrap .icon-btn{ position:relative; }

/* Centred inside the globe rather than badged on its corner: it reads as the
   planet being live, not as a notification count attached to a button. */
.gm-live-dot{
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:#ff2418;
  pointer-events:none;
  animation:gmLiveFlash 0.85s ease-in-out infinite;
}

/* Emergency-beacon timing: a hard bright peak, a fast fall to near-dark, and a
   short hold there. Not a sine wave — a symmetrical fade reads as breathing,
   which is the opposite of urgency. The asymmetry is what makes it read as a
   strobe rather than a pulse.
   
   The glow is carried by box-shadow rather than a second element, so the
   brightness and the halo rise and fall as one thing. Two separately animated
   layers drift out of phase and the light looks wrong without it being obvious
   why. */
@keyframes gmLiveFlash{
  0%   { opacity:1;   background:#ff5a4d;
         box-shadow:0 0 5px rgba(255,36,24,1), 0 0 11px rgba(255,36,24,.85),
                    0 0 20px rgba(255,36,24,.45); }
  35%  { opacity:.32; background:#8c1410;
         box-shadow:0 0 2px rgba(255,36,24,.35), 0 0 4px rgba(255,36,24,.15),
                    0 0 0 rgba(255,36,24,0); }
  60%  { opacity:.28; background:#7a110d;
         box-shadow:0 0 2px rgba(255,36,24,.3), 0 0 3px rgba(255,36,24,.1),
                    0 0 0 rgba(255,36,24,0); }
  100% { opacity:1;   background:#ff5a4d;
         box-shadow:0 0 5px rgba(255,36,24,1), 0 0 11px rgba(255,36,24,.85),
                    0 0 20px rgba(255,36,24,.45); }
}

@media (prefers-reduced-motion:reduce){
  /* Held at the bright end rather than mid-fade: the dot still reads as lit,
     which is the whole point, and a strobe is exactly the pattern this setting
     exists to suppress. */
  .gm-live-dot{
    animation:none; opacity:1; background:#ff5a4d;
    box-shadow:0 0 5px rgba(255,36,24,1), 0 0 11px rgba(255,36,24,.7);
  }
}

/* --------------------------------------------------------------------------
   DEVICE-FORCED VIEWS
   assets/device-mode.js stamps <html data-device="mobile|tablet|desktop">
   before first paint. Width breakpoints still handle window resizing on
   desktop; these rules override them where the PHYSICAL device should win.
   -------------------------------------------------------------------------- */

/* A phone in landscape reports >900px — keep the MOBILE shell anyway:
   drawer sidebar, hamburger, mobile header. */
@media (min-width:901px){
  html[data-device="mobile"] .dash-shell{
    grid-template-columns:1fr; min-height:100vh;
  }
  html[data-device="mobile"] .sidebar{
    display:flex; position:fixed; top:0; left:0; width:280px; max-width:82vw;
    z-index:200; transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:20px 0 40px -20px rgba(0,0,0,0.6);
    height:100vh; height:100dvh; overflow-y:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding-top:22px;
  }
  html[data-device="mobile"] .sidebar.mobile-open{ transform:translateX(0); }
  html[data-device="mobile"] .sidebar > .brand{ display:flex; }
  html[data-device="mobile"] .mobile-topnav{
    height:auto; padding:14px 18px; background:var(--bg-0);
    border-bottom:1px solid var(--line-soft); box-shadow:none;
  }
  html[data-device="mobile"] .mobile-topnav #dash-menu-toggle{
    display:flex; align-items:center; justify-content:center;
  }
  html[data-device="mobile"] .mobile-topnav .brand-mark{ height:42px; }
  html[data-device="mobile"] body.sidebar-locked{ overflow:hidden; }
}

/* A tablet in portrait reports <900px — keep a visible sidebar anyway
   instead of hiding navigation behind a hamburger. Static (scrolls with the
   page) so it needs no height agreement with the sticky header. */
@media (min-width:768px) and (max-width:900px){
  html[data-device="tablet"] .dash-shell{
    grid-template-columns:minmax(0,225px) minmax(0,1fr);
  }
  html[data-device="tablet"] .sidebar{
    display:flex; position:static; transform:none; transition:none;
    width:auto; max-width:none; height:auto; min-height:100%;
    box-shadow:none; z-index:auto; overflow:visible;
  }
  html[data-device="tablet"] .sidebar > .brand{ display:none; }
  html[data-device="tablet"] .sidebar{ padding-top:14px; }
  html[data-device="tablet"] .mobile-topnav #dash-menu-toggle{ display:none; }
  html[data-device="tablet"] .sidebar-backdrop{ display:none !important; }
}

/* --------------------------------------------------------------------------
   TRADE JOURNAL v2 — motion pass, AI Coach, prop firm tracker
   -------------------------------------------------------------------------- */

/* Tab panels glide in when switched (display toggle restarts the animation). */
.journal-tab-panel{ animation:gmPanelIn .3s cubic-bezier(.2,.7,.3,1) both; }

/* Stat cards get a gentle lift site-wide — they were fully static before. */
.stat-card{ transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.stat-card:hover{
  transform:translateY(-2px); border-color:#3a3a42;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.7);
}

/* Shared empty state ---------------------------------------------------------- */
.pf-empty{
  border:1px dashed var(--line); border-radius:12px;
  padding:34px 24px; text-align:center;
}
.pf-empty h3{ font-size:16px; margin:0 0 10px; text-wrap:balance; }
.pf-empty p{ font-size:13.5px; color:var(--ink-2); max-width:52ch; margin:0 auto; line-height:1.65; }

/* Prop firms ------------------------------------------------------------------ */
.pf-add-row{ display:grid; grid-template-columns:2fr 1.4fr auto; gap:10px; }
@media (max-width:640px){ .pf-add-row{ grid-template-columns:1fr; } }
.pf-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
}
.pf-card{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-2);
  padding:16px; display:flex; flex-direction:column; gap:12px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pf-card:hover{
  transform:translateY(-2px); border-color:#3a3a42;
  box-shadow:0 14px 34px -20px rgba(0,0,0,.75);
}
.pf-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pf-card-title b{ font-size:15px; color:var(--ink-0); display:block; }
.pf-acct{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.pf-status-select{
  background:var(--bg-3); border:1px solid; border-radius:999px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  padding:3px 8px; cursor:pointer; outline:none;
}
.pf-bars{ display:flex; flex-direction:column; gap:7px; }
.pf-bar-row{ display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; }
.pf-bar-label{ font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.pf-bar{ height:6px; border-radius:4px; background:var(--bg-3); overflow:hidden; }
.pf-bar i{ display:block; height:100%; border-radius:4px; transition:width .6s cubic-bezier(.2,.7,.3,1); }
.pf-bar i.is-win{ background:var(--bull); }
.pf-bar i.is-loss{ background:var(--bear); }
.pf-bar-val{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.pf-net-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pf-net{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--ink-0); }
.pf-roi{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.pf-entries summary{
  cursor:pointer; font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  list-style:none; padding:2px 0;
}
.pf-entries summary::before{ content:'▸ '; color:var(--gold); }
.pf-entries[open] summary::before{ content:'▾ '; }
.pf-entry{
  display:grid; grid-template-columns:8px minmax(0,1fr) auto auto 22px;
  gap:8px; align-items:center; padding:6px 0;
  border-bottom:1px solid var(--line-soft); font-size:12px;
}
.pf-entry:last-child{ border-bottom:none; }
.pf-entry i{ width:7px; height:7px; border-radius:50%; display:block; }
.pf-entry i.is-win{ background:var(--bull); }
.pf-entry i.is-loss{ background:var(--bear); }
.pf-entry-label{ color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-entry-date{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.pf-entry-amt{ font-family:var(--font-mono); font-size:11.5px; font-variant-numeric:tabular-nums; }
.pf-entry-del{
  background:none; border:none; color:var(--ink-3); cursor:pointer;
  font-size:15px; line-height:1; padding:2px; border-radius:5px;
}
.pf-entry-del:hover{ color:var(--bear); background:rgba(229,72,77,.1); }
.pf-card-actions{ display:flex; gap:8px; align-items:center; }
.pf-delete-firm{
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3);
}
.pf-delete-firm:hover{ color:var(--bear); }
.pf-inline-form{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px;
  padding-top:12px; border-top:1px solid var(--line-soft);
}
.pf-inline-form .btn{ grid-column:span 1; }
@media (max-width:640px){ .pf-inline-form{ grid-template-columns:1fr 1fr; } }
.pf-inline-form input, .pf-inline-form select{
  background:var(--bg-1); border:1px solid var(--line); border-radius:8px;
  color:var(--ink-0); padding:8px 10px; font-size:13px; outline:none;
}
.pf-inline-form input:focus, .pf-inline-form select:focus{ border-color:var(--gold-dim); }

/* AI Coach -------------------------------------------------------------------- */
.jai-hero{
  display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:center;
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, rgba(3,201,136,.05), transparent 200px), var(--bg-1);
  padding:20px; margin-bottom:18px;
}
@media (max-width:640px){ .jai-hero{ grid-template-columns:1fr; text-align:center; } }
.jai-gauge svg{ width:100%; max-width:170px; height:auto; }
.jai-gauge-num{ font-family:var(--font-mono); font-size:34px; font-weight:700; }
.jai-gauge-sub{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.2em; }
.jai-verdict p{ font-size:14px; line-height:1.7; color:var(--ink-1); margin:10px 0 0; }
.jai-actions{
  border:1px solid rgba(245,197,66,.3); border-radius:12px;
  background:rgba(245,197,66,.05); padding:16px 18px; margin-bottom:18px;
}
.jai-actions h4{
  margin:0 0 10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber); font-weight:700;
}
.jai-actions ol{ margin:0; padding-left:20px; }
.jai-actions li{ font-size:13.5px; color:var(--ink-1); line-height:1.7; }
.jai-cards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px;
}
.jai-card{
  border:1px solid var(--line); border-left:3px solid; border-radius:10px;
  background:var(--bg-2); padding:14px 16px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.jai-card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -18px rgba(0,0,0,.7); }
.jai-card-tag{
  font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.14em;
  border:1px solid; border-radius:4px; padding:2px 7px; display:inline-block;
  margin-bottom:8px;
}
.jai-card h5{ font-size:13.5px; margin:0 0 6px; color:var(--ink-0); }
.jai-card p{ font-size:12.5px; color:var(--ink-2); line-height:1.65; margin:0; }