/* ═══════════════════════════════════════════════════════════
   ZenTeens PRO — style.css
   Retro-futuristic dark trading terminal aesthetic
   Fonts: Clash Display (display) + Space Grotesk (body) + JetBrains Mono
═══════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────── */
:root {
  /* Core palette */
  --c-bg:        #020812;
  --c-bg2:       #050e1c;
  --c-bg3:       #071526;
  --c-surf:      #0a1929;
  --c-surf2:     #0e2036;
  --c-surf3:     #122541;

  /* Borders */
  --c-border:    rgba(0,200,255,0.07);
  --c-border2:   rgba(0,200,255,0.14);
  --c-border3:   rgba(0,200,255,0.30);

  /* Accent */
  --c-acc:       #00d9ff;
  --c-acc2:      #6c3bff;
  --c-acc3:      #00ffaa;

  /* Semantic */
  --c-gain:      #00e676;
  --c-loss:      #ff1744;
  --c-yellow:    #ffd600;
  --c-orange:    #ff7043;

  /* Text */
  --c-text:      #ddeeff;
  --c-text2:     #8ab0cc;
  --c-muted:     #3d6080;
  --c-dim:       #1a3050;

  /* Effects */
  --c-glow-acc:  rgba(0,217,255,0.18);
  --c-glow-gain: rgba(0,230,118,0.18);
  --c-glow-loss: rgba(255,23,68,0.18);

  /* Layout */
  --ticker-h:    30px;
  --topbar-h:    54px;
  --nav-h:       62px;
  --top-offset:  calc(var(--ticker-h) + var(--topbar-h));

  /* Radius */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  /* Transitions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
}

/* ── 2. RESET & BASE ───────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--c-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--c-acc); text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }
canvas { display: block; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--c-bg2); }
::-webkit-scrollbar-thumb { background: var(--c-border3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-acc); }
* { scrollbar-width: thin; scrollbar-color: var(--c-border3) transparent; }

/* ── 3. ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeIn        { from { opacity:0 } to { opacity:1 } }
@keyframes fadeUp        { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
@keyframes fadeDown      { from { opacity:0; transform:translateY(-16px) } to { opacity:1; transform:none } }
@keyframes slideInRight  { from { transform:translateX(100%) } to { transform:none } }
@keyframes slideUp       { from { transform:translateY(100%) } to { transform:none } }
@keyframes spin          { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes pulse         { 0%,100% { opacity:1;transform:scale(1) } 50% { opacity:.65;transform:scale(.95) } }
@keyframes shimmer       { 0% { background-position:-400px 0 } 100% { background-position:400px 0 } }
@keyframes tickerScroll  { 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } }
@keyframes priceUp       { 0%,100% { background:transparent } 40% { background:rgba(0,230,118,.22) } }
@keyframes priceDown     { 0%,100% { background:transparent } 40% { background:rgba(255,23,68,.22) } }
@keyframes glowPulse     { 0%,100% { box-shadow:0 0 20px var(--c-glow-acc) } 50% { box-shadow:0 0 45px var(--c-glow-acc), 0 0 80px rgba(0,217,255,.08) } }
@keyframes achievePop    { 0% { transform:translate(-50%,-50%) scale(.4) rotate(-12deg); opacity:0 }
                           65% { transform:translate(-50%,-50%) scale(1.08) rotate(1.5deg) }
                           85% { transform:translate(-50%,-50%) scale(.97) }
                           100% { transform:translate(-50%,-50%) scale(1); opacity:1 } }
@keyframes xpFloat       { 0% { transform:translateY(0); opacity:1 } 100% { transform:translateY(-50px); opacity:0 } }
@keyframes toastIn       { from { transform:translateX(130%); opacity:0 } to { transform:none; opacity:1 } }
@keyframes toastOut      { to { transform:translateX(130%); opacity:0 } }
@keyframes dotBlink      { 0%,100% { opacity:1 } 50% { opacity:.2 } }
@keyframes scanline      { 0% { transform:translateY(-100%) } 100% { transform:translateY(100vh) } }
@keyframes ringFill      { from { stroke-dashoffset:340 } to { stroke-dashoffset:0 } }
@keyframes orb1          { 0%,100% { transform:translate(0,0) scale(1) } 50% { transform:translate(80px,-60px) scale(1.15) } }
@keyframes orb2          { 0%,100% { transform:translate(0,0) scale(1) } 50% { transform:translate(-70px,90px) scale(1.1) } }
@keyframes orb3          { 0%,100% { transform:translate(0,0) scale(1) } 60% { transform:translate(60px,60px) scale(1.2) } }
@keyframes levelUp       { 0%,100% { transform:scale(1) } 40% { transform:scale(1.18) } 70% { transform:scale(.96) } }
@keyframes challengePop  { from { transform:scale(.85) translateY(8px); opacity:0 } to { transform:none; opacity:1 } }

/* ── 4. ANIMATED BACKGROUND ────────────────────────────── */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.mesh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .18;
}
.mesh-orb-1 {
  width: 550px; height: 550px;
  top: -100px; left: -150px;
  background: radial-gradient(circle, #0048ff, transparent 70%);
  animation: orb1 22s ease-in-out infinite;
}
.mesh-orb-2 {
  width: 450px; height: 450px;
  bottom: -80px; right: -100px;
  background: radial-gradient(circle, #6c3bff, transparent 70%);
  animation: orb2 28s ease-in-out infinite;
}
.mesh-orb-3 {
  width: 350px; height: 350px;
  top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, #00d9ff, transparent 70%);
  opacity: .09;
  animation: orb3 18s ease-in-out infinite;
}
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,217,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── 5. SPLASH SCREEN ──────────────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  animation: fadeIn .4s ease;
}
.splash-logo-ring {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: glowPulse 2.4s ease infinite;
}
.splash-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-track {
  fill: none;
  stroke: var(--c-surf2);
  stroke-width: 4;
}
.ring-progress {
  fill: none;
  stroke: url(#splashGrad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: ringFill 2.5s var(--ease-out) forwards;
}
.splash-logo-inner {
  width: 80px; height: 80px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--c-surf), var(--c-surf2));
  border: 1px solid var(--c-border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 24px;
  font-weight: 700;
  gap: 1px;
  z-index: 1;
}
.logo-z { color: var(--c-acc); }
.logo-t { color: var(--c-acc2); }
.splash-brand { text-align: center; }
.splash-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.02em;
  line-height: 1;
}
.pro-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-acc), var(--c-acc2));
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}
.splash-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--c-text2);
  letter-spacing: .04em;
}
.splash-loader { width: min(320px,80vw); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.splash-bar-wrap {
  width: 100%;
  height: 3px;
  background: var(--c-surf2);
  border-radius: 2px;
  overflow: hidden;
}
.splash-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-acc), var(--c-acc2));
  border-radius: 2px;
  transition: width .35s var(--ease-out);
  box-shadow: 0 0 12px var(--c-acc);
}
.splash-msg { font-size: 12px; color: var(--c-text2); font-family: 'JetBrains Mono', monospace; min-height: 16px; }
.splash-facts { animation: fadeIn 1.2s ease; }
.fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--r-full);
  background: var(--c-surf);
  border: 1px solid var(--c-border2);
  font-size: 12px;
  color: var(--c-text2);
}

/* ── 6. AUTH MODAL ──────────────────────────────────────── */
.overlay-glass {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(2,8,18,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .3s ease;
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 390px;
  background: linear-gradient(160deg, var(--c-surf) 0%, var(--c-bg2) 100%);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-xl);
  overflow: hidden;
  animation: fadeUp .4s var(--ease-spring);
}
.auth-card-glow {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,217,255,.15), transparent 70%);
  pointer-events: none;
}
.auth-header {
  padding: 28px 24px 16px;
  border-bottom: 1px solid var(--c-border);
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.auth-logo-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-acc), var(--c-acc2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-bg);
  flex-shrink: 0;
}
.auth-logo-name {
  font-family: 'Clash Display', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
}
.auth-logo-name span { color: var(--c-acc); }
.auth-logo-tag { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.auth-tabs-row {
  display: flex;
  border-bottom: 1px solid var(--c-border);
}
.auth-tab {
  flex: 1;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all .2s;
}
.auth-tab.active { color: var(--c-acc); border-bottom-color: var(--c-acc); }
.auth-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.auth-error {
  background: rgba(255,23,68,.1);
  border: 1px solid rgba(255,23,68,.3);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--c-loss);
}
.auth-field {
  width: 100%;
  height: 46px;
  background: var(--c-bg3);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-md);
  padding: 0 16px;
  color: var(--c-text);
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.auth-field:focus { border-color: var(--c-acc); box-shadow: 0 0 0 3px rgba(0,217,255,.12); }
.auth-field::placeholder { color: var(--c-muted); }
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-acc), var(--c-acc2));
  color: var(--c-bg);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .2s, transform .15s;
  letter-spacing: .02em;
}
.auth-submit:hover { opacity: .9; }
.auth-submit:active { transform: scale(.98); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--c-muted); font-size: 12px; }
.auth-or::before, .auth-or::after { content:''; flex:1; height:1px; background: var(--c-border); }
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--c-surf);
  border: 1.5px solid var(--c-border2);
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.google-btn:hover { border-color: var(--c-border3); background: var(--c-surf2); }
.google-icon { width: 18px; height: 18px; flex-shrink: 0; }
.guest-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  color: var(--c-text2);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.guest-note { font-size: 10px; color: var(--c-muted); text-decoration: none; }
.auth-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,14,28,.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
}
.auth-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--c-border2);
  border-top-color: var(--c-acc);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ── 7. TICKER ──────────────────────────────────────────── */
#tickerWrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ticker-h);
  background: rgba(2,8,18,.96);
  border-bottom: 1px solid var(--c-border);
  z-index: 1004;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 8px;
}
.ticker-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-gain);
  flex-shrink: 0;
  margin-left: 10px;
  animation: dotBlink 1.4s ease infinite;
  box-shadow: 0 0 6px var(--c-gain);
}
.ticker-scroller { flex: 1; overflow: hidden; }
.ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 80s linear infinite;
  will-change: transform;
}
.ticker-inner:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  border-right: 1px solid var(--c-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.ticker-sym { color: var(--c-text2); font-weight: 500; }
.ticker-price { color: var(--c-text); font-weight: 600; }
.ticker-chg.up  { color: var(--c-gain); }
.ticker-chg.down{ color: var(--c-loss); }
.ticker-flash-up   { animation: priceUp .5s ease; }
.ticker-flash-down { animation: priceDown .5s ease; }

/* ── 8. TOPBAR ──────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: var(--ticker-h); left: 0; right: 0;
  height: var(--topbar-h);
  background: rgba(2,8,18,.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--c-border);
  z-index: 1003;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
}
.topbar-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  padding: 6px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.topbar-hamburger:hover { background: var(--c-surf); }
.topbar-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--c-text2);
  border-radius: 1px;
  transition: all .25s;
}
.topbar-brand {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tb-logo {
  font-family: 'Clash Display', sans-serif;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--c-acc), #a78bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.01em;
}
.tb-pro {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-acc), var(--c-acc2));
  color: var(--c-bg);
  letter-spacing: .04em;
}
.regime-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid;
  transition: all .4s;
}
.regime-badge.bullish { background: rgba(0,230,118,.1); border-color: rgba(0,230,118,.3); color: var(--c-gain); }
.regime-badge.bearish { background: rgba(255,23,68,.1); border-color: rgba(255,23,68,.3); color: var(--c-loss); }
.regime-badge.neutral { background: rgba(108,59,255,.12); border-color: rgba(108,59,255,.3); color: #a78bff; }
.regime-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: dotBlink 1.6s ease infinite;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tb-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--c-text2);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.tb-btn:hover { background: var(--c-surf2); color: var(--c-acc); }
.tb-notif {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-loss);
  border: 1.5px solid var(--c-bg2);
  animation: dotBlink 1.4s ease infinite;
}
.tb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-acc), var(--c-acc2));
  color: var(--c-bg);
  font-family: 'Clash Display', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--c-border2);
  transition: all .2s;
}
.tb-avatar:hover { border-color: var(--c-acc); box-shadow: 0 0 12px var(--c-glow-acc); }

/* ── 9. MAIN CONTENT ────────────────────────────────────── */
#mainContent {
  position: relative;
  top: var(--top-offset);
  min-height: calc(100vh - var(--top-offset) - var(--nav-h));
  padding-bottom: calc(var(--nav-h) + 24px);
  z-index: 1;
}
.tab-panel {
  display: none;
  padding: 16px;
  animation: fadeIn .22s ease;
}
.tab-panel.active { display: block; }
.mb-section { margin-bottom: 14px; }

/* ── 10. BOTTOM NAV ─────────────────────────────────────── */
#bottomNav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(2,8,18,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--c-border);
  z-index: 1002;
  display: flex;
  align-items: stretch;
  padding: 0 6px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: .02em;
  cursor: pointer;
  border: none;
  background: none;
  position: relative;
  padding: 8px 4px;
  transition: color .2s;
  border-radius: var(--r-sm);
  min-height: 48px;
}
.nav-item i { font-size: 19px; transition: all .2s; }
.nav-item.active { color: var(--c-acc); }
.nav-item.active i { filter: drop-shadow(0 0 6px var(--c-acc)); }
.nav-indicator {
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--c-acc);
  opacity: 0;
  box-shadow: 0 0 8px var(--c-acc);
  transition: opacity .2s;
}
.nav-item.active .nav-indicator { opacity: 1; }
.nav-item:hover:not(.active) { color: var(--c-text2); }

/* ── 11. GLASS CARDS ────────────────────────────────────── */
.glass-card {
  background: linear-gradient(160deg, rgba(10,25,41,.9) 0%, rgba(7,21,38,.95) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,217,255,.3), transparent);
  opacity: 0;
  transition: opacity .25s;
}
.glass-card:hover { border-color: var(--c-border2); box-shadow: 0 4px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(0,217,255,.04); }
.glass-card:hover::before { opacity: 1; }
.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.card-head-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text2);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-head-title i { color: var(--c-acc); font-size: 13px; }
.see-all-link {
  font-size: 11px;
  color: var(--c-acc);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

/* ── 12. DASHBOARD: NW HERO ─────────────────────────────── */
.nw-hero {
  background: linear-gradient(135deg, var(--c-surf) 0%, var(--c-surf2) 50%, #0a1f42 100%);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-xl);
  padding: 20px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  animation: glowPulse 4s ease-in-out infinite;
}
.nw-hero-glow {
  position: absolute;
  top: -50px; right: -50px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,217,255,.12) 0%, transparent 70%);
  pointer-events: none;
}
.nw-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-acc);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-acc);
  box-shadow: 0 0 0 0 var(--c-acc);
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.nw-value {
  font-family: 'Clash Display', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.02em;
  line-height: 1;
  animation: numUpdate .3s ease;
}
.nw-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  margin-top: 5px;
}
.nw-delta.pos { color: var(--c-gain); }
.nw-delta.neg { color: var(--c-loss); }
.nw-sparkline-wrap { flex-shrink: 0; }

/* ── 13. KPI GRID ───────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.kpi-tile {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: all .2s;
}
.kpi-tile:hover { border-color: var(--c-border2); }
.kpi-tile-icon {
  font-size: 14px;
  color: var(--c-acc);
  margin-bottom: 6px;
  opacity: .7;
}
.kpi-tile-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 2px;
}
.kpi-tile-lbl { font-size: 10px; color: var(--c-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }

/* ── 14. DASHBOARD ROWS ─────────────────────────────────── */
.dash-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* F&G Card */
.fg-card { overflow: visible; }
.fg-value-wrap { text-align: center; padding: 0 16px 14px; }
.fg-num {
  font-family: 'Clash Display', sans-serif;
  font-size: 40px;
  font-weight: 700;
  display: block;
  line-height: 1;
}
.fg-lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; display: block; margin-top: 2px; }

/* Indices */
.indices-card { padding: 0; }
.index-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--c-border);
}
.index-row:last-child { border-bottom: none; }
.idx-name { font-size: 10px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }
.idx-vals { text-align: right; }
.idx-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--c-text); display: block; }
.idx-chg { font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.idx-chg.up { color: var(--c-gain); }
.idx-chg.down { color: var(--c-loss); }

/* ── 15. MOVERS ─────────────────────────────────────────── */
.movers-list { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 5px; }
.mover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  background: var(--c-surf2);
  cursor: pointer;
  transition: background .15s;
}
.mover-item:hover { background: var(--c-surf3); }
.mover-sym { font-family: 'Clash Display', sans-serif; font-size: 12px; font-weight: 600; flex: 1; color: var(--c-text); }
.mover-chg { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.mover-chg.up { color: var(--c-gain); }
.mover-chg.down { color: var(--c-loss); }

/* ── 16. SECTOR HEATMAP ─────────────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.section-sub { font-size: 10px; color: var(--c-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.sector-cell {
  border-radius: var(--r-sm);
  padding: 10px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  line-height: 1.5;
}
.sector-cell:hover { transform: scale(1.05); }
.sector-cell.hot-up { background: rgba(0,230,118,.2); color: var(--c-gain); }
.sector-cell.mild-up { background: rgba(0,230,118,.09); color: #50d38a; }
.sector-cell.mild-dn { background: rgba(255,23,68,.09); color: #ff6678; }
.sector-cell.hot-dn { background: rgba(255,23,68,.2); color: var(--c-loss); }
.sector-cell.neutral { background: rgba(255,214,0,.09); color: var(--c-yellow); }
.sector-pct { font-family: 'JetBrains Mono', monospace; font-size: 10px; display: block; }

/* Mini Holdings */
.mini-holdings { padding: 0 14px 12px; }
.mini-holding-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-border);
}
.mini-holding-row:last-child { border-bottom: none; }
.mhr-sym { font-family: 'Clash Display', sans-serif; font-size: 13px; font-weight: 600; flex: 1; }
.mhr-qty { font-size: 10px; color: var(--c-muted); }
.mhr-pl { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.mhr-pl.pos { color: var(--c-gain); }
.mhr-pl.neg { color: var(--c-loss); }

/* News */
.news-list { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 7px; }
.news-item {
  padding: 10px;
  background: var(--c-surf2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s;
  border-left: 3px solid transparent;
}
.news-item:hover { background: var(--c-surf3); }
.news-item.bullish { border-left-color: var(--c-gain); }
.news-item.bearish { border-left-color: var(--c-loss); }
.news-item.neutral { border-left-color: var(--c-yellow); }
.news-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sentiment-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sentiment-pill.bullish { background: rgba(0,230,118,.18); color: var(--c-gain); }
.sentiment-pill.bearish { background: rgba(255,23,68,.18); color: var(--c-loss); }
.sentiment-pill.neutral { background: rgba(255,214,0,.15); color: var(--c-yellow); }
.news-time { font-size: 10px; color: var(--c-muted); margin-left: auto; }
.news-text { font-size: 12px; color: var(--c-text2); line-height: 1.45; }

/* Breadth */
.breadth-wrap { padding: 0 16px 14px; }
.breadth-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 11px; }
.breadth-pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--c-text2); }
.breadth-track { height: 10px; background: var(--c-loss); border-radius: 5px; overflow: hidden; }
.breadth-fill { height: 100%; background: var(--c-gain); border-radius: 5px; transition: width .5s ease; }
.gain-color { color: var(--c-gain); }
.loss-color { color: var(--c-loss); }

/* ── 17. MARKET TAB ─────────────────────────────────────── */
.search-bar-wrap {
  position: relative;
  margin-bottom: 12px;
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  font-size: 14px;
  pointer-events: none;
}
.search-bar {
  width: 100%;
  height: 44px;
  background: var(--c-surf);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-full);
  padding: 0 44px 0 42px;
  color: var(--c-text);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.search-bar:focus { border-color: var(--c-acc); box-shadow: 0 0 0 3px rgba(0,217,255,.1); }
.search-bar::placeholder { color: var(--c-muted); }
.search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-surf2);
  color: var(--c-text2);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.chip-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--c-border2);
  background: transparent;
  color: var(--c-text2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
}
.chip:hover { border-color: var(--c-acc); color: var(--c-acc); }
.chip.active { background: rgba(0,217,255,.14); border-color: var(--c-acc); color: var(--c-acc); }
.market-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sort-select {
  flex: 1;
  height: 36px;
  background: var(--c-surf);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-sm);
  color: var(--c-text2);
  font-size: 12px;
  padding: 0 10px;
  outline: none;
  cursor: pointer;
}
.view-toggle {
  display: flex;
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.vt-btn {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--c-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
.vt-btn.active { background: var(--c-surf2); color: var(--c-acc); }

/* Stock Grid */
.stock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stock-grid.list-view { grid-template-columns: 1fr; }
.stock-card {
  background: linear-gradient(160deg, var(--c-surf) 0%, var(--c-surf2) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all .22s;
  position: relative;
}
.stock-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background .2s;
}
.stock-card.up-card::before { background: linear-gradient(90deg, var(--c-gain), transparent); }
.stock-card.down-card::before { background: linear-gradient(90deg, var(--c-loss), transparent); }
.stock-card:hover {
  border-color: var(--c-border2);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0,0,0,.4);
}
.stock-card-inner { padding: 12px; }
.stock-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.stock-sym { font-family: 'Clash Display', sans-serif; font-size: 14px; font-weight: 700; color: var(--c-text); }
.stock-name { font-size: 10px; color: var(--c-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.star-btn { color: var(--c-dim); font-size: 15px; background: none; border: none; cursor: pointer; padding: 2px; transition: color .15s; }
.star-btn.active { color: var(--c-yellow); filter: drop-shadow(0 0 4px var(--c-yellow)); }
.stock-price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.stock-price { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--c-text); }
.stock-chg { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.stock-chg.up { color: var(--c-gain); }
.stock-chg.down { color: var(--c-loss); }
.stock-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 7px; }
.sbadge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sbadge.hot   { background: rgba(255,112,67,.18); color: var(--c-orange); }
.sbadge.div   { background: rgba(0,255,170,.12); color: var(--c-acc3); }
.sbadge.val   { background: rgba(108,59,255,.18); color: #a78bff; }
.sbadge.grw   { background: rgba(0,217,255,.12); color: var(--c-acc); }
.sbadge.own   { background: rgba(0,230,118,.12); color: var(--c-gain); }
.sbadge.wl    { background: rgba(255,214,0,.12); color: var(--c-yellow); }
.sbadge.graham{ background: rgba(108,59,255,.18); color: #a78bff; }
.trade-btn {
  width: 100%;
  height: 30px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(0,217,255,.12), rgba(108,59,255,.12));
  border: 1px solid var(--c-border2);
  color: var(--c-acc);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s;
}
.trade-btn:hover { background: linear-gradient(135deg, rgba(0,217,255,.25), rgba(108,59,255,.25)); border-color: var(--c-acc); }
/* List view card */
.stock-card.list-card .stock-card-inner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.stock-card.list-card .stock-info { flex: 1; min-width: 0; }
.stock-card.list-card .sparkline-canvas { width: 60px; height: 28px; flex-shrink: 0; }
.stock-card.list-card .trade-btn { width: auto; padding: 0 14px; flex-shrink: 0; height: 28px; }
/* Sparkline */
.sparkline-canvas { display: block; }
/* Flash */
.flash-up   { animation: priceUp .45s ease; border-radius: var(--r-sm); }
.flash-down { animation: priceDown .45s ease; border-radius: var(--r-sm); }
/* Holding pct */
.holding-pct { font-size: 10px; margin-bottom: 4px; }
.holding-pct.pos { color: var(--c-gain); }
.holding-pct.neg { color: var(--c-loss); }

/* ── 18. PORTFOLIO TAB ──────────────────────────────────── */
.port-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.port-kpi-item {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 10px;
  text-align: center;
}
.port-kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--c-text); }
.port-kpi-val.pos { color: var(--c-gain); }
.port-kpi-val.neg { color: var(--c-loss); }
.port-kpi-lbl { font-size: 10px; color: var(--c-muted); margin-top: 2px; }

/* Table */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.data-table thead th {
  background: var(--c-surf2);
  color: var(--c-muted);
  font-weight: 700;
  padding: 9px 10px;
  text-align: left;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
}
.data-table tbody tr { border-bottom: 1px solid var(--c-border); transition: background .12s; }
.data-table tbody tr:hover { background: var(--c-surf2); }
.data-table tbody td {
  padding: 9px 10px;
  color: var(--c-text2);
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.data-table .sym-td { font-family: 'Clash Display', sans-serif; font-weight: 700; color: var(--c-text); font-size: 13px; }
.empty-row { text-align: center; color: var(--c-muted); padding: 24px !important; font-family: 'Space Grotesk', sans-serif !important; }
.cell-action-btn {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .15s;
  margin-right: 4px;
}
.cell-action-btn.sell { background: rgba(255,23,68,.15); color: var(--c-loss); }
.cell-action-btn.sell:hover { background: rgba(255,23,68,.3); }
.cell-action-btn.edit { background: rgba(0,217,255,.1); color: var(--c-acc); }
.cell-action-btn.edit:hover { background: rgba(0,217,255,.2); }

/* Analytics */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 14px 14px; }
.analytic-box { background: var(--c-surf2); border-radius: var(--r-sm); padding: 10px; text-align: center; }
.analytic-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--c-text); }
.analytic-lbl { font-size: 9px; color: var(--c-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }

/* ── 19. CHARTS TAB ─────────────────────────────────────── */
.chart-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.chart-sym-select {
  flex: 1;
  min-width: 100px;
  height: 38px;
  background: var(--c-surf);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Clash Display', sans-serif;
  padding: 0 12px;
  outline: none;
  cursor: pointer;
}
.tf-row { display: flex; gap: 4px; }
.tf-btn {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border2);
  background: transparent;
  color: var(--c-muted);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.tf-btn.active { background: rgba(0,217,255,.14); border-color: var(--c-acc); color: var(--c-acc); }
.ind-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.ind-chip {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1.5px solid var(--c-border);
  background: transparent;
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .04em;
}
.ind-chip.active { background: rgba(108,59,255,.15); border-color: var(--c-acc2); color: #a78bff; }
.chart-card {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 8px;
}
.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
}
.chart-sym-lbl { font-family: 'Clash Display', sans-serif; font-size: 15px; font-weight: 700; color: var(--c-text); }
.chart-ohlc { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--c-muted); }
.sub-chart-card {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 7px;
}
.sub-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
}
.mono-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.accent { color: var(--c-acc); }
/* Order Book */
.ob-spread-label { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--c-yellow); padding: 6px; background: var(--c-surf2); margin: 0 14px 8px; border-radius: var(--r-sm); }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.ob-col-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.bid-color { color: var(--c-gain); }
.ask-color { color: var(--c-loss); }
.ob-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.5px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  position: relative;
}
.ob-bar {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 2px;
  opacity: .1;
}
.ob-bid-bar { background: var(--c-gain); right: 0; }
.ob-ask-bar { background: var(--c-loss); left: 0; }
.ob-bid-price { color: var(--c-gain); font-weight: 600; }
.ob-ask-price { color: var(--c-loss); font-weight: 600; }
.ob-qty { color: var(--c-muted); font-size: 10px; }
/* Pattern Box */
.pattern-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-surf2);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--c-text2);
  line-height: 1.5;
}
.pattern-icon-wrap { font-size: 20px; flex-shrink: 0; color: var(--c-acc); }
/* Drawing Tools */
.draw-tools-row { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.draw-tool-btn {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border2);
  background: var(--c-surf);
  color: var(--c-text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.draw-tool-btn:hover, .draw-tool-btn.active { border-color: var(--c-acc2); color: #a78bff; background: rgba(108,59,255,.1); }

/* ── 20. LEARN TAB ──────────────────────────────────────── */
.xp-bar-card {
  background: var(--c-surf);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
}
.xp-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.xp-left { display: flex; align-items: center; gap: 8px; }
.xp-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(0,217,255,.15), rgba(108,59,255,.15));
  border: 1px solid var(--c-border2);
  color: var(--c-acc);
  font-size: 11px;
  font-weight: 700;
}
.xp-title { font-size: 13px; font-weight: 600; color: var(--c-text2); }
.xp-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--c-muted); }
.xp-track { height: 7px; background: var(--c-surf2); border-radius: 4px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--c-acc), var(--c-acc2)); border-radius: 4px; transition: width .5s ease; box-shadow: 0 0 8px var(--c-acc); }
.learn-tabs .chip { font-size: 11px; }
.learn-section { animation: fadeIn .25s ease; }

/* Learn Cards Grid */
.learn-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.learn-card {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  cursor: pointer;
  transition: all .22s;
  text-align: center;
}
.learn-card:hover { border-color: var(--c-border2); box-shadow: 0 4px 20px rgba(0,217,255,.08); transform: translateY(-2px); }
.learn-card-icon { font-size: 28px; margin-bottom: 8px; }
.learn-card-title { font-family: 'Clash Display', sans-serif; font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.learn-card-desc { font-size: 11px; color: var(--c-muted); line-height: 1.4; }

/* Quiz */
.quiz-card { padding: 20px !important; }
.quiz-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12px; color: var(--c-muted); }
.quiz-score-badge { font-family: 'JetBrains Mono', monospace; color: var(--c-yellow); font-weight: 700; }
.quiz-question { font-size: 15px; font-weight: 500; color: var(--c-text); margin-bottom: 16px; line-height: 1.55; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  padding: 12px 16px;
  background: var(--c-surf2);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-md);
  color: var(--c-text2);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--c-acc); color: var(--c-text); }
.quiz-opt.correct { border-color: var(--c-gain); background: rgba(0,230,118,.1); color: var(--c-gain); }
.quiz-opt.wrong   { border-color: var(--c-loss); background: rgba(255,23,68,.1); color: var(--c-loss); }
.quiz-next {
  width: 100%;
  margin-top: 14px;
  height: 42px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(0,217,255,.15), rgba(108,59,255,.15));
  border: 1.5px solid var(--c-acc);
  color: var(--c-acc);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Pattern Demos */
.pattern-demo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pattern-demo-card {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.pattern-demo-card:hover { border-color: var(--c-border2); }
.pd-name { font-size: 11px; font-weight: 600; color: var(--c-text); margin: 6px 0 3px; }
.pd-tag { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.pd-tag.bull { background: rgba(0,230,118,.15); color: var(--c-gain); }
.pd-tag.bear { background: rgba(255,23,68,.15); color: var(--c-loss); }
.pd-tag.neutral { background: rgba(255,214,0,.12); color: var(--c-yellow); }

/* Practice */
.practice-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; }
.practice-buy-btn, .practice-sell-btn {
  height: 44px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s;
}
.practice-buy-btn  { background: rgba(0,230,118,.15); border-color: var(--c-gain); color: var(--c-gain); }
.practice-sell-btn { background: rgba(255,23,68,.15); border-color: var(--c-loss); color: var(--c-loss); }
.practice-buy-btn:hover  { background: rgba(0,230,118,.28); }
.practice-sell-btn:hover { background: rgba(255,23,68,.28); }
.practice-result { margin: 0 14px 8px; padding: 10px; background: var(--c-surf2); border-radius: var(--r-sm); font-size: 12px; color: var(--c-text2); text-align: center; }
.practice-score { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--c-muted); padding-bottom: 14px; }

/* Challenges */
.challenge-list { display: flex; flex-direction: column; gap: 8px; }
.challenge-item {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: challengePop .3s var(--ease-spring);
}
.ci-icon { font-size: 22px; flex-shrink: 0; }
.ci-info { flex: 1; }
.ci-name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.ci-desc { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.ci-prog-track { height: 3px; background: var(--c-surf2); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.ci-prog-fill { height: 100%; background: var(--c-acc3); border-radius: 2px; }
.ci-prog-text { font-size: 10px; color: var(--c-muted); margin-top: 3px; }
.ci-xp { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--c-yellow); background: rgba(255,214,0,.1); padding: 3px 8px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
.challenge-item.done { opacity: .55; }

/* Glossary */
.glossary-list { display: flex; flex-direction: column; }
.glossary-item { padding: 11px 0; border-bottom: 1px solid var(--c-border); }
.glossary-item:last-child { border-bottom: none; }
.glossary-term { font-family: 'Clash Display', sans-serif; font-size: 14px; font-weight: 700; color: var(--c-acc); margin-bottom: 4px; }
.glossary-def { font-size: 12px; color: var(--c-text2); line-height: 1.55; }

/* Options Simulator shared */
.options-side-row { display: flex; gap: 6px; }
.opt-side-btn {
  flex: 1;
  height: 40px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--c-border2);
  background: transparent;
  transition: all .2s;
}
.opt-side-btn.call { color: var(--c-gain); }
.opt-side-btn.put  { color: var(--c-loss); }
.opt-side-btn.call.active { background: rgba(0,230,118,.15); border-color: var(--c-gain); }
.opt-side-btn.put.active  { background: rgba(255,23,68,.15); border-color: var(--c-loss); }
.field-label { display: block; font-size: 11px; font-weight: 600; color: var(--c-text2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.field-input {
  width: 100%;
  height: 42px;
  background: var(--c-bg3);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-sm);
  padding: 0 12px;
  color: var(--c-text);
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  margin-bottom: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.field-input:focus { border-color: var(--c-acc); box-shadow: 0 0 0 3px rgba(0,217,255,.1); }
.field-select {
  width: 100%;
  height: 42px;
  background: var(--c-bg3);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-sm);
  padding: 0 12px;
  color: var(--c-text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.strike-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.strike-btn {
  padding: 8px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border2);
  background: var(--c-surf);
  color: var(--c-text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
.strike-btn.active { border-color: var(--c-acc); color: var(--c-acc); background: rgba(0,217,255,.1); }
.premium-box { background: var(--c-surf2); border-radius: var(--r-md); padding: 14px; text-align: center; margin-bottom: 12px; }
.premium-lbl { font-size: 11px; color: var(--c-muted); margin-bottom: 4px; }
.premium-val { font-family: 'Clash Display', sans-serif; font-size: 26px; font-weight: 700; color: var(--c-text); }
.premium-sub { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.greeks-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.greek-box { background: var(--c-surf2); border-radius: var(--r-sm); padding: 10px; text-align: center; }
.greek-sym { font-family: 'Clash Display', sans-serif; font-size: 18px; font-weight: 700; color: var(--c-acc); }
.greek-name { font-size: 10px; color: var(--c-muted); }
.greek-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--c-text); }
.edu-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(108,59,255,.08);
  border: 1px solid rgba(108,59,255,.2);
  border-radius: var(--r-sm);
  padding: 10px;
  font-size: 11px;
  color: var(--c-text2);
  margin-bottom: 12px;
}
.opt-buy-btn {
  width: 100%;
  height: 44px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid;
  transition: all .2s;
  letter-spacing: .04em;
}
.opt-buy-btn.call { background: rgba(0,230,118,.15); border-color: var(--c-gain); color: var(--c-gain); }
.opt-buy-btn.put  { background: rgba(255,23,68,.15); border-color: var(--c-loss); color: var(--c-loss); }
.opt-buy-btn:hover { filter: brightness(1.15); }

/* ── 21. DRAWER ─────────────────────────────────────────── */
#drawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
#drawerOverlay.show { opacity: 1; pointer-events: all; }
#drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(300px,85vw);
  background: linear-gradient(160deg, var(--c-surf) 0%, var(--c-bg2) 100%);
  border-right: 1px solid var(--c-border2);
  z-index: 1101;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.drawer-brand {
  font-family: 'Clash Display', sans-serif;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--c-acc), #a78bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.drawer-brand span { color: var(--c-acc); }
.drawer-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-surf2);
  color: var(--c-text2);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.drawer-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--c-border);
}
.drawer-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-acc), var(--c-acc2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-bg);
  flex-shrink: 0;
}
.drawer-user-name { font-size: 15px; font-weight: 600; color: var(--c-text); }
.drawer-user-level { font-size: 11px; color: var(--c-muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.drawer-nw-box { padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.drawer-nw-lbl { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }
.drawer-nw-val { font-family: 'Clash Display', sans-serif; font-size: 22px; font-weight: 700; color: var(--c-text); margin: 3px 0 10px; }
.drawer-fg-track {
  height: 6px;
  background: linear-gradient(90deg, var(--c-loss), var(--c-yellow), var(--c-gain));
  border-radius: 3px;
  position: relative;
}
.drawer-fg-needle {
  position: absolute;
  top: -4px;
  width: 14px; height: 14px;
  background: var(--c-text);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: left .5s ease;
}
.drawer-fg-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--c-muted); margin-top: 4px; }
.drawer-nav-section { padding: 10px 10px 4px; }
.drawer-nav-title { font-size: 10px; font-weight: 700; color: var(--c-dim); text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px 4px; }
.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--c-text2);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.drawer-nav-item i { width: 18px; text-align: center; color: var(--c-muted); font-size: 14px; }
.drawer-nav-item:hover { background: var(--c-surf2); color: var(--c-text); }
.drawer-nav-item:hover i { color: var(--c-acc); }
.drawer-nav-item.danger { color: var(--c-loss); }
.drawer-nav-item.danger i { color: var(--c-loss); }
.drawer-nav-item.danger:hover { background: rgba(255,23,68,.08); }
.drawer-footer {
  margin-top: auto;
  padding: 16px 18px;
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
}
.drawer-version { font-size: 11px; color: var(--c-dim); margin-bottom: 8px; }
.drawer-disclaimer {
  background: rgba(255,214,0,.06);
  border: 1px solid rgba(255,214,0,.15);
  border-radius: var(--r-sm);
  padding: 10px;
  font-size: 10px;
  color: var(--c-text2);
  line-height: 1.5;
  display: flex;
  gap: 6px;
}
.drawer-disclaimer i { color: var(--c-yellow); flex-shrink: 0; margin-top: 1px; }

/* ── 22. TRADE MODAL ────────────────────────────────────── */
#modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
#modalOverlay.show { opacity: 1; pointer-events: all; }
#tradeModal {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-height: 92vh;
  background: linear-gradient(180deg, var(--c-surf) 0%, var(--c-bg2) 100%);
  border-top: 1px solid var(--c-border2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  z-index: 1201;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tradeModal.open { transform: translateY(0); }
.modal-drag-handle { width: 40px; height: 4px; background: var(--c-border2); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; }
.modal-stock-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 8px;
  flex-shrink: 0;
  position: relative;
}
.modal-stock-info { flex: 1; }
.modal-sym { font-family: 'Clash Display', sans-serif; font-size: 22px; font-weight: 700; color: var(--c-text); }
.modal-name { font-size: 11px; color: var(--c-muted); }
.modal-price-info { text-align: right; }
.modal-price { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--c-text); }
.modal-chg { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.modal-chg.up { color: var(--c-gain); }
.modal-chg.down { color: var(--c-loss); }
.modal-x {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-surf2);
  color: var(--c-text2);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
}
.modal-tabs-row { display: flex; border-bottom: 1px solid var(--c-border); flex-shrink: 0; }
.modal-tab {
  flex: 1;
  padding: 10px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-muted);
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  background: none;
  border-left: none; border-right: none; border-top: none;
  letter-spacing: .03em;
}
.modal-tab.active { color: var(--c-acc); border-bottom-color: var(--c-acc); }
.modal-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; }
.modal-panel { display: none; }
.modal-panel.active { display: block; }

/* Buy panel */
.qty-presets { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.qty-btn {
  flex: 1;
  min-width: 40px;
  padding: 7px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border2);
  background: var(--c-surf);
  color: var(--c-text2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  font-family: 'JetBrains Mono', monospace;
}
.qty-btn.active { background: rgba(0,217,255,.15); border-color: var(--c-acc); color: var(--c-acc); }
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.field-row-2 .field-input { margin-bottom: 0; }
.sl-warn {
  background: rgba(255,112,67,.1);
  border: 1px solid rgba(255,112,67,.3);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 11px;
  color: var(--c-orange);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.risk-calc {
  background: var(--c-surf2);
  border-radius: var(--r-sm);
  padding: 10px;
  margin-bottom: 12px;
}
.risk-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
  color: var(--c-muted);
}
.pct-slider {
  width: 100%;
  margin-bottom: 12px;
  accent-color: var(--c-acc);
  height: 4px;
}
.order-type-row { display: flex; gap: 8px; margin-bottom: 12px; }
.order-type-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border2);
  background: transparent;
  color: var(--c-text2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.order-type-btn.active { background: rgba(0,217,255,.12); border-color: var(--c-acc); color: var(--c-acc); }
.confirm-buy {
  width: 100%;
  height: 50px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(0,230,118,.2), rgba(0,217,255,.15));
  border: 1.5px solid var(--c-gain);
  color: var(--c-gain);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s;
}
.confirm-buy:hover { background: rgba(0,230,118,.3); box-shadow: 0 0 20px rgba(0,230,118,.25); }
.confirm-sell {
  width: 100%;
  height: 50px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,23,68,.2), rgba(255,112,67,.1));
  border: 1.5px solid var(--c-loss);
  color: var(--c-loss);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s;
}
.confirm-sell:hover { background: rgba(255,23,68,.3); box-shadow: 0 0 20px rgba(255,23,68,.25); }
.confirm-limit {
  width: 100%;
  height: 46px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(0,217,255,.15), rgba(108,59,255,.15));
  border: 1.5px solid var(--c-acc);
  color: var(--c-acc);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
/* Sell panel */
.holding-info-box { background: var(--c-surf2); border-radius: var(--r-sm); padding: 12px; margin-bottom: 12px; }
.hi-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--c-muted); }
.pnl-preview-box { background: var(--c-surf2); border-radius: var(--r-sm); padding: 14px; text-align: center; margin-bottom: 12px; }
.pnl-preview-lbl { font-size: 11px; color: var(--c-muted); }
.pnl-preview-val { font-family: 'Clash Display', sans-serif; font-size: 26px; font-weight: 700; }
.pnl-preview-val.pos { color: var(--c-gain); }
.pnl-preview-val.neg { color: var(--c-loss); }
.tax-info { font-size: 11px; color: var(--c-muted); background: rgba(255,214,0,.05); border: 1px solid rgba(255,214,0,.12); border-radius: var(--r-sm); padding: 8px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 6px; }
/* Limit orders list */
.lo-item { display: flex; align-items: center; gap: 8px; background: var(--c-surf2); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 5px; font-size: 12px; }
.lo-type-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.lo-type-badge.buy  { background: rgba(0,230,118,.15); color: var(--c-gain); }
.lo-type-badge.sell { background: rgba(255,23,68,.15); color: var(--c-loss); }
.lo-detail { flex: 1; font-family: 'JetBrains Mono', monospace; color: var(--c-text2); }
.lo-cancel { color: var(--c-loss); font-size: 14px; cursor: pointer; background: none; border: none; padding: 4px; }
/* Info Grid */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.info-cell { background: var(--c-surf2); border-radius: var(--r-sm); padding: 9px 10px; }
.ic-key { font-size: 10px; color: var(--c-muted); letter-spacing: .04em; }
.ic-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--c-text); margin-top: 2px; }
.ic-val.pos { color: var(--c-gain); }
.ic-val.neg { color: var(--c-loss); }
.ic-val.warn{ color: var(--c-yellow); }

/* ── 23. CENTER MODALS ──────────────────────────────────── */
.center-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(160deg, var(--c-surf) 0%, var(--c-bg2) 100%);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-xl);
  padding: 24px;
  animation: fadeUp .35s var(--ease-spring);
}
.center-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-surf2);
  color: var(--c-text2);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}
.center-modal-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Profile */
.profile-avatar-wrap { text-align: center; margin-bottom: 12px; }
.profile-avatar-big {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-acc), var(--c-acc2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-bg);
}
.profile-name-big { font-family: 'Clash Display', sans-serif; font-size: 20px; font-weight: 700; color: var(--c-text); text-align: center; }
.profile-email { font-size: 13px; color: var(--c-muted); text-align: center; margin-top: 3px; margin-bottom: 14px; }
.profile-stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.ps-item { background: var(--c-surf2); border-radius: var(--r-sm); padding: 10px; text-align: center; }
.ps-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--c-text); }
.ps-lbl { font-size: 10px; color: var(--c-muted); margin-top: 2px; }
.sync-status-row { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--c-muted); margin-bottom: 14px; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-loss); }
.sync-dot.synced  { background: var(--c-gain); }
.sync-dot.syncing { background: var(--c-yellow); animation: dotBlink .8s ease infinite; }
.signout-btn {
  width: 100%;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(255,23,68,.3);
  background: rgba(255,23,68,.08);
  color: var(--c-loss);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.signout-btn:hover { background: rgba(255,23,68,.2); }
.close-link-btn {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  color: var(--c-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Leaderboard */
.lb-tabs-row { display: flex; border-bottom: 1px solid var(--c-border); margin-bottom: 14px; }
.lb-tab { flex: 1; padding: 10px; font-size: 13px; font-weight: 600; color: var(--c-muted); cursor: pointer; text-align: center; border-bottom: 2px solid transparent; transition: all .15s; background: none; border-top: none; border-left: none; border-right: none; }
.lb-tab.active { color: var(--c-acc); border-bottom-color: var(--c-acc); }
.lb-list { display: flex; flex-direction: column; gap: 7px; max-height: 50vh; overflow-y: auto; }
.lb-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-sm); background: var(--c-surf2); border: 1px solid transparent; }
.lb-item.me { border-color: var(--c-acc); background: rgba(0,217,255,.06); }
.lb-rank { width: 28px; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; text-align: center; flex-shrink: 0; }
.lb-rank.gold   { font-size: 20px; }
.lb-rank.silver { font-size: 18px; }
.lb-rank.bronze { font-size: 16px; }
.lb-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--c-acc), var(--c-acc2)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--c-bg); flex-shrink: 0; }
.lb-info { flex: 1; }
.lb-name { font-size: 13px; font-weight: 600; color: var(--c-text); }
.lb-nw { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--c-text2); }
.lb-ret { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; }
.lb-ret.pos { color: var(--c-gain); }
.lb-ret.neg { color: var(--c-loss); }

/* Settings */
.settings-body { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.settings-section { margin-bottom: 18px; }
.settings-section-title { font-size: 10px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 14px; color: var(--c-text2); }
.settings-row:last-child { border-bottom: none; }
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.toggle input { display: none; }
.toggle-knob {
  position: absolute;
  inset: 0;
  background: var(--c-surf2);
  border: 1.5px solid var(--c-border2);
  border-radius: var(--r-full);
  transition: all .22s;
}
.toggle-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-muted); transition: all .22s; }
.toggle input:checked + .toggle-knob { background: rgba(0,217,255,.25); border-color: var(--c-acc); }
.toggle input:checked + .toggle-knob::after { transform: translateX(20px); background: var(--c-acc); }
.capital-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.capital-btn { padding: 8px 4px; border-radius: var(--r-sm); border: 1.5px solid var(--c-border2); background: var(--c-surf); color: var(--c-text2); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; }
.capital-btn.active { border-color: var(--c-acc); color: var(--c-acc); background: rgba(0,217,255,.1); }
.danger-btn { width: 100%; height: 42px; border-radius: var(--r-sm); border: 1.5px solid rgba(255,23,68,.3); background: rgba(255,23,68,.08); color: var(--c-loss); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.danger-btn:hover { background: rgba(255,23,68,.2); }

/* Confirm */
.confirm-box { text-align: center; }
.confirm-icon { font-size: 44px; margin-bottom: 12px; }
.confirm-title { font-family: 'Clash Display', sans-serif; font-size: 20px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.confirm-desc { font-size: 13px; color: var(--c-text2); line-height: 1.5; margin-bottom: 20px; }
.confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-cancel { height: 44px; border-radius: var(--r-sm); border: 1.5px solid var(--c-border2); background: transparent; color: var(--c-text2); font-size: 14px; font-weight: 600; cursor: pointer; }
.confirm-ok { height: 44px; border-radius: var(--r-sm); border: 1.5px solid rgba(255,23,68,.5); background: rgba(255,23,68,.15); color: var(--c-loss); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; }
.confirm-ok:hover { background: rgba(255,23,68,.3); }

/* Alert Modal */
.alert-item { display: flex; align-items: center; gap: 8px; background: var(--c-surf2); border-radius: var(--r-sm); padding: 9px 10px; margin-bottom: 5px; font-size: 12px; }
.alert-sym { font-family: 'Clash Display', sans-serif; font-weight: 700; color: var(--c-text); }
.alert-dir-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.alert-dir-badge.above { background: rgba(0,230,118,.15); color: var(--c-gain); }
.alert-dir-badge.below { background: rgba(255,23,68,.15); color: var(--c-loss); }
.alert-target { font-family: 'JetBrains Mono', monospace; color: var(--c-text2); flex: 1; }
.alert-del { color: var(--c-muted); font-size: 14px; cursor: pointer; background: none; border: none; padding: 4px; }

/* ── 24. ACHIEVEMENT POPUP ──────────────────────────────── */
#achievementPopup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2100;
  background: linear-gradient(160deg, var(--c-surf), var(--c-bg2));
  border: 1px solid var(--c-border2);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 48px rgba(0,217,255,.12);
  min-width: 260px;
}
#achievementPopup.show { animation: achievePop .55s var(--ease-spring) forwards; }
.ach-emoji { font-size: 60px; display: block; margin-bottom: 14px; }
.ach-title { font-family: 'Clash Display', sans-serif; font-size: 20px; font-weight: 700; color: var(--c-text); margin-bottom: 5px; }
.ach-name { font-size: 14px; color: var(--c-acc); font-weight: 600; margin-bottom: 6px; }
.ach-desc { font-size: 12px; color: var(--c-text2); line-height: 1.5; }
.ach-xp { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: var(--c-yellow); background: rgba(255,214,0,.1); padding: 6px 14px; border-radius: var(--r-full); margin-top: 12px; }

/* ── 25. TOAST ──────────────────────────────────────────── */
#toastContainer {
  position: fixed;
  top: calc(var(--top-offset) + 10px);
  right: 12px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 300px;
}
.toast {
  background: var(--c-surf2);
  border: 1px solid var(--c-border2);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--c-text);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  animation: toastIn .3s ease forwards;
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: all;
  cursor: pointer;
}
.toast.out { animation: toastOut .3s ease forwards; }
.toast i { font-size: 16px; flex-shrink: 0; }
.toast.success i { color: var(--c-gain); }
.toast.error   i { color: var(--c-loss); }
.toast.info    i { color: var(--c-acc); }
.toast.warn    i { color: var(--c-orange); }

/* XP Float */
#xpFloatContainer { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.xp-float {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-yellow);
  text-shadow: 0 0 12px rgba(255,214,0,.5);
  animation: xpFloat 1.6s ease forwards;
  pointer-events: none;
}

/* ── 26. UTILITY ────────────────────────────────────────── */
.empty-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; color: var(--c-muted); font-size: 13px; }
.empty-msg i { font-size: 26px; opacity: .4; }
.hidden { display: none !important; }
.sep-line { height: 1px; background: var(--c-border); margin: 12px 0; }
.skeletion {
  background: linear-gradient(90deg, var(--c-surf) 25%, var(--c-surf2) 50%, var(--c-surf) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}

/* ── 27. RESPONSIVE ─────────────────────────────────────── */
@media (min-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(4,1fr); }
  .heatmap-grid { grid-template-columns: repeat(4,1fr); }
  .stock-grid { grid-template-columns: repeat(3,1fr); }
  .port-kpi-row { grid-template-columns: repeat(6,1fr); }
  .learn-cards-grid { grid-template-columns: repeat(3,1fr); }
  .analytics-grid { grid-template-columns: repeat(3,1fr); }
}

@media (min-width: 768px) {
  :root { --topbar-h: 60px; --ticker-h: 34px; --nav-h: 68px; }
  #mainContent { padding: 0 24px; }
  .tab-panel { padding: 20px 0; }
  .kpi-grid { grid-template-columns: repeat(4,1fr); }
  .stock-grid { grid-template-columns: repeat(3,1fr); }
  .port-kpi-row { grid-template-columns: repeat(6,1fr); }
  .learn-cards-grid { grid-template-columns: repeat(3,1fr); }
}

@media (min-width: 1024px) {
  #mainContent { max-width: 960px; margin: 0 auto; }
  .stock-grid { grid-template-columns: repeat(4,1fr); }
  .learn-cards-grid { grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 1280px) {
  .stock-grid { grid-template-columns: repeat(5,1fr); }
}

@media (max-width: 360px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .dash-row-2 { grid-template-columns: 1fr; }
  .heatmap-grid { grid-template-columns: repeat(3,1fr); }
  .stock-grid { grid-template-columns: 1fr 1fr; }
  .port-kpi-row { grid-template-columns: 1fr 1fr 1fr; }
  .nw-value { font-size: 26px; }
}

/* ── 28. PRINT ──────────────────────────────────────────── */
@media print {
  #tickerWrap, #topbar, #bottomNav, #drawer, #drawerOverlay,
  #tradeModal, #modalOverlay, #toastContainer, #achievementPopup,
  .bg-mesh { display: none !important; }
  #mainContent { top: 0; }
  body { background: #fff; color: #000; }
}

/* ── 29. PWA / SAFE AREA ────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #bottomNav { padding-bottom: max(env(safe-area-inset-bottom), 8px); }
}