/* ═══════════════════════════════
   DESIGN TOKENS — Deep Flat (v2)
   Deep cool-black base. Cards sit just above it, separated by hairline
   borders — no floating glass. Green/red reserved for DATA only.
═══════════════════════════════ */
:root {
  /* Surface stack — solid, cool near-black. Each step lifts ~one shade. */
  --bg:          #0a0b0e;
  --bg1:         #0c0d11;
  --bg2:         #101218;
  --bg3:         #16181f;
  --surface:     #101218;      /* card fill — barely above --bg */
  --surface-h:   #171a21;      /* hover / raised */
  --surface-2:   #0d0e12;      /* recessed wells (inputs, inset stats) */
  --border:      rgba(255,255,255,0.06);   /* hairline separators */
  --border-2:    rgba(255,255,255,0.12);   /* emphasised edge */
  --border-glow: rgba(255,255,255,0.10);

  /* Accents — GREEN=up, RED=down, used only on numbers/charts/actions.
     Nav & chrome stay neutral (see --nav-* below). */
  --accent:      #23e08a;      /* gain / positive / primary CTA */
  --accent-2:    #57eeaa;
  --accent-dim:  rgba(35,224,138,0.10);
  --accent-glow: rgba(35,224,138,0.20);
  --up:          #23e08a;
  --down:        #f6465d;
  --cyan:        #4a9fff;       /* calm blue — neutral highlights */
  --cyan-dim:    rgba(74,159,255,0.10);
  --violet:      #9d7bff;
  --violet-dim:  rgba(157,123,255,0.10);
  --gold:        #f2b73d;
  --gold-2:      #ffd27a;
  --gold-dim:    rgba(242,183,61,0.12);
  --loss:        #f6465d;
  --loss-2:      #ff6b82;
  --loss-dim:    rgba(246,70,93,0.10);

  /* Neutral chrome accent — active nav, focus rings (not green) */
  --nav-active-bg: rgba(255,255,255,0.06);
  --nav-active-fg: #ffffff;

  /* Text */
  --t1: #f3f4f6;
  --t2: rgba(255,255,255,0.58);
  --t3: rgba(255,255,255,0.34);
  --t4: rgba(255,255,255,0.10);

  /* Effects — quiet. One soft shadow gives lift; no neon glow. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.30);
  --shadow-lg: 0 10px 34px rgba(0,0,0,0.45);
  --shadow-glow: none;
  --blur-sm: blur(10px);
  --blur-md: blur(22px);
  --blur-lg: blur(40px);

  /* Gradients — mostly flat; kept as tokens for currency/data flourishes */
  --grad-hero: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%);
  --grad-glass: var(--surface);
  --grad-accent: linear-gradient(135deg, #23e08a 0%, #12b46c 100%);
  --grad-cyan:  linear-gradient(135deg, #4a9fff 0%, #2b74d0 100%);
  --grad-gold:  linear-gradient(135deg, #ffd27a 0%, #f2b73d 50%, #dc9528 100%);
  --grad-loss:  linear-gradient(135deg, #f6465d 0%, #c41e3a 100%);

  /* Layout — tighter radii for a denser, modern grid */
  --sidebar-w: 224px;
  --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.42); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; }

html, body {
  height:100%; color:var(--t1);
  font-family:'Inter',-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
  overflow:hidden;
  background: var(--bg);
  background-attachment: fixed;
}
/* Ambient glows removed — deep flat base. Pseudo-els kept empty so any
   legacy selectors relying on them don't break layout. */
body::before { content:none; }
body::after  { content:none; }
.app, .topbar, .screen, #auth-screen { position:relative; z-index:1; }

/* ═══════════════════════════════
   APP SHELL
═══════════════════════════════ */
.app { display:flex; height:100vh; width:100vw; }

/* ═══════════════════════════════
   SIDEBAR — Glass Cockpit
═══════════════════════════════ */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background: var(--bg1);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; height:100vh;
  position:fixed; top:0; left:0; z-index:100;
  transition: transform 0.32s var(--ease-out);
  box-shadow:none;
}
.sidebar.collapsed {
  transform: translateX(calc(-1 * var(--sidebar-w)));
}
.sidebar::before { content:none; }
.sidebar::after { content:none; }
.logo-wrap {
  height:46px; padding:0 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; cursor:pointer; user-select:none; z-index:1;
  transition: background 0.2s;
}
.logo-wrap:hover { background: transparent; }
.logo-inner { display:flex; align-items:center; gap:10px; }
/* Topbar logo toggle — slides in from left when sidebar is collapsed */
.topbar-logo-btn {
  display:flex; align-items:center;
  overflow:hidden; width:0; opacity:0; pointer-events:none; flex-shrink:0;
  transition:width 0.32s var(--ease-out), opacity 0.2s var(--ease-out);
}
.main-content.expanded .topbar-logo-btn { width:54px; opacity:1; pointer-events:all; }
.topbar-logo-toggle {
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; padding:0 16px 0 0;
  position:relative; flex-shrink:0;
}
.topbar-logo-toggle::after {
  content:''; position:absolute; right:0; top:50%;
  transform:translateY(-50%); width:1px; height:26px;
  background:rgba(255,255,255,0.18);
}
.topbar-logo-toggle img {
  width:26px; height:26px; object-fit:contain;
  filter:brightness(0) invert(1);
  transition: filter 0.22s var(--ease-out);
}
.topbar-logo-toggle:hover img {
  filter: brightness(0) invert(1)
    drop-shadow(1px 0 0 #000)
    drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000)
    drop-shadow(0 -1px 0 #000);
}
.logo-mark {
  width:32px; height:32px; border-radius:9px;
  background:var(--grad-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:#000; flex-shrink:0;
  box-shadow: 0 0 0 1px rgba(0,255,140,0.3), 0 6px 20px rgba(0,255,140,0.35);
}
.sidebar-logo-img {
  width: 26px; height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  transition: filter 0.22s var(--ease-out);
}
.logo-wrap:hover .sidebar-logo-img {
  filter: brightness(0) invert(1)
    drop-shadow(1px 0 0 #000)
    drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000)
    drop-shadow(0 -1px 0 #000);
}
.logo-text {
  font-size:26px; font-weight:900; letter-spacing:0.08em;
  color: #fff;
}
.logo-wrap:hover .logo-text {
  -webkit-text-stroke: 1px var(--accent);
}

.nav-section { padding:12px 12px; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:2px; position:relative; }
.nav-section::-webkit-scrollbar { display:none; }
.nav-item {
  display:flex; align-items:center; gap:13px;
  padding:9px 13px; border-radius:var(--r-md);
  cursor:pointer; transition:all 0.22s var(--ease-out);
  color:rgba(255,255,255,0.38); font-size:13.5px; font-weight:600;
  border:1px solid transparent; background:none; font-family:'Inter',sans-serif;
  width:100%; text-align:left; position:relative; overflow:hidden;
  letter-spacing:0.01em;
}
.nav-item::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:0 3px 3px 0;
  background:var(--t1);
  transition:height 0.28s var(--ease-spring);
}
.nav-item:hover {
  background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.82);
}
.nav-item.logout { color:rgba(255,255,255,0.28); }
.nav-item.logout:hover { background:rgba(246,70,93,0.08); color:var(--loss-2); }
.nav-item.logout:hover::before { background:var(--loss); }
.nav-item.active {
  background: var(--nav-active-bg);
  color:var(--nav-active-fg);
  border-color: transparent;
  box-shadow:none;
}
.nav-item.active::before { height:60%; }
.nav-icon { font-size:16px; flex-shrink:0; width:20px; text-align:center; display:flex; align-items:center; justify-content:center; }
.nav-item.active .nav-icon { filter:none; }

/* ── Nav Customize ── */
.nav-customize-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:calc(100% - 24px); margin:4px 12px 10px;
  padding:8px 12px; border-radius:var(--r-md);
  background:none; border:1px dashed rgba(255,255,255,0.12);
  color:var(--t3); font-size:11px; font-weight:700; letter-spacing:0.04em;
  cursor:pointer; transition:all 0.2s; font-family:'Inter',sans-serif;
  text-transform:uppercase;
}
.nav-customize-btn:hover { border-color:rgba(0,255,140,0.35); color:var(--accent); }
.nav-customize-btn.active { border-color:rgba(0,255,140,0.45); color:var(--accent); background:var(--accent-dim); }

.sidebar.customize-mode .nav-item:not(.logout) {
  cursor:grab; padding-left:3px;
}
.sidebar.customize-mode .nav-item:not(.logout):active { cursor:grabbing; }
.nav-drag-handle {
  display:none; flex-shrink:0;
  color:var(--t3); opacity:0.5; transition:opacity 0.15s;
}
.sidebar.customize-mode .nav-item:not(.logout) .nav-drag-handle { display:flex; }
.sidebar.customize-mode .nav-item:not(.logout):hover .nav-drag-handle { opacity:1; color:var(--accent); }
.sidebar.customize-mode .nav-group-header .nav-drag-handle { display:flex; }
.sidebar.customize-mode .nav-group-header:hover .nav-drag-handle { opacity:1; color:var(--accent); }

.nav-item.nav-dragging { opacity:0.35; }
.nav-item.nav-drag-over {
  border-color:rgba(0,255,140,0.45) !important;
  background:rgba(0,255,140,0.07) !important;
}
.sidebar.customize-mode .nav-group { cursor:grab; border-radius:var(--r-md); }
.sidebar.customize-mode .nav-group:active { cursor:grabbing; }
.sidebar.customize-mode .nav-group-header { padding-left:3px; }
.nav-group.nav-dragging { opacity:0.35; }
.nav-group.nav-drag-over { outline:1px solid rgba(0,255,140,0.45); background:rgba(0,255,140,0.05); border-radius:var(--r-md); }

/* ── Nav Groups (accordion) ── */
.nav-group { position:relative; }
.nav-group-header {
  display:flex; align-items:center; gap:13px;
  padding:9px 13px; border-radius:var(--r-md);
  cursor:pointer; transition:all 0.22s var(--ease-out);
  color:rgba(255,255,255,0.38); font-size:13.5px; font-weight:600;
  border:1px solid transparent; background:none; font-family:'Inter',sans-serif;
  width:100%; text-align:left; position:relative; overflow:hidden; letter-spacing:0.01em;
}
.nav-group-header::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:0 3px 3px 0;
  background:var(--t1);
  transition:height 0.28s var(--ease-spring);
}
.nav-group-header:hover { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.82); }
.nav-group-header.active {
  background: var(--nav-active-bg);
  color:var(--nav-active-fg); border-color:transparent; box-shadow:none;
}
.nav-group-header.active::before { height:60%; }
.nav-group-header.active .nav-icon { filter:none; }
.nav-group-header.has-active { color:rgba(255,255,255,0.62); }
.nav-group-header.has-active::before { height:30%; background:rgba(255,255,255,0.35); }
.nav-chevron {
  margin-left:auto; flex-shrink:0; display:flex; align-items:center;
  padding:3px 4px; border-radius:4px;
  transition:transform 0.25s var(--ease-out), color 0.2s;
  color:rgba(255,255,255,0.22);
}
.nav-chevron:hover { color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.06); }
.nav-group.open .nav-chevron { transform:rotate(90deg); color:rgba(255,255,255,0.7); }
.nav-group-children {
  max-height:0; overflow:hidden;
  transition:max-height 0.32s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nav-group.open .nav-group-children { max-height:200px; }
.nav-sub-item { padding-left:38px !important; padding-top:6px !important; padding-bottom:6px !important; font-size:12.5px !important; color:rgba(255,255,255,0.3) !important; }
.nav-sub-item:hover { color:rgba(255,255,255,0.75) !important; }
.nav-sub-item.active {
  color:var(--nav-active-fg) !important;
  background: var(--nav-active-bg) !important;
  border-color:transparent !important;
}
.nav-sub-item.active::before { height:50% !important; }

.sidebar-bottom { padding:14px; border-top:1px solid var(--border); }
.player-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, background 0.2s;
}
.player-card:hover { border-color:var(--border-2); background:var(--surface-h); }
.player-card::before { content:none; }
.player-card-top { display:flex; align-items:center; gap:10px; margin-bottom:11px; position:relative; }
.rank-badge {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border-2); overflow:hidden; flex-shrink:0;
  box-shadow:none;
}
.rank-badge img { width:100%; height:100%; object-fit:cover; }
.player-name-wrap { flex:1; min-width:0; }
.player-name-txt { font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; }
.player-meta-row { display:flex; align-items:center; gap:5px; margin-top:4px; flex-wrap:wrap; }
.player-clan-chip {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-weight:700; letter-spacing:0.02em;
  background:rgba(0,255,140,0.08); border:1px solid rgba(0,255,140,0.22);
  border-radius:4px; padding:2px 6px; color:var(--accent);
  max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.player-rank-txt { font-size:11px; color:var(--t3); font-weight:600; margin-top:2px; letter-spacing:0.02em; }
.player-title-badge { display:inline-flex; align-items:center; gap:3px; background:rgba(180,180,180,0.1); border:1px solid rgba(180,180,180,0.22); border-radius:6px; padding:1px 7px; margin-top:3px; cursor:default; }
.player-title-badge-text { font-size:9px; font-weight:800; color:rgba(200,200,200,0.8); letter-spacing:.06em; text-transform:uppercase; }
.profile-rank-chip {
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:700; letter-spacing:0.02em;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:4px; padding:2px 6px; color:var(--t3);
  white-space:nowrap;
}
.xp-mini-track {
  height:5px; background:rgba(255,255,255,0.06); border-radius:4px;
  overflow:hidden; margin-top:6px; position:relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) inset;
}
.xp-mini-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px var(--accent-glow);
  transition:width 0.7s var(--ease-out); position:relative;
}
.xp-mini-fill::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: xp-shine 2.6s linear infinite;
}
@keyframes xp-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.xp-mini-label { font-size:10px; color:var(--t3); margin-top:5px; font-weight:600; letter-spacing:0.02em; }

/* ═══════════════════════════════
   MAIN CONTENT
═══════════════════════════════ */
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; margin-left:var(--sidebar-w); transition:margin-left 0.32s var(--ease-out); }
.main-content.expanded { margin-left:0; }

/* ═══════════════════════════════
   TOP BAR — Floating Glass
═══════════════════════════════ */
.topbar {
  height:46px; flex-shrink:0;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 28px;
  justify-content:space-between;
  background:linear-gradient(180deg, rgba(11,15,23,0.78) 0%, rgba(7,9,14,0.62) 100%);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  position:relative; z-index:200;
}
.topbar::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,140,0.25) 30%, rgba(46,230,255,0.18) 70%, transparent);
}
.topbar-title-wrap {
  display:flex; align-items:center; gap:8px; flex:1;
}
.topbar-title {
  font-size:14px; font-weight:900; letter-spacing:-0.01em;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.78) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; justify-content:flex-end; }
/* Hide market badge in topbar on narrow screens — it's already in the center */
@media (max-width: 900px) { .topbar-right .market-badge { display:none; } }
@media (max-width: 600px) { .topbar-right .dr-gift-btn { display:none; } }
.balance-chip {
  display:flex; align-items:center; gap:9px;
  background: var(--grad-glass);
  border:1px solid var(--border-2);
  border-radius:40px; padding:4px 11px 4px 7px; cursor:default;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm), 0 1px 0 rgba(255,255,255,0.06) inset;
  transition: all 0.3s var(--ease-out);
  flex-shrink: 0;
}
.balance-chip::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s var(--ease-out);
}
.balance-chip:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.balance-chip:hover::before { transform: translateX(100%); }
.balance-icon { width:17px; height:17px; filter: drop-shadow(0 0 6px rgba(0,255,140,0.35)); }
.balance-chip:nth-child(3) .balance-icon { filter: drop-shadow(0 0 6px rgba(255,181,71,0.45)); }
.balance-amt {
  font-family:monospace;
  font-size:12px; font-weight:700; letter-spacing:-0.01em;
  font-variant-numeric: tabular-nums;
  display:inline-flex; align-items:center; line-height:1;
  white-space: nowrap;
}
/* Odometer digit roller */
.od-digit {
  display:inline-block;
  overflow:hidden;
  height:1.15em;
  vertical-align:middle;
}
.od-reel {
  display:flex;
  flex-direction:column;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.od-num {
  display:block;
  height:1.15em;
  line-height:1.15em;
  text-align:center;
}
.od-sep {
  display:inline-block;
  vertical-align:middle;
  line-height:1.15em;
}
/* Market status badge */
.market-badge {
  display:flex; align-items:center; gap:8px;
  border-radius:40px; padding:4px 11px;
  border:1px solid transparent;
  font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  cursor:default; user-select:none;
  transition:all 0.3s var(--ease-out);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}
.market-badge.open {
  background: rgba(0,255,140,0.10);
  border-color: rgba(0,255,140,0.32);
  color: var(--accent);
  box-shadow: 0 0 20px rgba(0,255,140,0.12);
}
.market-badge.closed {
  background: rgba(255,59,92,0.10);
  border-color: rgba(255,59,92,0.32);
  color: var(--loss-2);
}
.market-badge-dot {
  width:7px; height:7px; border-radius:50%;
  background:currentColor;
}
.market-badge.open .market-badge-dot {
  animation: market-pulse 1.6s ease-in-out infinite;
}
@keyframes market-pulse {
  0%   { box-shadow:0 0 0 0 rgba(0,255,140,0.7); }
  70%  { box-shadow:0 0 0 8px rgba(0,255,140,0); }
  100% { box-shadow:0 0 0 0 rgba(0,255,140,0); }
}
.market-badge-sub { font-size:9px; font-weight:700; opacity:0.75; }

/* Mobile-only market clock strip — hidden on desktop, shown via mobile.css */
.mob-market-clock { display: none; }

/* ── Market Clock (topbar center) ── */
.market-clock {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:1px;
  pointer-events:none; user-select:none;
}
.market-clock-time {
  font-family: 'SF Mono', 'Fira Mono', 'Consolas', monospace;
  font-size:13px; font-weight:700; letter-spacing:0.04em;
  font-variant-numeric: tabular-nums;
  color:var(--t1);
  line-height:1;
}
.market-clock-meta {
  display:flex; align-items:center; gap:6px;
}
.market-clock-label {
  font-size:9px; font-weight:800; letter-spacing:0.08em;
  color:var(--t3); text-transform:uppercase;
}
.market-clock-session {
  font-size:9px; font-weight:800; letter-spacing:0.06em;
  padding:1px 7px; border-radius:99px; text-transform:uppercase;
}
.market-clock-session.regular {
  background:rgba(0,255,140,0.12); color:var(--accent);
  border:1px solid rgba(0,255,140,0.28);
}
.market-clock-session.pre {
  background:rgba(46,230,255,0.10); color:var(--cyan);
  border:1px solid rgba(46,230,255,0.28);
}
.market-clock-session.after {
  background:rgba(157,123,255,0.12); color:var(--violet);
  border:1px solid rgba(157,123,255,0.28);
}
.market-clock-session.closed {
  background:rgba(255,255,255,0.06); color:var(--t3);
  border:1px solid rgba(255,255,255,0.10);
}

/* Market-closed banner */
.market-closed-banner {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(255,59,92,0.08);
  border:1px solid rgba(255,59,92,0.24);
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:12px; color:var(--loss-2);
  line-height:1.5;
}
.market-closed-banner .mcb-icon { font-size:14px; line-height:1; margin-top:1px; }
.market-closed-banner .mcb-title { font-weight:800; color:var(--loss-2); margin-bottom:2px; }
.simulated-tag {
  display:inline-block; margin-left:8px; padding:2px 8px;
  font-size:10px; font-weight:800; letter-spacing:0.06em;
  border-radius:999px;
  background:rgba(255,59,92,0.14); color:var(--loss-2);
  border:1px solid rgba(255,59,92,0.28);
  vertical-align:middle;
}

.save-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--accent-dim); border:1px solid rgba(0,255,140,0.22);
  border-radius:var(--r-sm); padding:8px 16px;
  color:var(--accent); font-size:12px; font-weight:800;
  cursor:pointer; transition:all 0.2s var(--ease-out); font-family:'Inter',sans-serif;
  letter-spacing:0.04em;
}
.save-btn:hover { background:rgba(0,255,140,0.18); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,255,140,0.2); }

/* ── DEV PANEL ── */
.dev-panel {
  position:fixed; bottom:18px; right:18px; z-index:9999;
  display:flex; flex-direction:column; gap:6px;
}
.dev-label {
  font-size:9px; font-weight:800; letter-spacing:0.12em;
  color:rgba(255,255,255,0.25); text-align:center;
  text-transform:uppercase; margin-bottom:2px;
}
.dev-btn {
  display:flex; align-items:center; gap:7px;
  background:rgba(18,22,28,0.88); border:1px solid rgba(255,255,255,0.10);
  border-radius:8px; padding:7px 12px;
  color:rgba(255,255,255,0.55); font-size:11px; font-weight:700;
  cursor:pointer; transition:all 0.15s; font-family:'Inter',sans-serif;
  backdrop-filter:blur(8px);
}
.dev-btn:hover { color:#fff; border-color:rgba(255,255,255,0.25); background:rgba(30,36,46,0.95); }
.dev-btn.danger:hover { color:#F23645; border-color:rgba(242,54,69,0.4); }
.dev-btn.success:hover { color:var(--accent); border-color:rgba(0,255,128,0.4); }

/* ═══════════════════════════════
   SCREENS
═══════════════════════════════ */
.screen { display:none; flex:1; overflow-y:auto; overflow-x:hidden; }
.screen.active { display:block; }
.screen-inner { padding:24px; }

/* ══ HOME BENTO GRID ══════════════════════════════════════ */
.home-bento-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:stretch;
  padding:16px 18px 36px;
}
.home-bento-full { grid-column:1 / -1; }

/* Flat cards — separate by border, lift by one shade on hover. No glow. */
.home-bento-grid .card { transition:border-color .2s, background .2s; }
.home-bento-grid .card:hover {
  border-color:var(--border-2);
  background:var(--surface-h);
  box-shadow:none;
}

/* ── Split card — two related widgets sharing ONE box, divided by a
   hairline instead of two separate bordered cards. Used to connect
   sibling widgets (HUD+Coach, Holdings+Market, Movers+Trades) so the
   home screen reads as fewer, calmer sections instead of many windows. ── */
.card.home-split-row { display:flex; align-items:stretch; padding:0; }
.home-split-col { flex:1; min-width:0; padding:16px 18px; }
.home-split-divider { width:1px; align-self:stretch; background:var(--border); flex-shrink:0; }

/* ── Status Strip — Level / Mission / Season / Coach compacted into one
   four-column box. Each column is a small, scannable stat, not a widget. ── */
.home-status-strip { align-items:stretch; }
.home-status-col { display:flex; flex-direction:column; justify-content:center; }
.home-status-label {
  font-size:10px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.10em; margin-bottom:9px;
}
.home-status-clickable { cursor:pointer; transition:background 0.2s; }
.home-status-clickable:hover { background:var(--surface-h); }

.hsc-badge { width:30px; height:30px; flex-shrink:0; }
/* rankSVG() injects a raw <svg width="Npx" height="Npx"> — force it to fill
   the container regardless of the pixel size passed in JS, or a mismatch
   between the two (like the badge staying hardcoded at 56 after this
   container shrank to 30) makes the crest spill outside its box and
   overlap the rank name next to it. */
.hsc-badge svg { display:block; width:100%; height:100%; }
.home-status-season-row { display:flex; align-items:center; gap:12px; }
.hsc-rank { flex:1; min-width:0; }
.hsc-rank-name { font-size:14px; font-weight:900; letter-spacing:-0.01em; margin-bottom:6px; }
.hsc-rp-row { display:flex; align-items:center; gap:8px; }
.hsc-rp-track { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
.hsc-rp-fill {
  height:100%; border-radius:3px;
  background:var(--grad-gold);
  transition:width .6s var(--ease-out);
}
.hsc-rp-count { font-family:monospace; font-size:11px; font-weight:800; color:var(--gold-2); font-variant-numeric:tabular-nums; white-space:nowrap; }

#screen-trade { overflow:hidden; }
#screen-trade.active { display:flex; flex-direction:column; }
#screen-stock-detail { overflow:hidden; position:relative; }
#screen-stock-detail.active { display:flex; flex-direction:column; }
#screen-coach { overflow:hidden; }
#screen-coach.active { display:flex; flex-direction:column; overflow:hidden; }
#screen-coach > .screen-inner { padding:0; flex:1; display:flex; overflow:hidden; min-height:0; }

/* ═══════════════════════════════
   CARDS — Flat panels
   Solid fill barely above the base, separated by a hairline border.
═══════════════════════════════ */
.card {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.card::before { content:none; }
.card:hover { border-color: var(--border-2); }
.card-title {
  font-size:11px; font-weight:800; color:var(--t3);
  letter-spacing:0.10em; text-transform:uppercase; margin-bottom:14px;
}

/* ═══════════════════════════════
   HOME SCREEN — Bento Grid
═══════════════════════════════ */
.home-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.home-grid-full { grid-column:1/-1; }

/* Portfolio hero card — quiet, deep, data-forward */
.portfolio-hero {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 22px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.portfolio-hero::before { content:none; }
.portfolio-hero::after { display:none; }
.portfolio-hero .ph-label {
  font-size:11px; color:var(--t3); text-transform:uppercase;
  letter-spacing:0.12em; font-weight:800;
  display:inline-flex; align-items:center; gap:8px;
}
.portfolio-hero .ph-label::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
  animation: live-dot 1.6s ease-in-out infinite;
}
@keyframes live-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.5; transform:scale(0.85); }
}
.portfolio-hero .ph-value {
  font-family:monospace;
  font-size:44px; font-weight:800; letter-spacing:-0.045em;
  margin:6px 0 5px; line-height:1;
  font-variant-numeric: tabular-nums;
  display:flex; align-items:center;
  color: #fff;
}
/* Each digit/sep gets the gradient individually so background-clip works */
.portfolio-hero .ph-value .od-num,
.portfolio-hero .ph-value .od-sep {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.82) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portfolio-hero .ph-change {
  font-family:monospace;
  font-size:14px; font-weight:700; letter-spacing:-0.01em;
}
.ph-stats {
  display:flex; gap:8px; margin-top:14px;
  position:relative;
}
.ph-stats > div {
  flex:1; min-width:0;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm); padding:9px 13px;
}
.ph-stat-label {
  font-size:10px; color:var(--t3); font-weight:700;
  margin-bottom:6px; text-transform:uppercase; letter-spacing:0.10em;
  display:flex; align-items:center; gap:5px;
}
.ph-stat-label svg { color:var(--t3); flex-shrink:0; }
.ph-stat-val {
  font-family:monospace;
  font-size:17px; font-weight:800;
  font-variant-numeric: tabular-nums;
}

/* ── Hero, big-chart layout — plain inline stats under the chart,
   separated by hairlines instead of boxes ── */
.portfolio-hero.hero-chart { padding:24px 26px 8px; }
.hero-chart .ph-stats-row {
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
}
.ph-stat-inline { display:flex; align-items:baseline; gap:8px; }
.ph-stat-inline-label {
  font-size:11px; color:var(--t3); font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em;
}
.ph-stat-divider { width:1px; height:16px; background:var(--border); }

/* XP card */
.xp-block { position:relative; }
.xp-top { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px; }
.xp-lvl { font-size:20px; font-weight:900; letter-spacing:-0.01em; }
.xp-lvl span { font-size:12px; font-weight:600; color:var(--t3); display:block; margin-top:2px; letter-spacing:0.02em; }
.xp-count {
  font-family:monospace;
  font-size:13px; font-weight:800; color:var(--accent);
  padding:4px 10px; border-radius:20px;
  background:var(--accent-dim); border:1px solid rgba(0,255,140,0.2);
}
.xp-track {
  height:10px; background:rgba(255,255,255,0.05); border-radius:10px;
  overflow:visible; position:relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4) inset, 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.xp-fill {
  height:100%; border-radius:10px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px var(--accent-glow), 0 0 4px var(--accent);
  position:relative; transition:width 0.9s var(--ease-out);
  overflow:hidden;
}
.xp-fill::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: xp-shine 2.4s linear infinite;
}
.xp-fill::after {
  content:''; position:absolute; right:-2px; top:50%;
  transform:translate(50%,-50%);
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px var(--accent), 0 0 16px var(--accent-glow), 0 0 28px var(--accent-glow);
}
.xp-note { font-size:11px; color:var(--t3); margin-top:10px; font-weight:600; letter-spacing:0.02em; }

/* Mission card — interactive */
.mission-hero {
  background: var(--grad-glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px; cursor:pointer;
  transition: all 0.3s var(--ease-out);
  position:relative; overflow:hidden;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: var(--shadow-md);
}
.mission-hero::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:140px; height:140px;
  background:radial-gradient(circle, rgba(0,255,140,0.16), transparent 65%);
  transition: transform 0.5s var(--ease-out);
}
.mission-hero::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), rgba(0,255,140,0.08), transparent 50%);
  opacity:0; transition: opacity 0.3s;
}
.mission-hero:hover {
  border-color:rgba(0,255,140,0.30);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0,255,140,0.12);
}
.mission-hero:hover::before { transform: scale(1.4); }
.mission-hero:hover::after { opacity:1; }
.mission-icon {
  font-size:30px; margin-bottom:10px;
  display:inline-flex; width:48px; height:48px;
  align-items:center; justify-content:center;
  background: var(--accent-dim);
  border:1px solid rgba(0,255,140,0.20);
  border-radius:14px;
  box-shadow: 0 0 20px rgba(0,255,140,0.18) inset;
}
.mission-name { font-size:17px; font-weight:900; margin-bottom:4px; letter-spacing:-0.01em; }
.mission-desc { font-size:13px; color:var(--t2); margin-bottom:16px; line-height:1.5; }
.mission-bar {
  height:6px; background:rgba(255,255,255,0.05); border-radius:6px;
  overflow:hidden; margin-bottom:10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) inset;
}
.mission-bar-fill {
  height:100%; border-radius:6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px var(--accent-glow);
  transition:width 0.7s var(--ease-out);
}
.mission-row {
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--t3); font-weight:700; letter-spacing:0.04em;
  font-family:monospace;
}
.mission-xp {
  color:var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}

/* Recent trades */
.trade-list { display:flex; flex-direction:column; gap:8px; }
.trade-row {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 14px;
}
.trade-ticker { font-size:13px; font-weight:800; min-width:48px; }
.trade-type {
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:20px; flex-shrink:0;
}
.trade-type.buy { background:rgba(0,255,128,0.12); color:var(--accent); }
.trade-type.sell { background:var(--loss-dim); color:var(--loss); }
.trade-type.take-profit { background:rgba(0,255,140,0.18); color:#00ff8c; border:1px solid rgba(0,255,140,0.3); }
.trade-type.stop-loss { background:rgba(255,59,92,0.15); color:var(--loss-2); border:1px solid rgba(255,59,92,0.3); }
.trade-info { flex:1; font-size:12px; color:var(--t2); }
.trade-pnl { font-size:13px; font-weight:700; }

/* ═══════════════════════════════
   TRADE SCREEN
═══════════════════════════════ */
.trade-layout {
  display:grid; grid-template-columns:260px 1fr 280px;
  grid-template-rows:1fr;
  height:calc(100vh - 56px); overflow:hidden;
}

/* Stock list */
.stock-panel {
  border-left:1px solid var(--border); overflow:hidden;
  display:flex; flex-direction:column; background:var(--bg2);
}
.stock-panel-hdr { padding:14px 14px 10px; border-bottom:1px solid var(--border); }
.stock-panel-title { font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:8px; }
.stock-search {
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:8px 10px; color:var(--t1);
  font-size:12px; outline:none; transition:border-color 0.2s; font-family:'Inter',sans-serif;
}
.stock-search::placeholder { color:var(--t3); }
.stock-search:focus { border-color:var(--accent); }
.sector-filters { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
.sector-btn {
  font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px;
  border:1px solid var(--border); background:transparent; color:var(--t3);
  cursor:pointer; transition:all 0.15s; font-family:'Inter',sans-serif;
}
.sector-btn:hover { border-color:var(--accent); color:var(--t1); }
.sector-btn.active { background:var(--accent); border-color:var(--accent); color:#000; }
.stock-list { overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.06) transparent; }

.stock-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; cursor:pointer; transition:background 0.1s;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.stock-row:hover { background:var(--surface); }
.stock-row.selected { background:var(--accent-dim); border-left:2px solid var(--accent); }
.stock-left { display:flex; align-items:center; gap:9px; }
.stock-logo {
  width:30px; height:30px; border-radius:7px;
  background:linear-gradient(135deg,#1A1F2E,#252C3D); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0;
}
.stock-ticker { font-size:13px; font-weight:800; }
.stock-cname { font-size:10px; color:var(--t3); margin-top:1px; }
.stock-right { text-align:left; }
.stock-price { font-size:12px; font-weight:700; transition: color 0.3s; }
.stock-pct { font-size:10px; font-weight:600; margin-top:2px; }
@keyframes price-flash-up { 0%{background:rgba(0,255,140,0.18)} 100%{background:transparent} }
@keyframes price-flash-dn { 0%{background:rgba(255,59,92,0.18)} 100%{background:transparent} }
@keyframes price-flash-up-c { 0%{background:rgba(204,255,46,0.20)} 100%{background:transparent} }
@keyframes price-flash-dn-c { 0%{background:rgba(255,96,96,0.20)} 100%{background:transparent} }
.stock-row.flash-up { animation: price-flash-up 0.6s ease-out; }
.stock-row.flash-dn { animation: price-flash-dn 0.6s ease-out; }
.mkt-card[data-sector="crypto"].flash-up { animation: price-flash-up-c 0.6s ease-out; }
.mkt-card[data-sector="crypto"].flash-dn { animation: price-flash-dn-c 0.6s ease-out; }

/* ── Market List Screen ── */
.market-screen { display:flex; flex-direction:column; height:100%; min-height:0; }
.market-hdr { padding:14px 16px 10px; background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; }
.market-search { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 12px; color:var(--t1); font-size:13px; outline:none; transition:border-color 0.2s; font-family:'Inter',sans-serif; box-sizing:border-box; }
.market-search:focus { border-color:var(--accent); }
.market-search::placeholder { color:var(--t3); }
.market-grid-wrap { overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.06) transparent; }
.market-grid { columns:3; column-gap:0; column-rule:1px solid rgba(255,255,255,0.15); }
.mkt-card {
  break-inside:avoid;
  display:grid; grid-template-columns:1fr 110px 1fr;
  align-items:center; gap:0;
  padding:12px 14px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.12s;
}
.mkt-card:hover { background:rgba(255,255,255,0.03); }
.mkt-card.flash-up { animation:price-flash-up 0.6s ease-out; }
.mkt-card.flash-dn { animation:price-flash-dn 0.6s ease-out; }
/* Event-affected cards */
.mkt-card.mkt-ev-up { border-left:2px solid rgba(0,255,140,0.55); background:rgba(0,255,140,0.045); }
.mkt-card.mkt-ev-dn { border-left:2px solid rgba(255,59,92,0.55);  background:rgba(255,59,92,0.045); }
.mkt-event-tag {
  font-size:9px; font-weight:900; letter-spacing:0.05em;
  padding:2px 5px; border-radius:4px; white-space:nowrap;
  animation:meb-blink 1.2s ease-in-out infinite;
}
.mkt-event-tag.ev-up { background:rgba(0,255,140,0.18); color:var(--accent); }
.mkt-event-tag.ev-dn { background:rgba(255,59,92,0.18);  color:var(--loss-2); }
.mkt-left { display:flex; align-items:center; gap:9px; min-width:0; }
.mkt-left-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mkt-ticker { font-size:15px; font-weight:900; color:var(--t1); letter-spacing:0.01em; }
.mkt-name { font-size:10px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Top clans teaser (no-clan view) ── */
.no-clan-top { margin-top:34px; width:100%; max-width:420px; display:flex; flex-direction:column; gap:8px; }
.no-clan-top-title {
  font-size:11px; font-weight:900; letter-spacing:0.16em; text-transform:uppercase;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-align:center; margin-bottom:4px;
}
.no-clan-top-row {
  display:flex; align-items:center; gap:12px;
  background:var(--grad-glass); border:1px solid rgba(255,181,71,0.16);
  border-radius:12px; padding:10px 14px; cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.no-clan-top-row:hover { border-color:rgba(255,181,71,0.38); box-shadow:0 0 18px rgba(255,181,71,0.08); }
.nct-pos { font-size:13px; font-weight:900; width:26px; flex-shrink:0; }
.nct-name { font-size:13px; font-weight:800; color:#fff; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nct-rp { font-family:monospace; font-size:12px; font-weight:800; color:var(--gold-2); }
.no-clan-top-sub { text-align:center; font-size:11px; color:var(--t3); margin-top:2px; }

/* ── Shared empty-state CTA button ── */
.empty-cta {
  margin-top:16px; padding:11px 28px; border-radius:10px; border:none;
  background:var(--accent); color:#000; font-size:13px; font-weight:800;
  cursor:pointer; font-family:inherit;
  box-shadow:0 0 18px rgba(0,255,140,0.22);
  transition:transform .15s, box-shadow .15s;
}
.empty-cta:hover { transform:translateY(-1px); box-shadow:0 0 26px rgba(0,255,140,0.35); }

/* ── Ticker logos (company icons) ── */
.tk-logo {
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  object-fit:contain;
  padding:2px;
  box-sizing:border-box;
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle;
}
.mkt-chart-area { width:110px; height:28px; }
.mkt-chart-area svg { width:110px; height:28px; display:block; }
.mkt-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; justify-self:end; }
.mkt-price { font-size:14px; font-weight:800; color:var(--t1); white-space:nowrap; }
.mkt-pct { font-size:12px; font-weight:700; white-space:nowrap; }

/* ── Full-market search results (beyond the curated 44) ── */
.market-ext-hdr {
  font-size:10.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--t3); padding:14px 14px 6px;
}
.mkt-card-external {
  break-inside:avoid;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.12s;
}
.mkt-card-external:hover { background:rgba(255,255,255,0.03); }
.mkt-ext-name { font-size:10px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.mkt-ext-exch {
  font-size:9px; font-weight:800; letter-spacing:0.04em; color:var(--t3);
  background:rgba(255,255,255,0.06); border-radius:5px; padding:2px 6px; flex-shrink:0;
}
.market-browse-toggle {
  display:block; width:100%; text-align:center; margin:14px 0 4px;
  padding:10px; border-radius:10px; border:1px dashed rgba(255,255,255,0.12);
  background:transparent; color:var(--t3); font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:border-color .15s, color .15s;
}
.market-browse-toggle:hover { border-color:rgba(0,255,140,0.3); color:var(--accent); }
.market-browse-more-btn {
  display:block; width:calc(100% - 28px); margin:10px 14px 16px;
  padding:11px; border-radius:10px; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03); color:var(--t2); font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
.market-browse-more-btn:hover { background:rgba(255,255,255,0.06); }
.market-browse-more-btn:disabled { opacity:0.5; cursor:default; }

/* ── Stock Detail Screen ── */
.sd-topbar { display:flex; align-items:center; gap:12px; padding:6px 14px; border-bottom:1px solid var(--border); background:var(--bg2); flex-shrink:0; }
.sd-back { background:none; border:1px solid var(--border); color:var(--t2); font-size:12px; font-weight:700; cursor:pointer; padding:6px 12px; border-radius:8px; font-family:'Inter',sans-serif; display:flex; align-items:center; gap:5px; transition:all 0.15s; white-space:nowrap; }
.sd-back:hover { border-color:var(--accent); color:var(--t1); }
.sd-identity { flex:1; min-width:0; }
.sd-ticker-line { font-size:15px; font-weight:900; letter-spacing:-0.01em; }
.sd-full-name { font-size:10px; color:var(--t2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-content { position:absolute; left:0; right:0; top:44px; bottom:0; padding:12px; display:grid; grid-template-columns:1.4fr 2fr; grid-template-rows:minmax(0,2.4fr) minmax(0,1.3fr); gap:12px; overflow:hidden; }
.sd-price-big { font-size:44px; font-weight:900; letter-spacing:-0.04em; line-height:1.05; transition:color 0.2s; }
.sd-price-big.flash-up { animation:price-flash-up 0.5s ease-out; }
.sd-price-big.flash-dn { animation:price-flash-dn 0.5s ease-out; }
.sd-change-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.sd-change-val { font-size:14px; font-weight:700; }
.sd-change-pct { font-size:13px; color:var(--t2); }
.sd-range-row { display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
.sd-range-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.06em; }
.sd-range-val { font-size:11px; font-weight:600; color:var(--t2); }
.sd-range-sep { font-size:10px; color:var(--border); margin:0 2px; }
.sd-chart { height:280px; background:#0d0d0d; border:1px solid var(--border); border-radius:10px; overflow:hidden; flex-shrink:0; }
.sd-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sd-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; }
.sd-stat-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:4px; }
.sd-stat-val { font-size:15px; font-weight:800; }
.sd-stat-val.tp { color:#00ff8c; }
.sd-stat-val.sl { color:var(--loss-2); }
.sd-stat-val.gain { color:var(--accent); }
.sd-stat-val.loss { color:var(--loss-2); }
.sd-stat-val.dim { color:var(--t3); font-size:12px; font-weight:600; }

/* ── Market Intel Card ── */
.intel-card { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:7px; flex:1; }
.intel-card.unlocked { border-color:rgba(157,123,255,0.25); background:rgba(157,123,255,0.03); }
.intel-header { display:flex; align-items:center; gap:7px; }
.intel-icon { font-size:13px; }
.intel-title { font-size:10px; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:var(--violet); flex:1; }
.intel-updated { font-size:10px; color:var(--t4); }
.intel-lock-badge { font-size:10px; font-weight:800; color:var(--t3); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:99px; padding:2px 8px; }
.intel-rows { display:flex; flex-direction:column; gap:5px; }
.intel-row { display:flex; align-items:center; justify-content:space-between; }
.intel-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; }
.intel-badge { font-size:11px; font-weight:800; border-radius:99px; padding:2px 9px; }
.intel-badge.bullish { color:#00ff8c; background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.2); }
.intel-badge.bearish { color:var(--loss-2); background:rgba(255,59,92,0.1); border:1px solid rgba(255,59,92,0.2); }
.intel-badge.neutral { color:#ffc107; background:rgba(255,193,7,0.1); border:1px solid rgba(255,193,7,0.2); }
.intel-val { font-size:11px; font-weight:700; color:var(--t2); }
.intel-score { font-size:13px; font-weight:900; color:var(--violet); }
.intel-score-max { font-size:10px; color:var(--t3); font-weight:600; }
.intel-phrase { font-size:10px; color:var(--t2); line-height:1.5; font-style:italic; border-left:2px solid rgba(157,123,255,0.3); padding-left:8px; }
.intel-blur-rows { display:flex; flex-direction:column; gap:7px; filter:blur(4px); pointer-events:none; user-select:none; }
.intel-blur-phrase { font-size:10px; color:var(--t2); line-height:1.5; filter:blur(4px); border-left:2px solid rgba(255,255,255,0.1); padding-left:8px; }
.intel-upgrade { text-align:center; font-size:11px; font-weight:700; color:var(--t3); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:8px; cursor:pointer; transition:all 0.15s; margin-top:2px; }
.intel-upgrade:hover { color:var(--violet); border-color:rgba(157,123,255,0.3); }
/* Strength bar */
.intel-strength-wrap { display:flex; flex-direction:column; gap:4px; }
.intel-strength-labels { display:flex; justify-content:space-between; }
.intel-strength-label { font-size:9px; font-weight:700; color:var(--t4); text-transform:uppercase; letter-spacing:0.07em; }
.intel-strength-track { height:5px; background:rgba(255,255,255,0.08); border-radius:99px; overflow:hidden; }
.intel-strength-fill { height:100%; border-radius:99px; background:linear-gradient(90deg, var(--loss-2), #ffc107, var(--accent)); transition:width 0.4s ease; }
/* Price target */
.intel-target-up { font-size:11px; font-weight:800; color:var(--accent); }
.intel-target-dn { font-size:11px; font-weight:800; color:var(--loss-2); }
/* Trading signal */
.intel-signal { display:flex; align-items:center; justify-content:space-between; border-radius:8px; padding:5px 10px; }
.intel-signal.buy  { background:rgba(0,255,140,0.08); border:1px solid rgba(0,255,140,0.2); }
.intel-signal.hold { background:rgba(255,193,7,0.08);  border:1px solid rgba(255,193,7,0.2); }
.intel-signal.sell { background:rgba(255,59,92,0.08);  border:1px solid rgba(255,59,92,0.2); }
.intel-signal-label { font-size:9px; font-weight:900; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; }
.intel-signal-val   { font-size:15px; font-weight:900; letter-spacing:0.05em; }
.intel-signal.buy  .intel-signal-val { color:var(--accent); }
.intel-signal.hold .intel-signal-val { color:#ffc107; }
.intel-signal.sell .intel-signal-val { color:var(--loss-2); }
.intel-signal-conf { font-size:9px; font-weight:700; color:var(--t3); text-align:right; }

/* ── Bottom tab panel (Orders / Stats) ── */
.sd-tab-bar { display:flex; gap:4px; flex-shrink:0; }
.sd-tab-btn { flex:1; padding:7px 0; font-size:11px; font-weight:800; border-radius:8px; border:1px solid var(--border); background:none; color:var(--t3); cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s; letter-spacing:0.03em; }
.sd-tab-btn.active { background:rgba(255,255,255,0.07); color:var(--t1); border-color:rgba(255,255,255,0.15); }
.sd-tab-btn:hover:not(.active) { color:var(--t2); }
.sd-tab-body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; display:flex; flex-direction:column; gap:8px; }
.sd-tab-body .sltp-header { display:none !important; }
.sd-tab-body .sltp-pending-hint { display:none !important; }
.sd-tab-body .sltp-section { gap:6px; display:flex; flex-direction:column; padding:7px 10px; }
.sd-tab-body .sltp-label { font-size:11px; flex:0 0 72px; }
.sd-tab-body .sltp-input { font-size:12px; padding:6px 8px; }
.sd-tab-body .qty-mode-btn { height:24px; font-size:9px; }
.sd-tab-body .sltp-confirm-btn { padding:7px; font-size:12px; margin-top:2px; }
.sd-tab-body .sltp-tooltip { display:none !important; }

/* ── 4-panel grid cards ── */
.sd-panel { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:14px; min-height:0; overflow:hidden; }
.sd-panel-tl { overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.sd-panel-tl > * { flex-shrink:0; }
.sd-panel-bl { overflow:hidden; }
.sd-panel-br { overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.sd-panel-tr { padding:0; overflow:hidden; gap:0; }
.sd-chart-topbar { display:flex; justify-content:flex-end; align-items:center; padding:4px 8px; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.07); background:#0d0d0d; }
.sd-chart-inner { flex:1; min-height:0; position:relative; overflow:hidden; }
.sd-chart-inner #tv-chart-wrap { height:100%; width:100%; }
.sd-panel-section-title { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.09em; display:flex; align-items:center; gap:7px; flex-shrink:0; }

/* Position stats panel (bottom-right) */
.sd-pnl-big { font-size:30px; font-weight:900; letter-spacing:-0.03em; line-height:1.1; }
.sd-pnl-sub { font-size:11px; color:var(--t3); margin-top:4px; line-height:1.6; }
.sd-live-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; animation:sd-pulse 1.6s infinite; flex-shrink:0; }
@keyframes sd-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }
/* new position stats */
.sd-pos-value { font-size:28px; font-weight:900; letter-spacing:-0.03em; line-height:1.1; color:var(--t1); }
.sd-pnl-small { font-size:13px; font-weight:700; margin-top:5px; }
.sd-pnl-small.gain { color:var(--accent); }
.sd-pnl-small.loss { color:var(--loss-2); }
.pos-bar-wrap { display:flex; flex-direction:column; gap:10px; }
.pos-bar-track { height:12px; border-radius:99px; position:relative; overflow:visible; margin:6px 0;
  background:linear-gradient(to right, rgba(255,59,92,0.55) 0%, rgba(255,59,92,0.2) 40%, rgba(255,255,255,0.06) 50%, rgba(0,255,140,0.2) 60%, rgba(0,255,140,0.55) 100%); }
.pos-bar-dot { position:absolute; width:16px; height:16px; border-radius:50%; top:50%; transform:translate(-50%,-50%); transition:left 0.4s var(--ease-out); z-index:3; }
.pos-bar-dot.gain { background:#00ff8c; box-shadow:0 0 0 3px rgba(0,255,140,0.25), 0 0 14px 5px rgba(0,255,140,0.6); }
.pos-bar-dot.loss { background:#ff3b5c; box-shadow:0 0 0 3px rgba(255,59,92,0.25), 0 0 14px 5px rgba(255,59,92,0.6); }
.pos-bar-dot.neutral { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.2), 0 0 10px 3px rgba(255,255,255,0.5); }
.pos-bar-labels { display:flex; justify-content:space-between; font-size:10px; font-weight:700; }
.pos-bar-sl { color:var(--loss-2); }
.pos-bar-tp { color:var(--accent); }
/* legacy prog rows (kept for safety) */
.sd-prog-row { display:flex; flex-direction:column; gap:5px; }
.sd-prog-label { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:700; }
.sd-prog-track { height:5px; background:rgba(255,255,255,0.08); border-radius:99px; overflow:hidden; }
.sd-prog-fill-tp { height:100%; background:var(--accent); border-radius:99px; transition:width 0.5s var(--ease-out); }
.sd-prog-fill-sl { height:100%; background:var(--loss); border-radius:99px; transition:width 0.5s var(--ease-out); }
.sd-close-btn { width:100%; padding:13px; border-radius:var(--r-sm); background:var(--loss-dim); border:1px solid rgba(255,59,92,0.28); color:var(--loss-2); font-size:13px; font-weight:800; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s; margin-top:auto; letter-spacing:0.04em; }
.sd-close-btn:hover { background:rgba(255,59,92,0.22); border-color:var(--loss); transform:translateY(-1px); }
.sd-no-position { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:7px; color:var(--t3); font-size:12px; text-align:center; padding:20px 0; }
.sd-no-position-icon { font-size:26px; opacity:0.35; }

/* Mobile: single scrollable column — all 4 panels stack naturally */
@media (max-width:680px) {
  .sd-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sd-panel-tr { min-height:220px; }
  .sd-panel-bl, .sd-panel-br { overflow:visible; }
}

/* Order panel (center) */
.order-panel { padding:28px 32px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; min-height:0; }
.order-panel > * { flex-shrink:0; }
#tv-chart-wrap { height:100%; width:100%; }
.order-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--t3); gap:12px; }
.order-stock-name { font-size:22px; font-weight:900; letter-spacing:-0.02em; }
.order-stock-full { font-size:13px; color:var(--t2); margin-top:2px; }
.order-price-big { font-size:50px; font-weight:900; letter-spacing:-0.04em; line-height:1; margin:4px 0; transition: color 0.2s; }
.order-price-big.flash-up { animation: price-flash-up 0.5s ease-out; }
.order-price-big.flash-dn { animation: price-flash-dn 0.5s ease-out; }
.order-change-row { display:flex; align-items:center; gap:8px; }
.order-change-val { font-size:14px; font-weight:700; }
.order-change-pct { font-size:13px; color:var(--t2); }

/* Buy/Sell tabs */
.bs-tabs { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.bs-tab {
  flex:1; padding:12px; border:none; background:none;
  font-size:14px; font-weight:700; cursor:pointer; transition:all 0.15s;
  font-family:'Inter',sans-serif; color:var(--t3);
}
.bs-tab.active-buy { background:var(--accent-dim); color:var(--accent); }
.bs-tab.active-sell { background:var(--loss-dim); color:var(--loss); }

/* Qty */
.qty-label { font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:8px; }
.qty-mode-row { display:flex; gap:6px; margin-bottom:8px; }
.qty-mode-btn { flex:1; height:30px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t2); font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; }
.qty-mode-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.qty-shares-preview { font-size:11px; color:var(--t3); text-align:center; margin-top:5px; min-height:16px; }
.qty-row {
  display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
}
.qty-btn {
  width:48px; height:48px; background:none; border:none;
  color:var(--accent); font-size:20px; cursor:pointer; transition:background 0.1s;
}
.qty-btn:hover { background:var(--accent-dim); }
.qty-input {
  flex:1; background:none; border:none; text-align:center;
  color:var(--t1); font-size:20px; font-weight:800; outline:none; font-family:'Inter',sans-serif;
}
.order-summary {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:14px;
}
.order-summary-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; padding:4px 0;
}
.order-summary-row:not(:last-child) { border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:10px; }
.order-summary-label { color:var(--t2); }
.order-summary-val { font-weight:700; }
.xp-preview { color:var(--accent); font-size:12px; font-weight:700; }

.execute-btn {
  width:100%; padding:17px;
  border:none; border-radius:var(--r-md);
  font-size:15px; font-weight:900; cursor:pointer;
  font-family:'Inter',sans-serif; letter-spacing:0.04em;
  transition: all 0.25s var(--ease-out);
  position:relative; overflow:hidden;
}
.execute-btn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: translateX(-100%); transition: transform 0.6s var(--ease-out);
}
.execute-btn:hover::before { transform: translateX(100%); }
.execute-btn:hover { transform: translateY(-2px); }
.execute-btn:active { transform: scale(0.99); }
.execute-btn.buy-btn {
  background: var(--grad-accent);
  color:#000;
  box-shadow: 0 8px 28px rgba(0,255,140,0.30), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.execute-btn.buy-btn:hover { box-shadow: 0 14px 40px rgba(0,255,140,0.42), 0 1px 0 rgba(255,255,255,0.25) inset; }
.execute-btn.sell-btn {
  background: var(--grad-loss);
  color:#fff;
  box-shadow: 0 8px 28px rgba(255,59,92,0.28), 0 1px 0 rgba(255,255,255,0.12) inset;
}
.execute-btn.sell-btn:hover { box-shadow: 0 14px 40px rgba(255,59,92,0.38), 0 1px 0 rgba(255,255,255,0.12) inset; }
.execute-btn:disabled { opacity:0.35; cursor:not-allowed; transform:none; }

/* SL/TP alert banner */
.sltp-alert {
  display:flex; align-items:center; gap:10px;
  border-radius:var(--r-md); padding:10px 14px; margin-bottom:10px;
  border:1px solid; font-size:13px;
}
.sltp-alert.tp { background:rgba(0,255,140,0.08); border-color:rgba(0,255,140,0.25); }
.sltp-alert.sl { background:rgba(255,59,92,0.08); border-color:rgba(255,59,92,0.25); }
.sltp-alert-icon { font-size:18px; flex-shrink:0; }
.sltp-alert-body { flex:1; }
.sltp-alert-title { font-weight:700; color:var(--t1); font-size:13px; }
.sltp-alert-sub { font-size:11px; color:var(--t3); margin-top:2px; }
.sltp-alert-pnl { font-weight:700; font-size:13px; }
.sltp-alert-pnl.gain { color:var(--accent); }
.sltp-alert-pnl.loss { color:var(--loss-2); }
.sltp-alert-dismiss { background:none; border:none; color:var(--t3); font-size:18px; cursor:pointer; padding:0 2px; line-height:1; flex-shrink:0; }
.sltp-alert-dismiss:hover { color:var(--t1); }

/* Stop Loss / Take Profit */
.sltp-section {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; display:flex; flex-direction:column; gap:10px;
}
.sltp-header { font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; }
.sltp-row { display:flex; align-items:center; gap:10px; }
.sltp-label { font-size:12px; font-weight:700; flex:0 0 90px; }
.sltp-label.tp { color:#00ff8c; }
.sltp-label.sl { color:var(--loss-2); }
.sltp-input {
  flex:1; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--t1); font-size:13px; font-weight:600; padding:6px 10px; font-family:inherit;
  transition:border-color 0.2s;
}
.sltp-input:focus { outline:none; border-color:var(--accent); }
.sltp-input.sl:focus { border-color:var(--loss); }
.sltp-clear { background:none; border:none; color:var(--t3); font-size:16px; cursor:pointer; padding:0 2px; line-height:1; }
.sltp-clear:hover { color:var(--t1); }
.sltp-badge { display:inline-flex; align-items:center; gap:4px; border-radius:4px; padding:2px 7px; font-size:11px; font-weight:700; }
.sltp-badge.tp { background:rgba(0,255,140,0.12); color:#00ff8c; border:1px solid rgba(0,255,140,0.25); }
.sltp-badge.sl { background:var(--loss-dim); color:var(--loss-2); border:1px solid rgba(255,59,92,0.25); }
.sltp-active-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; display:inline-block; }
.sltp-active-badge.tp { background:rgba(0,255,140,0.12); color:#00ff8c; }
.sltp-active-badge.sl { background:rgba(255,59,92,0.12); color:var(--loss-2); }
.sltp-info-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; border:1px solid var(--t3);
  background:none; color:var(--t3); font-size:10px; font-weight:700;
  cursor:pointer; line-height:1; margin-left:6px; flex-shrink:0;
  transition:border-color 0.15s, color 0.15s;
}
.sltp-info-btn:hover { border-color:var(--accent); color:var(--accent); }
.sltp-tooltip {
  position:absolute; left:0; right:0; bottom:calc(100% + 8px);
  background:#1a1a1a; border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px 14px; font-size:12px; line-height:1.6; color:var(--t2);
  box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:50;
  animation:fadeIn 0.15s ease;
}
.sltp-tooltip strong { color:var(--t1); }
.sltp-tooltip .tt-row { display:flex; gap:8px; margin-top:6px; }
.sltp-tooltip .tt-icon { flex-shrink:0; }
.sltp-tooltip-close {
  position:absolute; top:8px; right:10px; background:none; border:none;
  color:var(--t3); font-size:14px; cursor:pointer; line-height:1;
}
.sltp-tooltip-close:hover { color:var(--t1); }
.sltp-pending-hint {
  font-size:11px; color:var(--accent); background:rgba(0,255,140,0.07);
  border-radius:4px; padding:4px 8px; margin-bottom:6px; text-align:center;
}
.sltp-confirm-btn {
  width:100%; margin-top:10px; padding:9px; border:none; border-radius:var(--r-sm);
  background:var(--accent); color:#000; font-size:13px; font-weight:700;
  cursor:pointer; transition:opacity 0.15s, transform 0.15s;
}
.sltp-confirm-btn:hover { opacity:0.88; transform:translateY(-1px); }

/* ── Compact left panels (no-scroll) ── */
.sd-panel-tl, .sd-panel-bl, .sd-panel-br { padding:8px; gap:5px; }
/* TL — stock info */
.sd-price-big { font-size:22px; }
.sd-change-row { margin-top:1px; gap:5px; }
.sd-change-val { font-size:11px; }
.sd-change-pct { font-size:11px; }
.sd-range-row { margin-top:1px; gap:4px; }
.sd-range-val { font-size:10px; }
.sd-stats { gap:4px; }
.sd-stat-card { padding:5px 8px; border-radius:8px; }
.sd-stat-label { margin-bottom:1px; font-size:9px; }
.sd-stat-val { font-size:11px; }
.sd-panel-section-title { font-size:9px; gap:5px; }
/* BL — order form */
.bs-tab { padding:6px; font-size:11px; }
.qty-label { margin-bottom:2px; font-size:10px; }
.qty-mode-row { margin-bottom:3px; gap:4px; }
.qty-mode-btn { height:22px; font-size:9px; }
.qty-shares-preview { margin-top:2px; min-height:10px; font-size:9px; }
.qty-btn { width:30px; height:30px; font-size:14px; }
.qty-input { font-size:13px; }
.qty-row { border-radius:8px; }
.order-summary { padding:6px 8px; border-radius:8px; }
.order-summary-row { font-size:10px; padding:2px 0; }
.order-summary-row:not(:last-child) { padding-bottom:3px; margin-bottom:3px; }
.execute-btn { padding:8px; font-size:12px; border-radius:8px; }
.sltp-section { padding:6px 8px; gap:4px; border-radius:8px; }
.sltp-header { font-size:9px; }
.sltp-label { font-size:10px; flex:0 0 60px; }
.sltp-input { font-size:11px; padding:4px 8px; }
.sltp-confirm-btn { margin-top:3px; padding:5px; font-size:11px; }
/* BR — position stats */
.sd-pnl-big { font-size:20px; }
.sd-pos-value { font-size:20px; }
.sd-pnl-small { font-size:11px; margin-top:2px; }
.sd-pnl-sub { font-size:9px; margin-top:2px; }
.pos-bar-track { height:8px; margin:3px 0; }
.pos-bar-dot { width:12px; height:12px; }
.pos-bar-labels { font-size:9px; }
.pos-bar-wrap { gap:6px; }
.sd-close-btn { padding:8px; font-size:11px; }
.sd-no-position { font-size:11px; padding:10px 0; gap:4px; }
.sd-no-position-icon { font-size:20px; }

/* Holdings sidebar (trade screen right) */
.holdings-side {
  border-right:1px solid var(--border); overflow-y:auto;
  padding:16px; background:var(--bg2); display:flex; flex-direction:column; gap:8px;
}
.holdings-side-title { font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; padding:4px 0 8px; }
.holding-chip {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px; transition:border-color 0.15s, background 0.15s;
}
.holding-chip:hover { border-color:var(--accent); background:var(--accent-dim); }
.holding-chip-top { display:flex; justify-content:space-between; margin-bottom:4px; }
.holding-ticker { font-size:13px; font-weight:800; }
.holding-pnl { font-size:12px; font-weight:700; }
.holding-detail { font-size:11px; color:var(--t3); }

/* ═══════════════════════════════
   PORTFOLIO SCREEN
═══════════════════════════════ */

/* ── Portfolio Summary Hero ── */
.port-hero {
  background:
    radial-gradient(ellipse 70% 50% at 90% -10%, rgba(0,255,140,0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 110%, rgba(157,123,255,0.10), transparent 55%),
    var(--grad-glass);
  border:1px solid rgba(0,255,140,0.20);
  border-radius:var(--r-xl); padding:26px 28px;
  margin-bottom:16px; position:relative; overflow:hidden;
  box-shadow: var(--shadow-lg), 0 0 32px rgba(0,255,140,0.06);
}
.port-hero::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  padding:1px; background: linear-gradient(135deg, rgba(0,255,140,0.35), transparent 45%, rgba(157,123,255,0.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.port-hero-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.port-hero-label { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:0.13em; font-weight:800; display:flex; align-items:center; gap:7px; }
.port-hero-label::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent-glow);
  animation: live-dot 1.6s ease-in-out infinite;
}
.port-hero-value {
  font-family:monospace;
  font-size:42px; font-weight:700; letter-spacing:-0.03em; line-height:1;
  color:#fff; margin-bottom:8px;
  font-variant-numeric: tabular-nums;
}
.port-hero-pnl {
  font-family:monospace;
  font-size:14px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:8px;
}
.port-hero-pnl.gain { background:rgba(0,255,140,0.12); color:var(--accent); border:1px solid rgba(0,255,140,0.22); }
.port-hero-pnl.loss { background:rgba(255,59,92,0.12); color:var(--loss-2); border:1px solid rgba(255,59,92,0.22); }
.port-hero-pnl.neutral { background:rgba(255,255,255,0.06); color:var(--t2); border:1px solid var(--border); }

/* Allocation bar */
.port-alloc-bar-wrap { margin-top:20px; }
.port-alloc-bar-labels { display:flex; justify-content:space-between; margin-bottom:6px; }
.port-alloc-bar-label { font-size:10px; color:var(--t3); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.port-alloc-bar-label span { color:var(--t2); }
.port-alloc-track {
  height:6px; background:rgba(255,255,255,0.07); border-radius:99px; overflow:hidden;
  display:flex; gap:2px;
}
.port-alloc-fill-cash { background:var(--grad-accent); border-radius:99px 0 0 99px; transition:width 0.5s var(--ease-out); }
.port-alloc-fill-invested { background:var(--grad-cyan); border-radius:0 99px 99px 0; transition:width 0.5s var(--ease-out); }

/* Quick stats row */
.port-quick-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.port-qstat {
  background: var(--grad-glass);
  border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px;
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
}
.port-qstat-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:0.12em; font-weight:800; margin-bottom:5px; }
.port-qstat-val {
  font-family:monospace;
  font-size:17px; font-weight:700; font-variant-numeric: tabular-nums;
}

/* Holdings section */
.port-holdings-title {
  font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:0.12em; font-weight:800;
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.port-holdings-count {
  background: rgba(0,255,140,0.12); color:var(--accent);
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:99px;
  border:1px solid rgba(0,255,140,0.20);
}
.port-holdings-list { display:flex; flex-direction:column; gap:10px; }

/* Individual holding card */
.holding-card {
  background: var(--grad-glass);
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px;
  cursor:pointer; transition:all 0.22s var(--ease-out);
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
}
.holding-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 50%);
  pointer-events:none;
}
.holding-card:hover {
  border-color: var(--border-2);
  background: var(--surface-h);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.holding-card.is-gain { border-left:3px solid rgba(0,255,140,0.35); }
.holding-card.is-loss { border-left:3px solid rgba(255,59,92,0.35); }

.hc-emoji { font-size:26px; flex-shrink:0; line-height:1; }
.hc-info { flex:1; min-width:0; }
.hc-ticker { font-size:15px; font-weight:800; color:var(--t1); letter-spacing:0.01em; }
.hc-name { font-size:11px; color:var(--t3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hc-meta { font-size:11px; color:var(--t3); margin-top:4px; }
.hc-meta span { color:var(--t2); }

.hc-right { text-align:right; flex-shrink:0; }
.hc-value {
  font-family:monospace;
  font-size:16px; font-weight:700; font-variant-numeric: tabular-nums; color:var(--t1);
}
.hc-pnl {
  font-family:monospace;
  font-size:12px; font-weight:700; margin-top:3px;
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
}
.hc-pnl.gain { color:var(--accent); }
.hc-pnl.loss { color:var(--loss-2); }
.hc-trade-hint {
  font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:0.08em;
  margin-top:5px; font-weight:700;
}

/* ── Holdings combined card ── */
.port-section-divider {
  height:1px; background:var(--border); margin:20px -20px;
}
.port-section-title {
  font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.13em; color:var(--t3); margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.port-section-title::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.port-section-badge {
  font-size:9px; font-weight:800; padding:2px 8px; border-radius:99px;
  border:1px solid rgba(0,255,140,0.22); color:var(--accent);
  background:rgba(0,255,140,0.08);
}

/* ── Futuristic Crypto Pie ── */
.port-crypto-layout { display:flex; gap:32px; align-items:center; }

/* Two-column charts row */
.port-charts-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.port-chart-col { display:flex; flex-direction:column; }
.port-chart-col .port-crypto-layout {
  flex-direction:column; align-items:center; gap:14px;
}
.port-chart-col .port-pie-legend { width:100%; }
.port-pie-wrap {
  flex-shrink:0; position:relative;
  width:160px; height:160px;
}
/* Spinning outer ring */
.port-pie-ring {
  position:absolute; inset:-8px; border-radius:50%;
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg3), var(--bg3)) padding-box,
    conic-gradient(from 0deg, var(--accent), var(--cyan), var(--violet), var(--accent)) border-box;
  animation: ring-spin 8s linear infinite;
  opacity:0.5;
}
@keyframes ring-spin { to { transform:rotate(360deg); } }
/* Glow halo */
.port-pie-glow {
  position:absolute; inset:-20px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,140,0.08) 0%, transparent 65%);
  pointer-events:none;
}
.port-pie-svg-wrap { position:relative; width:160px; height:160px; }
#port-pie-svg {
  width:160px; height:160px; overflow:visible;
  filter: drop-shadow(0 0 12px rgba(0,255,140,0.25));
}
.port-pie-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.port-pie-center-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; font-weight:800; margin-bottom:3px; }
.port-pie-center-val { font-family:monospace; font-size:15px; font-weight:700; color:var(--t1); line-height:1; }

/* Pie legend */
.port-pie-legend { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.port-pie-legend-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r-sm);
  background:rgba(255,255,255,0.03); border:1px solid transparent;
  transition:all 0.2s;
  cursor:default;
}
.port-pie-legend-item:hover { background:var(--surface); border-color:var(--border); }
.port-pie-legend-bar {
  width:3px; height:28px; border-radius:99px; flex-shrink:0;
}
.port-pie-legend-info { flex:1; min-width:0; }
.port-pie-legend-ticker { font-size:13px; font-weight:800; color:var(--t1); }
.port-pie-legend-name { font-size:10px; color:var(--t3); margin-top:1px; }
.port-pie-legend-right { text-align:right; }
.port-pie-legend-pct { font-family:monospace; font-size:13px; font-weight:700; color:var(--t1); }
.port-pie-legend-val { font-size:10px; color:var(--t3); margin-top:1px; }

/* ── Stocks / ETF table ── */
.port-inner-table { width:100%; border-collapse:collapse; }
.port-inner-table th {
  font-size:9px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.09em;
  padding:0 0 10px; text-align:left; border-bottom:1px solid var(--border);
}
.port-inner-table th:not(:first-child) { text-align:right; }
.port-inner-table td {
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:13px; vertical-align:middle;
}
.port-inner-table tr:last-child td { border-bottom:none; }
.port-inner-table tbody tr {
  cursor:pointer; transition:background 0.15s;
}
.port-inner-table tbody tr:hover td { background:rgba(255,255,255,0.03); }
.pit-ticker { font-weight:800; font-size:14px; color:var(--t1); }
.pit-name { font-size:10px; color:var(--t3); margin-top:2px; }
.pit-num { font-family:monospace; font-size:12px; color:var(--t2); text-align:right; }
.pit-val { font-family:monospace; font-size:13px; font-weight:700; color:var(--t1); text-align:right; }
.pit-pnl { font-family:monospace; font-size:12px; font-weight:700; text-align:right; }
.pit-pnl.gain { color:var(--accent); }
.pit-pnl.loss { color:var(--loss-2); }
.pit-sell-btn {
  background: rgba(255,59,92,0.12);
  border: 1px solid rgba(255,59,92,0.25);
  color: var(--loss-2);
  font-size: 10px; font-weight: 900; letter-spacing: 0.05em;
  padding: 4px 9px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.pit-sell-btn:hover { background: rgba(255,59,92,0.22); transform: scale(1.04); }

/* Quick-sell bottom sheet */
.qs-overlay {
  position: fixed; inset: 0; z-index: 99000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}
.qs-overlay.open { opacity: 1; pointer-events: all; }
.qs-sheet {
  background: linear-gradient(160deg, #0d0d0d 0%, #080808 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  padding: 28px 24px 40px;
  transform: translateY(40px); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
}
.qs-overlay.open .qs-sheet { transform: translateY(0); }
.qs-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 99px; margin: 0 auto 22px; }
.qs-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qs-ticker { font-size: 22px; font-weight: 900; color: var(--t1); }
.qs-name { font-size: 12px; color: var(--t3); margin-top: 2px; }
.qs-price { font-size: 20px; font-weight: 800; font-family: monospace; color: var(--t1); margin-left: auto; text-align: right; }
.qs-price-sub { font-size: 11px; color: var(--t3); margin-top: 2px; text-align: right; }
.qs-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.qs-stat { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 12px 14px; }
.qs-stat-label { font-size: 10px; color: var(--t3); font-weight: 600; margin-bottom: 4px; }
.qs-stat-val { font-size: 14px; font-weight: 800; font-family: monospace; color: var(--t1); }
.qs-stat-val.gain { color: var(--accent); }
.qs-stat-val.loss { color: var(--loss-2); }
.qs-actions { display: flex; flex-direction: column; gap: 10px; }
.qs-sell-row { display: flex; gap: 10px; }
.qs-btn {
  flex: 1; padding: 15px; border-radius: 14px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 800; transition: transform 0.15s, opacity 0.15s;
}
.qs-btn:hover { transform: translateY(-2px); }
.qs-btn-all { background: var(--loss-2); color: #fff; }
.qs-btn-half { background: rgba(255,59,92,0.15); color: var(--loss-2); border: 1px solid rgba(255,59,92,0.30); }
.qs-btn-cancel { background: rgba(255,255,255,0.06); color: var(--t2); border: 1px solid rgba(255,255,255,0.10); font-size: 13px; font-weight: 600; }
.qs-btn-buy { background: rgba(0,255,140,0.12); color: var(--accent); border: 1px solid rgba(0,255,140,0.25); font-size: 13px; }

/* Sell button on pie legend items */
.port-pie-legend-item { position: relative; }
.port-pie-sell-btn {
  background: rgba(255,59,92,0.10);
  border: 1px solid rgba(255,59,92,0.22);
  color: var(--loss-2);
  font-size: 9px; font-weight: 900; letter-spacing: 0.05em;
  padding: 3px 7px; border-radius: 5px; cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.port-pie-sell-btn:hover { background: rgba(255,59,92,0.20); }

/* Best / Worst Trade chips */
.port-bw-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.port-bw-chip {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-md);
  cursor:pointer; transition:all 0.2s var(--ease-out);
  border:1px solid; position:relative; overflow:hidden;
}
.port-bw-chip.gain {
  background:rgba(0,255,140,0.07); border-color:rgba(0,255,140,0.18);
}
.port-bw-chip.loss {
  background:rgba(255,59,92,0.07); border-color:rgba(255,59,92,0.18);
}
.port-bw-chip:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.port-bw-chip.gain:hover  { background:rgba(0,255,140,0.12); border-color:rgba(0,255,140,0.30); }
.port-bw-chip.loss:hover  { background:rgba(255,59,92,0.12);  border-color:rgba(255,59,92,0.30); }
.port-bw-icon {
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.port-bw-icon.gain { background:rgba(0,255,140,0.14); color:var(--accent); }
.port-bw-icon.loss { background:rgba(255,59,92,0.14); color:var(--loss-2); }
.port-bw-info { flex:1; min-width:0; }
.port-bw-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.10em; color:var(--t3); margin-bottom:3px; }
.port-bw-val { font-size:14px; font-weight:800; color:var(--t1); }
.port-bw-pct { font-family:monospace; font-size:13px; font-weight:700; flex-shrink:0; }
.port-bw-pct.gain { color:var(--accent); }
.port-bw-pct.loss { color:var(--loss-2); }

/* Pie hover tooltip */
.port-pie-tooltip {
  position:fixed; z-index:999; pointer-events:none;
  background:rgba(10,12,18,0.95);
  border:1px solid var(--border-2);
  border-radius:var(--r-md); padding:10px 14px;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(0,0,0,0.5);
  backdrop-filter: var(--blur-sm);
  opacity:0; transform:translateY(4px);
  transition:opacity 0.15s, transform 0.15s;
  min-width:140px;
}
.port-pie-tooltip.visible { opacity:1; transform:translateY(0); }
.ppt-ticker { font-size:13px; font-weight:800; color:var(--t1); margin-bottom:4px; }
.ppt-name   { font-size:10px; color:var(--t3); margin-bottom:8px; }
.ppt-row    { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:11px; margin-top:3px; }
.ppt-key    { color:var(--t3); font-weight:700; text-transform:uppercase; letter-spacing:0.07em; }
.ppt-val    { font-family:monospace; font-weight:700; color:var(--t1); }

/* Stat card (still used elsewhere) */
.stat-card {
  background: var(--grad-glass);
  border:1px solid var(--border); border-radius:var(--r-md); padding:18px;
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: var(--shadow-md);
  transition: all 0.25s var(--ease-out);
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%);
  pointer-events:none;
}
.stat-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card-label { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:0.12em; font-weight:800; margin-bottom:8px; }
.stat-card-val {
  font-family:monospace;
  font-size:21px; font-weight:800; font-variant-numeric: tabular-nums;
}

/* Legacy holdings table (kept for safety) */
.holdings-table { width:100%; border-collapse:collapse; }
.holdings-table th {
  font-size:10px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.07em;
  padding:0 16px 10px; text-align:right; border-bottom:1px solid var(--border);
}
.holdings-table td {
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:13px; vertical-align:middle;
}
.holdings-table tr:last-child td { border-bottom:none; }
.holdings-table tbody tr { transition:background 0.1s; }
.holdings-table tbody tr:hover { background:var(--surface); }
.ht-ticker { font-weight:800; font-size:14px; }
.ht-name { font-size:11px; color:var(--t3); margin-top:2px; }

/* Empty state */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:64px 20px; color:var(--t3); gap:12px; text-align:center;
}
.empty-icon {
  font-size:44px; opacity:0.4;
  filter: drop-shadow(0 0 16px rgba(0,255,140,0.15));
  animation: empty-float 3.5s ease-in-out infinite;
}
@keyframes empty-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.empty-title { font-size:16px; font-weight:800; color:var(--t2); letter-spacing:-0.01em; }
.empty-sub { font-size:13px; line-height:1.6; max-width:220px; }

/* ═══════════════════════════════
   MISSIONS SCREEN
═══════════════════════════════ */

/* Screen layout */
.msn-screen-inner { padding:0 !important; display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* ── Tab bar ── */
.msn-tabs-bar {
  display:flex; align-items:stretch;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  flex-shrink:0; gap:2px;
}
.msn-tab {
  background:none; border:none; cursor:pointer;
  padding:14px 12px 12px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  position:relative; color:var(--t3);
  font-family:'Inter',sans-serif;
  transition:color 0.18s;
  flex:1; min-width:0;
}
.msn-tab::after {
  content:''; position:absolute; bottom:0; left:8px; right:8px; height:2px;
  background:var(--accent); border-radius:2px 2px 0 0;
  opacity:0; transform:scaleX(0.5); transition:opacity 0.18s, transform 0.18s;
}
.msn-tab.active { color:var(--t1); }
.msn-tab.active::after { opacity:1; transform:scaleX(1); }
.msn-tab:hover:not(.active) { color:var(--t2); }
.msn-tab-icon { width:18px; height:18px; flex-shrink:0; }
.msn-tab-label { font-size:10px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; }
.msn-tab-timer { font-size:9px; font-weight:600; color:var(--accent); font-family:monospace; min-height:11px; opacity:0.8; }

/* ── Panel ── */
.msn-panel { display:flex; flex-direction:column; padding:20px 16px 16px; gap:0; flex:1; overflow:hidden; }
.msn-scroll { overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.08) transparent; }
.msn-panel-desc { font-size:12px; color:var(--t3); margin-bottom:14px; flex-shrink:0; }

/* ── Mission list (full-width cards) ── */
.msn-list { display:flex; flex-direction:column; gap:8px; }

/* ── Mission card ── */
.mc-card {
  --mc-rgb:255,255,255;
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:
    linear-gradient(100deg, rgba(var(--mc-rgb),0.09) 0%, rgba(var(--mc-rgb),0.02) 22%, rgba(255,255,255,0.035) 55%);
  border:1px solid rgba(var(--mc-rgb),0.14);
  border-radius:14px;
  transition:transform 0.18s var(--ease-out), border-color 0.18s, box-shadow 0.18s;
  position:relative; overflow:hidden;
}
.mc-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:4px; border-radius:14px 0 0 14px;
  background:var(--mc-accent, transparent);
  box-shadow:0 0 12px 1px rgba(var(--mc-rgb),0.55);
}
.mc-card:hover {
  transform:translateY(-2px);
  border-color:rgba(var(--mc-rgb),0.36);
  box-shadow:0 6px 22px rgba(var(--mc-rgb),0.10);
}
/* Category accent colors */
.mc-card.mc-tutorial    { --mc-accent:#2EE6FF; --mc-rgb:46,230,255; }
.mc-card.mc-daily       { --mc-accent:#00FF8C; --mc-rgb:0,255,140; }
.mc-card.mc-daily-elite { --mc-accent:#FFD700; --mc-rgb:255,215,0; }
.mc-card.mc-daily-elite .mc-xp-badge { color:#FFD700; background:rgba(255,215,0,0.12); }
.mc-card.mc-weekly      { --mc-accent:#9D7BFF; --mc-rgb:157,123,255; }
.mc-card.mc-xp          { --mc-accent:#FFB547; --mc-rgb:255,181,71; }
.mc-card.mc-rp          { --mc-accent:#FFD27A; --mc-rgb:255,210,122; }

.mc-card.mc-done {
  background:rgba(0,255,140,0.04);
  border-color:rgba(0,255,140,0.18);
}
.mc-card.mc-done.mc-rp { background:rgba(255,181,71,0.05); border-color:rgba(255,181,71,0.22); }
.mc-card.mc-done.mc-daily-elite { background:rgba(255,215,0,0.06); border-color:rgba(255,215,0,0.28); }
.mc-card.mc-done.mc-tutorial { background:rgba(46,230,255,0.04); border-color:rgba(46,230,255,0.2); }
.mc-card.mc-done.mc-weekly { background:rgba(157,123,255,0.04); border-color:rgba(157,123,255,0.2); }
.mc-card.mc-done.mc-xp { background:rgba(255,181,71,0.04); border-color:rgba(255,181,71,0.2); }

/* Icon container */
.mc-icon-wrap {
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px currentColor, 0 0 16px -2px rgba(var(--mc-rgb),0.45);
  /* color + bg set inline per mission */
}
.mc-icon-wrap svg { width:20px; height:20px; }

/* Content */
.mc-body { flex:1; min-width:0; }
.mc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:3px; }
.mc-name { font-size:13px; font-weight:700; color:var(--t1); letter-spacing:-0.01em; line-height:1.3; }
.mc-rewards { display:flex; gap:5px; align-items:center; flex-shrink:0; }
.mc-xp-badge {
  font-size:10px; font-weight:800; font-family:monospace;
  color:var(--accent); background:rgba(0,255,140,0.1);
  padding:2px 7px; border-radius:20px; white-space:nowrap;
}
.mc-rp-badge {
  font-size:10px; font-weight:800; font-family:monospace;
  color:var(--gold); background:rgba(255,181,71,0.12);
  padding:2px 7px; border-radius:20px; white-space:nowrap;
}
.mc-desc { font-size:11.5px; color:var(--t3); line-height:1.4; margin-bottom:9px; }
.mc-prog-row { display:flex; align-items:center; gap:8px; }
.mc-bar { flex:1; height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.mc-bar-fill { height:100%; border-radius:3px; transition:width 0.6s var(--ease-out); box-shadow:0 0 8px rgba(var(--mc-rgb),0.6); }
.mc-prog-label { font-size:10px; font-weight:600; color:var(--t3); font-family:monospace; white-space:nowrap; }

/* Done checkmark overlay */
.mc-done-check {
  position:absolute; top:12px; right:14px;
  width:20px; height:20px; border-radius:50%;
  background:var(--grad-accent); display:flex;
  align-items:center; justify-content:center;
  box-shadow:0 0 10px rgba(0,255,140,0.5);
}
.mc-done-check svg { width:11px; height:11px; color:#000; stroke-width:2.5; }
.mc-done-check.mc-done-gold { background:linear-gradient(135deg,#FFB547,#FFD27A); box-shadow:0 0 10px rgba(255,181,71,0.5); }

/* XP tier layout (2-col grid within sections) */
.xp-tier-section { margin-bottom:4px; }
.xp-tier-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 2px 8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:10px;
}
.xp-tier-name { font-size:11px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; }
.xp-tier-count { font-size:11px; font-weight:700; color:var(--t3); font-family:monospace; }
.xp-tier-count.all-done { color:var(--accent); }
.xp-tier-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }

/* XP/RP grid cards (compact 2-col) */
.mc-card.mc-compact {
  flex-direction:column; align-items:flex-start;
  padding:14px; gap:10px;
}
.mc-card.mc-compact .mc-top { width:100%; }
.mc-card.mc-compact .mc-body { width:100%; }

/* Legacy class kept for compat */
.missions-grid { display:flex; flex-direction:column; gap:8px; }
.mc-section-title {
  font-size:11px; font-weight:800; color:var(--t3);
  margin:20px 0 10px; text-transform:uppercase; letter-spacing:0.12em;
  display:flex; align-items:center; gap:10px;
}
.mc-section-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }

/* ── Mission detail popup ── */
.msn-detail-overlay {
  position:fixed; inset:0; z-index:10500;
  background:rgba(8,8,8,0.30);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .28s;
}
.msn-detail-overlay.visible { opacity:1; pointer-events:all; }

.msn-detail-popup {
  --cat: #00FF8C;
  width:min(420px,93vw);
  background:linear-gradient(160deg, rgba(14,20,34,0.99) 0%, rgba(8,10,18,0.99) 100%);
  border:1px solid color-mix(in srgb, var(--cat) 30%, transparent);
  border-radius:24px;
  padding:0;
  overflow:hidden;
  transform:translateY(18px) scale(0.95);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  position:relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 8px 40px rgba(0,0,0,0.6),
    0 0 60px color-mix(in srgb, var(--cat) 12%, transparent);
}
.msn-detail-overlay.visible .msn-detail-popup { transform:translateY(0) scale(1); }

/* coloured top bar */
.msn-detail-topbar {
  height:3px;
  background:linear-gradient(90deg, transparent, var(--cat), transparent);
  opacity:0.85;
}

/* inner padding wrapper */
.msn-detail-body { padding:24px 22px 22px; }

/* ambient glow blob behind icon */
.msn-detail-icon-area {
  display:flex; align-items:center; gap:16px; margin-bottom:18px;
}
.msn-detail-icon-wrap {
  width:66px; height:66px; border-radius:18px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow:0 0 24px color-mix(in srgb, var(--cat) 35%, transparent);
}
.msn-detail-icon-wrap::after {
  content:''; position:absolute; inset:-8px;
  background:radial-gradient(circle, color-mix(in srgb, var(--cat) 18%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.msn-detail-icon-wrap svg { width:30px; height:30px; position:relative; z-index:1; }

.msn-detail-header-text { min-width:0; }
.msn-detail-cat-badge {
  display:inline-block; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:0.12em;
  color:var(--cat); margin-bottom:5px; opacity:0.85;
}
.msn-detail-name {
  font-size:20px; font-weight:900; color:var(--t1);
  letter-spacing:-0.025em; line-height:1.2;
}

/* divider */
.msn-detail-divider {
  height:1px; margin:0 0 16px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--cat) 20%, transparent), transparent);
}

.msn-detail-desc {
  font-size:13.5px; color:var(--t2); line-height:1.65; margin-bottom:18px;
}

/* rewards row */
.msn-detail-rewards { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.msn-detail-reward-chip {
  display:flex; align-items:center; gap:5px;
  border-radius:20px; padding:6px 14px;
  font-size:13px; font-weight:800; letter-spacing:0.01em;
  border:1px solid color-mix(in srgb, currentColor 25%, transparent);
  background:color-mix(in srgb, currentColor 10%, transparent);
}

/* progress section */
.msn-detail-prog-label {
  font-size:9.5px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:7px;
}
.msn-detail-bar-wrap {
  height:8px; background:rgba(255,255,255,0.07);
  border-radius:10px; overflow:hidden; margin-bottom:6px;
  position:relative;
}
.msn-detail-bar-fill {
  height:100%; border-radius:10px;
  transition:width .6s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 10px currentColor;
  position:relative;
}
.msn-detail-bar-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(255,255,255,0.3));
  border-radius:inherit;
}
.msn-detail-prog-nums {
  font-size:11px; color:var(--t3); font-family:monospace; text-align:right;
}

/* close btn */
.msn-detail-close {
  position:absolute; top:13px; right:13px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.09);
  color:var(--t3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; transition:background .2s, color .2s;
  z-index:2;
}
.msn-detail-close:hover { background:rgba(255,255,255,0.14); color:var(--t1); }

/* done state */
.msn-detail-done-tag {
  display:inline-flex; align-items:center; gap:6px;
  border-radius:12px; padding:8px 14px;
  font-size:12px; font-weight:800;
  background:color-mix(in srgb, var(--cat) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--cat) 30%, transparent);
  color:var(--cat);
  width:100%; justify-content:center;
}

/* ═══════════════════════════════
   LEADERBOARD SCREEN
═══════════════════════════════ */
/* ── Leaderboard season banner ── */
.lb-season {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,rgba(255,181,71,0.10),rgba(30,58,95,0.20));
  border:1px solid rgba(255,181,71,0.25); border-radius:var(--r-md);
  padding:14px 16px; margin-bottom:14px;
  box-shadow:0 0 22px rgba(255,181,71,0.06);
}
.lb-season-left { display:flex; align-items:center; gap:10px; }
.lb-season-trophy { font-size:26px; line-height:1; color:var(--gold); filter:drop-shadow(0 0 8px rgba(255,181,71,0.45)); }
.lb-season-title {
  font-size:16px; font-weight:900; letter-spacing:-0.02em;
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lb-season-sub { font-size:11px; color:var(--t3); margin-top:1px; }
.lb-season-right { text-align:right; min-width:110px; flex-shrink:0; }
.lb-season-days {
  font-family:monospace; font-size:18px; font-weight:800; color:var(--gold-2);
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
.lb-season-days-label { font-size:10px; color:var(--t3); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }

/* ── Tabs ── */
.lb-tabs { display:flex; align-items:center; gap:6px; margin-bottom:12px; background:rgba(255,255,255,0.03); border-radius:var(--r-md); padding:4px; }
.lb-tab {
  flex:1; padding:8px 0; border-radius:10px;
  background:transparent; border:none;
  color:var(--t3); font-size:12px; font-weight:700; cursor:pointer;
  transition: all 0.18s var(--ease-out);
}
.lb-tab.active {
  background:rgba(0,201,167,0.15);
  color:var(--accent);
  box-shadow:0 0 0 1px rgba(0,201,167,0.25);
}
.lb-info-inline-btn {
  display:flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer;
  color:var(--t3); font-size:11px; font-weight:700;
  padding:0 2px 10px; margin-top:-6px;
  transition:color 0.15s;
}
.lb-info-inline-btn:hover { color:var(--accent); }


/* ── Weekly P&L Info Full-Screen Overlay ── */
.lb-info-screen {
  position:fixed; inset:0; z-index:99999;
  background:rgba(8,8,8,0.85); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s;
  padding: 40px 20%;
}
.lb-info-screen.open { opacity:1; pointer-events:auto; }
.lb-info-screen-inner {
  width:100%;
  display:flex; flex-direction:column; gap:20px;
  transform:translateY(16px); transition:transform 0.25s var(--ease-out);
  overflow-y:auto; max-height:100%;
}
.lb-info-screen.open .lb-info-screen-inner { transform:translateY(0); }

.lb-info-screen-header {
  display:flex; align-items:center; justify-content:space-between;
}
.lb-info-screen-close {
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.08); color:var(--t2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s; flex-shrink:0;
}
.lb-info-screen-close:hover { background:rgba(255,255,255,0.15); color:var(--t1); }

.lb-info-screen-title {
  display:flex; align-items:center; gap:10px;
  font-size:20px; font-weight:900; color:var(--t1); letter-spacing:-0.03em;
}

/* two-column layout */
.lb-info-cols {
  display:flex; gap:0; align-items:flex-start;
}
.lb-info-col { flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; }
.lb-info-col-title {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; color:var(--t2);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px;
}
.lb-info-divider {
  width:1px; background:rgba(255,255,255,0.07);
  align-self:stretch; flex-shrink:0; margin:0 20px;
}

/* 2x2 grid for how-it-works */
.lb-info-explain-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}

/* how it works rows */
.lb-info-explain-row {
  display:flex; align-items:flex-start; gap:14px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
}
.lb-info-explain-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
.lb-info-explain-title { font-size:13px; font-weight:800; color:var(--t1); margin-bottom:4px; }
.lb-info-explain-text { font-size:12px; color:var(--t3); line-height:1.6; }

/* podium */
.lb-info-screen-podium {
  display:flex; align-items:flex-end; gap:4px;
}
.lb-isp {
  flex:1; border-radius:10px; padding:10px 4px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  border:1px solid transparent; min-width:0;
}
.lb-isp.gold {
  background:linear-gradient(160deg,rgba(255,215,0,0.14),rgba(255,215,0,0.04));
  border-color:rgba(255,215,0,0.3); padding-top:12px;
}
.lb-isp.silver { background:rgba(192,192,192,0.07); border-color:rgba(192,192,192,0.2); }
.lb-isp.bronze { background:rgba(205,127,50,0.07); border-color:rgba(205,127,50,0.2); }
.lb-isp-crown { margin-bottom:2px; display:flex; }
.lb-isp-pos { font-size:15px; font-weight:900; letter-spacing:-0.03em; }
.lb-isp.gold   .lb-isp-pos { color:#FFD700; }
.lb-isp.silver .lb-isp-pos { color:#C0C0C0; }
.lb-isp.bronze .lb-isp-pos { color:#CD7F32; }
.lb-isp-xp { font-size:11px; font-weight:800; color:var(--t1); margin-top:4px; }
.lb-isp-rp { font-size:10px; color:var(--t3); font-weight:700; }
.lb-isp-badge {
  margin-top:5px; padding:2px 5px; border-radius:5px;
  background:rgba(255,215,0,0.15); color:#FFD700;
  font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  white-space:nowrap; text-align:center;
}

/* tier rows */
.lb-info-screen-tiers { display:flex; flex-direction:column; gap:5px; }
.lb-ist {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.05);
}
.lb-ist-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.lb-ist-label { font-size:13px; font-weight:700; color:var(--t2); flex:1; }
.lb-ist-xp { font-size:13px; font-weight:800; color:var(--t1); }

.lb-info-screen-note {
  font-size:11px; color:var(--t3); text-align:center;
  padding:8px 14px; background:rgba(255,255,255,0.03);
  border-radius:8px;
}

/* ── Subtitle / live dot ── */
.lb-subtitle {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11px; color:var(--t3); font-weight:600;
  margin-bottom:12px; letter-spacing:0.03em;
}
.lb-live-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0;
  box-shadow:0 0 6px var(--accent);
  animation:pulse 2s ease-in-out infinite;
}

/* ── Rows ── */
.lb-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  margin-bottom:6px;
  transition: all 0.22s var(--ease-out);
  position:relative; overflow:hidden;
}
.lb-row:hover { border-color:var(--border-2); transform:translateX(-2px); }
.lb-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:transparent; border-radius:3px 0 0 3px;
}
/* Top 3 highlight */
.lb-row.rank-1 {
  background:linear-gradient(90deg,rgba(255,181,71,0.10) 0%,rgba(255,181,71,0.03) 50%,transparent);
  border-color:rgba(255,181,71,0.25);
}
.lb-row.rank-1::before { background:var(--gold); box-shadow:0 0 8px rgba(255,181,71,0.6); }
.lb-row.rank-2 {
  background:linear-gradient(90deg,rgba(200,200,220,0.07) 0%,transparent 50%);
  border-color:rgba(200,200,220,0.18);
}
.lb-row.rank-2::before { background:#C8C8DC; }
.lb-row.rank-3 {
  background:linear-gradient(90deg,rgba(205,140,82,0.07) 0%,transparent 50%);
  border-color:rgba(205,140,82,0.18);
}
.lb-row.rank-3::before { background:#CD8C52; }
.lb-row.me {
  border-color:rgba(0,255,140,0.30);
  background:linear-gradient(90deg,rgba(0,255,140,0.08) 0%,rgba(0,255,140,0.02) 60%,transparent);
  box-shadow:0 0 16px rgba(0,255,140,0.06);
}
.lb-row.me::before { background:var(--accent); box-shadow:0 0 8px rgba(0,201,167,0.6); }

.lb-me-separator {
  display:flex; align-items:center; justify-content:center;
  padding:6px 0; color:var(--t3); font-size:14px; letter-spacing:4px;
  margin:2px 0;
}
.lb-me-pct-badge {
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:5px;
  border:1px solid; letter-spacing:0.03em;
}

/* ── Position number ── */
.lb-rank {
  font-family:monospace;
  font-size:12px; font-weight:800; min-width:22px; text-align:center;
  color:var(--t3); flex-shrink:0;
}
.lb-row.rank-1 .lb-rank { color:var(--gold); font-size:13px; }
.lb-row.rank-2 .lb-rank { color:#C8C8DC; font-size:13px; }
.lb-row.rank-3 .lb-rank { color:#CD8C52; font-size:13px; }

/* ── User avatar circle ── */
.lb-user-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; font-family:'Inter',sans-serif;
  color:#000; position:relative; overflow:hidden;
  border:2px solid rgba(255,255,255,0.10);
}
.lb-row.me .lb-user-avatar { border-color:rgba(0,255,140,0.4); }

/* ── Info (center) ── */
.lb-info { flex:1; min-width:0; }
.lb-name {
  font-size:14px; font-weight:800; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:5px;
  white-space:nowrap; overflow:hidden;
}
.lb-name-text { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lb-you-tag {
  display:inline-block; font-size:9px; font-weight:800; color:#0d1a2d;
  background:var(--accent); border-radius:4px; padding:1px 5px;
  flex-shrink:0; letter-spacing:0.05em;
}
.lb-sub { font-size:11px; color:var(--t3); margin-top:2px; font-weight:700; font-family:monospace; font-variant-numeric:tabular-nums; }
.lb-sub.gain { color:var(--accent); }
.lb-sub.loss { color:#FF4C4C; }

/* ── Rank badge (right) ── */
.lb-badge-right {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.lb-badge-right-label { font-size:9px; color:var(--t3); font-weight:700; text-align:center; letter-spacing:0.02em; }

/* ── Avatar (old, kept for podium compat) ── */
.lb-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
}

/* ── Value (legacy, used by podium) ── */
.lb-val-num {
  font-family:monospace;
  font-size:15px; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lb-val-pct { font-size:10px; color:var(--t3); margin-top:2px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.lb-row.rank-1 .lb-val-num { font-size:17px; }
.gain { color:var(--accent); }
.loss { color:#FF4C4C; }

/* ── Win-rate mini bar ── */
.lb-wr-bar { margin-top:5px; display:flex; align-items:center; gap:5px; }
.lb-wr-track { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.08); overflow:hidden; max-width:72px; }
.lb-wr-fill  { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--accent),#00e5a0); transition:width .5s ease; }
.lb-wr-label { font-size:10px; font-weight:700; color:var(--t3); font-variant-numeric:tabular-nums; flex-shrink:0; }

/* ── Bot emoji badge ── */
.lb-emoji { font-size:15px; line-height:1; flex-shrink:0; margin-left:2px; }

/* ══════════════════════════════════════════════════════════
   UNIFIED LEAGUE TABLE — shared by Weekly P&L + Division
   Flat data-table rows, thin dividers, minimal per-row chrome.
   ══════════════════════════════════════════════════════════ */
.lg-row {
  display:grid;
  grid-template-columns:28px 38px 1fr auto;
  align-items:center; gap:12px;
  padding:11px 12px;
  border-bottom:1px solid rgba(255,255,255,0.055);
  position:relative;
  transition:background .14s;
  cursor:pointer;
}
.lg-row:last-child { border-bottom:none; }
.lg-row:hover { background:rgba(255,255,255,0.03); }

.lg-rank {
  font-family:monospace; font-size:14px; font-weight:800;
  color:var(--t3); text-align:center; font-variant-numeric:tabular-nums;
}
.lg-row.top1 .lg-rank { color:#FFD27A; }
.lg-row.top2 .lg-rank { color:#C8C8DC; }
.lg-row.top3 .lg-rank { color:#CD8C52; }

.lg-id { min-width:0; }
.lg-name {
  font-size:13px; font-weight:700; color:var(--t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:6px;
}
.lg-sub { font-size:10.5px; color:var(--t3); margin-top:1px; white-space:nowrap; }
.lg-sub.promote  { color:rgba(0,255,140,0.85); font-weight:700; }
.lg-sub.relegate { color:rgba(248,113,113,0.85); font-weight:700; }

.lg-vals { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.lg-val { font-family:monospace; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lg-val.gain { color:var(--accent); }
.lg-val.loss { color:#FF4C4C; }
.lg-val.neu  { color:var(--t2); }
.lg-val-sub { font-size:10px; font-weight:700; font-family:monospace; white-space:nowrap; }
.lg-val-sub.gain { color:rgba(0,255,140,0.72); }
.lg-val-sub.loss { color:rgba(248,113,113,0.72); }

/* Top-3 faint medal tint */
.lg-row.top1 { background:linear-gradient(90deg,rgba(255,181,71,0.06),transparent 58%); }
.lg-row.top2 { background:linear-gradient(90deg,rgba(200,200,220,0.05),transparent 55%); }
.lg-row.top3 { background:linear-gradient(90deg,rgba(205,140,82,0.05),transparent 55%); }

/* "You" — subtle left marker + tint, no heavy box */
.lg-row.is-me,
.lg-row.top1.is-me, .lg-row.top2.is-me, .lg-row.top3.is-me {
  background:linear-gradient(90deg,rgba(0,255,140,0.09),transparent 70%);
}
.lg-row.is-me::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:2.5px;
  border-radius:2px; background:var(--accent); box-shadow:0 0 8px rgba(0,255,140,0.6);
}

.lg-you-tag {
  font-size:8px; font-weight:800; letter-spacing:0.06em;
  color:#00110a; background:var(--accent); padding:1px 5px; border-radius:4px; flex-shrink:0;
}
.lg-bot-tag {
  font-size:8px; color:rgba(255,255,255,0.32); background:rgba(255,255,255,0.06);
  padding:1px 5px; border-radius:4px; font-weight:700; flex-shrink:0;
}

/* ── Podium card ── */
.lb-podium {
  display:flex; align-items:flex-end; justify-content:center;
  gap:0; margin-bottom:14px; padding:44px 4px 0;
  position:relative;
}
.lb-pod-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:5px; cursor:pointer; position:relative;
}
.lb-pod-avatar-wrap { transition:transform .2s var(--ease-out); }
.lb-pod-item:hover .lb-pod-avatar { transform:none; }
.lb-pod-item:hover .lb-pod-avatar-wrap { transform:scale(1.06); }

/* Gold radial halo behind #1 */
.lb-pod-item.rank-1::before {
  content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,181,71,0.22) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}

.lb-pod-avatar {
  border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease-out); z-index:1;
}
.lb-pod-avatar.gold   { width:62px; height:62px; font-size:26px; box-shadow:0 0 28px rgba(255,181,71,0.65), 0 0 56px rgba(255,181,71,0.18); }
.lb-pod-avatar.silver { width:52px; height:52px; font-size:22px; box-shadow:0 0 14px rgba(200,200,220,0.38); }
.lb-pod-avatar.bronze { width:48px; height:48px; font-size:20px; box-shadow:0 0 12px rgba(205,140,82,0.38); }

/* Rank medal badge */
.lb-pod-badge {
  position:absolute; bottom:-5px; right:-5px;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:900; line-height:1;
  border:2px solid #0d0d0d; z-index:2;
}
.lb-pod-badge.gold   { background:linear-gradient(135deg,#FFD700,#E08000); color:#000; }
.lb-pod-badge.silver { background:linear-gradient(135deg,#E8E8F0,#9090A8); color:#000; }
.lb-pod-badge.bronze { background:linear-gradient(135deg,#E8A060,#8B4E20); color:#fff; }

.lb-pod-crown {
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  font-size:20px; line-height:1;
  filter:drop-shadow(0 0 8px rgba(255,181,71,0.9));
  z-index:1;
}
.lb-pod-name {
  font-size:11px; font-weight:800; color:var(--t1);
  text-align:center; max-width:80px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  z-index:1;
}
.lb-pod-val  { font-size:12px; font-weight:800; font-family:monospace; text-align:center; margin-bottom:4px; z-index:1; }
.lb-pod-val.gain { color:var(--accent); }
.lb-pod-val.loss { color:#FF4C4C; }
.lb-pod-val.rp   { color:var(--t2); }

.lb-pod-plinth {
  width:100%; border-radius:6px 6px 0 0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; color:rgba(255,255,255,0.13);
  letter-spacing:-0.02em; position:relative; overflow:hidden;
}
.lb-pod-plinth::after {
  content:''; position:absolute; top:0; left:8%; right:8%; height:1px; border-radius:1px;
}
.lb-pod-plinth.gold   { height:56px; background:linear-gradient(180deg,rgba(255,181,71,0.32) 0%,rgba(255,181,71,0.06) 100%); }
.lb-pod-plinth.gold::after   { background:rgba(255,181,71,0.85); box-shadow:0 0 8px rgba(255,181,71,0.6); }
.lb-pod-plinth.silver { height:40px; background:linear-gradient(180deg,rgba(200,200,220,0.20) 0%,rgba(200,200,220,0.04) 100%); }
.lb-pod-plinth.silver::after { background:rgba(200,200,220,0.55); }
.lb-pod-plinth.bronze { height:28px; background:linear-gradient(180deg,rgba(205,140,82,0.20) 0%,rgba(205,140,82,0.04) 100%); }
.lb-pod-plinth.bronze::after { background:rgba(205,140,82,0.55); }

/* ══ Leaderboard entrance animations (play-once via .lb-fresh) ══
   Gated to a one-shot class so the 30s background refresh never replays
   them — avoids flicker. */
@keyframes lbPodIn {
  0%   { opacity:0; transform:translateY(34px) scale(0.94); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes lbRowIn {
  0%   { opacity:0; transform:translateY(12px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes lbChampPulse {
  0%,100% { box-shadow:0 0 26px rgba(255,181,71,0.55), 0 0 52px rgba(255,181,71,0.16); }
  50%     { box-shadow:0 0 40px rgba(255,181,71,0.85), 0 0 78px rgba(255,181,71,0.30); }
}

.lb-fresh #lb-podium .lb-pod-item { animation:lbPodIn 0.72s var(--ease-out) backwards; }
/* markup order: 1=silver, 2=gold(center), 3=bronze — land the champion last */
.lb-fresh #lb-podium .lb-pod-item:nth-child(1) { animation-delay:0.06s; }
.lb-fresh #lb-podium .lb-pod-item:nth-child(3) { animation-delay:0.16s; }
.lb-fresh #lb-podium .lb-pod-item:nth-child(2) { animation-delay:0.30s; }

.lb-fresh #leaderboard-list .lg-row { animation:lbRowIn 0.5s var(--ease-out) backwards; }
.lb-fresh #leaderboard-list > :nth-child(1)  { animation-delay:0.34s; }
.lb-fresh #leaderboard-list > :nth-child(2)  { animation-delay:0.40s; }
.lb-fresh #leaderboard-list > :nth-child(3)  { animation-delay:0.46s; }
.lb-fresh #leaderboard-list > :nth-child(4)  { animation-delay:0.52s; }
.lb-fresh #leaderboard-list > :nth-child(5)  { animation-delay:0.58s; }
.lb-fresh #leaderboard-list > :nth-child(6)  { animation-delay:0.63s; }
.lb-fresh #leaderboard-list > :nth-child(7)  { animation-delay:0.68s; }
.lb-fresh #leaderboard-list > :nth-child(8)  { animation-delay:0.72s; }
.lb-fresh #leaderboard-list > :nth-child(9)  { animation-delay:0.76s; }
.lb-fresh #leaderboard-list > :nth-child(n+10) { animation-delay:0.80s; }

/* Champion avatar keeps a gentle continuous gold pulse (draws the eye) */
.lb-pod-avatar.gold { animation:lbChampPulse 2.6s ease-in-out infinite; }

/* "Podium Animation" cosmetic (Volcanic Entry) — rays burst + shockwave
   ring around the gold avatar. Same visual language/timing as the item's
   shop-preview mockup (ipm-ray-burst/ipm-shockwave near .ipm-pbar), but
   with its own keyframes: the podium version centers via margin (so it
   sits correctly on an avatar regardless of podium size), which needs
   transform left free for a plain scale — the original keyframes bake a
   translateX(-50%) into their transform for a different (top:0, no
   vertical centering) layout and would fight a 2D center.
   Gated to .lb-fresh like the rest of the podium's entrance, timed to
   fire just after the gold avatar itself lands (nth-child(2), 0.30s +
   0.72s ≈ settles around 1s) rather than overlapping its rise. Outside
   .lb-fresh these sit still — no idle animation, unlike the champion
   pulse above, since this is a one-time "entrance" moment. */
@keyframes lbVolcanicRayBurst {
  0%   { opacity:0; transform:scale(0.2); }
  55%  { opacity:1; }
  100% { opacity:0.45; transform:scale(1); }
}
@keyframes lbVolcanicShockwave {
  0%   { transform:scale(0); opacity:0.7; }
  100% { transform:scale(2.4); opacity:0; }
}
.lb-volcanic-rays, .lb-volcanic-shock { opacity:0; }
.lb-fresh .lb-volcanic-rays {
  animation:lbVolcanicRayBurst 0.7s ease-out 0.75s both;
}
.lb-fresh .lb-volcanic-shock {
  animation:lbVolcanicShockwave 0.55s ease-out 1s both;
}

/* ── League Challenge Card ── */
.lb-league-card {
  background:linear-gradient(135deg,rgba(0,201,167,0.08),rgba(0,102,255,0.06));
  border:1px solid rgba(0,201,167,0.22);
  border-radius:var(--r-md); padding:16px; margin-bottom:14px;
}
.lb-league-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.lb-league-badge {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; color:var(--accent);
  text-transform:uppercase; letter-spacing:0.08em;
}
.lb-league-badge-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px var(--accent); animation:pulse 2s ease-in-out infinite;
}
.lb-league-days { font-size:11px; font-weight:700; color:var(--t3); }
.lb-league-capital-row {
  display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:10px;
}
.lb-league-capital-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px; }
.lb-league-capital-amount {
  font-size:28px; font-weight:900; letter-spacing:-0.03em; color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.lb-league-your-return {
  text-align:right; flex-shrink:0;
}
.lb-league-return-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px; }
.lb-league-return-val {
  font-size:22px; font-weight:900; font-family:monospace; font-variant-numeric:tabular-nums;
}
.lb-league-return-val.gain { color:var(--accent); }
.lb-league-return-val.loss { color:#FF4C4C; }
.lb-league-return-val.neu  { color:var(--t3); }
.lb-league-desc { font-size:11px; color:var(--t3); line-height:1.4; }

/* ── League Portfolio & Trade ── */
.lq-cash-row {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid rgba(255,255,255,0.07); margin-top:4px;
}
.lq-cash-label { font-size:11px; color:var(--t3); font-weight:600; }
.lq-cash-val   { font-size:13px; font-weight:800; color:var(--t1); font-family:monospace; }

.lq-portfolio-card, .lq-trade-card {
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:var(--r-md); padding:14px; margin-bottom:10px;
}
.lq-section-label {
  font-size:10px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;
}
.lq-empty { font-size:12px; color:var(--t3); text-align:center; padding:12px 0; }

.lq-holding {
  display:flex; align-items:center; gap:8px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.lq-holding:last-child { border-bottom:none; padding-bottom:0; }
.lq-holding-ticker { font-size:13px; font-weight:800; color:var(--t1); min-width:44px; }
.lq-holding-shares { font-size:11px; color:var(--t3); font-weight:600; }
.lq-holding-val    { font-size:12px; font-weight:700; font-family:monospace; flex:1; text-align:right; }
.lq-holding-pnl    { font-size:12px; font-weight:800; font-family:monospace; min-width:52px; text-align:right; }
.lq-sell-btn {
  font-size:10px; font-weight:800; padding:4px 10px; border-radius:6px;
  background:rgba(255,76,76,0.12); border:1px solid rgba(255,76,76,0.25);
  color:#FF4C4C; cursor:pointer; flex-shrink:0;
  transition: background .15s;
}
.lq-sell-btn:hover { background:rgba(255,76,76,0.22); }

.lq-trade-row {
  display:flex; gap:8px; margin-bottom:10px;
}
.lq-select {
  flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--border-2);
  border-radius:8px; color:var(--t1); font-size:12px; font-weight:700;
  padding:8px 10px; cursor:pointer; outline:none;
}
.lq-qty-input {
  width:72px; background:rgba(255,255,255,0.05); border:1px solid var(--border-2);
  border-radius:8px; color:var(--t1); font-size:13px; font-weight:700;
  padding:8px 10px; outline:none; font-family:monospace; text-align:center;
}
.lq-price-row {
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:11px; flex-wrap:wrap;
}
.lq-price-label { color:var(--t3); font-weight:600; }
.lq-price-val   { color:var(--t1); font-weight:800; font-family:monospace; }
.lq-btn-row { display:flex; gap:8px; }
.lq-btn {
  flex:1; padding:11px; border-radius:10px; border:none;
  font-size:13px; font-weight:900; letter-spacing:0.04em; cursor:pointer;
  transition: opacity .15s, transform .1s;
}
.lq-btn:active { transform:scale(0.97); }
.lq-btn.buy  { background:var(--accent); color:#000; }
.lq-btn.sell { background:rgba(255,76,76,0.15); border:1px solid rgba(255,76,76,0.3); color:#FF4C4C; }

/* ═══ LEAGUE TRADE SCREEN ═══ */
#screen-league-trade { overflow:hidden; display:none; flex-direction:column; }
#screen-league-trade.active { display:flex; }
#screen-league-trade .screen-inner { flex:1; overflow-y:auto; padding-bottom:110px; padding-top:0; }
.lt-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; flex-shrink:0;
  border-bottom:1px solid var(--border);
  background:var(--bg); z-index:10;
}
.lt-back-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  color:var(--t2); padding:7px 12px; border-radius:20px;
  font-size:12px; font-weight:700; cursor:pointer; transition:background .15s; font-family:inherit;
}
.lt-back-btn:hover { background:rgba(255,255,255,0.1); }
.lt-screen-title { font-size:15px; font-weight:900; color:var(--t1); }
.lt-days-chip {
  font-size:10px; font-weight:800; padding:4px 10px; border-radius:20px;
  background:rgba(157,123,255,0.12); color:var(--violet); border:1px solid rgba(157,123,255,0.22);
}
.lt-hero {
  padding:20px 16px 18px;
  background:linear-gradient(160deg,rgba(157,123,255,0.07) 0%,transparent 65%);
  border-bottom:1px solid var(--border);
}
.lt-hero-eyebrow {
  font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.12em;
  display:flex; align-items:center; gap:6px; margin-bottom:10px;
}
.lt-hero-pulse { width:6px; height:6px; border-radius:50%; background:var(--violet); box-shadow:0 0 6px var(--violet); animation:pulse 2s infinite; flex-shrink:0; }
.lt-hero-capital { font-size:36px; font-weight:900; letter-spacing:-1.5px; color:var(--t1); line-height:1; }
.lt-hero-return { font-size:14px; font-weight:800; margin-top:5px; }
.lt-hero-return.pos { color:var(--accent); }
.lt-hero-return.neg { color:var(--loss); }
.lt-hero-return.neu { color:var(--t3); }
.lt-hero-bar-track { height:3px; background:rgba(255,255,255,0.07); border-radius:2px; margin:12px 0 0; overflow:hidden; }
.lt-hero-bar-fill { height:100%; border-radius:2px; transition:width .6s var(--ease-out); }
.lt-hero-bar-fill.pos { background:linear-gradient(90deg,#00cc6a,#00ff8c); }
.lt-hero-bar-fill.neg { background:linear-gradient(90deg,#cc2233,#ff4d6d); }
.lt-stat-strip { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(255,255,255,0.06); }
.lt-stat-box { padding:12px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.lt-stat-box + .lt-stat-box { border-left:1px solid rgba(255,255,255,0.05); }
.lt-stat-val { font-size:13px; font-weight:900; color:var(--t1); letter-spacing:-.02em; }
.lt-stat-val.pos { color:var(--accent); }
.lt-stat-val.neg { color:var(--loss); }
.lt-stat-lbl { font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.06em; }
.lt-section { padding:16px 16px 0; }
.lt-section-hdr { font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.lt-pos-empty {
  font-size:13px; color:var(--t3); text-align:center; padding:24px 16px;
  background:rgba(255,255,255,0.02); border-radius:12px; border:1px dashed rgba(255,255,255,0.08);
  line-height:1.6;
}
.lt-pos-card {
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; margin-bottom:8px;
  display:flex; align-items:center; gap:12px;
}
.lt-pos-ticker { font-size:14px; font-weight:900; color:var(--t1); }
.lt-pos-name { font-size:10px; color:var(--t3); margin-top:2px; }
.lt-pos-info { flex:1; text-align:right; }
.lt-pos-val { font-size:13px; font-weight:800; color:var(--t1); font-family:monospace; }
.lt-pos-pnl { font-size:11px; font-weight:800; font-family:monospace; margin-top:2px; }
.lt-pos-pnl.pos { color:var(--accent); }
.lt-pos-pnl.neg { color:var(--loss); }
.lt-pos-sell-btn {
  padding:7px 14px; border-radius:9px; border:1px solid rgba(255,76,76,0.3);
  background:rgba(255,76,76,0.08); color:#FF4C4C; font-size:11px; font-weight:800; cursor:pointer;
  transition:background .15s; flex-shrink:0; font-family:inherit;
}
.lt-pos-sell-btn:hover { background:rgba(255,76,76,0.18); }
.lt-market-hdr { padding:16px 16px 10px; }
.lt-market-search {
  width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; font-size:13px; color:var(--t1); outline:none; font-family:inherit;
}
.lt-market-search:focus { border-color:rgba(157,123,255,0.4); }
.lt-sector-btns { display:flex; gap:6px; margin-top:8px; }
.lt-sector-btn {
  flex:1; padding:7px 4px; border-radius:9px; border:1px solid var(--border);
  background:rgba(255,255,255,0.03); color:var(--t3); font-size:10px; font-weight:700; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s; font-family:inherit;
}
.lt-sector-btn.active { background:rgba(157,123,255,0.12); color:var(--violet); border-color:rgba(157,123,255,0.3); }
.lt-market-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:0 16px 16px; }
.lt-mkt-card {
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:12px; padding:12px 12px 10px; cursor:pointer;
  transition:background .15s, border-color .15s; overflow:hidden;
}
.lt-mkt-card:active { background:rgba(157,123,255,0.07); border-color:rgba(157,123,255,0.25); }
.lt-mkt-card.has-holding { border-color:rgba(0,255,140,0.28); }
.lt-mkt-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.lt-mkt-ticker { font-size:13px; font-weight:900; color:var(--t1); }
.lt-mkt-pct { font-size:11px; font-weight:800; }
.lt-mkt-pct.gain { color:var(--accent); }
.lt-mkt-pct.loss { color:var(--loss); }
.lt-mkt-name { font-size:9px; color:var(--t3); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-mkt-chart { height:26px; margin-bottom:6px; }
.lt-mkt-chart svg { width:100%; height:100%; display:block; }
.lt-mkt-bottom { display:flex; align-items:center; justify-content:space-between; }
.lt-mkt-price { font-size:12px; font-weight:800; color:var(--t1); font-family:monospace; }
.lt-mkt-held-badge {
  font-size:8px; font-weight:800; padding:2px 6px; border-radius:6px;
  background:rgba(0,255,140,0.1); color:var(--accent); border:1px solid rgba(0,255,140,0.2);
}
#lt-trade-panel {
  position:fixed; top:50%; left:50%; z-index:9002;
  width:min(94vw, 380px);
  background:linear-gradient(165deg,#121017 0%,#08080b 100%);
  border:1px solid rgba(157,123,255,0.24);
  border-radius:20px;
  padding:26px 22px 22px;
  transform:translate(-50%,-50%) scale(0.94);
  opacity:0;
  transition:transform .3s cubic-bezier(0.22,1,0.36,1), opacity .22s ease;
  box-shadow:0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(157,123,255,0.05), 0 0 46px rgba(157,123,255,0.12);
  pointer-events:none;
}
#lt-trade-panel::before {
  content:''; position:absolute; top:0; left:20px; right:20px; height:2px;
  background:linear-gradient(90deg, transparent, var(--violet), transparent);
  border-radius:2px;
}
#lt-trade-panel.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:all; }
#lt-tp-backdrop {
  position:fixed; inset:0; z-index:9001; background:rgba(0,0,0,0);
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  pointer-events:none; transition:background .3s, backdrop-filter .3s;
}
#lt-tp-backdrop.open { background:rgba(0,0,0,0.72); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); pointer-events:all; }
#lt-trade-panel .lt-tp-handle { display:none; }
.lt-tp-handle { width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,0.14); margin:0 auto 20px; }
.lt-tp-stock-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
#lt-trade-panel .lt-tp-close { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); }
#lt-trade-panel .lt-tp-input { background:rgba(255,255,255,0.045); border-radius:14px; border-color:rgba(255,255,255,0.09); }
#lt-trade-panel .lt-tp-input:focus { border-color:rgba(157,123,255,0.55); box-shadow:0 0 0 3px rgba(157,123,255,0.12); }
#lt-trade-panel .lt-tp-price-row { border-radius:13px; }
#lt-trade-panel .lt-tp-total-row { border-radius:14px; background:rgba(157,123,255,0.06); border:1px solid rgba(157,123,255,0.14); }
.lt-tp-ticker-txt { font-size:22px; font-weight:900; color:var(--t1); }
.lt-tp-stock-name { font-size:11px; color:var(--t3); margin-top:3px; }
.lt-tp-badge { font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px; margin-left:10px; }
.lt-tp-badge.buy  { background:rgba(0,255,140,0.12); color:var(--accent); border:1px solid rgba(0,255,140,0.25); }
.lt-tp-badge.sell { background:rgba(255,59,92,0.12); color:var(--loss); border:1px solid rgba(255,59,92,0.25); }
.lt-tp-close {
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05); color:var(--t3); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lt-tp-input-label { font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.lt-tp-input {
  width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:11px; padding:14px 16px; font-size:22px; font-weight:700; color:var(--t1);
  outline:none; transition:border-color .2s; font-family:inherit; margin-bottom:12px;
}
.lt-tp-input:focus { border-color:rgba(157,123,255,0.5); }
.lt-tp-price-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:rgba(255,255,255,0.03); border-radius:10px;
  border:1px solid rgba(255,255,255,0.06); margin-bottom:12px;
}
.lt-tp-price-label { font-size:11px; color:var(--t3); }
.lt-tp-price-val { font-size:14px; font-weight:800; color:var(--t1); }
.lt-tp-total-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; background:rgba(0,0,0,0.28); border-radius:12px; margin-bottom:16px;
}
.lt-tp-total-label { font-size:12px; color:var(--t3); }
.lt-tp-total-cash { font-size:10px; color:var(--t3); margin-top:2px; }
.lt-tp-total-val { font-size:20px; font-weight:900; color:var(--t1); }
.lt-tp-btns { display:flex; gap:10px; }
.lt-tp-confirm {
  flex:2; padding:15px; border-radius:13px; border:none; font-size:15px; font-weight:800; cursor:pointer;
  transition:opacity .15s; font-family:inherit;
}
.lt-tp-confirm.buy  { background:linear-gradient(135deg,#00ff8c,#00e5ff); color:#040e08; box-shadow:0 4px 20px rgba(0,255,140,0.28); }
.lt-tp-confirm.sell { background:linear-gradient(135deg,#ff3b5c,#ff6b35); color:#fff; box-shadow:0 4px 20px rgba(255,59,92,0.28); }
#lt-trade-panel .lt-tp-confirm.buy  { box-shadow:0 6px 22px rgba(0,255,140,0.35), 0 0 26px rgba(0,255,140,0.28); }
#lt-trade-panel .lt-tp-confirm.buy:hover  { box-shadow:0 6px 26px rgba(0,255,140,0.45), 0 0 34px rgba(0,255,140,0.4); }
#lt-trade-panel .lt-tp-confirm.sell { box-shadow:0 6px 22px rgba(255,59,92,0.35), 0 0 26px rgba(255,107,53,0.28); }
#lt-trade-panel .lt-tp-confirm.sell:hover { box-shadow:0 6px 26px rgba(255,59,92,0.45), 0 0 34px rgba(255,107,53,0.4); }
.lt-tp-cancel { flex:1; padding:15px; border-radius:13px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:var(--t2); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ── Division zone labels ── */
.lb-zone-label {
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  padding:4px 10px; margin:4px 0 2px; border-radius:4px;
  display:flex; align-items:center; gap:5px;
}
.lb-zone-label.promote { color:#00e57a; background:rgba(0,229,122,0.08); }
.lb-zone-label.safe    { color:var(--t3); }
.lb-zone-label.relegate{ color:#FF4C4C; background:rgba(255,76,76,0.08); }

/* ── "Your position" sticky pill ── */
.lb-sticky-pos {
  position:sticky; bottom:0; left:0; right:0;
  padding:8px 0 4px;
  background:linear-gradient(0deg, var(--bg) 70%, transparent);
  display:none;
}
.lb-sticky-inner {
  display:flex; align-items:center; gap:10px;
  background:rgba(0,201,167,0.12); border:1px solid rgba(0,201,167,0.3);
  border-radius:12px; padding:9px 14px;
}
.lb-sticky-left { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.lb-sticky-pos-num { font-size:16px; font-weight:900; color:var(--accent); font-family:monospace; line-height:1; }
.lb-sticky-pct { font-size:10px; font-weight:800; letter-spacing:0.02em; line-height:1; }
.lb-sticky-name  { flex:1; font-size:13px; font-weight:700; color:var(--t1); }
.lb-sticky-val   { font-size:13px; font-weight:800; font-family:monospace; }

/* lb-info explain icon SVG color */
.lb-info-explain-icon svg { stroke: var(--accent); }

/* ═══════════════════════════════
   BOT PROFILE MODAL
═══════════════════════════════ */
.bp-overlay {
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  align-items:flex-end; justify-content:center;
}
.bp-overlay.open { display:flex; }
.bp-sheet {
  width:100%; max-width:480px;
  background:var(--bg2); border-radius:24px 24px 0 0;
  border:1px solid var(--border-2); border-bottom:none;
  overflow:hidden; max-height:90vh; overflow-y:auto;
  animation:slideUp 0.28s var(--ease-out);
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.bp-banner {
  height:110px; width:100%;
  background:linear-gradient(135deg,#1a2a4a,#0d1224);
  flex-shrink:0;
}
/* Identity block: avatar + name + rank below the banner */
.bp-identity {
  display:flex; flex-direction:column; align-items:center;
  padding:0 20px 18px; margin-top:-36px;
  border-bottom:1px solid var(--border);
  text-align:center;
}
.bp-avatar {
  width:72px; height:72px; border-radius:50%; flex-shrink:0;
  background:var(--bg2); border:4px solid var(--bg2);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  margin-bottom:10px;
}
.bp-name { font-size:20px; font-weight:900; letter-spacing:-0.02em; color:var(--t1); }
.bp-rank-label { font-size:12px; font-weight:700; margin-top:3px; margin-bottom:12px; }
.bp-follow-btn {
  padding:9px 28px; border-radius:20px; border:none; cursor:pointer;
  font-size:12px; font-weight:800; letter-spacing:0.04em;
  transition:all 0.18s var(--ease-out);
}
.bp-follow-btn.following {
  background:rgba(0,201,167,0.12); color:var(--accent);
  box-shadow:0 0 0 1px rgba(0,201,167,0.3);
}
.bp-follow-btn.not-following {
  background:var(--grad-accent); color:#0a1628;
}
.bp-tagline {
  font-size:12px; color:var(--t3); font-style:italic;
  padding:12px 20px 0; line-height:1.5; text-align:center;
}
.bp-stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:16px 20px; gap:8px; border-bottom:1px solid var(--border);
}
.bp-stat { text-align:center; }
.bp-stat-val { font-family:monospace; font-size:13px; font-weight:800; }
.bp-stat-key { font-size:10px; color:var(--t3); font-weight:600; margin-top:3px; text-transform:uppercase; letter-spacing:0.05em; }
.bp-section-label {
  font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase;
  letter-spacing:0.08em; padding:14px 20px 8px;
}
/* Top Trades cards */
.bp-top-trades { display:flex; flex-direction:column; gap:8px; padding:0 16px; }
.bp-top-trade-card {
  display:flex; align-items:center; gap:12px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 14px;
  transition:border-color 0.15s;
}
.bp-top-trade-card:hover { border-color:var(--border-2); }
.bp-ttc-left { flex:1; min-width:0; }
.bp-ttc-ticker {
  font-size:14px; font-weight:900; letter-spacing:0.01em; color:var(--t1);
  display:flex; align-items:center; gap:6px; margin-bottom:3px;
}
.bp-ttc-action {
  font-size:9px; font-weight:800; padding:2px 6px; border-radius:4px; letter-spacing:0.06em;
}
.bp-ttc-action.buy  { background:rgba(0,255,140,0.15); color:var(--accent); }
.bp-ttc-action.sell { background:rgba(255,59,92,0.15);  color:var(--loss); }
.bp-ttc-date { font-size:11px; color:var(--t3); font-weight:500; }
.bp-ttc-pct {
  font-family:monospace; font-size:15px; font-weight:800;
  min-width:52px; text-align:right;
}
.bp-ttc-pct.gain { color:var(--accent); }
.bp-ttc-pct.loss { color:var(--loss); }
.bp-copy-btn {
  padding:7px 13px; border-radius:10px; border:none; cursor:pointer;
  font-size:11px; font-weight:800; letter-spacing:0.03em;
  background:rgba(0,255,140,0.10); color:var(--accent);
  border:1px solid rgba(0,255,140,0.22);
  transition:all 0.15s var(--ease-out); white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.bp-copy-btn:hover { background:rgba(0,255,140,0.2); border-color:var(--accent); }
.bp-copy-btn.copied {
  background:rgba(0,255,140,0.18); color:var(--accent);
  border-color:var(--accent); pointer-events:none;
}
.bp-joined {
  font-size:11px; color:var(--t3); text-align:center;
  padding:12px 20px 0; font-weight:600;
}
.bp-view-full {
  display:block; width:calc(100% - 32px); margin:12px 16px 24px;
  padding:11px; border-radius:var(--r-md); border:1px solid var(--border-2);
  background:var(--surface); color:var(--t2);
  font-size:13px; font-weight:700; cursor:pointer; text-align:center;
  transition:all 0.15s var(--ease-out); font-family:'Inter',sans-serif;
}
.bp-view-full:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* Public Baskets in bot profile */
.bp-basket-card {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--border);
}
.bp-basket-card:last-child { border-bottom:none; }
.bp-basket-info { flex:1; min-width:0; }
.bp-basket-name { font-size:12px; font-weight:800; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bp-basket-tickers { font-size:10px; color:var(--t3); margin-top:2px; display:flex; gap:4px; flex-wrap:wrap; }
.bp-basket-ticker-chip { background:var(--bg3); border-radius:4px; padding:1px 5px; font-weight:700; }
.bp-basket-ret { font-size:12px; font-weight:800; white-space:nowrap; margin-right:6px; }
.bp-basket-copy-btn {
  padding:5px 10px; border-radius:7px; border:1px solid rgba(0,255,140,0.3);
  background:rgba(0,255,140,0.07); color:var(--accent); font-size:10px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s; white-space:nowrap;
}
.bp-basket-copy-btn:hover { background:rgba(0,255,140,0.15); border-color:var(--accent); }
.bp-baskets-lock {
  padding:14px 16px; text-align:center; color:var(--t3); font-size:12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.bp-baskets-lock-btn {
  padding:6px 14px; border-radius:8px; background:var(--accent); color:#000;
  font-size:11px; font-weight:700; border:none; cursor:pointer; font-family:'Inter',sans-serif;
}

/* ═══════════════════════════════
   PROFILE SCREEN
═══════════════════════════════ */
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.profile-grid-full { grid-column:1/-1; }
.stats-list { display:flex; flex-direction:column; gap:0; }
.stats-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.stats-row:last-child { border-bottom:none; }
.stats-row-label { color:var(--t2); }
.stats-row-val { font-weight:700; }

/* Backup section */
.backup-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.backup-item {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 12px;
}
.backup-label { font-size:12px; color:var(--t2); font-weight:600; }
.restore-btn {
  background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:5px 10px; color:var(--t2);
  font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s;
  font-family:'Inter',sans-serif;
}
.restore-btn:hover { border-color:var(--accent); color:var(--accent); }
.backup-actions { display:flex; gap:8px; margin-top:10px; }
.backup-btn {
  flex:1; padding:11px; border:none; border-radius:var(--r-sm);
  font-size:13px; font-weight:700; cursor:pointer; transition:all 0.15s;
  font-family:'Inter',sans-serif;
}
.backup-btn.primary { background:var(--accent-dim); border:1px solid rgba(0,255,128,0.2); color:var(--accent); }
.backup-btn.primary:hover { background:rgba(0,255,128,0.18); }
.no-backups { font-size:12px; color:var(--t3); text-align:center; padding:16px 0; }

/* ═══════════════════════════════
   TRADER HERO CARD
═══════════════════════════════ */
.profile-card { padding:0 !important; margin-bottom:16px; overflow:visible; }

/* XP progress bar in profile */
.profile-xp-wrap {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border);
}
.profile-xp-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.profile-xp-label {
  font-size: 13px; font-weight: 800; color: var(--t1); letter-spacing: 0.02em;
}
.profile-xp-count {
  font-size: 12px; font-weight: 700; color: var(--accent);
}
.profile-xp-track {
  height: 8px; background: rgba(255,255,255,0.06); border-radius: 8px;
  overflow: hidden; margin-bottom: 8px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.profile-xp-fill {
  height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 0.6s var(--ease-out);
}
.profile-xp-footer {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: var(--t3);
}
.profile-xp-next-name { color: var(--t2); }

/* ── Trophy Case ─────────────────────────────────────────── */
.trophy-case {
  margin: 0 24px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.trophy-case-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 0;
}
.trophy-case-title {
  font-size: 10px; font-weight: 800; color: var(--t3);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.trophy-case-edit {
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 0;
}
.trophy-slots {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; padding: 12px 18px 16px;
}
.trophy-slot {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; cursor: pointer;
}
.trophy-slot-badge {
  width: 64px; height: 64px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: transform 0.15s;
}
.trophy-slot-badge.earned {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.trophy-slot-badge.earned:hover { transform: translateY(-2px); }
.trophy-slot-badge.empty {
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
}
.trophy-slot-name {
  font-size: 10px; font-weight: 700; color: var(--t3);
  text-align: center; line-height: 1.2; max-width: 70px;
}
.trophy-slot-name.earned { color: var(--t2); }
.trophy-case-footer {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.trophy-view-all {
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 0;
}
.trophy-earned-count {
  font-size: 11px; color: var(--t3); font-weight: 600;
}
.trophy-slot-remove {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ff4444; border: 1.5px solid #0f0f0f;
  color: #fff; font-size: 10px; font-weight: 900;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
}
.trophy-case.edit-mode .trophy-slot-remove { display: flex; }

/* Badge All Modal */
.badge-modal-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
}
.badge-modal-overlay.hidden { display: none; }
/* ── Modal logo inline with title ── */
.badge-modal-title, .prestige-modal-title, .basket-modal-title,
.plan-modal-title, .clan-modal-title, .apply-modal-title,
.coach-modal-title, .news-modal-title, .legal-modal-title,
.export-modal-title {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.badge-modal-title::before, .prestige-modal-title::before, .basket-modal-title::before,
.plan-modal-title::before, .clan-modal-title::before, .apply-modal-title::before,
.coach-modal-title::before, .news-modal-title::before, .legal-modal-title::before,
.export-modal-title::before {
  content: '';
  display: inline-block;
  width: 22px; height: 22px;
  background: url('../assets/logo_white.png') center/contain no-repeat;
  flex-shrink: 0;
  opacity: 0.9;
}

.badge-modal {
  width: 100%; max-width: 520px;
  background: #0d0d0d; border-radius: 24px 24px 0 0;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 24px 20px 32px; max-height: 92vh; overflow-y: auto;
}
.badge-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.badge-modal-title {
  font-size: 16px; font-weight: 900; color: var(--t1);
}
.badge-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: none; cursor: pointer;
  color: var(--t2); font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.badge-modal-sub {
  font-size: 12px; color: var(--t3); margin-bottom: 20px;
}
.badge-modal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding-bottom: 16px;
}
.badge-grid-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
}
.badge-grid-icon {
  width: 60px; height: 60px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.badge-grid-icon.earned {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.badge-grid-icon.earned:hover { transform: scale(1.08); }
.badge-grid-icon.locked {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  filter: grayscale(1); opacity: 0.3;
}
.badge-grid-icon.equipped {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0,255,140,0.2);
}
.badge-grid-name {
  font-size: 9px; font-weight: 700; color: var(--t3);
  text-align: center; line-height: 1.2;
}
.badge-grid-name.earned { color: var(--t2); }
.badge-equip-hint {
  font-size: 10px; color: var(--accent); font-weight: 700;
  text-align: center; margin-top: 16px;
}

/* ── Prestige Panel ─────────────────────────────────────── */
.prestige-panel {
  margin: 0 24px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,200,0,0.18);
  background: linear-gradient(135deg, rgba(255,200,0,0.05) 0%, rgba(255,140,0,0.03) 100%);
  overflow: hidden;
}
.prestige-panel-inner { padding: 16px 18px; }
.prestige-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.prestige-panel-title {
  font-size: 10px; font-weight: 800; color: rgba(255,200,0,0.7);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.prestige-tier-badge {
  font-size: 11px; font-weight: 800; color: #ffd700;
  background: rgba(255,200,0,0.12); border: 1px solid rgba(255,200,0,0.25);
  padding: 3px 10px; border-radius: 20px;
}
.prestige-dots {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.prestige-dot {
  flex: 1; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  transition: background 0.4s;
}
.prestige-dot.filled { background: linear-gradient(90deg, #ffd700, #ffaa00); box-shadow: 0 0 6px rgba(255,200,0,0.5); }
.prestige-progress-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--t3);
}
.prestige-progress-lbl { font-weight: 600; }
.prestige-progress-val { font-weight: 700; color: var(--t2); }
.prestige-multiplier {
  font-size: 12px; font-weight: 700; color: #ffd700;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,200,0,0.12);
  display: flex; align-items: center; gap: 6px;
}
.prestige-multiplier svg { flex-shrink: 0; }

/* Prestige button — glows when eligible */
.prestige-btn-wrap { padding: 0 18px 16px; }
.prestige-btn {
  width: 100%; padding: 13px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 900; letter-spacing: 0.05em;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a0e00;
  box-shadow: 0 4px 20px rgba(255,200,0,0.35);
  animation: prestige-pulse 2.2s ease-in-out infinite;
  transition: transform 0.15s;
}
.prestige-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,200,0,0.5); }
@keyframes prestige-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(255,200,0,0.35); }
  50%      { box-shadow: 0 4px 32px rgba(255,200,0,0.65); }
}

/* Prestige confirm modal */
.prestige-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.prestige-modal-overlay.hidden { display: none; }
.prestige-modal {
  width: min(400px, calc(100vw - 40px));
  background: #0f0f0f; border: 1px solid rgba(255,200,0,0.25);
  border-radius: 24px; padding: 32px 28px; text-align: center;
  box-shadow: 0 24px 80px rgba(255,200,0,0.12);
}
.prestige-modal-icon {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%; background: rgba(255,200,0,0.1);
  border: 1px solid rgba(255,200,0,0.3);
  display: flex; align-items: center; justify-content: center;
}
.prestige-modal-title {
  font-size: 22px; font-weight: 900; color: #ffd700; margin-bottom: 8px;
}
.prestige-modal-sub {
  font-size: 13px; color: var(--t3); margin-bottom: 24px; line-height: 1.5;
}
.prestige-modal-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  background: rgba(255,255,255,0.03); border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.prestige-modal-list li {
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.prestige-modal-list li:last-child { border-bottom: none; }
.prestige-modal-list li .pm-keep { color: #00ff8c; font-size: 16px; }
.prestige-modal-list li .pm-lose { color: #ff4444; font-size: 16px; }
.prestige-modal-list li span:last-child { color: var(--t2); }
.prestige-modal-reward {
  font-size: 15px; font-weight: 800; color: #ffd700; margin-bottom: 20px;
  padding: 12px; background: rgba(255,200,0,0.08);
  border-radius: 10px; border: 1px solid rgba(255,200,0,0.2);
}
.prestige-countdown-bar-wrap {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: 6px;
  overflow: hidden; margin-bottom: 16px;
}
.prestige-countdown-bar {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #ffd700, #ffaa00);
  transition: width 1s linear;
}
.prestige-countdown-label {
  font-size: 12px; color: var(--t3); margin-bottom: 20px;
}
.prestige-modal-actions { display: flex; gap: 10px; }
.prestige-modal-cancel {
  flex: 1; padding: 12px; border-radius: 11px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--t2); font-size: 14px; font-weight: 700; cursor: pointer;
}
.prestige-modal-confirm {
  flex: 2; padding: 12px; border-radius: 11px; border: none;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a0e00; font-size: 14px; font-weight: 900; cursor: pointer;
  opacity: 0.4; pointer-events: none; transition: opacity 0.3s;
}
.prestige-modal-confirm.ready { opacity: 1; pointer-events: auto; }

.profile-banner-strip {
  height: 200px;
  width: 100%;
  background:linear-gradient(160deg, rgba(35,224,138,0.16) 0%, rgba(10,11,14,0.5) 55%, var(--surface) 100%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  position: relative;
}
.profile-edit-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:99px;
  background:var(--surface); backdrop-filter:blur(10px);
  border:1px solid var(--border-2);
  color:var(--t2); font-size:12px; font-weight:600;
  cursor:pointer; transition:all 0.18s var(--ease-out);
  letter-spacing:0.02em; flex-shrink:0; white-space:nowrap;
}
.profile-edit-btn:hover { border-color:var(--accent); color:var(--accent); }
/* not following — default muted, hover = green */
.profile-edit-btn[data-follow="true"]        { color:var(--t2); border-color:var(--border-2); }
.profile-edit-btn[data-follow="true"]:hover  { color:var(--accent); border-color:rgba(0,201,167,0.6); background:rgba(0,201,167,0.08); }
/* following — default green, hover = red + Unfollow */
.profile-edit-btn[data-follow="false"]       { color:var(--accent); border-color:rgba(0,201,167,0.5); }
.profile-edit-btn[data-follow="false"]:hover { color:#ff3c3c; border-color:rgba(255,60,60,0.6); background:rgba(255,60,60,0.08); }
.profile-edit-btn svg { flex-shrink:0; }

/* Banner hover overlay */
.profile-banner-strip .banner-edit-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.0);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.2s;
  opacity:0; pointer-events:none;
}
.profile-edit-mode .profile-banner-strip .banner-edit-overlay {
  opacity:1; pointer-events:auto;
}
.profile-edit-mode .profile-banner-strip:hover .banner-edit-overlay {
  background:rgba(0,0,0,0.45);
}
.banner-edit-overlay-label {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#fff; font-size:12px; font-weight:600; opacity:0;
  transition:opacity 0.2s;
}
.profile-edit-mode .profile-banner-strip:hover .banner-edit-overlay-label { opacity:1; }
/* In-situ banner editor */
.profile-banner-strip.banner-live-editing { cursor:grab; }
.profile-banner-strip.banner-live-editing:active { cursor:grabbing; }
.banner-live-edit-bar {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; z-index:200;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.12); border-radius:99px;
  padding:6px 10px;
}
.banner-live-btn {
  border:none; border-radius:99px; padding:5px 14px;
  font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
}
.banner-live-cancel { background:rgba(255,255,255,0.1); color:#fff; }
.banner-live-cancel:hover { background:rgba(255,59,92,0.3); }
.banner-live-done   { background:var(--accent); color:#000; }
.banner-live-done:hover { filter:brightness(1.1); }
.banner-live-hint   { font-size:11px; color:rgba(255,255,255,0.55); padding:0 4px; }

/* Avatar hover overlay in edit mode */
.profile-banner-avatar { cursor:default; }
.profile-edit-mode .profile-banner-avatar { cursor:pointer; }
.profile-avatar-edit-ring {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(0,0,0,0.0);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s; opacity:0; pointer-events:none;
}
.profile-edit-mode .profile-avatar-edit-ring {
  opacity:1; pointer-events:auto;
}
.profile-edit-mode .profile-banner-avatar:hover .profile-avatar-edit-ring {
  background:rgba(0,0,0,0.5);
}
.profile-avatar-edit-icon {
  opacity:0; transition:opacity 0.2s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#fff; font-size:11px; font-weight:600;
}
.profile-edit-mode .profile-banner-avatar:hover .profile-avatar-edit-icon { opacity:1; }

/* Edit mode border pulse on banner & avatar */
.profile-edit-mode .profile-banner-strip {
  outline:2px dashed rgba(0,255,140,0.4);
  outline-offset:-2px;
}
.profile-edit-mode .profile-banner-avatar {
  outline:2px dashed rgba(0,255,140,0.4);
  outline-offset:3px;
}

/* ── Profile image edit modal ── */
.profile-img-modal-backdrop {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.profile-img-modal-backdrop.open { opacity:1; pointer-events:auto; }
.profile-img-modal {
  background:var(--bg2); border:1px solid var(--border-2);
  border-radius:var(--r-xl); padding:28px;
  width:340px; max-width:92vw;
  transform:translateY(16px); transition:transform 0.22s var(--ease-out);
  box-shadow:var(--shadow-lg);
}
.profile-img-modal-backdrop.open .profile-img-modal { transform:translateY(0); }
.pim-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.pim-sub { font-size:12px; color:var(--t3); margin-bottom:20px; }
.pim-upload-area {
  border:2px dashed var(--border-2); border-radius:var(--r-lg);
  padding:28px 16px; text-align:center; cursor:pointer;
  transition:border-color 0.18s, background 0.18s;
  margin-bottom:16px;
}
.pim-upload-area:hover { border-color:var(--accent); background:var(--accent-dim); }
.pim-upload-icon { font-size:28px; margin-bottom:8px; }
.pim-upload-label { font-size:13px; color:var(--t2); font-weight:500; }
.pim-upload-hint { font-size:11px; color:var(--t3); margin-top:4px; }
.pim-preview {
  width:100%; aspect-ratio:16/9; border-radius:var(--r-md);
  object-fit:cover; margin-bottom:16px;
  border:1px solid var(--border); display:none;
}
.pim-preview.avatar-preview {
  aspect-ratio:1; border-radius:50%; width:100px; height:100px;
  margin:0 auto 16px;
}
.pim-actions { display:flex; gap:10px; }
.pim-btn { flex:1; padding:10px; border-radius:var(--r-md); font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all 0.18s; }
.pim-btn-cancel { background:var(--surface); color:var(--t2); }
.pim-btn-cancel:hover { background:var(--surface-h); color:var(--t1); }
.pim-btn-save { background:var(--grad-accent); color:#000; }
.pim-btn-save:hover { opacity:0.88; }
.pim-btn-remove { background:var(--loss-dim); color:var(--loss-2); border:1px solid rgba(255,59,92,0.2); }
.pim-btn-remove:hover { background:rgba(255,59,92,0.2); }

/* ── Image editor (canvas zoom/pan) ── */
.pim-canvas-wrap {
  display:none; margin-bottom:10px;
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--border-2); position:relative;
  touch-action:none;
}
#pim-canvas {
  display:block; width:100%; cursor:grab;
}
#pim-canvas.grabbing { cursor:grabbing; }
.pim-editor-hint {
  display:none; font-size:11px; color:var(--t3);
  text-align:center; margin-bottom:12px;
}

/* ── Avatar animation classes ── */
@keyframes anim-glitch {
  0%,90%,100% { transform:translate(0); filter:none; }
  91%  { transform:translate(-3px,1px);  filter:hue-rotate(90deg) saturate(5) brightness(1.3); }
  93%  { transform:translate(3px,-1px);  filter:hue-rotate(-90deg) saturate(5) brightness(0.8); }
  95%  { transform:translate(-2px,2px);  filter:hue-rotate(180deg) saturate(3); }
  97%  { transform:translate(2px,0);     filter:brightness(1.5) contrast(2); }
}
@keyframes anim-pulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(0,255,140,0); }
  50%     { transform:scale(1.05); box-shadow:0 0 0 6px rgba(0,255,140,0.3),0 0 24px rgba(0,255,140,0.4); }
}
@keyframes anim-neon-ring {
  0%   { box-shadow:0 0 0 3px hsl(150,100%,50%),0 0 14px hsl(150,100%,50%); }
  25%  { box-shadow:0 0 0 3px hsl(195,100%,55%),0 0 14px hsl(195,100%,55%); }
  50%  { box-shadow:0 0 0 3px hsl(275,100%,65%),0 0 14px hsl(275,100%,65%); }
  75%  { box-shadow:0 0 0 3px hsl(320,100%,60%),0 0 14px hsl(320,100%,60%); }
  100% { box-shadow:0 0 0 3px hsl(150,100%,50%),0 0 14px hsl(150,100%,50%); }
}
@keyframes anim-shake {
  0%,80%,100% { transform:translate(0); }
  82% { transform:translate(-3px,1px); }
  84% { transform:translate(3px,-1px); }
  86% { transform:translate(-2px,-2px); }
  88% { transform:translate(2px,2px); }
  90% { transform:translate(-3px,0); }
  92% { transform:translate(1px,-2px); }
}
@keyframes anim-breathe {
  0%,100% { transform:scale(1); filter:brightness(1); }
  50%     { transform:scale(1.07); filter:brightness(1.12); }
}
@keyframes anim-flicker {
  0%,88%,100% { opacity:1; filter:brightness(1); }
  90%  { opacity:0.2; filter:brightness(3); }
  92%  { opacity:1;   filter:brightness(1); }
  94%  { opacity:0.6; filter:brightness(1.8); }
  96%  { opacity:1;   filter:brightness(1); }
  98%  { opacity:0.3; filter:brightness(2.5); }
  99%  { opacity:1; }
}
.avatar-anim-glitch    { animation:anim-glitch    2.2s steps(1) infinite; }
.avatar-anim-pulse     { animation:anim-pulse     1.8s ease-in-out infinite; }
.avatar-anim-neon-ring { animation:anim-neon-ring 3s   linear    infinite; }
.avatar-anim-shake     { animation:anim-shake     1.4s ease-in-out infinite; }
.avatar-anim-breathe   { animation:anim-breathe   3.5s ease-in-out infinite; }
.avatar-anim-flicker   { animation:anim-flicker   2.5s steps(1,end) infinite; }

/* ── 16 new avatar animations ── */
@keyframes anim-orbit {
  0%   { box-shadow:8px 0 0 3px rgba(0,255,140,1),0 0 16px rgba(0,255,140,0.25); }
  25%  { box-shadow:0 8px 0 3px rgba(0,255,140,1),0 0 16px rgba(0,255,140,0.25); }
  50%  { box-shadow:-8px 0 0 3px rgba(0,255,140,1),0 0 16px rgba(0,255,140,0.25); }
  75%  { box-shadow:0 -8px 0 3px rgba(0,255,140,1),0 0 16px rgba(0,255,140,0.25); }
  100% { box-shadow:8px 0 0 3px rgba(0,255,140,1),0 0 16px rgba(0,255,140,0.25); }
}
@keyframes anim-radar {
  0%   { box-shadow:0 0 0 0 rgba(0,255,140,0.8),0 0 0 0 rgba(0,255,140,0.3); }
  70%  { box-shadow:0 0 0 16px rgba(0,255,140,0),0 0 0 8px rgba(0,255,140,0.08); }
  100% { box-shadow:0 0 0 16px rgba(0,255,140,0),0 0 0 16px rgba(0,255,140,0); }
}
@keyframes anim-electric {
  0%,84%,100% { box-shadow:none; filter:none; }
  86% { box-shadow:-3px 0 8px 2px rgba(46,230,255,0.9),3px 0 5px rgba(255,255,255,0.5); filter:brightness(1.5); }
  88% { box-shadow:none; filter:none; }
  91% { box-shadow:0 -2px 6px 2px rgba(46,230,255,0.8),0 2px 4px rgba(255,255,255,0.3); filter:brightness(1.3); }
  93% { box-shadow:none; filter:none; }
  96% { box-shadow:2px 1px 8px 2px rgba(46,230,255,0.8); filter:brightness(1.4) contrast(1.2); }
}
@keyframes anim-heat-wave {
  0%,100% { transform:scaleY(1) skewX(0deg); filter:brightness(1) saturate(1); }
  25%  { transform:scaleY(1.02) skewX(0.6deg); filter:brightness(1.06) saturate(1.5); }
  50%  { transform:scaleY(0.99) skewX(-0.5deg); filter:brightness(0.97) saturate(0.8); }
  75%  { transform:scaleY(1.01) skewX(0.3deg); filter:brightness(1.03) saturate(1.2); }
}
@keyframes anim-gold-rush {
  0%,100% { box-shadow:0 0 8px 2px rgba(255,190,0,0.2); filter:brightness(1) sepia(0.1); }
  50%     { box-shadow:0 0 24px 8px rgba(255,185,0,0.55),0 0 50px 14px rgba(255,160,0,0.15); filter:brightness(1.2) sepia(0.4) saturate(1.5); }
}
@keyframes anim-prism {
  0% { filter:hue-rotate(0deg) saturate(2) brightness(1.1); }
  100% { filter:hue-rotate(360deg) saturate(2) brightness(1.1); }
}
@keyframes anim-hologram {
  0%,100% { opacity:1; filter:brightness(1) hue-rotate(0deg) saturate(1); box-shadow:0 0 6px rgba(46,230,255,0.2); }
  20%  { opacity:0.8; filter:brightness(1.4) hue-rotate(15deg) saturate(2.2); box-shadow:0 0 16px rgba(46,230,255,0.55); }
  40%  { opacity:1; filter:brightness(0.88) hue-rotate(-8deg); }
  60%  { opacity:0.9; filter:brightness(1.3) hue-rotate(10deg) saturate(1.8); box-shadow:0 0 12px rgba(46,230,255,0.4); }
}
@keyframes anim-diamond {
  0%,88%,100% { filter:brightness(1); box-shadow:0 0 8px rgba(200,230,255,0.15); }
  91%  { filter:brightness(1.9) contrast(1.2) saturate(0.5); box-shadow:0 0 26px rgba(255,255,255,0.95),0 0 55px rgba(200,230,255,0.4); }
  93%  { filter:brightness(1); box-shadow:0 0 8px rgba(200,230,255,0.15); }
  96%  { filter:brightness(1.5); box-shadow:0 0 14px rgba(255,255,255,0.5); }
}
@keyframes anim-scan-line {
  0%   { transform:translateY(-150%); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateY(200%); opacity:0; }
}
@keyframes anim-scan-glow {
  0%,100% { box-shadow:0 0 6px rgba(0,255,140,0.2); }
  50%     { box-shadow:0 0 16px rgba(0,255,140,0.5); }
}
@keyframes anim-matrix-flicker {
  0%,100% { filter:brightness(1) hue-rotate(0deg) saturate(1); box-shadow:0 0 8px rgba(0,255,140,0.2); }
  25%  { filter:brightness(1.4) hue-rotate(12deg) saturate(3.5); box-shadow:0 0 22px rgba(0,255,140,0.75); }
  50%  { filter:brightness(0.8) hue-rotate(-6deg) saturate(2); box-shadow:0 0 10px rgba(0,200,100,0.4); }
  75%  { filter:brightness(1.25) hue-rotate(8deg) saturate(2.8); box-shadow:0 0 18px rgba(0,255,100,0.55); }
}
@keyframes anim-vortex {
  0%,100% { transform:rotate(0deg) scale(1); filter:brightness(1); }
  25%  { transform:rotate(6deg) scale(1.04); filter:brightness(1.08); }
  75%  { transform:rotate(-6deg) scale(1.04); filter:brightness(1.08); }
}
@keyframes anim-shadow-clone {
  0%,100% { box-shadow:none; filter:brightness(1); }
  50%     { box-shadow:5px 5px 0 1px rgba(0,255,140,0.35),-5px -5px 0 1px rgba(46,230,255,0.25); filter:brightness(1.1); }
}
@keyframes anim-frozen {
  0%,100% { filter:saturate(0.25) hue-rotate(190deg) brightness(1.1); box-shadow:0 0 10px rgba(100,200,255,0.3); }
  50%     { filter:saturate(0.45) hue-rotate(200deg) brightness(1.28); box-shadow:0 0 22px rgba(100,200,255,0.65),0 0 45px rgba(150,220,255,0.2); }
}
@keyframes anim-eclipse {
  0%,100% { filter:brightness(1); box-shadow:none; }
  45%  { filter:brightness(0.1) contrast(2); box-shadow:0 0 22px rgba(255,100,0,0.5),0 0 45px rgba(255,50,0,0.2); }
  50%  { filter:brightness(0.04); box-shadow:0 0 32px rgba(255,80,0,0.75); }
  55%  { filter:brightness(0.1) contrast(2); box-shadow:0 0 22px rgba(255,100,0,0.5); }
}
/* Fire: sparks/embers floating upward */
/* Rain: visible drops falling */
@keyframes anim-rain-drops {
  0%   { background-position: 0 -34px,  9px -22px, 4px -10px, 17px -28px; }
  100% { background-position: 0  34px,  9px  12px, 4px  24px, 17px   6px; }
}
@keyframes anim-rain-dim {
  0%,100% { filter:brightness(0.85) saturate(0.7); }
  50%     { filter:brightness(0.8)  saturate(0.6); }
}
@keyframes anim-bull-run-glow {
  0%,100% { filter:brightness(1) saturate(1); box-shadow:0 0 0 0 rgba(0,255,140,0); }
  50%     { filter:brightness(1.12) saturate(1.5); box-shadow:0 0 18px 5px rgba(0,255,140,0.45),0 8px 30px rgba(0,200,100,0.25); }
}
@keyframes anim-bull-run-wave {
  0%   { height:20%; opacity:0.5; }
  100% { height:48%; opacity:0.9; }
}

.avatar-anim-orbit       { animation:anim-orbit       2s linear infinite; }
.avatar-anim-radar       { animation:anim-radar       1.8s ease-out infinite; }
.avatar-anim-electric    { animation:anim-electric    1.6s steps(1) infinite; }
.avatar-anim-heat-wave   { animation:anim-heat-wave   2s ease-in-out infinite; }
.avatar-anim-gold-rush   { animation:anim-gold-rush   2s ease-in-out infinite; }
.avatar-anim-prism       { animation:anim-prism       3s linear infinite; }
.avatar-anim-hologram    { animation:anim-hologram    2.5s ease-in-out infinite; }
.avatar-anim-diamond     { animation:anim-diamond     2.2s steps(1) infinite; }
.avatar-anim-scan        { animation:anim-scan-glow   2.5s ease-in-out infinite; position:relative; overflow:hidden; }
.avatar-anim-scan::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(transparent 38%, rgba(0,255,140,0.55) 50%, transparent 62%);
  animation:anim-scan-line 2.5s linear infinite; pointer-events:none;
}
.avatar-anim-matrix-fx   { animation:anim-matrix-flicker 1.2s ease-in-out infinite; }
.avatar-anim-vortex      { animation:anim-vortex      3s ease-in-out infinite; }
.avatar-anim-shadow-clone{ animation:anim-shadow-clone 1.5s ease-in-out infinite; }
.avatar-anim-frozen      { animation:anim-frozen      2.5s ease-in-out infinite; }
.avatar-anim-eclipse     { animation:anim-eclipse     4s ease-in-out infinite; }

/* Rain: visible teardrop shapes falling */
.avatar-anim-rain { animation:anim-rain-dim 3s ease-in-out infinite; position:relative; overflow:hidden; }
.avatar-anim-rain::before {
  content:''; position:absolute; inset:0;
  background:rgba(10,25,60,0.22); pointer-events:none;
}
.avatar-anim-rain::after {
  content:''; position:absolute; inset:-20px;
  transform: rotate(15deg);
  background-image:
    radial-gradient(ellipse 1.5px 10px, rgba(210,235,255,0.22) 100%, transparent 100%),
    radial-gradient(ellipse 1px   7px,  rgba(185,220,255,0.18) 100%, transparent 100%),
    radial-gradient(ellipse 1.5px 12px, rgba(225,242,255,0.2)  100%, transparent 100%),
    radial-gradient(ellipse 1px   9px,  rgba(195,228,255,0.16) 100%, transparent 100%);
  background-size: 14px 28px, 22px 22px, 10px 34px, 18px 26px;
  background-position: 0 -34px, 9px -22px, 4px -10px, 17px -28px;
  mix-blend-mode: screen;
  animation:anim-rain-drops 0.55s linear infinite; pointer-events:none;
}
.avatar-anim-bull-run    { animation:anim-bull-run-glow 1.5s ease-in-out infinite; position:relative; overflow:hidden; }
.avatar-anim-bull-run::after {
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:30%; border-radius:0 0 50% 50%;
  background:linear-gradient(to top, rgba(0,255,140,0.4), transparent);
  animation:anim-bull-run-wave 1s ease-in-out infinite alternate; pointer-events:none;
}

/* Fire Ring: glowing fire border spinning around the avatar */
@keyframes anim-fire-ring-pulse {
  0%,100% { box-shadow:0 0 0 2px rgba(255,110,15,0.85), 0 0 9px 4px rgba(255,75,0,0.65), 0 0 20px 9px rgba(255,45,0,0.45), 0 0 36px 16px rgba(200,15,0,0.28); }
  50%     { box-shadow:0 0 0 3px rgba(255,145,25,1),    0 0 14px 7px rgba(255,95,5,0.82),  0 0 28px 14px rgba(255,55,0,0.58), 0 0 52px 24px rgba(220,25,0,0.38); }
}
@keyframes anim-fire-ring-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.avatar-anim-fire-ring { animation:anim-fire-ring-pulse 1.1s ease-in-out infinite; position:relative; }
.avatar-anim-fire-ring::before {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(
    rgba(255,80,0,0)      0deg,
    rgba(255,165,20,0.72) 38deg,
    rgba(255,80,0,0.05)   90deg,
    rgba(255,135,12,0.52) 158deg,
    rgba(255,80,0,0)      215deg,
    rgba(255,175,32,0.68) 278deg,
    rgba(255,90,0,0.08)   325deg,
    rgba(255,80,0,0)      360deg
  );
  -webkit-mask:radial-gradient(farthest-side, transparent 85%, black 87%);
  mask:radial-gradient(farthest-side, transparent 85%, black 87%);
  animation:anim-fire-ring-spin 2.2s linear infinite;
  pointer-events:none;
}
.avatar-anim-fire-ring::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(ellipse at 50% 65%, rgba(255,45,0,0.13) 0%, transparent 65%);
  pointer-events:none;
}

/* Embers: warm glow base — actual sparks spawned by JS */
@keyframes anim-embers-glow {
  0%,100% { filter:brightness(1) saturate(1.1); }
  50%     { filter:brightness(1.1) saturate(1.3); }
}
@keyframes ember-fly {
  0%,6%  { transform:translate(0,0) scale(1);                      opacity:0; }
  14%    { opacity:var(--op,0.85); }
  85%    { opacity:calc(var(--op,0.85) * 0.25); }
  100%   { transform:translate(var(--dx),var(--dy)) scale(0.1);    opacity:0; }
}
.avatar-anim-embers { position:relative; animation:anim-embers-glow 1.8s ease-in-out infinite; }
.avatar-anim-embers::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 90%, rgba(255,50,0,0.15) 0%, transparent 60%);
  pointer-events:none;
}
.ember-spark {
  position:absolute; left:var(--sx); top:var(--sy);
  border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  animation:ember-fly var(--dur,1.2s) var(--delay,0s) linear infinite;
}

/* ── GIF picker grid ── */
.pim-gif-opt-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
}
.pim-gif-opt-card {
  border:1px solid var(--border-2); border-radius:var(--r-lg);
  padding:18px 10px; text-align:center; cursor:pointer;
  transition:all 0.18s; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pim-gif-opt-card:hover { border-color:var(--accent); background:var(--accent-dim); }
.pim-gif-opt-icon  { font-size:24px; }
.pim-gif-opt-label { font-size:13px; font-weight:700; color:var(--t1); }
.pim-gif-opt-sub   { font-size:11px; color:var(--t3); }
.pim-gif-back {
  background:none; border:none; color:var(--t3); font-size:12px;
  cursor:pointer; padding:0 0 12px; display:flex; align-items:center; gap:4px;
  font-family:'Inter',sans-serif;
}
.pim-gif-back:hover { color:var(--t1); }
.pim-anim-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;
  max-height:300px; overflow-y:auto; padding-right:4px; scrollbar-width:thin;
}
.pim-anim-item {
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
}
.pim-anim-preview {
  width:80px; height:80px; border-radius:50%;
  border:2px solid var(--border-2); transition:border-color 0.18s;
  background-size:cover; background-position:center;
  flex-shrink:0; position:relative;
}
.pim-anim-item.selected .pim-anim-preview,
.pim-anim-item:hover .pim-anim-preview { border-color:var(--accent); }
.pim-anim-item.selected .pim-anim-preview {
  box-shadow:0 0 0 2px var(--accent), 0 0 12px rgba(0,255,140,0.4);
}
.pim-anim-label {
  font-size:10px; font-weight:600; color:var(--t3); text-align:center;
}
.pim-anim-item.selected .pim-anim-label { color:var(--accent); }

/* ── GIF Avatar (animated) ── */
.avatar-gif-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
}
.avatar-gif-badge {
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  font-size:9px; font-weight:800; letter-spacing:0.06em;
  padding:1px 5px; border-radius:4px;
  background:linear-gradient(90deg,#00ff8c,#2ee6ff);
  color:#000; pointer-events:none; z-index:5;
  box-shadow:0 0 8px rgba(0,255,140,0.6);
  animation:gif-badge-pulse 2s ease-in-out infinite;
}
@keyframes gif-badge-pulse {
  0%,100% { box-shadow:0 0 8px rgba(0,255,140,0.6); }
  50%      { box-shadow:0 0 14px rgba(46,230,255,0.8); }
}

/* ── PIM tab switcher (avatar modal) ── */
.pim-tabs {
  display:none; gap:6px; margin-bottom:16px;
}
.pim-tab {
  flex:1; padding:8px 10px; border-radius:var(--r-md);
  font-size:12px; font-weight:600; cursor:pointer;
  border:1px solid var(--border-2); background:var(--surface);
  color:var(--t3); transition:all 0.18s; display:flex;
  align-items:center; justify-content:center; gap:5px;
}
.pim-tab.active {
  background:var(--accent-dim); border-color:var(--accent);
  color:var(--accent);
}
.pim-tab-badge {
  font-size:9px; font-weight:800; padding:1px 5px;
  border-radius:4px;
  background:linear-gradient(90deg,#00ff8c,#2ee6ff);
  color:#000;
}

/* ── GIF upload area ── */
.pim-gif-area { display:none; }
.pim-gif-preview-wrap {
  position:relative; width:100px; height:100px;
  margin:0 auto 16px; border-radius:50%; overflow:hidden;
  border:2px solid var(--accent); display:none;
  box-shadow:0 0 16px rgba(0,255,140,0.3);
}
.pim-gif-preview-wrap img {
  width:100%; height:100%; object-fit:cover;
}
.pim-gif-banner-preview {
  width:100%; border-radius:var(--r-md);
  overflow:hidden; cursor:grab; margin-bottom:10px;
  border:1px solid var(--accent); display:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  user-select:none; -webkit-user-select:none;
}
.pim-gif-banner-preview:active { cursor:grabbing; }
.pim-gif-banner-preview:active { cursor:grabbing; }
.pim-gif-banner-hint {
  font-size:11px; color:var(--t3); text-align:center; margin-bottom:12px; display:none;
}

/* border-radius:50% clips the photo — no overflow:hidden needed here */
.profile-identity {
  padding:16px 160px 20px 168px;
  display:flex; flex-direction:row; align-items:center;
  justify-content:space-between; gap:24px;
  border-bottom:1px solid var(--border); position:relative; min-height:72px;
}
.profile-identity .profile-edit-btn { position:absolute; top:50%; transform:translateY(-50%); right:28px; width:110px; justify-content:center; box-sizing:border-box; }
.profile-locker-chip { position:absolute; top:50%; transform:translateY(-50%); right:148px; width:110px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 16px; border-radius:99px; background:var(--surface); backdrop-filter:blur(10px); border:1px solid var(--border-2); color:var(--t2); font-size:12px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:all 0.18s var(--ease-out); letter-spacing:0.02em; flex-shrink:0; }
.profile-locker-chip:hover { border-color:var(--accent); color:var(--accent); }

/* ── Locker Screen ── */
.locker-screen-wrap { display:flex; flex-direction:column; height:100%; overflow-y:auto; }
.locker-header { display:flex; align-items:center; gap:10px; padding:16px 16px 12px; position:sticky; top:0; z-index:10; background:rgba(8,8,8,0.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,0.06); }
.locker-header-inner { display:flex; align-items:center; gap:10px; width:100%; }
.locker-back-btn { background:none; border:none; color:var(--t3); cursor:pointer; padding:4px; display:flex; align-items:center; flex-shrink:0; transition:color .15s; }
.locker-back-btn:hover { color:var(--t1); }
.locker-header-title { flex:1; display:flex; align-items:center; gap:7px; font-size:17px; font-weight:800; color:var(--t1); }
.locker-header-sub { font-size:11px; font-weight:500; color:var(--t3); margin-top:1px; letter-spacing:0.01em; }
.locker-header-count { font-size:11px; font-weight:700; color:var(--t3); background:rgba(255,255,255,0.06); border-radius:20px; padding:3px 10px; white-space:nowrap; }
.locker-filter-row { display:flex; gap:6px; padding:10px 14px; overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.locker-filter-row::-webkit-scrollbar { display:none; }
.locker-filter-tab { flex-shrink:0; padding:5px 13px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.45); font-size:11px; font-weight:800; cursor:pointer; font-family:'Inter',sans-serif; letter-spacing:.03em; transition:all .15s; white-space:nowrap; }
.locker-filter-tab:hover { background:rgba(255,255,255,0.08); color:var(--t1); }
.locker-filter-tab.active { background:rgba(255,255,255,0.1); color:var(--t1); border-color:rgba(255,255,255,0.25); }
.locker-filter-tab.active.tier-legendary { background:rgba(255,215,0,0.12); color:#FFD700; border-color:rgba(255,215,0,0.3); }
.locker-filter-tab.active.tier-epic      { background:rgba(139,92,246,0.14); color:#a78bfa; border-color:rgba(139,92,246,0.35); }
.locker-filter-tab.active.tier-rare      { background:rgba(59,130,246,0.12); color:#60a5fa; border-color:rgba(59,130,246,0.3); }
.locker-filter-tab.active.tier-common    { background:rgba(180,180,180,0.1);  color:#ccc;    border-color:rgba(180,180,180,0.25); }

/* Equipped hero banner */
/* Loadout bar — all equipped slots */
.locker-loadout { margin-bottom:18px; }
.locker-loadout-label { font-size:9px; font-weight:800; letter-spacing:.1em; color:#00ff8c; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.locker-loadout-label::after { content:''; flex:1; height:1px; background:rgba(0,255,140,0.15); }
.locker-loadout-slots { display:flex; gap:8px; flex-wrap:wrap; }
.locker-loadout-slot { display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); min-width:0; flex-shrink:0; }
.locker-loadout-thumb { width:38px; height:38px; border-radius:8px; background:rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.locker-loadout-info { min-width:0; }
.locker-loadout-name { font-size:12px; font-weight:800; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.locker-loadout-type { font-size:10px; color:var(--t3); white-space:nowrap; }
.locker-loadout-unequip { width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:var(--t3); font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; line-height:1; font-family:inherit; margin-left:2px; }
.locker-loadout-unequip:hover { background:rgba(255,80,80,0.15); border-color:rgba(255,80,80,0.3); color:#ff5050; }

/* Section header */
.locker-section-hdr { display:flex; align-items:center; gap:8px; margin:18px 0 10px; }
.locker-section-hdr-line { flex:1; height:1px; background:var(--border); }
.locker-section-hdr-label { font-size:9px; font-weight:800; letter-spacing:.12em; white-space:nowrap; }

/* Cards grid */
.locker-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }

/* Individual card */
.locker-card { border-radius:14px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s; }
.locker-card:hover { transform:translateY(-2px); }
.locker-card.equipped { box-shadow:0 0 0 1.5px #00ff8c, 0 4px 20px rgba(0,255,140,0.12); }
.locker-card.tier-legendary { border-color:rgba(255,215,0,0.25); background:rgba(255,215,0,0.03); }
.locker-card.tier-legendary:hover { box-shadow:0 4px 24px rgba(255,215,0,0.15); }
.locker-card.tier-epic  { border-color:rgba(139,92,246,0.25); background:rgba(139,92,246,0.03); }
.locker-card.tier-epic:hover  { box-shadow:0 4px 24px rgba(139,92,246,0.15); }
.locker-card.tier-rare  { border-color:rgba(59,130,246,0.2); background:rgba(59,130,246,0.03); }
.locker-card.tier-rare:hover  { box-shadow:0 4px 24px rgba(59,130,246,0.12); }
.locker-card.tier-common { border-color:rgba(180,180,180,0.12); }
.locker-card-preview { width:100%; height:110px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; background:rgba(0,0,0,0.2); }
.locker-card-preview-inner { transform:scale(0.42); transform-origin:center center; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.locker-card-body { padding:10px 10px 12px; }
.locker-card-tier-badge { display:inline-block; font-size:8px; font-weight:800; letter-spacing:.1em; border-radius:4px; padding:2px 6px; margin-bottom:5px; }
.locker-card-name { font-size:12px; font-weight:800; color:var(--t1); line-height:1.3; margin-bottom:2px; }
.locker-card-type { font-size:10px; color:var(--t3); margin-bottom:10px; }
.locker-card-equip-btn { width:100%; padding:6px; border-radius:7px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:var(--t2); font-size:10px; font-weight:800; cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s; letter-spacing:.03em; }
.locker-card-equip-btn:hover { background:rgba(255,255,255,0.09); color:var(--t1); }
.locker-card-equip-btn.is-equipped { border-color:rgba(0,255,140,0.35); background:rgba(0,255,140,0.08); color:#00ff8c; }
.locker-card-equip-btn.is-equipped:hover { background:rgba(0,255,140,0.14); }
.locker-equipped-stamp { position:absolute; top:8px; right:8px; background:rgba(0,255,140,0.15); border:1px solid rgba(0,255,140,0.35); border-radius:5px; font-size:7px; font-weight:900; letter-spacing:.1em; color:#00ff8c; padding:2px 5px; text-transform:uppercase; }
.profile-id-left { display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex-shrink:0; }
.profile-id-center { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:row; align-items:center; }
.profile-id-right { display:flex; align-items:center; flex-shrink:0; margin-right:60px; }
.profile-banner-avatar {
  position:absolute; top:140px; left:28px; /* top overridden by JS */
  width:120px; height:120px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--cyan));
  color:#000; font-size:46px; font-weight:700;
  font-family:'Inter',sans-serif;
  display:flex; align-items:center; justify-content:center;
  border:4px solid var(--bg2); flex-shrink:0;
  z-index:3;
}
.profile-banner-name { font-size:26px; font-weight:700; color:var(--t1); margin-bottom:5px; }
.profile-name-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.profile-name-row .profile-banner-name { margin-bottom:0; }
.plan-badge { font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; border-radius:4px; padding:2px 7px; flex-shrink:0; }
.plan-badge.free  { color:#8a8a8a; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); }
.plan-badge.pro   { color:#c084fc; background:rgba(192,132,252,0.1); border:1px solid rgba(192,132,252,0.35); }
.plan-badge.elite { color:#ffd700; background:rgba(255,215,0,0.1); border:1px solid rgba(255,215,0,0.3); }
.profile-banner-meta { font-size:13px; color:var(--t2); display:flex; gap:8px; align-items:center; justify-content:center; }
.profile-meta-dot { color:var(--t3); }
.profile-clan-badge, .profile-rank-badge-chip {
  display:inline-flex; align-items:center; gap:8px;
}
.pcb-logo, .prb-logo { width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.pcb-logo svg, .prb-logo svg { width:100%; height:100%; }
.pcb-name, .prb-name { font-size:15px; font-weight:700; letter-spacing:0.01em; }
.profile-clan-badge {
  position:relative; cursor:pointer;
  transition:opacity 0.15s;
}
.profile-clan-badge:hover { opacity:0.8; }
.profile-clan-badge::after {
  content: attr(data-tooltip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:rgba(10,10,10,0.92); color:#fff; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.18s;
  border:1px solid rgba(255,255,255,0.1);
}
.profile-clan-badge:hover::after { opacity:1; }
.profile-main-grid {
  display:grid; grid-template-columns:1fr 300px; align-items:start;
}
.profile-weekly-section {
  padding:20px 16px; border-right:1px solid var(--border);
}
.profile-weekly-title {
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.10em;
  color:var(--t3); margin-bottom:14px;
}
.week-item {
  padding:10px 0; border-bottom:1px solid var(--border); cursor:default;
}
.week-item:last-child { border-bottom:none; }
.week-item-label { font-size:10px; color:var(--t3); font-weight:700; margin-bottom:4px; }
.week-item-pnl { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.week-item-pnl.gain { color:var(--accent); }
.week-item-pnl.loss { color:var(--loss-2); }
.week-item-pnl.zero { color:var(--t3); }
.week-item-meta { font-size:10px; color:var(--t3); margin-top:3px; }

.profile-calendar-section { padding:20px; }
.profile-trades-section { padding:20px; border-left:1px solid var(--border); }

/* Stats + Donut row above calendar */
.profile-stats-donut-row {
  display:flex; align-items:center; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px;
}
.profile-quick-stats {
  display:flex; flex-direction:column; gap:8px; flex-shrink:0; min-width:100px;
}
.pqs-item { display:flex; flex-direction:column; gap:1px; }
.pqs-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.10em; color:var(--t3); }
.pqs-val { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--t1); }
.pqs-val.gain { color:var(--accent); }
.pqs-val.loss { color:var(--loss-2); }
.pqs-right { align-items:flex-end; text-align:right; }

.profile-goal-donut {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pgd-header {
  display:flex; align-items:center; gap:8px; justify-content:center;
}
.pgd-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em; color:var(--t3); }
.pgd-edit-btn {
  background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--t3); font-size:10px; font-weight:700; padding:2px 7px;
  cursor:pointer; transition:all 0.15s; font-family:'Inter',sans-serif;
}
.pgd-edit-btn:hover { border-color:var(--accent); color:var(--accent); }
.pgd-chart-wrap {
  position:relative; width:90px; height:90px;
}
.pgd-svg { width:100%; height:100%; transform:rotate(-90deg); }
.pgd-track {
  fill:none; stroke:rgba(255,255,255,0.07); stroke-width:9;
}
.pgd-fill {
  fill:none; stroke:var(--accent); stroke-width:9;
  stroke-linecap:round;
  stroke-dasharray:239; stroke-dashoffset:239;
  transition:stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1), stroke 0.3s;
  filter:drop-shadow(0 0 5px var(--accent-glow));
}
.pgd-fill.overshot { stroke:var(--gold); filter:drop-shadow(0 0 5px rgba(255,181,71,0.5)); }
.pgd-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
}
.pgd-pct { font-size:15px; font-weight:800; color:var(--t1); font-variant-numeric:tabular-nums; line-height:1; }
.pgd-sub { font-size:8px; color:var(--t3); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }

/* Goal edit inline */
.pgd-goal-input-wrap {
  display:flex; align-items:center; gap:6px; margin-top:4px;
}
.pgd-goal-input {
  width:54px; padding:4px 8px; border-radius:6px;
  border:1px solid var(--border-2); background:var(--bg3);
  color:var(--t1); font-size:12px; font-weight:700;
  font-family:'Inter',sans-serif; text-align:center; outline:none;
}
.pgd-goal-input:focus { border-color:var(--accent); }
.pgd-goal-save {
  padding:4px 10px; border-radius:6px; border:none;
  background:var(--accent-dim); color:var(--accent);
  font-size:11px; font-weight:700; cursor:pointer;
  font-family:'Inter',sans-serif; transition:background 0.15s;
}
.pgd-goal-save:hover { background:rgba(0,255,140,0.2); }

.trader-hero {
  position:relative;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(160deg, #091a10 0%, #080f18 55%, #0e0818 100%);
  min-height:340px;
}
.trader-hero::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(ellipse 40% 70% at 22% 100%, rgba(0,255,140,0.28) 0%, transparent 100%),
    radial-gradient(ellipse 30% 50% at 85% 5%, rgba(46,230,255,0.1) 0%, transparent 100%),
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(0,0,0,0.4) 0%, transparent 100%);
  pointer-events:none;
}
.trader-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, rgba(0,255,140,0.3), rgba(46,230,255,0.15), transparent);
  pointer-events:none;
}
.trader-hero-char {
  position:absolute; bottom:0; left:-6px; z-index:2;
  width:340px;
  filter: drop-shadow(0 0 70px rgba(0,255,140,0.45)) drop-shadow(0 32px 64px rgba(0,0,0,0.95));
  animation: hero-char-float 5s ease-in-out infinite;
}
.trader-hero-char img { width:100%; display:block; }
@keyframes hero-char-float {
  0%,100% { transform:translateY(0px); }
  50%      { transform:translateY(-8px); }
}
.trader-hero-info {
  position:relative; z-index:2;
  padding: 32px 40px 32px 340px;
  display:flex; flex-direction:column; gap:18px;
}
.trader-hero-rank-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,181,71,0.12); border:1px solid rgba(255,181,71,0.3);
  border-radius:99px; padding:5px 14px; width:fit-content;
  font-size:12px; font-weight:800; color:var(--gold); letter-spacing:0.05em;
}
.trader-hero-rank-badge .rank-dot {
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px var(--gold); flex-shrink:0;
}
.trader-hero-name {
  font-size:38px; font-weight:800; color:var(--t1); line-height:1;
  letter-spacing:-0.02em;
  text-shadow: 0 0 40px rgba(255,255,255,0.15);
}
.trader-hero-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
.ths-item { display:flex; flex-direction:column; gap:3px; }
.ths-label { font-size:10px; color:var(--t3); font-weight:700; text-transform:uppercase; letter-spacing:0.12em; }
.ths-val { font-size:22px; font-weight:800; color:var(--t1); font-variant-numeric:tabular-nums; }
.ths-val.gain { color:var(--accent); text-shadow: 0 0 20px rgba(0,255,140,0.3); }
.ths-val.loss { color:var(--loss); text-shadow: 0 0 20px rgba(255,59,92,0.3); }
.trader-hero-xp {
  display:flex; flex-direction:column; gap:6px;
}
.trader-xp-top { display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.trader-xp-label { color:var(--t3); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.trader-xp-count { color:var(--accent); font-weight:800; font-family:monospace; }
.trader-xp-bar { height:5px; background:rgba(255,255,255,0.07); border-radius:99px; overflow:hidden; }
.trader-xp-fill { height:100%; background:var(--grad-accent); border-radius:99px; transition:width 0.6s var(--ease-out); }

/* ── Sparkline — enlarged into the hero's main visual anchor ── */
/* Scopes the chart explicitly, since it can dip even when the header %
   (always vs the $100k starting balance) is positive — see
   CHART_WINDOW_LABEL note in the HTML. */
.home-sparkline-scope-label {
  font-size:10px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.08em;
  margin-top:16px;
}
.home-sparkline-wrap {
  width:100%; pointer-events:none; position:relative;
  margin-top:4px; margin-bottom:0;
}
.home-sparkline {
  width:100%; height:180px; overflow:visible; display:block;
}
.home-sparkline .spark-path {
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  filter:none;
  /* No vector-effect:non-scaling-stroke — the viewBox is now set by JS to
     match the SVG's real rendered pixel size 1:1, so there's no non-
     uniform scale transform for the stroke to fight in the first place.
     stroke-dasharray/dashoffset/transition are set inline by
     renderSparkline(), sized to the path's *real* length. */
}
.home-sparkline .spark-area {
  fill:url(#spark-grad); opacity:0;
  animation: spark-fade 0.8s ease-out 1.2s forwards;
}
/* Reference line at the window's starting value, and the "current value"
   endpoint dot — small legibility anchors so the chart reads at a glance
   instead of being a line floating with nothing to judge it against. */
.home-sparkline .spark-baseline {
  stroke:var(--t3); stroke-width:1; stroke-dasharray:2 4; opacity:0.35;
}
.home-sparkline .spark-end-dot {
  stroke:var(--bg); stroke-width:2;
  transform-box: fill-box; transform-origin: center;
}
/* A real new trade can move the endpoint by very little on a window
   whose scale is dominated by a bigger earlier swing — pulse the dot
   once so a genuine update is never silently invisible. */
.home-sparkline .spark-end-dot.spark-dot-pulse {
  animation: spark-dot-pulse 0.9s ease-out;
}
@keyframes spark-dot-pulse {
  0%   { r: 3.2; filter: drop-shadow(0 0 0 currentColor); }
  30%  { r: 6.5; filter: drop-shadow(0 0 8px currentColor); }
  100% { r: 3.2; filter: drop-shadow(0 0 0 currentColor); }
}
/* Empty state — no real trade history yet. A confident green "gain" line
   would misrepresent an account that hasn't traded, so show a quiet
   dashed baseline + an explicit caption instead of a fake trend. */
.home-sparkline-wrap.spark-empty .home-sparkline .spark-path {
  stroke-width:1.2; stroke-dasharray:5 5; opacity:0.35;
}
.home-sparkline-empty-hint {
  display:none; position:absolute; inset:0;
  align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; color:var(--t3); text-align:center;
  padding:0 30px;
}
.home-sparkline-wrap.spark-empty .home-sparkline-empty-hint { display:flex; }
@keyframes spark-fade {
  to { opacity: 0.55; }
}

/* ── Counter animation for portfolio value ── */
@keyframes value-glow-pulse {
  0%   { text-shadow: 0 0 0 rgba(0,255,140,0); }
  40%  { text-shadow: 0 0 40px rgba(0,255,140,0.6), 0 0 80px rgba(0,255,140,0.25); }
  100% { text-shadow: 0 0 0 rgba(0,255,140,0); }
}
.ph-value.counting { animation: value-glow-pulse 1.6s ease-out forwards; }

/* ── State-aware hero tint ── */
@keyframes hero-glow-positive {
  0%,100% { box-shadow: var(--shadow-lg), 0 0 50px rgba(0,255,140,0.12); }
  50%     { box-shadow: var(--shadow-lg), 0 0 90px rgba(0,255,140,0.28); }
}
@keyframes hero-glow-negative {
  0%,100% { box-shadow: var(--shadow-lg), 0 0 50px rgba(255,59,92,0.12); }
  50%     { box-shadow: var(--shadow-lg), 0 0 90px rgba(255,59,92,0.28); }
}
.portfolio-hero.hero-positive {
  border-color: var(--border);
  animation: none;
}
.portfolio-hero.hero-negative {
  border-color: var(--border);
  animation: none;
}
.portfolio-hero.hero-negative::before { content:none; }

/* ══ HOME MARKET COUNTDOWN ══════════════════════════════
   Lives inside .home-split-row as a column — no border/background of
   its own, the shared outer card provides the box. Content is centered
   as one vertical stack (status pill → big timer → session line) so it
   reads as a deliberate compact panel instead of scattered elements. ══ */
.home-mkt-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1; min-width:0; padding:20px 18px; gap:10px; text-align:center;
}
.home-mkt-status {
  display:flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:20px;
  border:1px solid var(--border); background:var(--surface-2);
}
.home-mkt-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.2);
}
.home-mkt-card.mkt-open  .home-mkt-dot { background:var(--accent); animation:live-dot 1.6s ease-in-out infinite; }
.home-mkt-card.mkt-pre   .home-mkt-dot { background:#ffc107; }
.home-mkt-card.mkt-after .home-mkt-dot { background:#64a0ff; }
.home-mkt-label {
  font-size:10px; font-weight:900; letter-spacing:0.1em; color:var(--t3);
  text-transform:uppercase;
}
.home-mkt-card.mkt-open  .home-mkt-label { color:var(--accent); }
.home-mkt-card.mkt-pre   .home-mkt-label { color:#ffc107; }
.home-mkt-card.mkt-after .home-mkt-label { color:#64a0ff; }
.home-mkt-center {
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.home-mkt-until {
  font-size:11px; color:var(--t3); font-weight:600;
}
.home-mkt-timer {
  font-family:monospace; font-size:38px; font-weight:700;
  letter-spacing:0.02em; color:#fff; line-height:1.1;
}
.home-mkt-foot { display:flex; align-items:center; gap:8px; }
.home-mkt-session { font-size:11px; color:var(--t3); font-weight:600; }
.home-mkt-session::after { content:'·'; margin-left:8px; color:var(--border-2); }
.home-mkt-day     { font-size:11px; color:var(--t2); font-weight:700; }

/* ══ HOME HOLDINGS CARDS ════════════════════════════════
   Label stays pinned top (matches every other section label), but the
   scroll row / empty-state centers in whatever height the row gives it —
   otherwise a short holdings list reads as pinned-high with dead space
   below when it shares a row with a taller sibling (Market Movers). ══ */
.home-holdings-col { display:flex; flex-direction:column; height:100%; }
.home-holdings-col .hh-scroll-wrap,
.home-holdings-col #home-holdings-empty { flex:1; display:flex; align-items:center; }
.hh-scroll-wrap { gap:4px; min-width:0; }
.hh-scroll-btn {
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--t2); cursor:pointer; transition:all 0.15s;
}
.hh-scroll-btn:hover { background:var(--surface-h); border-color:var(--border-2); color:var(--t1); }
.hh-scroll-btn.hh-scroll-disabled { opacity:0.25; pointer-events:none; }
.home-holdings-scroll {
  display:flex; gap:10px; overflow-x:auto; padding:6px 0; scrollbar-width:none;
  flex:1; min-width:0;
  /* overflow-x:auto forces overflow-y to compute as 'auto' too (per spec,
     a non-visible x-axis makes the y-axis non-visible as well), so this
     box clips vertically right at its content's own height. Without top
     padding, .hh-card:hover's translateY(-2px) lift pokes 2px above that
     box and gets visibly cropped. */
}
.home-holdings-scroll::-webkit-scrollbar { display:none; }
.hh-card {
  flex-shrink:0; width:118px; border-radius:12px; padding:10px 12px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  cursor:pointer; transition:all 0.18s; position:relative; overflow:hidden;
}
.hh-card:hover { background:rgba(255,255,255,0.07); transform:translateY(-2px); }
.hh-card.hh-gain { border-color:rgba(0,255,140,0.25); background:rgba(0,255,140,0.05); }
.hh-card.hh-loss { border-color:rgba(255,59,92,0.22); background:rgba(255,59,92,0.05); }
/* Basket cards use the exact same lime-green/coral-red the Market screen
   already uses for crypto (sector === 'crypto') instead of a stock's
   plain green/red — reusing an existing categorical color pair rather
   than adding a new one, and matching how crypto-vs-stock is
   distinguished everywhere else in the app: color only, no shape/border
   difference. */
.hh-card.hh-basket.hh-gain { border-color:rgba(204,255,46,0.28); background:rgba(204,255,46,0.05); }
.hh-card.hh-basket.hh-loss { border-color:rgba(255,96,96,0.25); background:rgba(255,96,96,0.05); }
.hh-card.hh-basket .hh-pnl.gain { color:#ccff2e; }
.hh-card.hh-basket .hh-pnl.loss { color:#ff6060; }
.hh-ticker {
  font-size:13px; font-weight:900; color:#fff; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:6px;
  min-width:0; overflow:hidden;
}
/* Ticker symbols never wrap (they're short), but basket names can be
   longer than the 118px card — ellipsize instead of wrapping/overflowing. */
.hh-ticker > :last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hh-shares { font-size:10px; color:var(--t3); margin-top:1px; }
.hh-price { font-size:16px; font-weight:800; color:#fff; margin:7px 0 3px; font-family:monospace; letter-spacing:-0.03em; }
.hh-pnl { font-size:11px; font-weight:700; }
.hh-pnl.gain { color:var(--accent); }
.hh-pnl.loss { color:var(--loss); }
.hh-pct { font-size:10px; color:var(--t3); margin-top:1px; }
.hh-glow { position:absolute; top:-30%; right:-20%; width:80%; height:80%; border-radius:50%; pointer-events:none; opacity:0.12; }

/* ══ HOLDINGS EMPTY STATE ═══════════════════════════════ */
.hh-empty-card {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,0.03); border:1.5px dashed rgba(255,255,255,0.1);
  border-radius:14px; padding:16px 18px; cursor:pointer;
  transition:all 0.2s;
}
.hh-empty-card:hover { background:var(--surface-h); border-color:var(--border-2); }
.hh-empty-icon { font-size:24px; }
.hh-empty-text { font-size:13px; color:var(--t3); flex:1; }
.hh-empty-cta { font-size:12px; font-weight:700; color:var(--accent); }

/* ══ COACH AI HOME WIDGET ════════════════════════════════ */
.home-coach-card {
  margin-bottom:0;
  display:flex; flex-direction:column; justify-content:space-between;
}
.home-coach-header {
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.home-coach-avatar {
  width:38px; height:38px; border-radius:50%; background:rgba(212,175,55,0.15);
  border:1.5px solid rgba(212,175,55,0.3); overflow:hidden; flex-shrink:0;
}
.home-coach-name { font-size:13px; font-weight:800; color:#d4af37; }
.home-coach-sub { font-size:11px; color:var(--t3); margin-top:2px; }
.home-coach-meta { flex:1; }
.home-coach-btn {
  background:rgba(212,175,55,0.15); border:1px solid rgba(212,175,55,0.35);
  color:#d4af37; font-size:12px; font-weight:700; border-radius:20px;
  padding:6px 14px; cursor:pointer; transition:all 0.2s; white-space:nowrap;
}
.home-coach-btn:hover { background:rgba(212,175,55,0.28); }
.home-coach-tip {
  font-size:12px; color:var(--t2); line-height:1.5;
  border-left:2px solid rgba(212,175,55,0.4); padding-left:10px;
  font-style:italic;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Compact variant — status-strip column, one line only */
.home-coach-tip-compact { -webkit-line-clamp:2; font-size:11.5px; }
.home-status-col .home-coach-header { margin-bottom:9px; }
.home-status-col .home-coach-avatar { width:32px; height:32px; }

/* ══ DAILY STREAK BADGE ════════════════════════════════ */
.streak-badge {
  position:absolute; top:16px; right:16px;
  display:flex; align-items:center; gap:4px;
  background:rgba(0,0,0,0.45); border:1px solid rgba(255,160,0,0.35);
  border-radius:20px; padding:5px 10px 5px 7px;
  cursor:pointer; transition:all 0.2s; z-index:3;
  backdrop-filter:blur(8px);
}
.streak-badge:hover { background:rgba(255,140,0,0.15); border-color:rgba(255,160,0,0.6); }
.streak-badge.streak-cold { border-color:rgba(255,255,255,0.12); }
.streak-flame { font-size:18px; line-height:1; }
.streak-num {
  font-size:18px; font-weight:900; color:#fff;
  font-family:monospace; letter-spacing:-0.03em; line-height:1;
}
.streak-badge.streak-cold .streak-flame { filter:grayscale(1); opacity:0.5; }
.streak-badge.streak-cold .streak-num   { color:var(--t3); }
@keyframes streak-pop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.25); }
  100% { transform:scale(1); }
}
.streak-badge.streak-pop { animation:streak-pop 0.5s cubic-bezier(0.36,0.07,0.19,0.97); }

/* ══ SCREEN HELP BUTTON & POPOVER ═══════════════════════════ */
.help-btn {
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13);
  color:var(--t3); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; padding:0;
  font-size:12px; font-weight:800; font-family:'Inter',sans-serif;
  transition:all 0.2s var(--ease-out);
  position:relative;
}
.help-btn:hover, .help-btn.active {
  background:var(--accent-dim); border-color:rgba(0,255,140,0.4);
  color:var(--accent); box-shadow:0 0 14px rgba(0,255,140,0.18);
}
.help-popover {
  position:fixed; top:54px; left:calc(var(--sidebar-w) + 14px);
  width:288px;
  background:linear-gradient(160deg,rgba(16,22,36,0.98) 0%,rgba(8,11,18,0.98) 100%);
  border:1px solid rgba(255,255,255,0.13);
  border-radius:18px; padding:18px 18px 16px;
  z-index:9998;
  box-shadow:0 24px 64px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.06) inset;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  opacity:0; pointer-events:none;
  transform:translateY(-6px) scale(0.97);
  transition:opacity 0.22s, transform 0.22s var(--ease-spring);
}
.help-popover.visible {
  opacity:1; pointer-events:auto;
  transform:translateY(0) scale(1);
}
.help-popover::before {
  content:''; position:absolute; top:-6px; left:22px;
  width:11px; height:11px;
  background:rgba(16,22,36,0.98);
  border:1px solid rgba(255,255,255,0.13);
  border-right:none; border-bottom:none;
  transform:rotate(45deg);
}
.help-pop-head {
  display:flex; align-items:center; gap:9px; margin-bottom:13px;
}
.help-pop-icon {
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:var(--accent-dim); border:1px solid rgba(0,255,140,0.18);
  display:flex; align-items:center; justify-content:center;
}
.help-pop-icon svg { color:var(--accent); }
.help-pop-title {
  font-size:13px; font-weight:800; color:var(--t1); flex:1;
  letter-spacing:0.01em;
}
.help-pop-close {
  width:20px; height:20px; border-radius:6px;
  background:rgba(255,255,255,0.06); border:none; cursor:pointer;
  color:var(--t3); display:flex; align-items:center; justify-content:center;
  font-size:11px; transition:background 0.15s;
}
.help-pop-close:hover { background:rgba(255,255,255,0.12); color:var(--t1); }
.help-pop-list {
  list-style:none; display:flex; flex-direction:column; gap:9px;
}
.help-pop-list li {
  font-size:12px; color:var(--t2); line-height:1.58;
  display:flex; align-items:flex-start; gap:9px;
}
.help-pop-list li::before {
  content:''; width:4px; height:4px; border-radius:50%; flex-shrink:0;
  background:var(--accent); margin-top:6px;
  box-shadow:0 0 5px var(--accent-glow);
}
.help-pop-list li b { color:var(--t1); font-weight:700; }

/* ══ DAILY REWARD ══════════════════════════════════════════ */
/* ── Activity Feed Button ── */
.inbox-btn {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.38);
  transition:color 0.25s, background 0.25s, border-color 0.25s;
  position:relative; flex-shrink:0; padding:0;
}
.inbox-btn svg { width:15px; height:15px; }
.inbox-btn:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.75); }
.inbox-btn.has-unread { color:rgba(255,255,255,0.65); }
.inbox-dot {
  position:absolute; top:5px; right:5px;
  width:7px; height:7px; border-radius:50%;
  background:#FF3B5C; border:1.5px solid var(--bg);
  display:none;
  animation:inbox-blink 1.6s ease-in-out infinite;
}
.inbox-btn.has-unread .inbox-dot { display:block; }
@keyframes inbox-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.45; transform:scale(0.78); }
}

/* ── Activity Feed Panel ── */
/* ── Activity Feed Modal ── */
.inbox-overlay {
  position:fixed; inset:0; z-index:1499;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background 0.28s;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.inbox-overlay.active {
  pointer-events:all;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.inbox-panel {
  position:relative;
  width:100%; max-width:560px;
  max-height:80vh;
  background:linear-gradient(160deg, rgba(16,19,28,0.99) 0%, rgba(10,12,18,0.99) 100%);
  border:1px solid var(--border-2);
  border-radius:var(--r-xl);
  display:flex; flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.06) inset;
  transform:scale(0.92) translateY(16px);
  opacity:0;
  transition:transform 0.28s var(--ease-spring), opacity 0.22s var(--ease-out);
  pointer-events:none;
}
.inbox-overlay.active .inbox-panel {
  transform:scale(1) translateY(0);
  opacity:1;
  pointer-events:all;
}
.inbox-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 15px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.inbox-panel-title-wrap { display:flex; align-items:center; gap:10px; }
.inbox-panel-icon {
  width:32px; height:32px; border-radius:9px;
  background:var(--accent-dim); border:1px solid rgba(0,255,140,0.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.inbox-panel-icon svg { width:15px; height:15px; }
.inbox-panel-title {
  font-size:14px; font-weight:800; letter-spacing:0.02em;
  color:var(--t1);
}
.inbox-panel-sub {
  font-size:10.5px; color:var(--t3); margin-top:1px;
}
.inbox-close-btn {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:9px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t3);
  transition:color 0.2s, background 0.2s;
}
.inbox-close-btn:hover { background:rgba(255,255,255,0.1); color:var(--t1); }
.inbox-close-btn svg { width:13px; height:13px; }
.inbox-list {
  flex:1; overflow-y:auto; padding:6px 0;
  min-height:0;
}
.inbox-day-label {
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--t3); padding:10px 20px 4px;
}
.inbox-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 20px; cursor:pointer;
  transition:background 0.15s;
  border-left:2.5px solid transparent;
}
.inbox-item:hover { background:rgba(255,255,255,0.05); }
.inbox-item.unread { background:rgba(255,255,255,0.025); }
.inbox-item[data-type="reward"]  { border-left-color:var(--accent); }
.inbox-item[data-type="mission"] { border-left-color:var(--cyan); }
.inbox-item[data-type="league"]  { border-left-color:var(--gold); }
.inbox-item[data-type="clan"]    { border-left-color:var(--violet); }
.inbox-item[data-type="social"]  { border-left-color:#FF6B9D; }
.inbox-item[data-type="system"]  { border-left-color:rgba(255,255,255,0.2); }
.inbox-item-icon {
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.inbox-item-icon svg { width:16px; height:16px; }
.inbox-item[data-type="reward"]  .inbox-item-icon { background:rgba(0,255,140,0.12);  color:var(--accent); }
.inbox-item[data-type="mission"] .inbox-item-icon { background:rgba(46,230,255,0.12); color:var(--cyan); }
.inbox-item[data-type="league"]  .inbox-item-icon { background:rgba(255,181,71,0.12); color:var(--gold); }
.inbox-item[data-type="clan"]    .inbox-item-icon { background:rgba(157,123,255,0.12);color:var(--violet); }
.inbox-item[data-type="social"]  .inbox-item-icon { background:rgba(255,107,157,0.12);color:#FF6B9D; }
.inbox-item[data-type="system"]  .inbox-item-icon { background:rgba(255,255,255,0.06);color:var(--t2); }
.inbox-item-body { flex:1; min-width:0; }
.inbox-item-title {
  font-size:13px; font-weight:600; color:var(--t2);
  line-height:1.35;
}
.inbox-item.unread .inbox-item-title { color:var(--t1); font-weight:700; }
.inbox-item-time {
  font-size:10.5px; color:var(--t3); margin-top:2px;
}
.inbox-item-cta {
  margin-top:7px;
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; letter-spacing:0.04em;
  padding:5px 10px; border-radius:7px; cursor:pointer;
  border:1px solid; background:transparent;
  transition:background 0.2s, transform 0.15s;
}
.inbox-item[data-type="league"]  .inbox-item-cta { color:var(--gold);   border-color:rgba(255,181,71,0.4); }
.inbox-item[data-type="league"]  .inbox-item-cta:hover { background:rgba(255,181,71,0.12);  transform:translateY(-1px); }
.inbox-item[data-type="clan"]    .inbox-item-cta { color:var(--violet); border-color:rgba(157,123,255,0.4); }
.inbox-item[data-type="clan"]    .inbox-item-cta:hover { background:rgba(157,123,255,0.12); transform:translateY(-1px); }
.inbox-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--t3); padding:48px 20px; font-size:13px; text-align:center;
}
.inbox-empty-icon {
  width:52px; height:52px; border-radius:14px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); opacity:0.6;
}
.inbox-empty-icon svg { width:24px; height:24px; }
.inbox-footer {
  padding:10px 20px; border-top:1px solid var(--border);
  font-size:10px; color:var(--t4); text-align:center; flex-shrink:0;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}

.dr-gift-btn {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.25);
  transition:color 0.35s, background 0.35s, border-color 0.35s;
  position:relative; flex-shrink:0; padding:0;
}
.dr-gift-btn svg { width:16px; height:16px; }
.dr-gift-btn.dr-ready {
  color:#FFB547 !important;
  background:rgba(255,181,71,0.1) !important;
  border-color:rgba(255,181,71,0.35) !important;
  animation:dr-glow 2.5s ease-in-out infinite !important;
}
.dr-gift-btn.dr-ready svg {
  animation:dr-shake 2.5s ease-in-out infinite !important;
}
.dr-gift-btn.dr-ready::after {
  content:''; position:absolute; inset:-5px; border-radius:14px;
  border:1px solid rgba(255,181,71,0.3);
  animation:dr-ring 2.5s ease-in-out infinite !important;
  pointer-events:none;
}
@keyframes dr-glow {
  0%,70%,100% { box-shadow:0 0 6px rgba(255,181,71,0.15); }
  85%         { box-shadow:0 0 14px rgba(255,181,71,0.45); }
}
@keyframes dr-shake {
  0%,70%,100% { transform:rotate(0deg) scale(1);   }
  75%         { transform:rotate(-8deg) scale(1.08); }
  82%         { transform:rotate(8deg)  scale(1.08); }
  90%         { transform:rotate(-4deg) scale(1.04); }
  96%         { transform:rotate(3deg)  scale(1.02); }
}
@keyframes dr-ring {
  0%,70%,100% { opacity:0; transform:scale(0.9); }
  85%         { opacity:0.6; transform:scale(1.15); }
}

.dr-overlay {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.78); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  align-items:center; justify-content:center;
}
.dr-overlay.open { display:flex; }

.dr-modal {
  background:#090910;
  border:1px solid rgba(157,123,255,0.22);
  border-radius:24px; padding:30px 26px 26px;
  width:min(390px, 93vw); position:relative;
  box-shadow:0 0 0 1px rgba(0,255,140,0.06), 0 32px 80px rgba(0,0,0,0.85),
             0 0 60px rgba(157,123,255,0.08) inset;
  animation:dr-modal-in 0.32s cubic-bezier(0.34,1.56,0.64,1);
  overflow:hidden;
}
.dr-modal::before {
  content:''; position:absolute; top:-60px; left:-40px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,140,0.07) 0%, transparent 70%);
  pointer-events:none;
}
.dr-modal::after {
  content:''; position:absolute; bottom:-60px; right:-40px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(157,123,255,0.08) 0%, transparent 70%);
  pointer-events:none;
}
@keyframes dr-modal-in {
  from { transform:scale(0.82) translateY(16px); opacity:0; }
  to   { transform:scale(1) translateY(0); opacity:1; }
}

.dr-close {
  position:absolute; top:14px; right:16px; z-index:2;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:50%; width:26px; height:26px; cursor:pointer;
  color:rgba(255,255,255,0.45); font-size:13px; line-height:26px;
  text-align:center; transition:all 0.2s;
}
.dr-close:hover { background:rgba(255,255,255,0.12); color:#fff; }

.dr-week-badge {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-bottom:6px;
}
.dr-week-tag {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.14em;
  background:linear-gradient(90deg,rgba(0,255,140,0.15),rgba(157,123,255,0.15));
  border:1px solid rgba(157,123,255,0.3); border-radius:20px; padding:3px 12px;
  color:rgba(157,123,255,0.9);
}
.dr-week-sub {
  text-align:center; font-size:20px; font-weight:900; letter-spacing:-0.02em;
  background:linear-gradient(90deg,#00FF8C,#9D7BFF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:20px;
}

.dr-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-bottom:8px; position:relative; z-index:1;
}

.dr-day {
  background:rgba(157,123,255,0.05); border:1px solid rgba(157,123,255,0.15);
  border-radius:14px; padding:11px 6px 9px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  position:relative; transition:all 0.25s; overflow:hidden;
}
.dr-day-num {
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:rgba(157,123,255,0.4);
}
.dr-day-icon {
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(157,123,255,0.25);
  transition:color 0.3s, transform 0.3s;
}
.dr-day-icon svg { width:20px; height:20px; }
.dr-day-val {
  font-size:9px; font-weight:700; color:rgba(255,255,255,0.22);
  text-align:center; line-height:1.3;
}

/* claimed — green */
.dr-day.dr-claimed {
  background:rgba(0,255,140,0.08); border-color:rgba(0,255,140,0.3);
}
.dr-day.dr-claimed .dr-day-num  { color:rgba(0,255,140,0.55); }
.dr-day.dr-claimed .dr-day-icon { color:#00FF8C; }
.dr-day.dr-claimed .dr-day-val  { color:rgba(0,255,140,0.8); }
.dr-day.dr-claimed::after {
  content:'✓'; position:absolute; top:5px; right:7px;
  font-size:9px; color:#00FF8C; font-weight:900;
}
.dr-day.dr-claimed::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(0,255,140,0.08) 50%,transparent 70%);
  animation:dr-shimmer 2.6s ease-in-out infinite;
}
@keyframes dr-shimmer {
  0%,100% { transform:translateX(-100%); }
  50%      { transform:translateX(100%); }
}

/* active (can claim now) — bright green glow */
.dr-day.dr-active {
  background:rgba(0,255,140,0.12); border-color:rgba(0,255,140,0.6);
  box-shadow:0 0 18px rgba(0,255,140,0.2), 0 0 6px rgba(0,255,140,0.15) inset;
  animation:dr-card-pulse 2s ease-in-out infinite;
}
.dr-day.dr-active .dr-day-num  { color:#00FF8C; }
.dr-day.dr-active .dr-day-icon {
  color:#00FF8C;
  filter:drop-shadow(0 0 6px rgba(0,255,140,0.8));
  animation:dr-icon-float 2s ease-in-out infinite;
}
.dr-day.dr-active .dr-day-val  { color:#00FF8C; font-weight:900; }
@keyframes dr-card-pulse {
  0%,100% { box-shadow:0 0 18px rgba(0,255,140,0.2), 0 0 6px rgba(0,255,140,0.15) inset; }
  50%      { box-shadow:0 0 32px rgba(0,255,140,0.38), 0 0 12px rgba(0,255,140,0.22) inset; }
}
@keyframes dr-icon-float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-3px); }
}

/* ── Day 7 milestone (gold) ── */
.dr-milestone-wrap { margin-bottom:14px; position:relative; z-index:1; }
.dr-milestone {
  background:rgba(255,181,71,0.06); border:1px solid rgba(255,181,71,0.22);
  border-radius:16px; padding:14px 16px;
  display:flex; align-items:center; gap:13px; position:relative; overflow:hidden;
  transition:all 0.25s;
}
.dr-milestone::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,181,71,0.06) 50%,transparent 70%);
  animation:dr-shimmer 3s ease-in-out infinite;
}
.dr-milestone.dr-claimed {
  background:rgba(0,255,140,0.07); border-color:rgba(0,255,140,0.35);
}
.dr-milestone.dr-claimed::before {
  background:linear-gradient(120deg,transparent 30%,rgba(0,255,140,0.07) 50%,transparent 70%);
}
.dr-milestone.dr-active {
  background:rgba(255,181,71,0.11); border-color:rgba(255,181,71,0.6);
  box-shadow:0 0 28px rgba(255,181,71,0.2);
  animation:dr-ms-pulse 2s ease-in-out infinite;
}
@keyframes dr-ms-pulse {
  0%,100% { box-shadow:0 0 28px rgba(255,181,71,0.2); }
  50%      { box-shadow:0 0 48px rgba(255,181,71,0.38); }
}
.dr-ms-icon {
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#FFB547;
  filter:drop-shadow(0 0 8px rgba(255,181,71,0.5));
  animation:dr-icon-float 2.5s ease-in-out infinite;
}
.dr-ms-icon svg { width:30px; height:30px; }
.dr-milestone.dr-claimed .dr-ms-icon { color:#00FF8C; filter:drop-shadow(0 0 8px rgba(0,255,140,0.5)); }
.dr-ms-body { flex:1; min-width:0; position:relative; z-index:1; }
.dr-ms-label {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:rgba(255,181,71,0.55); margin-bottom:2px;
  display:flex; align-items:center; gap:4px;
}
.dr-milestone.dr-claimed .dr-ms-label { color:rgba(0,255,140,0.7); }
.dr-lock-icon { display:inline-flex; align-items:center; opacity:0.7; }
.dr-lock-icon svg { width:11px; height:11px; }
.dr-ms-num { font-size:11px; color:rgba(255,255,255,0.3); font-weight:600; }
.dr-ms-val { font-size:18px; font-weight:900; color:#FFB547; letter-spacing:-0.01em; }
.dr-milestone.dr-claimed .dr-ms-val { color:#00FF8C; }

.dr-timer-row {
  text-align:center; font-size:11px; color:rgba(255,255,255,0.3);
  margin-bottom:14px; min-height:18px; font-variant-numeric:tabular-nums;
  position:relative; z-index:1;
}
.dr-timer-today {
  color:#00FF8C; font-weight:700;
}

.dr-claim-btn {
  width:100%; padding:14px; border:none; border-radius:14px; position:relative; z-index:1;
  font-size:15px; font-weight:900; cursor:pointer; letter-spacing:0.03em;
  background:linear-gradient(135deg,#00FF8C 0%,#00C96E 100%);
  color:#000; transition:all 0.2s;
  box-shadow:0 4px 24px rgba(0,255,140,0.35);
  overflow:hidden;
}
.dr-claim-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.18) 50%,transparent 70%);
  animation:dr-shimmer 2s ease-in-out infinite;
}
.dr-claim-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,255,140,0.5); }
.dr-claim-btn:active { transform:translateY(0); }
.dr-claim-btn:disabled {
  background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.22);
  cursor:not-allowed; box-shadow:none; transform:none;
}
.dr-claim-btn:disabled::after { display:none; }

/* ══ CLAN SCREEN ══════════════════════════════════════════ */
.clan-no-clan { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:60vh; gap:20px; text-align:center; }
.clan-no-clan-icon { font-size:72px; line-height:1; filter:drop-shadow(0 0 24px rgba(0,255,140,0.3)); color:var(--accent,#00ff8c); display:flex; align-items:center; justify-content:center; }
.clan-no-clan-icon svg { width:72px; height:72px; }
.clan-no-clan h2 { font-size:22px; font-weight:800; color:var(--t1); margin:0; }
.clan-no-clan p { font-size:14px; color:var(--t3); margin:0; max-width:320px; line-height:1.6; }
.clan-no-clan-btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
/* Browse Clans */
.browse-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:1200; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .18s; }
.browse-sheet { background:#0e1117; border-radius:22px 22px 0 0; width:100%; max-width:480px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,0.08); border-bottom:none; }
.browse-header { padding:18px 18px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
.browse-title { font-size:17px; font-weight:800; color:var(--t1); }
.browse-close { background:rgba(255,255,255,0.07); border:none; color:var(--t3); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; }
.browse-search-wrap { padding:10px 16px; flex-shrink:0; }
.browse-search { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:9px 12px; color:var(--t1); font-size:13px; outline:none; }
.browse-search:focus { border-color:rgba(0,255,140,0.35); }
.browse-list { overflow-y:auto; padding:8px 14px 24px; flex:1; }
.browse-card { display:flex; align-items:center; gap:12px; padding:12px 14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:14px; margin-bottom:8px; transition:border-color .15s; }
.browse-card:hover { border-color:rgba(255,255,255,0.14); }
.browse-card-info { flex:1; min-width:0; }
.browse-card-name { font-size:14px; font-weight:800; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.browse-card-sub { font-size:11px; color:var(--t3); margin-top:2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.browse-chip { padding:2px 7px; border-radius:5px; font-size:10px; font-weight:700; background:rgba(255,255,255,0.07); color:var(--t2); }
.browse-chip.open  { background:rgba(0,255,140,0.1);  color:#00ff8c; }
.browse-chip.invite{ background:rgba(100,160,255,0.1); color:#80b4ff; }
.browse-chip.application { background:rgba(255,200,0,0.1); color:#ffd700; }
.browse-chip.full  { background:rgba(255,59,92,0.1);  color:var(--loss); }
.browse-chip.rp    { background:rgba(255,255,255,0.06); color:var(--t2); }
.browse-join-btn { padding:7px 14px; border-radius:9px; border:none; font-size:12px; font-weight:800; cursor:pointer; flex-shrink:0; transition:all .15s; }
.browse-join-btn.open { background:linear-gradient(135deg,#00ff8c,#00e0b0); color:#050e09; }
.browse-join-btn.apply { background:rgba(255,200,0,0.12); color:#ffd700; border:1px solid rgba(255,200,0,0.3); }
.browse-join-btn.invite-only { background:rgba(255,255,255,0.06); color:var(--t3); border:1px solid rgba(255,255,255,0.1); cursor:default; }
.browse-join-btn.full { background:rgba(255,59,92,0.08); color:var(--loss); border:1px solid rgba(255,59,92,0.2); cursor:default; }
.browse-join-btn.rp-locked { background:rgba(255,255,255,0.05); color:var(--t3); border:1px solid rgba(255,255,255,0.08); cursor:not-allowed; }
.browse-empty { text-align:center; padding:40px 0; color:var(--t3); font-size:13px; }
/* Browse tab inline search */
.browse-tab-search { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:9px 12px; color:var(--t1); font-size:13px; outline:none; margin-bottom:12px; font-family:inherit; }
.browse-tab-search:focus { border-color:rgba(0,255,140,0.35); }
/* Browse Clan Profile Screen (bcp-*) */
.bcp-banner { height:140px; border-radius:16px 16px 0 0; position:relative; overflow:visible; flex-shrink:0; }
.bcp-identity { padding:52px 20px 12px; text-align:center; }
.bcp-clan-name { font-size:22px; font-weight:900; color:var(--t1); letter-spacing:-.3px; }
.bcp-desc { font-size:13px; color:var(--t3); margin-top:6px; line-height:1.45; }
.bcp-chips-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.bcp-stats-row { display:grid; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,0.03); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); margin-top:16px; }
.bcp-stat { padding:14px 8px; text-align:center; }
.bcp-stat-val { font-size:16px; font-weight:900; color:var(--t1); }
.bcp-stat-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.bcp-stat+.bcp-stat { border-left:1px solid rgba(255,255,255,0.06); }
.bcp-section-title { font-size:11px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; padding:14px 20px 8px; }
.bcp-member-row { display:flex; align-items:center; gap:10px; padding:8px 20px; transition:background .12s; border-radius:8px; margin:0 6px; }
.bcp-member-row:hover { background:rgba(255,255,255,0.04); }
.bcp-member-av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; }
.bcp-member-name { font-size:13px; font-weight:700; color:var(--t1); }
.bcp-member-role { font-size:10px; color:var(--t3); margin-top:1px; }
.bcp-member-pnl { margin-left:auto; font-size:12px; font-weight:800; }
.bcp-join-section { padding:16px 20px 24px; }
.bcp-join-btn { width:100%; padding:14px; border-radius:14px; border:none; font-size:14px; font-weight:800; cursor:pointer; transition:opacity .15s; font-family:inherit; }
.bcp-join-btn.open { background:linear-gradient(135deg,#00ff8c,#00e0b0); color:#050e09; }
.bcp-join-btn.open:hover { opacity:.88; }
.bcp-join-btn.apply { background:rgba(255,200,0,0.12); border:1px solid rgba(255,200,0,0.35); color:#ffd700; }
.bcp-join-btn.locked { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--t3); cursor:not-allowed; }
.bcp-more-row { text-align:center; padding:4px 0 8px; font-size:12px; color:var(--t3); }
.apply-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1300; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .15s; }
.apply-modal { background:#13181f; border:1px solid rgba(255,200,0,0.2); border-radius:18px; width:100%; max-width:380px; padding:22px 20px 20px; }
.apply-modal-title { font-size:15px; font-weight:800; color:var(--t1); margin-bottom:4px; }
.apply-modal-sub { font-size:12px; color:var(--t3); margin-bottom:14px; }
.apply-textarea { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.05); border:1px solid rgba(255,200,0,0.2); border-radius:10px; color:var(--t1); font-size:13px; padding:11px 12px; resize:none; outline:none; font-family:inherit; line-height:1.45; transition:border-color .15s; }
.apply-textarea:focus { border-color:rgba(255,200,0,0.5); }
.apply-char-count { font-size:10px; color:var(--t3); text-align:right; margin-top:4px; margin-bottom:14px; }
.apply-modal-btns { display:flex; gap:8px; }
.apply-send-btn { flex:1; padding:11px; border-radius:10px; border:none; background:linear-gradient(135deg,#ffd700,#ffaa00); color:#1a1000; font-size:13px; font-weight:800; cursor:pointer; transition:opacity .15s; }
.apply-send-btn:hover { opacity:.88; }
.apply-cancel-btn { padding:11px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.1); background:none; color:var(--t3); font-size:13px; font-weight:700; cursor:pointer; }
.pending-msg { font-size:11px; color:var(--t3); font-style:italic; margin-top:4px; padding:6px 9px; background:rgba(255,255,255,0.04); border-radius:7px; border-left:2px solid rgba(255,200,0,0.35); line-height:1.4; }
/* ── Clan Chat + Trade Split Layout ─────────── */
.chat-wrap { display:flex; flex-direction:row; overflow:hidden; }
.chat-panel { flex:6; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.trade-panel { flex:4; display:flex; flex-direction:column; overflow:hidden; border-left:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.015); }
@media(max-width:600px){ .trade-panel { display:none; } }
#screen-clan { scrollbar-width:none; }
#screen-clan::-webkit-scrollbar { display:none; }
/* ── Chat full-height CSS mode (replaces JS RAF measurement) ── */
#screen-clan.active.clan-chat-active { overflow:hidden; display:flex; flex-direction:column; }
#screen-clan.active.clan-chat-active > .screen-inner { flex:1; padding:24px; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
#screen-clan.active.clan-chat-active .clan-tabs { flex-shrink:0; }
#screen-clan.active.clan-chat-active #clan-tab-content { flex:1; overflow:hidden; min-height:0; display:flex; flex-direction:column; margin:0 -24px -24px; }
#screen-clan.active.clan-chat-active .chat-wrap { flex:1; height:auto; width:100%; position:static; left:auto; min-height:0; }
/* Chat column */
.chat-col-me   { display:flex; flex-direction:column; align-items:flex-end; }
.chat-col-them { display:flex; flex-direction:column; }
.chat-messages { flex:1; overflow-y:auto; padding:4px 10px 8px; display:flex; flex-direction:column; gap:6px; scroll-behavior:smooth; box-sizing:border-box; }
.chat-messages::-webkit-scrollbar { width:3px; }
.chat-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
.chat-bubble-wrap { display:flex; gap:6px; align-items:flex-end; width:40%; }
.chat-bubble-wrap.me { flex-direction:row-reverse; margin-left:auto; }
.chat-avatar-sm { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; }
.chat-bubble { max-width:100%; padding:7px 11px; border-radius:14px; font-size:13px; line-height:1.45; color:var(--t1); word-break:break-word; }
.chat-bubble.them { background:rgba(255,255,255,0.07); border-radius:14px 14px 14px 3px; }
.chat-bubble.me { background:rgba(0,255,140,0.15); border:1px solid rgba(0,255,140,0.2); border-radius:14px 14px 3px 14px; color:#e0fff0; }
.chat-name { font-size:9px; font-weight:700; color:var(--t3); margin-bottom:2px; text-transform:uppercase; letter-spacing:.04em; }
.chat-ts { font-size:9px; color:var(--t3); margin-top:3px; }
.chat-input-bar { display:flex; gap:8px; padding:8px 10px 32px; border-top:1px solid rgba(255,255,255,0.07); flex-shrink:0; box-sizing:border-box; width:100%; }
.chat-input { flex:1 1 0%; min-width:0; max-width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:8px 12px; color:var(--t1); font-size:14px; outline:none; font-family:inherit; box-sizing:border-box; }
.chat-input:focus { border-color:rgba(0,255,140,0.3); }
.chat-send-btn { width:32px; height:32px; border-radius:10px; border:none; background:linear-gradient(135deg,#00ff8c,#00e0b0); color:#050e09; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .15s; }
.chat-send-btn:hover { opacity:.85; }
.chat-day-divider { text-align:center; font-size:9px; color:var(--t3); letter-spacing:.08em; text-transform:uppercase; position:relative; margin:4px 0; }
.chat-day-divider::before, .chat-day-divider::after { content:''; position:absolute; top:50%; width:28%; height:1px; background:rgba(255,255,255,0.07); }
.chat-day-divider::before { left:0; }
.chat-day-divider::after { right:0; }
.chat-trade-event { display:flex; align-items:center; justify-content:center; margin:8px 16px; }
.chat-trade-event-pill { font-size:10px; font-weight:800; color:#00ff8c; background:rgba(0,255,140,0.08); border:1px solid rgba(0,255,140,0.18); border-radius:20px; padding:3px 10px; white-space:nowrap; letter-spacing:.01em; }
.chat-trade-event-pill.sell { color:#ff4d6d; background:rgba(255,77,109,0.08); border-color:rgba(255,77,109,0.18); }
.chat-league-event-pill { font-size:10px; font-weight:800; color:#FFD700; background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.22); border-radius:20px; padding:3px 10px; white-space:nowrap; letter-spacing:.01em; }
.chat-league-event-pill.loss { color:#a78bfa; background:rgba(167,139,250,0.08); border-color:rgba(167,139,250,0.22); }
.chat-typing { display:flex; gap:4px; align-items:center; padding:4px 10px; background:rgba(255,255,255,0.05); border-radius:12px; width:fit-content; }
.chat-typing span { width:5px; height:5px; border-radius:50%; background:var(--t3); animation:chatDot .9s infinite; }
.chat-typing span:nth-child(2) { animation-delay:.2s; }
.chat-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes chatDot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }
/* Trading panel */
.tp-header { padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tp-header-title { font-size:12px; font-weight:800; color:var(--t1); letter-spacing:.06em; text-transform:uppercase; }
.tp-select { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:var(--t1); font-size:13px; font-family:inherit; padding:8px 10px; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; box-sizing:border-box; }
.tp-select:focus { border-color:rgba(0,255,140,0.3); }
.tp-price-card { margin:10px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:12px 14px; }
.tp-ticker { font-size:11px; font-weight:800; color:var(--t3); letter-spacing:.08em; }
.tp-price { font-size:22px; font-weight:900; color:var(--t1); font-variant-numeric:tabular-nums; }
.tp-change.pos { color:#00ff8c; }
.tp-change.neg { color:#ff4d6d; }
.tp-sparkline { display:flex; gap:2px; align-items:flex-end; height:24px; margin-top:8px; }
.tp-sparkline-bar { flex:1; border-radius:2px; min-height:3px; transition:height .3s; }
.tp-holding { margin:0 12px 8px; background:rgba(0,255,140,0.04); border:1px solid rgba(0,255,140,0.12); border-radius:10px; padding:8px 12px; font-size:11px; display:flex; justify-content:space-between; align-items:center; }
.tp-holding-label { color:var(--t3); }
.tp-holding-val { font-weight:800; color:#00ff8c; }
.tp-trade-box { padding:0 12px; flex-shrink:0; }
.tp-side-row { display:flex; gap:6px; margin-bottom:8px; }
.tp-side-btn { flex:1; padding:8px; border-radius:10px; border:none; font-size:12px; font-weight:800; cursor:pointer; transition:all .15s; }
.tp-side-btn.buy  { background:rgba(0,255,140,0.1); border:1.5px solid rgba(0,255,140,0.25); color:#00ff8c; }
.tp-side-btn.buy.active  { background:rgba(0,255,140,0.22); border-color:#00ff8c; }
.tp-side-btn.sell { background:rgba(255,77,109,0.1); border:1.5px solid rgba(255,77,109,0.25); color:#ff4d6d; }
.tp-side-btn.sell.active { background:rgba(255,77,109,0.22); border-color:#ff4d6d; }
.tp-shares-input { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:var(--t1); font-size:14px; font-family:inherit; font-weight:700; padding:9px 12px; outline:none; margin-bottom:4px; }
.tp-shares-input:focus { border-color:rgba(0,255,140,0.35); }
.tp-cost-hint { font-size:10px; color:var(--t3); margin-bottom:8px; padding:0 2px; }
.tp-execute-btn { width:100%; padding:11px; border-radius:11px; border:none; font-size:13px; font-weight:800; cursor:pointer; letter-spacing:.03em; transition:all .2s; }
.tp-execute-btn.buy  { background:linear-gradient(135deg,#00ff8c,#00e0b0); color:#050e09; box-shadow:0 4px 16px rgba(0,255,140,0.25); }
.tp-execute-btn.sell { background:linear-gradient(135deg,#ff4d6d,#ff8c42); color:#fff; box-shadow:0 4px 16px rgba(255,77,109,0.25); }
.tp-execute-btn:hover { transform:translateY(-1px); opacity:.92; }
.tp-execute-btn:active { transform:translateY(0); }
.tp-activity { flex:1; overflow-y:auto; padding:8px 12px 12px; }
.tp-activity::-webkit-scrollbar { width:3px; }
.tp-activity::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
.tp-activity-title { font-size:9px; font-weight:800; color:var(--t3); letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.tp-activity-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.03); margin-bottom:4px; }
.tp-activity-badge { width:20px; height:20px; border-radius:6px; font-size:8px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tp-activity-badge.buy  { background:rgba(0,255,140,0.15); color:#00ff8c; }
.tp-activity-badge.sell { background:rgba(255,77,109,0.15); color:#ff4d6d; }
.tp-activity-info { flex:1; min-width:0; }
.tp-activity-who  { font-size:10px; font-weight:700; color:var(--t1); }
.tp-activity-what { font-size:9px; color:var(--t3); }
.tp-activity-pnl  { font-size:10px; font-weight:800; }
/* ────────────────────────────────────────────── */
.clan-btn-primary { padding:13px 28px; border-radius:12px; border:none; cursor:pointer; font-size:14px; font-weight:800; background:linear-gradient(135deg,#00ff8c,#00e5ff); color:#050e09; transition:transform .15s,box-shadow .2s; box-shadow:0 4px 18px rgba(0,255,140,0.3); display:inline-flex; align-items:center; gap:7px; }
.clan-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,255,140,0.4); }
.clan-btn-secondary { padding:13px 28px; border-radius:12px; border:1px solid rgba(255,255,255,0.15); cursor:pointer; font-size:14px; font-weight:700; background:rgba(255,255,255,0.05); color:var(--t1); transition:all .2s; display:inline-flex; align-items:center; gap:7px; }
.clan-btn-secondary:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.25); }

/* Clan tabs */
.clan-tabs { display:flex; gap:4px; background:rgba(255,255,255,0.04); border-radius:12px; padding:4px; margin-bottom:20px; }
.clan-tab { flex:1; padding:9px 0; border:none; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700; color:var(--t3); background:transparent; transition:all .2s; }
.clan-tab.active { background:rgba(0,255,140,0.12); color:#00ff8c; }

/* Clan header card */
.clan-header-card { background:linear-gradient(135deg,var(--lg,rgba(0,255,140,0.08)),transparent 70%); border:1px solid var(--lg-border,rgba(0,255,140,0.18)); border-radius:18px; padding:22px; display:flex; align-items:center; gap:18px; margin-bottom:16px; position:relative; overflow:hidden; }
.clan-header-card::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(ellipse,var(--lg-top,rgba(0,255,140,0.1)),transparent 70%); pointer-events:none; }
.clan-logo-big { font-size:52px; line-height:1; filter:drop-shadow(0 0 16px var(--lg-shadow,rgba(0,255,140,0.4))); flex-shrink:0; }
.clan-header-info { flex:1; min-width:0; }
.clan-header-name { font-size:22px; font-weight:900; color:var(--t1); line-height:1; margin-bottom:4px; }
.clan-header-rank { font-size:12px; font-weight:700; color:var(--accent); background:rgba(0,255,140,0.12); padding:3px 10px; border-radius:20px; display:inline-block; margin-bottom:8px; }
.clan-header-stats { display:flex; gap:16px; flex-wrap:wrap; }
.clan-header-stat { font-size:11px; color:var(--t3); }
.clan-header-stat span { color:var(--t1); font-weight:700; }
.clan-role-badge { font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; background:rgba(255,200,0,0.15); color:#ffd700; border:1px solid rgba(255,200,0,0.3); flex-shrink:0; }
.clan-role-badge.member { background:rgba(255,255,255,0.07); color:var(--t2); border-color:rgba(255,255,255,0.1); }

/* League card */
.clan-league-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:16px; padding:18px; margin-bottom:16px; }
.clan-league-title { font-size:11px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
.clan-league-row { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; margin-bottom:6px; transition:background .15s; }
.clan-bot-tag { font-size:8px; font-weight:800; color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:4px; padding:1px 4px; letter-spacing:0.04em; flex-shrink:0; }
.clan-league-row:hover { background:rgba(255,255,255,0.04); }
.clan-league-row.is-mine { background:var(--lg,rgba(0,255,140,0.07)); border:1px solid var(--lg-border,rgba(0,255,140,0.15)); }
.clan-league-pos { font-size:16px; font-weight:900; color:var(--t3); width:22px; flex-shrink:0; }
.clan-league-pos.gold { color:#ffd700; } .clan-league-pos.silver { color:#c0c0c0; } .clan-league-pos.bronze { color:#cd7f32; }
.clan-league-logo { font-size:22px; line-height:1; flex-shrink:0; }
.clan-league-name { flex:1; font-size:13px; font-weight:700; color:var(--t1); }
.clan-league-return { font-size:13px; font-weight:800; }
.clan-league-return.pos { color:var(--profit); }
.clan-league-return.neg { color:var(--loss); }
.clan-league-return.neu { color:var(--t3); }
/* ══ Enhanced League Card — perf bars ══ */
.clg-perf-bar { height:3px; border-radius:2px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:5px; }
.clg-perf-fill { height:100%; border-radius:2px; transition:width .7s var(--ease-out); }

/* Competition card */
.clan-comp-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:16px; padding:18px; margin-bottom:16px; }
.clan-comp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.clan-comp-title { font-size:11px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:1.5px; }
.clan-comp-countdown { font-size:12px; font-weight:700; color:var(--accent); }
.clan-comp-capital { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
.clan-comp-stat { background:rgba(0,0,0,0.25); border-radius:10px; padding:12px; text-align:center; }
.clan-comp-stat-val { font-size:18px; font-weight:900; color:var(--t1); line-height:1; }
.clan-comp-stat-lbl { font-size:10px; color:var(--t3); margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.clan-comp-stat-val.pos { color:var(--profit); }
.clan-comp-stat-val.neg { color:var(--loss); }
.clan-comp-mode { font-size:11px; color:var(--t3); text-align:center; margin-bottom:12px; }
.clan-comp-mode span { color:var(--t2); font-weight:700; }
.clan-trade-btn { width:100%; padding:12px; border-radius:11px; border:1px solid rgba(0,255,140,0.3); background:rgba(0,255,140,0.08); color:#00ff8c; font-size:13px; font-weight:800; cursor:pointer; transition:all .2s; }
.clan-trade-btn:hover { background:rgba(0,255,140,0.15); }
.clan-trade-btn:disabled { opacity:.4; cursor:not-allowed; }

/* Members */
.clan-member-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05); position:relative; }
.clan-member-row:last-child { border-bottom:none; }
.clan-member-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent-dim); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:var(--accent); flex-shrink:0; }
.clan-member-name { font-size:13px; font-weight:700; color:var(--t1); }
.clan-pos-num { width:22px; text-align:center; font-size:12px; font-weight:900; color:var(--t3); flex-shrink:0; }
.clan-pos-num.pos-1 { color:#FFE033; font-size:15px; }
.clan-pos-num.pos-2 { color:#E8E8E8; font-size:14px; }
.clan-pos-num.pos-3 { color:#E8975A; font-size:13px; }
.clan-member-meta { display:flex; align-items:center; gap:5px; margin-top:2px; flex-wrap:wrap; }
.clan-rank-pill { display:inline-block; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:800; letter-spacing:.03em; }
.clan-member-rp { font-size:10px; color:var(--t3); font-weight:600; }
.clan-member-contrib { font-size:12px; font-weight:700; color:var(--t3); }
.clan-member-dots { background:none; border:none; color:var(--t3); font-size:18px; cursor:pointer; padding:4px 8px; border-radius:8px; line-height:1; letter-spacing:1px; transition:background .15s,color .15s; flex-shrink:0; }
.clan-member-dots:hover { background:rgba(255,255,255,0.07); color:var(--t1); }
.clan-member-menu { position:fixed; z-index:9999; background:#1a1a1a; border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:6px; min-width:170px; box-shadow:0 8px 32px rgba(0,0,0,0.6); }
.clan-member-menu-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--t1); cursor:pointer; transition:background .12s; white-space:nowrap; }
.clan-member-menu-item:hover { background:rgba(255,255,255,0.07); }
.clan-member-menu-item.danger { color:var(--loss); }
.clan-member-menu-item.danger:hover { background:rgba(255,59,92,0.1); }
.clan-member-menu-sep { height:1px; background:rgba(255,255,255,0.07); margin:4px 0; }
/* ── Visit Profile overlay ── */
.vp-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.88); display:flex; align-items:center; justify-content:center; padding:10px; }
.vp-panel { width:100%; max-width:860px; height:min(740px,calc(100vh - 20px)); background:var(--bg2); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
/* Header */
.vp-header { position:relative; height:108px; flex-shrink:0; }
.vp-banner { position:absolute; inset:0; border-radius:16px 16px 0 0; }
.vp-close { position:absolute; top:10px; right:10px; z-index:5; background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.15); color:#fff; width:30px; height:30px; border-radius:50%; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.vp-close:hover { background:rgba(0,0,0,0.8); border-color:rgba(255,255,255,0.4); }
.vp-av { position:absolute; bottom:-6px; left:18px; width:76px; height:76px; border-radius:50%; border:3px solid var(--bg2); font-size:28px; font-weight:900; display:flex; align-items:center; justify-content:center; color:#000; z-index:2; }
.vp-id { position:absolute; bottom:8px; left:106px; right:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.vp-name { font-size:20px; font-weight:800; color:var(--t1); line-height:1.1; }
.vp-meta { font-size:10px; color:var(--t3); margin-top:2px; }
.vp-follow { padding:6px 16px; border-radius:99px; background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.4); color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; }
.vp-follow:hover { background:rgba(0,255,140,0.18); }
/* Body: left info + right calendar */
.vp-body { flex:1; display:grid; grid-template-columns:190px 1fr; overflow:hidden; border-top:1px solid var(--border); min-height:0; }
.vp-left { padding:10px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.vp-right { padding:10px 10px 8px; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
/* XP bar footer */
.vp-xp { padding:8px 16px; border-top:1px solid var(--border); flex-shrink:0; }
/* Discipline 2x2 */
.vp-disc { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.vp-chip { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:7px 8px; display:flex; flex-direction:column; gap:2px; }
.vp-chip-top { display:flex; align-items:center; justify-content:space-between; }
.vp-chip-icon { width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vp-chip-icon.streak { background:rgba(255,107,51,0.15); }
.vp-chip-icon.winrate { background:rgba(0,255,140,0.12); }
.vp-chip-icon.perfect { background:rgba(255,210,122,0.14); }
.vp-chip-icon.score   { background:rgba(157,123,255,0.14); }
.vp-chip-val { font-size:15px; font-weight:800; }
.vp-chip-val.streak  { color:#FF6B33; }
.vp-chip-val.winrate { color:var(--accent); }
.vp-chip-val.perfect { color:var(--gold-2,#FFD27A); }
.vp-chip-val.score   { color:#9D7BFF; }
.vp-chip-lbl { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--t2); }
/* Stats 2x2 */
.vp-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.vp-stat { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:6px 8px; }
.vp-stat-lbl { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--t3); }
.vp-stat-val { font-size:12px; font-weight:800; margin-top:1px; }
.vp-stat-val.gain { color:var(--accent); }
.vp-stat-val.loss { color:var(--loss-2); }
/* Donut */
.vp-donut-wrap { display:flex; flex-direction:column; align-items:center; margin-top:auto; padding-top:4px; }
.vp-donut-title { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); margin-bottom:3px; }
/* Calendar */
.vp-cal-hdr { text-align:center; font-size:12px; font-weight:700; color:var(--t2); margin-bottom:5px; flex-shrink:0; }
.vp-cal-grid { flex:1; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; min-height:0; }
.vp-cal-hcell { text-align:center; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--t3); display:flex; align-items:center; justify-content:center; }
.vp-cal-day { border-radius:5px; background:var(--bg3); border:1px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:0; overflow:hidden; padding:2px; }
.vp-cal-day.empty { background:transparent; border:none; }
.vp-cal-day.overflow { background:rgba(255,255,255,0.012); border-color:rgba(255,255,255,0.04); }
.vp-cal-day.overflow .vp-cal-num { color:var(--t4,rgba(255,255,255,0.2)); }
.vp-cal-day.today { border-color:var(--accent); }
.vp-cal-day.gain-1 { background:rgba(0,200,100,0.13); }
.vp-cal-day.gain-2 { background:rgba(0,230,120,0.32); }
.vp-cal-day.gain-3 { background:rgba(0,255,140,0.62); }
.vp-cal-day.loss-1 { background:rgba(200,40,65,0.13); }
.vp-cal-day.loss-2 { background:rgba(230,45,75,0.32); }
.vp-cal-day.loss-3 { background:rgba(255,59,92,0.62); }
.vp-cal-num { font-size:9px; font-weight:600; color:var(--t2); line-height:1; }
.vp-cal-amt { font-size:7px; font-weight:700; line-height:1; }
.vp-cal-pct { font-size:7px; font-weight:700; line-height:1; }
.vp-cal-day.gain-1 .vp-cal-amt,.vp-cal-day.gain-2 .vp-cal-amt,.vp-cal-day.gain-3 .vp-cal-amt { color:var(--accent); }
.vp-cal-day.loss-1 .vp-cal-amt,.vp-cal-day.loss-2 .vp-cal-amt,.vp-cal-day.loss-3 .vp-cal-amt { color:var(--loss); }
.vp-cal-day.gain-1 .vp-cal-pct,.vp-cal-day.gain-2 .vp-cal-pct,.vp-cal-day.gain-3 .vp-cal-pct { color:var(--accent); }
.vp-cal-day.loss-1 .vp-cal-pct,.vp-cal-day.loss-2 .vp-cal-pct,.vp-cal-day.loss-3 .vp-cal-pct { color:var(--loss); }
.vp-cal-week { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; overflow:hidden; padding:2px; }
.vp-cal-wnum { font-size:7px; font-weight:800; text-transform:uppercase; color:var(--accent); line-height:1; }
.vp-cal-wpnl { font-size:8px; font-weight:800; line-height:1; }
.vp-cal-wpnl.gain { color:var(--accent); }
.vp-cal-wpnl.loss { color:var(--loss-2); }
.vp-cal-wpnl.zero { color:var(--t3); }
.vp-legend { display:flex; justify-content:space-between; margin-top:5px; flex-shrink:0; }
.vp-legend-group { display:flex; align-items:center; gap:3px; }
.vp-legend-label { font-size:9px; color:var(--t3); font-weight:600; margin-left:2px; }

/* Create/Join modals */
.clan-modal-overlay { position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,0.8); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.clan-modal-overlay.visible { opacity:1; pointer-events:all; }
.clan-modal { width:min(460px,92vw); max-height:88vh; overflow-y:auto; background:linear-gradient(160deg,#0e1420,#080d16); border:1px solid rgba(0,255,140,0.2); border-radius:22px; padding:28px; transform:translateY(20px) scale(.97); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.clan-modal-overlay.visible .clan-modal { transform:translateY(0) scale(1); }
.clan-modal-title { font-size:18px; font-weight:900; color:var(--t1); margin-bottom:6px; }
.clan-modal-sub { font-size:13px; color:var(--t3); margin-bottom:22px; line-height:1.5; }
.clan-modal-label { font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:1px; margin-bottom:7px; }
.clan-modal-field { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:11px 14px; font-size:14px; color:var(--t1); outline:none; transition:border-color .2s; margin-bottom:16px; box-sizing:border-box; }
.clan-modal-field:focus { border-color:rgba(0,255,140,0.4); }
/* ── Clan Squad Hero ── */
.clan-squad-hero {
  position:relative;
  background:linear-gradient(160deg, var(--sg,rgba(0,255,140,0.07)) 0%, transparent 70%);
  border:1px solid var(--sg-border,rgba(0,255,140,0.12));
  border-radius:18px;
  padding:24px 20px 20px;
  margin-bottom:14px;
  text-align:center;
  overflow:hidden;
}
.clan-squad-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 55% at 50% -5%, var(--sg-top,rgba(0,255,140,0.13)), transparent 70%);
}
.clan-settings-btn {
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  color:var(--t3); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; z-index:1;
}
.clan-settings-btn:hover { background:rgba(255,255,255,0.12); color:var(--t1); border-color:rgba(255,255,255,0.25); transform:rotate(30deg); }
.clan-squad-logo { margin:0 auto 12px; display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:22px; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.1); box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.clan-squad-name { font-size:22px; font-weight:900; color:var(--t1); letter-spacing:-0.02em; margin-bottom:4px; }
.clan-squad-desc { font-size:13px; font-weight:600; color:var(--t2); margin-bottom:14px; line-height:1.5; min-height:18px; letter-spacing:0.01em; }
.clan-squad-chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.clan-squad-chip { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--t2); }
.clan-squad-chip.accent { background:rgba(0,255,140,0.1); border-color:rgba(0,255,140,0.25); color:var(--accent); }
.clan-stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; width:100%; }
.clan-stat-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px 6px 11px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; transition:background .15s; }
.clan-stat-card:hover { background:rgba(255,255,255,0.08); }
.clan-stat-icon { width:18px; height:18px; margin-bottom:5px; flex-shrink:0; }
.clan-stat-val { font-size:15px; font-weight:900; color:var(--t1); font-variant-numeric:tabular-nums; line-height:1.1; }
.clan-stat-lbl { font-size:9px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }
.clan-stat-wide { grid-column:auto; flex-direction:column; align-items:center; justify-content:flex-start; padding:14px 6px 11px; text-align:center; gap:3px; }
.clan-rank-prog-bar { width:100%; height:4px; background:rgba(255,255,255,0.1); border-radius:4px; margin-top:10px; overflow:hidden; flex-shrink:0; }
.clan-rank-prog-fill { height:100%; border-radius:4px; transition:width .7s cubic-bezier(.4,0,.2,1); }
.clan-rank-prog-labels { display:flex; justify-content:space-between; width:100%; margin-top:5px; }
.clan-rank-prog-labels span { font-size:9px; color:var(--t3); font-weight:700; font-variant-numeric:tabular-nums; }
/* ── Clan Settings Modal ── */
.clan-settings-section { margin-bottom:14px; }
.clan-settings-section-title { font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; }
/* ── Clan Logo Picker ── */
.clan-logo-picker { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-bottom:12px; }
.clan-logo-opt { width:100%; aspect-ratio:1; border-radius:9px; border:2px solid transparent; background:rgba(255,255,255,0.03); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; overflow:hidden; padding:0; }
.clan-logo-opt svg { width:100% !important; height:100% !important; }
.clan-logo-opt:hover { background:rgba(255,255,255,0.08); transform:scale(1.08); }
.clan-logo-opt.selected { border-color:var(--cpg,#00ff8c); background:var(--cpg-dim,rgba(0,255,140,0.1)); box-shadow:0 0 10px var(--cpg-shadow,rgba(0,255,140,0.22)); }
/* Palette swatches */
.clan-pal-picker { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.clan-pal-swatch { width:28px; height:28px; border-radius:7px; cursor:pointer; border:2px solid transparent; transition:all .15s; flex-shrink:0; }
.clan-pal-swatch:hover { transform:scale(1.2); }
.clan-pal-swatch.selected { box-shadow:0 0 0 2px rgba(255,255,255,0.9); transform:scale(1.18); }
/* Shape / Texture pickers */
.clan-shape-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
#clan-texture-picker, #cs-texture-picker { grid-template-columns:repeat(6,1fr); }
.clan-shape-opt { padding:7px 4px 5px; border-radius:10px; border:1.5px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; transition:all .15s; position:relative; }
.clan-shape-opt:hover { border-color:rgba(255,255,255,0.25); }
.clan-shape-opt.selected { border-color:var(--cpg,rgba(0,255,140,0.6)); background:var(--cpg-dim,rgba(0,255,140,0.07)); }
.clan-shape-opt-prev { display:flex; align-items:center; justify-content:center; }
.clan-style-label { font-size:9px; font-weight:700; color:var(--t3); }
.clan-shape-opt.selected .clan-style-label { color:var(--cpg,var(--accent)); }
/* Premium lock overlay */
.clan-shape-opt.premium-locked { border-color:rgba(255,215,0,0.2); cursor:pointer; }
.clan-shape-opt.premium-locked:hover { border-color:rgba(255,215,0,0.45); background:rgba(255,215,0,0.04); }
.clan-shape-opt.premium-locked .clan-shape-opt-prev { opacity:0.45; filter:grayscale(0.4); }
.clan-shape-opt.premium-locked .clan-style-label { color:rgba(255,215,0,0.6); }
.clan-lock-badge { position:absolute; top:3px; right:3px; font-size:7px; background:rgba(255,215,0,0.2); border:1px solid rgba(255,215,0,0.4); border-radius:4px; padding:1px 3px; color:#FFD700; font-weight:800; line-height:1.2; }
/* Premium icon lock in icon picker */
.clan-logo-opt.premium-locked { border-color:rgba(255,215,0,0.2) !important; position:relative; }
.clan-logo-opt.premium-locked:hover { border-color:rgba(255,215,0,0.45) !important; background:rgba(255,215,0,0.04) !important; }
.clan-logo-opt.premium-locked svg, .clan-logo-opt.premium-locked img { opacity:0.4; filter:grayscale(0.5); }
.clan-icon-lock { position:absolute; bottom:1px; right:1px; font-size:6px; background:rgba(0,0,0,0.7); border-radius:3px; padding:1px 2px; color:#FFD700; line-height:1; }
.clan-logo-preview { display:flex; align-items:center; justify-content:center; padding:14px 0 4px; }
.clan-modal-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.clan-modal-select { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:11px 14px; font-size:13px; color:var(--t1); outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; }
.clan-modal-select:focus { border-color:rgba(0,255,140,0.4); }
.clan-modal-footer { display:flex; gap:10px; margin-top:4px; }
.clan-modal-cost { font-size:12px; color:var(--t3); text-align:center; margin-bottom:14px; }
.clan-modal-cost span { color:#ffd700; font-weight:700; }

/* Proposals */
.clan-proposal-row { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:14px; margin-bottom:10px; }
.clan-proposal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.clan-proposal-ticker { font-size:14px; font-weight:800; color:var(--t1); }
.clan-proposal-by { font-size:11px; color:var(--t3); }
.clan-proposal-detail { font-size:12px; color:var(--t2); margin-bottom:10px; }
.clan-proposal-btns { display:flex; gap:8px; }
.clan-proposal-approve { flex:1; padding:8px; border-radius:8px; border:none; background:rgba(0,255,140,0.15); color:#00ff8c; font-weight:800; font-size:12px; cursor:pointer; }
.clan-proposal-reject { flex:1; padding:8px; border-radius:8px; border:none; background:rgba(255,59,92,0.1); color:var(--loss); font-weight:800; font-size:12px; cursor:pointer; }

/* ══ CLAN TRADE PANEL ════════════════════════════════════ */
#clan-trade-panel {
  position:fixed; top:50%; left:50%; z-index:9000;
  width:min(94vw, 400px); max-height:88vh; overflow-y:auto;
  background:linear-gradient(165deg,#0f1712 0%,#080b09 100%);
  border:1px solid rgba(0,255,140,0.22);
  border-radius:20px;
  padding:26px 24px 22px;
  transform:translate(-50%,-50%) scale(0.94);
  opacity:0;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity .22s ease;
  box-shadow:0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,255,140,0.05), 0 0 46px rgba(0,255,140,0.10);
  pointer-events:none;
}
#clan-trade-panel::before {
  content:''; position:absolute; top:0; left:20px; right:20px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius:2px;
}
#clan-trade-panel.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:all; }
.clan-tp-handle { display:none; }
.clan-tp-field { border-radius:14px; }
.clan-tp-field:focus { box-shadow:0 0 0 3px rgba(0,255,140,0.12); }
.clan-tp-summary { background:rgba(0,255,140,0.06); border:1px solid rgba(0,255,140,0.14); }
.clan-tp-title { font-size:16px; font-weight:900; color:var(--t1); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.clan-tp-action-badge { font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px; }
.clan-tp-action-badge.buy  { background:rgba(0,255,140,0.15); color:#00ff8c; }
.clan-tp-action-badge.sell { background:rgba(255,59,92,0.12); color:var(--loss); }
.clan-tp-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.clan-tp-field-wrap { display:flex; flex-direction:column; gap:6px; }
.clan-tp-label { font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:1px; }
.clan-tp-field { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:11px; padding:12px 14px; font-size:15px; font-weight:700; color:var(--t1); outline:none; width:100%; box-sizing:border-box; transition:border-color .2s; }
.clan-tp-field:focus { border-color:rgba(0,255,140,0.4); }
.clan-tp-summary { background:rgba(0,0,0,0.3); border-radius:12px; padding:14px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
.clan-tp-summary-label { font-size:12px; color:var(--t3); }
.clan-tp-summary-val { font-size:16px; font-weight:800; color:var(--t1); }
.clan-tp-btns { display:flex; gap:10px; }
.clan-tp-confirm { flex:2; padding:14px; border-radius:13px; border:none; font-size:15px; font-weight:800; cursor:pointer; transition:all .15s; }
.clan-tp-confirm.buy  { background:linear-gradient(135deg,#00ff8c,#00e5ff); color:#050e09; box-shadow:0 6px 22px rgba(0,255,140,0.35), 0 0 26px rgba(0,255,140,0.28); }
.clan-tp-confirm.buy:hover  { box-shadow:0 6px 26px rgba(0,255,140,0.45), 0 0 34px rgba(0,255,140,0.4); }
.clan-tp-confirm.sell { background:linear-gradient(135deg,#ff3b5c,#ff6b35); color:#fff; box-shadow:0 6px 22px rgba(255,59,92,0.35), 0 0 26px rgba(255,107,53,0.28); }
.clan-tp-confirm.sell:hover { box-shadow:0 6px 26px rgba(255,59,92,0.45), 0 0 34px rgba(255,107,53,0.4); }
.clan-tp-cancel { flex:1; padding:14px; border-radius:13px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:var(--t2); font-size:14px; font-weight:700; cursor:pointer; }
.clan-tp-backdrop { position:fixed; inset:0; z-index:8999; background:rgba(0,0,0,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); pointer-events:none; transition:background .3s, backdrop-filter .3s; }
.clan-tp-backdrop.open { background:rgba(0,0,0,0.72); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); pointer-events:all; }

/* ══ CLAN MARKET SCREEN ══════════════════════════════════ */
.clan-market-wrap { display:flex; flex-direction:column; min-height:0; margin:0 -24px -24px; }
.clan-ms-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--bg2); border-bottom:1px solid var(--border); }
.clan-ms-stat { padding:12px 14px; display:flex; flex-direction:column; gap:3px; }
.clan-ms-stat + .clan-ms-stat { border-left:1px solid var(--border); }
.clan-ms-val { font-size:16px; font-weight:900; color:var(--t1); letter-spacing:-0.02em; }
.clan-ms-val.pos { color:var(--accent); }
.clan-ms-val.neg { color:var(--loss); }
.clan-ms-lbl { font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.08em; }
.clan-ms-mode-bar { display:flex; align-items:center; padding:7px 14px; background:var(--bg2); border-bottom:1px solid var(--border); gap:6px; }
.clan-ms-mode-lbl { font-size:10px; color:var(--t3); font-weight:700; }
.clan-ms-mode-val { font-size:10px; font-weight:800; }
.clan-ms-mode-cd { margin-left:auto; font-size:10px; color:var(--t3); font-weight:600; }
.clan-market-hdr { padding:10px 14px 8px; background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; }
.clan-market-search { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 12px; color:var(--t1); font-size:13px; outline:none; transition:border-color 0.2s; font-family:'Inter',sans-serif; box-sizing:border-box; }
.clan-market-search:focus { border-color:var(--accent); }
.clan-market-search::placeholder { color:var(--t3); }
.clan-stock-list { overflow-y:auto; }
/* ── Clan War Fund — 3-column game card grid ── */
.clan-stock-list { overflow-y:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.07); }
.clan-mkt-card {
  display:flex; flex-direction:column;
  padding:10px 10px 8px; cursor:pointer;
  background:#0a0a0a; position:relative; overflow:hidden;
  transition:background .12s;
}
.clan-mkt-card:hover { background:rgba(255,255,255,0.03); }
.clan-mkt-card.has-holding { background:rgba(0,255,140,0.04); }
.clan-mkt-card.flash-up { animation:price-flash-up 0.6s ease-out; }
.clan-mkt-card.flash-dn { animation:price-flash-dn 0.6s ease-out; }
.clan-mkt-card.no-trade { cursor:default; }
/* Card top row: ticker + % */
.clan-mkt-card-top { display:flex; justify-content:space-between; align-items:baseline; }
.clan-mkt-ticker { font-size:13px; font-weight:900; color:var(--t1); letter-spacing:.01em; }
.clan-mkt-pct { font-size:10px; font-weight:800; white-space:nowrap; }
/* Company name + held badge */
.clan-mkt-name { font-size:9px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.clan-mkt-held { font-size:8px; font-weight:800; background:rgba(0,255,140,0.12); color:#00ff8c; border-radius:4px; padding:1px 5px; display:inline-block; margin-top:3px; width:fit-content; border:1px solid rgba(0,255,140,0.2); white-space:nowrap; }
/* Sparkline — full width */
.clan-mkt-chart { flex:1; display:flex; align-items:center; margin:5px 0 4px; min-height:24px; }
.clan-mkt-chart svg { width:100%; height:24px; display:block; }
/* Card bottom row: price + action */
.clan-mkt-card-bottom { display:flex; justify-content:space-between; align-items:center; }
.clan-mkt-price { font-size:12px; font-weight:800; color:var(--t1); white-space:nowrap; }
/* Action buttons */
.clan-mkt-action { display:flex; gap:3px; }
.clan-mkt-btn { width:26px; height:26px; border-radius:7px; border:none; font-size:14px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; font-family:inherit; }
.clan-mkt-btn.buy  { background:rgba(0,255,140,0.12); color:#00ff8c; }
.clan-mkt-btn.buy:hover  { background:rgba(0,255,140,0.24); }
.clan-mkt-btn.sell { background:rgba(255,59,92,0.1); color:#ff4d6d; }
.clan-mkt-btn.sell:hover { background:rgba(255,59,92,0.22); }
/* Holdings section inside trade tab */
.clan-holdings-hdr { padding:12px 14px 4px; display:flex; align-items:center; gap:8px; }
.clan-holdings-hdr-title { font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.08em; }
.clan-holding-row { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.04); }
.clan-holding-badge { width:36px; height:36px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:900; color:var(--t1); letter-spacing:-0.03em; flex-shrink:0; border:1px solid var(--border); }
.clan-holding-info { min-width:0; }
.clan-holding-name { font-size:13px; font-weight:800; color:var(--t1); }
.clan-holding-sub { font-size:10px; color:var(--t3); }
.clan-holding-vals { text-align:right; }
.clan-holding-total { font-size:13px; font-weight:700; color:var(--t1); }
.clan-holding-pnl { font-size:11px; font-weight:700; }
.clan-holding-pnl.pos { color:var(--accent); }
.clan-holding-pnl.neg { color:var(--loss); }
/* ══ WAR FUND HERO ══════════════════════════════════════ */
.wf-hero { padding:18px 16px 14px; background:linear-gradient(160deg,rgba(0,255,140,0.05) 0%,rgba(0,0,0,0) 100%); }
.wf-hero.neg-bg { background:linear-gradient(160deg,rgba(255,59,92,0.06) 0%,rgba(0,0,0,0) 100%); }
.wf-hero-eyebrow { font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.wf-hero-eyebrow-left { display:flex; align-items:center; gap:6px; }
.wf-mode-pill { font-size:8px; font-weight:800; padding:2px 7px; border-radius:20px; letter-spacing:.04em; }
.wf-mode-pill.open { background:rgba(0,255,140,0.12); color:#00ff8c; border:1px solid rgba(0,255,140,0.25); }
.wf-mode-pill.proposals { background:rgba(255,208,0,0.1); color:#ffd700; border:1px solid rgba(255,208,0,0.25); }
.wf-mode-pill.leaders { background:rgba(157,123,255,0.1); color:#9d7bff; border:1px solid rgba(157,123,255,0.25); }
.wf-pulse-dot { width:6px; height:6px; border-radius:50%; background:#00ff8c; box-shadow:0 0 6px #00ff8c; animation:pulse 2s infinite; flex-shrink:0; }
.wf-hero-pnl { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
.wf-hero-pnl.pos  { color:#00ff8c; text-shadow:0 0 28px rgba(0,255,140,0.55),0 0 8px rgba(0,255,140,0.3); }
.wf-hero-pnl.neg  { color:#ff4d6d; text-shadow:0 0 28px rgba(255,77,109,0.55),0 0 8px rgba(255,77,109,0.3); }
.wf-hero-pnl.flat { color:var(--t2); }
/* Battle status pill */
.wf-battle-status { display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; padding:3px 10px; border-radius:20px; margin-top:8px; }
.wf-battle-status.adv  { background:rgba(0,255,140,0.1); color:#00ff8c; border:1px solid rgba(0,255,140,0.25); }
.wf-battle-status.hold { background:rgba(255,255,255,0.05); color:var(--t3); border:1px solid rgba(255,255,255,0.1); }
.wf-battle-status.ret  { background:rgba(255,77,109,0.1); color:#ff4d6d; border:1px solid rgba(255,77,109,0.25); }
.wf-hero-row2 { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.wf-hero-pct { font-size:13px; font-weight:800; }
.wf-hero-pct.pos { color:#00ff8c; }
.wf-hero-pct.neg { color:#ff4d6d; }
.wf-hero-pct.flat { color:var(--t3); }
.wf-hero-capital { font-size:10px; color:var(--t3); font-weight:600; }
.wf-hero-bar-track { height:3px; background:rgba(255,255,255,0.07); border-radius:2px; margin:10px 0 0; overflow:hidden; }
.wf-hero-bar-fill { height:100%; border-radius:2px; transition:width .6s cubic-bezier(.22,1,.36,1); }
.wf-hero-bar-fill.pos { background:linear-gradient(90deg,#00cc6a,#00ff8c); }
.wf-hero-bar-fill.neg { background:linear-gradient(90deg,#cc2233,#ff4d6d); }
/* ── Stat strip below hero ── */
.wf-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); }
.wf-stat-box { padding:8px 0 7px; display:flex; flex-direction:column; align-items:center; gap:1px; }
.wf-stat-box + .wf-stat-box { border-left:1px solid rgba(255,255,255,0.05); }
.wf-stat-val { font-size:12px; font-weight:900; color:var(--t1); letter-spacing:-.02em; }
.wf-stat-val.pos { color:#00ff8c; }
.wf-stat-val.neg { color:#ff4d6d; }
.wf-stat-lbl { font-size:8px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.07em; }
/* ── Holdings chip strip ── */
.wf-holdings-strip-wrap { padding:10px 14px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.wf-holdings-strip-label { font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }
.wf-holdings-strip { display:flex; gap:7px; overflow-x:auto; padding-bottom:10px; }
.wf-holdings-strip::-webkit-scrollbar { height:2px; }
.wf-holdings-strip::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
.wf-holding-chip { flex-shrink:0; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:8px 11px; display:flex; flex-direction:column; gap:2px; min-width:86px; cursor:pointer; transition:background .15s; }
.wf-holding-chip:hover { background:rgba(255,255,255,0.08); }
.wf-holding-chip.has-gain { border-color:rgba(0,255,140,0.22); }
.wf-holding-chip.has-loss { border-color:rgba(255,77,109,0.22); }
.wf-hc-row { display:flex; align-items:center; justify-content:space-between; }
.wf-hc-ticker { font-size:12px; font-weight:900; color:var(--t1); }
.wf-hc-shares { font-size:9px; color:var(--t3); font-weight:600; margin-top:1px; }
.wf-hc-val { font-size:11px; font-weight:800; color:var(--t1); }
.wf-hc-pnl { font-size:9px; font-weight:800; }
.wf-hc-pnl.pos { color:#00ff8c; }
.wf-hc-pnl.neg { color:#ff4d6d; }
.wf-hc-sell-btn { margin-top:6px; font-size:9px; font-weight:800; color:#ff4d6d; background:rgba(255,77,109,0.1); border:1px solid rgba(255,77,109,0.2); border-radius:6px; padding:3px 0; cursor:pointer; font-family:inherit; transition:background .15s; width:100%; }
/* ══ FUND PULSE (chat right panel) ══════════════════════ */
.fp-wrap { display:flex; flex-direction:column; height:100%; padding:12px 10px; overflow:hidden; }
.fp-eyebrow { font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.12em; display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.fp-total { font-size:22px; font-weight:900; color:var(--t1); letter-spacing:-0.5px; line-height:1.1; }
.fp-return { font-size:12px; font-weight:800; margin-top:3px; }
.fp-return.pos { color:#00ff8c; }
.fp-return.neg { color:#ff4d6d; }
.fp-return.flat { color:var(--t3); }
.fp-open-btn { margin-top:10px; padding:8px 10px; border-radius:10px; background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.22); color:#00ff8c; font-size:11px; font-weight:800; cursor:pointer; width:100%; transition:background .15s; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:5px; }
.fp-open-btn:hover { background:rgba(0,255,140,0.18); }
.fp-divider { height:1px; background:rgba(255,255,255,0.06); margin:10px 0 8px; flex-shrink:0; }
.fp-activity-head { font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; flex-shrink:0; }
.fp-feed { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.fp-feed::-webkit-scrollbar { width:2px; }
.fp-feed::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
.fp-feed-item { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:7px; background:rgba(255,255,255,0.03); }
.fp-feed-badge { width:18px; height:18px; border-radius:5px; font-size:8px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fp-feed-badge.buy  { background:rgba(0,255,140,0.15); color:#00ff8c; }
.fp-feed-badge.sell { background:rgba(255,77,109,0.15); color:#ff4d6d; }
.fp-feed-info { flex:1; min-width:0; }
.fp-feed-who  { font-size:10px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-feed-what { font-size:9px; color:var(--t3); }
.fp-feed-pnl  { font-size:10px; font-weight:800; flex-shrink:0; }
.fp-empty { font-size:11px; color:rgba(255,255,255,0.2); text-align:center; padding:16px 0; }
/* ══ TRADE DRAFT (chat right panel) ══════════════════════ */
.td-wrap { display:flex; flex-direction:column; height:100%; padding:12px 10px 10px; overflow:hidden; gap:7px; }
.td-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.td-title { font-size:10px; font-weight:900; color:var(--t1); text-transform:uppercase; letter-spacing:.13em; display:flex; align-items:center; gap:6px; }
.td-count { font-size:9px; font-weight:700; color:var(--t3); background:rgba(255,255,255,0.06); padding:2px 7px; border-radius:20px; }
/* Leading card */
.td-leading { background:rgba(0,255,140,0.04); border:1px solid rgba(0,255,140,0.16); border-radius:12px; padding:10px 11px 9px; flex-shrink:0; position:relative; overflow:hidden; }
.td-leading::before { content:''; position:absolute; top:0; left:0; right:0; height:40%; background:linear-gradient(to bottom,rgba(0,255,140,0.04),transparent); pointer-events:none; }
.td-leading-eyebrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.td-leading-crown { display:flex; align-items:center; gap:4px; font-size:8px; font-weight:900; color:#00ff8c; text-transform:uppercase; letter-spacing:.11em; }
.td-leading-votes { display:flex; align-items:center; gap:3px; font-size:10px; font-weight:900; color:#00ff8c; background:rgba(0,255,140,0.12); padding:2px 8px; border-radius:20px; }
.td-leading-main { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.td-leading-ticker { font-size:20px; font-weight:900; color:var(--t1); letter-spacing:-.03em; line-height:1; }
.td-side-pill { font-size:9px; font-weight:900; padding:2px 7px; border-radius:5px; text-transform:uppercase; letter-spacing:.06em; line-height:1.4; }
.td-side-pill.buy  { background:rgba(0,255,140,0.14); color:#00ff8c; border:1px solid rgba(0,255,140,0.22); }
.td-side-pill.sell { background:rgba(255,59,92,0.14); color:#ff4d6d; border:1px solid rgba(255,59,92,0.22); }
.td-leading-qty { font-size:12px; font-weight:800; color:var(--t2); }
.td-leading-by { font-size:9px; color:var(--t3); margin-bottom:9px; }
.td-approve-btn { width:100%; padding:7px; border-radius:8px; background:rgba(0,255,140,0.14); border:1px solid rgba(0,255,140,0.28); color:#00ff8c; font-size:10px; font-weight:900; font-family:inherit; cursor:pointer; transition:background .15s,box-shadow .15s; letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:5px; }
.td-approve-btn:hover { background:rgba(0,255,140,0.24); box-shadow:0 0 14px rgba(0,255,140,0.18); }
.td-reject-btn { padding:7px 10px; border-radius:8px; background:rgba(255,59,92,0.12); border:1px solid rgba(255,59,92,0.28); color:#ff4d6d; font-size:10px; font-weight:900; font-family:inherit; cursor:pointer; transition:background .15s,box-shadow .15s; letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.td-reject-btn:hover { background:rgba(255,59,92,0.22); box-shadow:0 0 14px rgba(255,59,92,0.18); }
.td-leader-expand-btn { padding:3px 7px; border-radius:6px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.5); font-size:11px; font-weight:900; font-family:inherit; cursor:pointer; transition:background .15s,color .15s; flex-shrink:0; line-height:1; }
.td-leader-expand-btn:hover { background:rgba(255,255,255,0.13); color:rgba(255,255,255,0.9); }
.td-leader-actions { display:none; flex-direction:row; gap:5px; padding:5px 9px 7px; background:rgba(255,255,255,0.03); border-top:1px solid rgba(255,255,255,0.06); }
.td-empty-leading { text-align:center; padding:14px 10px; font-size:11px; color:rgba(255,255,255,0.18); border:1px dashed rgba(255,255,255,0.1); border-radius:10px; flex-shrink:0; line-height:1.7; }
/* Proposals list */
.td-proposals-head { font-size:8px; font-weight:900; color:var(--t3); text-transform:uppercase; letter-spacing:.13em; flex-shrink:0; }
.td-proposals { max-height:140px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; background:rgba(255,255,255,0.05); border-radius:9px; overflow:hidden; flex-shrink:0; }
.td-proposals::-webkit-scrollbar { width:2px; }
.td-proposals::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
.td-proposal { display:flex; align-items:center; gap:7px; padding:7px 9px; background:#0b0b0b; transition:background .12s; }
.td-proposal:hover { background:#101010; }
.td-proposal-side { width:18px; height:18px; border-radius:5px; font-size:8px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.td-proposal-side.buy  { background:rgba(0,255,140,0.13); color:#00ff8c; }
.td-proposal-side.sell { background:rgba(255,59,92,0.13); color:#ff4d6d; }
.td-proposal-info { flex:1; min-width:0; }
.td-prop-ticker { font-size:11px; font-weight:900; color:var(--t1); }
.td-prop-qty { font-size:10px; color:var(--t3); }
.td-prop-who { font-size:9px; color:var(--t3); margin-top:1px; }
.td-vote-group { display:flex; gap:3px; flex-shrink:0; }
.td-vote-btn { display:flex; align-items:center; gap:3px; font-size:10px; font-weight:900; color:var(--t3); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); border-radius:6px; padding:3px 6px; cursor:pointer; font-family:inherit; transition:color .15s, background .15s, border-color .15s; }
.td-vote-btn:hover { color:var(--t1); background:rgba(255,255,255,0.1); }
/* Slot-machine number reel */
.td-vote-reel { display:inline-block; overflow:hidden; height:1.15em; vertical-align:middle; position:relative; min-width:1.2ch; text-align:center; }
.td-vote-num  { display:block; line-height:1.15em; }
.td-vote-btn.voted { color:#CCFF2E; background:rgba(204,255,46,0.1); border-color:rgba(204,255,46,0.25); }
.td-vote-btn.down:hover { color:#ff4d6d; background:rgba(255,77,109,0.08); }
.td-vote-btn.down.downvoted { color:#ff4d6d; background:rgba(255,77,109,0.1); border-color:rgba(255,77,109,0.25); }
/* Propose form */
.td-propose-form { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:7px; flex-shrink:0; }
.td-form-row { display:flex; gap:6px; align-items:stretch; }
.td-form-select { flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:7px; color:var(--t1); font-size:11px; font-weight:800; font-family:inherit; padding:5px 7px; cursor:pointer; min-width:0; }
.td-form-side-toggle { display:flex; border-radius:7px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.td-side-btn { padding:5px 8px; font-size:9px; font-weight:900; font-family:inherit; border:none; cursor:pointer; background:transparent; color:var(--t3); letter-spacing:.05em; transition:all .12s; }
.td-side-btn.buy.active  { background:rgba(0,255,140,0.18); color:#00ff8c; }
.td-side-btn.sell.active { background:rgba(255,59,92,0.18); color:#ff4d6d; }
.td-form-input { flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:7px; color:var(--t1); font-size:11px; font-weight:800; font-family:inherit; padding:5px 8px; min-width:0; }
.td-form-input::placeholder { color:var(--t3); font-weight:600; }
.td-form-submit { background:rgba(0,255,140,0.14); border:1px solid rgba(0,255,140,0.28); color:#00ff8c; font-size:10px; font-weight:900; font-family:inherit; padding:5px 11px; border-radius:7px; cursor:pointer; white-space:nowrap; transition:background .15s; letter-spacing:.04em; flex-shrink:0; }
.td-form-submit:hover { background:rgba(0,255,140,0.26); }
/* ── Trade panel war fund mini ── */
.td-wf-block { background:rgba(0,255,140,0.04); border:1px solid rgba(0,255,140,0.13); border-radius:11px; padding:9px 11px; flex-shrink:0; cursor:pointer; transition:background .15s; }
.td-wf-block:hover { background:rgba(0,255,140,0.09); }
.td-wf-eyebrow { font-size:8px; font-weight:900; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.td-wf-grid { display:grid; grid-template-columns:1fr 1fr 1fr; text-align:center; }
.td-wf-cell:not(:last-child) { border-right:1px solid rgba(255,255,255,0.07); }
.td-wf-val { font-size:13px; font-weight:900; color:var(--t1); line-height:1.1; }
.td-wf-sub { font-size:7.5px; font-weight:700; color:var(--t3); text-transform:uppercase; margin-top:2px; }
/* Activity feed */
.td-act-head { font-size:8px; font-weight:900; color:var(--t3); text-transform:uppercase; letter-spacing:.12em; flex-shrink:0; }
.td-activity { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.td-activity::-webkit-scrollbar { width:2px; }
.td-activity::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
.td-act-item { display:flex; align-items:flex-start; gap:6px; padding:5px 7px; border-radius:7px; background:rgba(255,255,255,0.025); }
.td-act-badge { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; background:rgba(255,255,255,0.06); }
.td-act-body { flex:1; min-width:0; }
.td-act-name { font-size:10px; font-weight:700; color:var(--t1); }
.td-act-desc { font-size:9px; color:var(--t3); margin-top:1px; }
.td-act-time { font-size:8.5px; color:var(--t3); flex-shrink:0; padding-top:1px; }
/* Propose trigger button */
.td-propose-btn { padding:8px; border-radius:10px; border:1px dashed rgba(0,255,140,0.22); background:transparent; color:rgba(0,255,140,0.55); font-size:10px; font-weight:900; font-family:inherit; cursor:pointer; width:100%; transition:all .15s; letter-spacing:.05em; flex-shrink:0; text-transform:uppercase; }
.td-propose-btn:hover { background:rgba(0,255,140,0.06); color:#00ff8c; border-style:solid; }
.td-propose-btn.cancel { border-color:rgba(255,255,255,0.1); border-style:solid; color:var(--t3); }
.td-propose-btn.cancel:hover { background:rgba(255,255,255,0.04); color:var(--t2); }
/* Ticker search highlight */
.clan-mkt-card[data-hidden="true"] { display:none; }
/* Confirm panel now shows ticker prominently */
.clan-tp-ticker-display { font-size:22px; font-weight:900; color:var(--t1); letter-spacing:0.02em; }
.clan-tp-ticker-name { font-size:11px; color:var(--t3); margin-top:2px; }
.clan-tp-live-price { font-size:13px; color:var(--accent); font-weight:700; margin-top:4px; }

/* ══ SOUND TOGGLE ════════════════════════════════════════ */
.sound-toggle-btn {
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:40px; height:40px; border-radius:50%;
  background:rgba(20,20,20,0.85); border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:all 0.2s; box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.sound-toggle-btn:hover { background:rgba(40,40,40,0.95); border-color:rgba(255,255,255,0.25); }
.sound-toggle-btn.muted { opacity:0.45; }

/* ══ PATH MAP ══════════════════════════════════════════ */
.path-map-card { padding:12px 16px 8px; margin-bottom:0; }
.path-map-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.path-map-title { font-size:11px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:0.1em; }
.path-map-subtitle { font-size:10px; color:var(--t3); }
.path-map-scroll { overflow-x:auto; overflow-y:visible; padding-bottom:4px; scrollbar-width:none; }
.path-map-scroll::-webkit-scrollbar { display:none; }
.path-map-track { display:flex; align-items:center; padding:20px 12px 8px; position:relative; min-width:max-content; gap:0; }

.pm-node { display:flex; flex-direction:column; align-items:center; position:relative; }
.pm-node-circle {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; transition:all 0.3s;
  background: rgba(0,0,0,0.3);
}
.pm-node-circle.pm-done    { opacity:1; }
.pm-node-circle.pm-current { animation: pm-node-pulse 2.5s ease-in-out infinite; }
.pm-node-circle.pm-locked  { opacity:0.22; filter:grayscale(0.7); }
@keyframes pm-node-pulse {
  0%,100% { box-shadow: 0 0 0 2px var(--pm-color), 0 0 18px var(--pm-color); }
  50%     { box-shadow: 0 0 0 5px transparent,     0 0 35px var(--pm-color); }
}
.pm-node-label {
  font-size:9px; font-weight:700; color:var(--t3);
  margin-top:7px; text-align:center; white-space:nowrap;
  letter-spacing:0.04em; max-width:56px;
}
.pm-node-label.pm-cur-label { color:#fff; font-size:10px; }
.pm-progress-pct { font-size:10px; color:var(--t3); margin-top:3px; text-align:center; }

/* YOU arrow above current node */
.pm-you-marker {
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.pm-you-tag {
  font-size:8px; font-weight:900; letter-spacing:0.1em;
  padding:2px 6px; border-radius:4px; white-space:nowrap;
  background:var(--accent); color:#000;
}
.pm-you-arrow { font-size:8px; color:var(--accent); line-height:1; }

/* Connector */
.pm-connector {
  flex:1; height:3px; min-width:28px; max-width:52px;
  background:rgba(255,255,255,0.07); border-radius:99px;
  position:relative; flex-shrink:0;
}
.pm-connector-fill {
  position:absolute; left:0; top:0; height:100%;
  border-radius:99px; transition:width 1s ease 0.3s;
}

/* ── Mission card glow when at 0% ── */
@keyframes mission-ring-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,255,140,0.5), inset 0 0 0 0 rgba(0,255,140,0.05); }
  50%     { box-shadow:0 0 0 5px rgba(0,255,140,0), inset 0 0 20px rgba(0,255,140,0.06); }
}
.home-hud-mission.mission-glow {
  border:1px solid rgba(0,255,140,0.45) !important;
  border-radius:10px;
  animation: mission-ring-pulse 2s ease-in-out infinite;
}

/* ── Home HUD: Level+XP and Mission, now separate status-strip columns ── */
.hud-level {
  font-size:13px; font-weight:900; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:8px;
}
.hud-level span { font-size:11px; font-weight:600; color:var(--t3); }
.hud-xp-row {
  display:flex; align-items:center; gap:10px;
}
.home-hud-mission {
  flex:1; min-width:0; display:flex; align-items:center; gap:12px;
}
.hud-mission-icon {
  font-size:22px; flex-shrink:0; line-height:1;
}
.hud-mission-info { flex:1; min-width:0; }
.hud-mission-name {
  font-size:13px; font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.hud-mission-xp {
  font-size:11px; font-weight:800; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(0,255,140,0.2);
  border-radius:20px; padding:3px 10px; flex-shrink:0;
  white-space:nowrap;
}

/* ── State-aware hero strips ── */
.hero-strip {
  display:flex; align-items:center; gap:10px;
  margin-top:18px; padding:10px 14px;
  border-radius:var(--r-md); font-size:13px; font-weight:700;
  border: 1px solid transparent;
  transition: all 0.4s var(--ease-out);
}
.hero-strip-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  animation: live-dot 1.6s ease-in-out infinite;
}
.hero-strip.positions-open {
  background: var(--surface-2);
  border-color: var(--border);
}
.hero-strip.positions-open .hero-strip-dot { background:var(--accent); }
.hero-strip.positions-open.in-loss {
  background: var(--surface-2);
  border-color: var(--border);
}
.hero-strip.positions-open.in-loss .hero-strip-dot { background:var(--loss); }
.hero-strip-label { color:var(--t3); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.hero-strip-val { margin-left:auto; font-family:monospace; font-size:14px; font-weight:800; }
.hero-strip.first-trade {
  background: var(--grad-accent);
  color:#062012;
  border-color: transparent;
  cursor:pointer;
  justify-content:center;
  animation: none;
}
.hero-strip.first-trade:hover { filter:brightness(1.06); }

/* ── First-trade empty state ── */
.first-trade-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:28px 16px; gap:14px;
}
.first-trade-empty-icon { font-size:32px; line-height:1; }
.first-trade-empty-title { font-size:15px; font-weight:800; color:var(--t1); }
.first-trade-empty-sub { font-size:12px; color:var(--t3); text-align:center; line-height:1.5; }
.first-trade-btn {
  display:flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--r-md);
  background:var(--grad-accent); color:#062012;
  font-size:14px; font-weight:900; letter-spacing:0.02em;
  border:none; cursor:pointer; font-family:'Inter',sans-serif;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--ease-out);
}
.first-trade-btn:hover { transform:translateY(-1px); filter:brightness(1.06); }
.first-trade-btn:active { transform:scale(0.98); }

/* ── Trade row slide-in ── */
@keyframes trade-slide-in {
  from { opacity:0; transform:translateX(12px); }
  to   { opacity:1; transform:translateX(0); }
}
.trade-row { animation: trade-slide-in 0.3s var(--ease-out) both; }

/* ── Market Movers ── */
.movers-card { margin-bottom:0; }
.home-trades-card { margin-bottom:0; }

/* ── Home Screen: Journal + Checklist panels ── */
.home-tools-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; margin-bottom:12px;
}
.home-tool-card {
  cursor:default; padding:14px 16px 10px;
}
.home-tool-hdr {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.home-tool-hdr-left {
  display:flex; align-items:center; gap:7px;
}
.home-tool-hdr-title {
  font-weight:700; font-size:13px; color:var(--t1);
}
.home-tool-open {
  font-size:11px; font-weight:600; color:var(--accent); cursor:pointer;
  padding:3px 8px; border:1px solid rgba(0,255,140,0.25); border-radius:6px;
  transition:background 0.15s;
}
.home-tool-open:hover { background:rgba(0,255,140,0.1); }

/* Journal preview rows */
.hjp-row {
  display:flex; align-items:center; gap:7px; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.hjp-row:last-child { border-bottom:none; }
.hjp-badge {
  font-size:9px; font-weight:800; padding:2px 6px; border-radius:4px; letter-spacing:.5px;
}
.hjp-badge.buy  { background:rgba(0,255,140,0.12); color:var(--accent); }
.hjp-badge.sell { background:rgba(255,80,80,0.12);  color:#ff5555; }
.hjp-ticker { font-weight:700; font-size:12px; color:var(--t1); }
.hjp-qty    { font-size:10px; color:var(--t3); }
.hjp-pnl   { font-size:11px; font-weight:700; margin-left:auto; }
.hjp-date   { font-size:10px; color:var(--t3); }
.hjp-empty  { text-align:center; padding:14px 0; color:var(--t3); font-size:12px; }

/* Checklist preview items */
.hcp-item {
  display:flex; align-items:center; gap:8px; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.hcp-item:last-child { border-bottom:none; }
.hcp-check {
  width:16px; height:16px; border:1.5px solid var(--border); border-radius:4px;
  cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.hcp-check:hover { border-color:var(--accent); }
.hcp-check.done { border-color:var(--accent); background:rgba(0,255,140,0.15); }
.hcp-text { font-size:12px; color:var(--t2); line-height:1.3; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcp-text.done { text-decoration:line-through; color:var(--t3); }
.hcp-more  { font-size:11px; color:var(--t3); margin-top:6px; text-align:center; }
.hcp-empty { text-align:center; padding:14px 0; color:var(--t3); font-size:12px; }
.movers-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.movers-col-title {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em;
  color:var(--t3); margin-bottom:8px;
}
.movers-col-title.gainers { color:var(--accent); }
.movers-col-title.losers  { color:var(--loss-2); }
.mover-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-radius:var(--r-sm);
  background:var(--surface-2); margin-bottom:4px; cursor:pointer;
  transition:background 0.15s;
}
.mover-row:hover { background:var(--surface); }
.mover-left { display:flex; align-items:center; gap:8px; min-width:0; }
.mover-left-txt { display:flex; flex-direction:column; min-width:0; }
.mover-ticker { font-size:12px; font-weight:800; color:var(--t1); }
.mover-name   { font-size:9px;  font-weight:600; color:var(--t3); margin-top:1px; }
.mover-pct {
  font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
  padding:3px 6px; border-radius:6px;
}
.mover-pct.gain { color:var(--accent); background:var(--accent-dim); }
.mover-pct.loss { color:var(--loss-2); background:var(--loss-dim); }

.profile-banner-name { font-size:26px; font-weight:700; color:var(--t1); margin-bottom:5px; }
.profile-banner-meta { font-size:14px; color:var(--t2); display:flex; gap:8px; align-items:center; }
.profile-meta-dot { color:var(--t3); }
.profile-main-grid {
  display:grid; grid-template-columns:1fr 300px;
  align-items:start;
}
.profile-calendar-section { padding:20px; }
.profile-trades-section {
  padding:20px; border-left:1px solid var(--border);
}
.calendar-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.cal-month-label { font-size:16px; font-weight:600; color:var(--t1); }
.cal-arrow {
  background:none; border:none; cursor:pointer; color:var(--t2);
  font-size:22px; padding:4px 10px; border-radius:8px; transition:background 0.15s;
  font-family:'Inter',sans-serif;
}
.cal-arrow:hover { background:var(--bg3); color:var(--t1); }

/* ── Discipline Strip ── */
.discipline-strip {
  display:flex; align-items:stretch;
  padding:0 20px;
  border-bottom:1px solid var(--border);
}
.disc-chip {
  flex:1; min-width:0;
  padding:16px 18px;
  display:flex; flex-direction:column; gap:8px;
  position:relative;
}
.disc-chip + .disc-chip::before {
  content:''; position:absolute; left:0; top:16px; bottom:16px;
  width:1px; background:var(--border);
}
.disc-chip-top { display:flex; align-items:center; justify-content:space-between; }
.disc-chip-icon {
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.disc-chip-icon.streak  { background:rgba(255,107,51,0.15); }
.disc-chip-icon.winrate { background:rgba(0,255,140,0.12); }
.disc-chip-icon.perfect { background:rgba(255,210,122,0.14); }
.disc-chip-icon.score   { background:rgba(157,123,255,0.14); }
.disc-chip-val {
  font-size:26px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
}
.disc-chip-val.streak  { color:#FF6B33; }
.disc-chip-val.winrate { color:var(--accent); }
.disc-chip-val.perfect { color:var(--gold-2); }
.disc-chip-val.score   { color:var(--violet); }
.disc-chip-bottom { display:flex; flex-direction:column; gap:1px; }
.disc-chip-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.10em; color:var(--t2); }
.disc-chip-sub   { font-size:10px; font-weight:600; color:var(--t3); }
.disc-info-btn {
  width:16px; height:16px; border-radius:50%; border:1px solid var(--border-2);
  background:none; color:var(--t3); font-size:9px; font-weight:800;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  margin-left:5px; vertical-align:middle; flex-shrink:0; font-family:'Inter',sans-serif;
  transition:border-color 0.15s, color 0.15s;
}
.disc-info-btn:hover { border-color:var(--violet); color:var(--violet); }
#disc-tooltip-popup {
  position:fixed; z-index:9999;
  background:#1a1a2e; border:1px solid rgba(157,123,255,0.35);
  border-radius:var(--r-md); padding:12px 14px; width:220px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(157,123,255,0.12);
  pointer-events:none; opacity:0; transition:opacity 0.15s, transform 0.15s;
  transform:translateY(6px);
}
#disc-tooltip-popup.visible { opacity:1; transform:translateY(0); }
#disc-tooltip-popup::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1a1a2e;
}
.disc-tooltip-title { font-size:11px; font-weight:800; color:var(--violet); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.disc-tooltip-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.06);
}
.disc-tooltip-row:last-child { border-bottom:none; }
.disc-tooltip-row-label { color:var(--t2); font-weight:600; }
.disc-tooltip-row-val { color:var(--violet); font-weight:800; }

.calendar-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; }
.cal-week-header {
  text-align:center; font-size:10px; color:var(--t3);
  padding:4px 0; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
  border-left:1px solid var(--border);
}
.cal-week-total {
  background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:8px;
  min-height:90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.cal-week-num { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--accent); text-shadow:0 0 8px var(--accent-glow); line-height:1; }
.cal-week-pnl { font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.cal-week-pnl.gain { color:var(--accent); }
.cal-week-pnl.loss { color:var(--loss-2); }
.cal-week-pnl.zero { color:var(--t3); }
.cal-week-trades { font-size:9px; color:var(--t3); font-weight:600; }
.cal-day-header {
  text-align:center; font-size:11px; color:var(--t3);
  padding:4px 0; font-weight:600;
}
.cal-day {
  min-height:90px; border-radius:8px; padding:8px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--bg3); border:1px solid transparent;
}
.cal-day.empty { background:transparent; border:none; }
.cal-day.cal-overflow { background:rgba(255,255,255,0.012); border-color:rgba(255,255,255,0.05); }
.cal-day.cal-overflow .cal-day-num { color:var(--t4); }
.cal-day.cal-overflow .cal-day-amt,
.cal-day.cal-overflow .cal-day-pct { opacity:0.45; }
.cal-day.today { border-color:var(--accent); }
.cal-day.gain-1 { background:rgba(0,200,100,0.13); }
.cal-day.gain-2 { background:rgba(0,230,120,0.32); }
.cal-day.gain-3 { background:rgba(0,255,140,0.62); }
.cal-day.loss-1 { background:rgba(200,40,65,0.13); }
.cal-day.loss-2 { background:rgba(230,45,75,0.32); }
.cal-day.loss-3 { background:rgba(255,59,92,0.62); }
.cal-legend {
  display:flex; justify-content:space-between; margin-top:8px; padding:0 2px;
}
.cal-legend-group { display:flex; align-items:center; gap:4px; }
.cal-swatch {
  width:14px; height:14px; border-radius:3px; display:inline-block;
}
.cal-swatch.gain-1 { background:rgba(0,200,100,0.13); border:1px solid rgba(0,200,100,0.3); }
.cal-swatch.gain-2 { background:rgba(0,230,120,0.32); border:1px solid rgba(0,230,120,0.5); }
.cal-swatch.gain-3 { background:rgba(0,255,140,0.62); border:1px solid rgba(0,255,140,0.8); }
.cal-swatch.loss-1 { background:rgba(200,40,65,0.13); border:1px solid rgba(200,40,65,0.3); }
.cal-swatch.loss-2 { background:rgba(230,45,75,0.32); border:1px solid rgba(230,45,75,0.5); }
.cal-swatch.loss-3 { background:rgba(255,59,92,0.62); border:1px solid rgba(255,59,92,0.8); }
.cal-legend-label { font-size:10px; color:var(--t3); font-weight:600; margin-left:2px; }
.cal-day-num { font-size:13px; color:var(--t2); font-weight:600; line-height:1; }
.cal-day-amt { font-size:10px; font-weight:700; line-height:1; }
.cal-day.gain-1 .cal-day-amt,.cal-day.gain-2 .cal-day-amt,.cal-day.gain-3 .cal-day-amt { color:var(--accent); }
.cal-day.loss-1 .cal-day-amt,.cal-day.loss-2 .cal-day-amt,.cal-day.loss-3 .cal-day-amt { color:var(--loss); }
.cal-day-pct { font-size:10px; font-weight:700; line-height:1; }
.cal-day.gain-1 .cal-day-pct,.cal-day.gain-2 .cal-day-pct,.cal-day.gain-3 .cal-day-pct { color:var(--accent); }
.cal-day.loss-1 .cal-day-pct,.cal-day.loss-2 .cal-day-pct,.cal-day.loss-3 .cal-day-pct { color:var(--loss); }
/* Right panel */
.profile-trades-section .card-title { font-size:14px; font-weight:600; color:var(--t2); margin-bottom:12px; }
.profile-trade-row {
  display:flex; flex-direction:column; gap:2px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.profile-trade-row:last-child { border-bottom:none; }
.profile-trade-top { display:flex; justify-content:space-between; align-items:center; }
.profile-trade-ticker { font-size:13px; font-weight:700; color:var(--t1); }
.profile-trade-type {
  font-size:10px; font-weight:600; padding:2px 6px;
  border-radius:4px; text-transform:uppercase;
}
.profile-trade-type.buy { background:rgba(0,255,140,0.15); color:var(--accent); }
.profile-trade-type.sell { background:rgba(255,59,92,0.15); color:var(--loss); }
.profile-trade-type.take-profit { background:rgba(0,255,140,0.18); color:#00ff8c; border:1px solid rgba(0,255,140,0.3); }
.profile-trade-type.stop-loss { background:rgba(255,59,92,0.15); color:var(--loss-2); border:1px solid rgba(255,59,92,0.3); }
.profile-trade-meta { font-size:11px; color:var(--t3); }
.profile-trade-pnl { font-size:12px; font-weight:600; }
.profile-trade-pnl.gain { color:var(--accent); }
.profile-trade-pnl.loss { color:var(--loss); }
.profile-trade-row {
  display:flex; flex-direction:column; gap:2px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.profile-trade-row:last-child { border-bottom:none; }
.profile-trade-top { display:flex; justify-content:space-between; align-items:center; }
.profile-trade-ticker { font-size:13px; font-weight:700; color:var(--t1); }
.profile-trade-type {
  font-size:10px; font-weight:600; padding:2px 6px;
  border-radius:4px; text-transform:uppercase;
}
.profile-trade-type.buy { background:rgba(0,255,140,0.15); color:var(--accent); }
.profile-trade-type.sell { background:rgba(255,59,92,0.15); color:var(--loss); }
.profile-trade-type.take-profit { background:rgba(0,255,140,0.18); color:#00ff8c; border:1px solid rgba(0,255,140,0.3); }
.profile-trade-type.stop-loss { background:rgba(255,59,92,0.15); color:var(--loss-2); border:1px solid rgba(255,59,92,0.3); }
.profile-trade-meta { font-size:11px; color:var(--t3); }
.profile-trade-pnl { font-size:12px; font-weight:600; }
.profile-trade-pnl.gain { color:var(--accent); }
.profile-trade-pnl.loss { color:var(--loss); }
.player-initial {
  font-size:18px; font-weight:700; font-family:'Inter',sans-serif;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--cyan));
  color:#000; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ═══════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════ */
#toast-wrap {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; gap:8px; z-index:9999; pointer-events:none;
  align-items:center;
}
.toast {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg1) 100%);
  border:1px solid var(--border-2);
  border-radius:var(--r-lg); padding:13px 16px;
  display:flex; align-items:flex-start; gap:11px;
  font-family:'Inter',sans-serif;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  animation: toast-in 0.45s var(--ease-spring);
  max-width:380px; min-width:260px; text-align:left;
}
.toast.toast-leaving { animation: toast-out 0.35s var(--ease-out) forwards; }

.toast-icon {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--accent);
}
.toast-icon svg { width:16px; height:16px; }
.toast-body { min-width:0; flex:1; }
.toast-title {
  font-size:13px; font-weight:700; color:var(--t1); line-height:1.35;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.toast-title .toast-amt { font-family:'SF Mono','Fira Mono',monospace; font-weight:800; font-size:12.5px; flex-shrink:0; }
.toast-sub { font-size:11px; color:var(--t3); margin-top:2px; }
.toast-chips { display:flex; gap:6px; margin-top:6px; }
.toast-chip {
  font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:6px;
  font-family:'SF Mono','Fira Mono',monospace;
}
.toast-chip-rp { background:var(--cyan-dim); color:var(--cyan); }
.toast-chip-xp { background:var(--violet-dim); color:var(--violet); }

.toast.win .toast-icon, .toast.mission .toast-icon, .toast.info .toast-icon {
  background:var(--accent-dim); color:var(--accent);
}
.toast.win .toast-amt { color:var(--accent); }
.toast.loss .toast-icon, .toast.error .toast-icon { background:var(--loss-dim); color:var(--loss); }
.toast.loss .toast-amt { color:var(--loss); }
.toast.loss, .toast.error { border-color:rgba(246,70,93,0.30); }

/* Level up — celebratory variant, bigger + gold glow */
.toast.level {
  border-color:rgba(242,183,61,0.4); padding:15px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(242,183,61,0.14), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.toast.level .toast-icon { width:34px; height:34px; background:var(--gold-dim); color:var(--gold); }
.toast.level .toast-icon svg { width:18px; height:18px; }
.toast.level .toast-title { font-size:14px; }
.toast.level .toast-sub { color:var(--gold-2); font-weight:700; }

@keyframes toast-in  { from { opacity:0; transform:translateY(18px) scale(0.94); } to { opacity:1; transform:none; } }
@keyframes toast-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(10px) scale(0.96); } }

/* ═══ League closed / break-day lock ═══ */
.lt-closed-wrap { display:flex; justify-content:center; align-items:flex-start; padding:48px 18px; }
.lt-closed-card {
  width:100%; max-width:360px; text-align:center;
  background: linear-gradient(160deg, rgba(157,123,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(157,123,255,0.22); border-radius:18px;
  padding:32px 24px; box-shadow:0 18px 50px rgba(0,0,0,0.45);
}
.lt-closed-ico {
  width:72px; height:72px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(157,123,255,0.12); border:1px solid rgba(157,123,255,0.28);
}
.lt-closed-title { font-size:19px; font-weight:800; color:var(--t1); margin-bottom:8px; }
.lt-closed-sub   { font-size:13px; font-weight:600; color:var(--t3); line-height:1.6; margin-bottom:18px; }
.lt-closed-cd    { font-size:12px; font-weight:700; color:var(--t2); margin-bottom:22px; }
.lt-closed-back  {
  padding:11px 26px; border-radius:11px; border:1px solid rgba(157,123,255,0.35);
  background:linear-gradient(135deg,rgba(157,123,255,0.18),rgba(157,123,255,0.08));
  color:var(--violet); font-size:13px; font-weight:800; cursor:pointer; font-family:inherit;
}

/* ═══════════════════════════════
   MARKET EVENTS BANNER
═══════════════════════════════ */
#market-event-banner {
  position: fixed; inset: 0; z-index: 10001;
  display: none; pointer-events: none;
}
#market-event-banner.meb-visible { display: block; pointer-events: auto; }

/* Full-screen overlay backdrop */
.meb-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: meb-fadein 0.3s ease;
}
/* Centered event card */
.meb-modal {
  background: linear-gradient(160deg, rgba(16,12,6,0.98) 0%, rgba(8,8,8,0.99) 100%);
  border: 1px solid rgba(255,181,71,0.25);
  border-radius: 24px;
  max-width: 480px; width: calc(100% - 48px);
  padding: 40px 36px 32px;
  text-align: center;
  box-shadow: 0 0 80px rgba(255,181,71,0.12), 0 40px 100px rgba(0,0,0,0.7);
  animation: meb-scaleup 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.meb-modal.theme-crash { border-color: rgba(255,59,92,0.3); box-shadow: 0 0 80px rgba(255,59,92,0.14), 0 40px 100px rgba(0,0,0,0.7); }
.meb-modal.theme-bull  { border-color: rgba(0,255,140,0.3); box-shadow: 0 0 80px rgba(0,255,140,0.12), 0 40px 100px rgba(0,0,0,0.7); }
.meb-modal.theme-gold  { border-color: rgba(255,181,71,0.3); box-shadow: 0 0 80px rgba(255,181,71,0.14), 0 40px 100px rgba(0,0,0,0.7); }
.meb-modal-alert {
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.meb-modal-alert-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: meb-blink 0.8s ease-in-out infinite;
}
.meb-modal.theme-crash .meb-modal-alert { color: var(--loss-2); }
.meb-modal.theme-bull  .meb-modal-alert { color: var(--accent); }
.meb-modal-emoji { font-size: 52px; line-height: 1; margin-bottom: 16px; }
.meb-modal-name {
  font-size: 28px; font-weight: 900; letter-spacing: -0.03em; color: var(--t1);
  margin-bottom: 10px;
}
.meb-modal-desc {
  font-size: 13px; color: var(--t2); line-height: 1.55; margin-bottom: 18px;
}
/* Impact sectors grid */
.meb-impact {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 14px;
}
.meb-impact-item {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px; padding: 5px 11px;
}
.meb-impact-sector { font-size: 11px; font-weight: 600; color: var(--t2); }
.meb-impact-pct { font-size: 12px; font-weight: 900; font-family: monospace; }
/* Exposure row */
.meb-exposure {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px; margin-bottom: 18px;
  background: rgba(255,255,255,0.04); border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
.meb-exposure-label { font-size: 11px; color: var(--t3); }
.meb-exposure-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.1); }
.meb-exposure-value { font-size: 12px; font-weight: 900; }
/* Modal hint */
.meb-modal-hint {
  font-size: 11px; color: var(--t3); margin-top: 14px; line-height: 1.4;
}
/* Stock preview rows inside modal */
.meb-stocks-preview {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px; width: 100%;
}
.meb-stock-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.meb-stock-ticker { font-size: 13px; font-weight: 900; color: var(--t1); min-width: 48px; }
.meb-stock-name   { font-size: 11px; color: var(--t3); flex: 1; text-align: left; padding-left: 8px; }
.meb-stock-prices { display: flex; align-items: center; gap: 6px; }
.meb-stock-from   { font-size: 11px; color: var(--t3); font-family: monospace; }
.meb-stock-arrow  { font-size: 10px; color: var(--t3); }
.meb-stock-to     { font-size: 12px; font-weight: 900; font-family: monospace; }
.meb-stock-to.up  { color: var(--accent); }
.meb-stock-to.dn  { color: var(--loss-2); }
.meb-stock-badge  { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; margin-left: 4px; }
.meb-stock-badge.up { background: rgba(0,255,140,0.15); color: var(--accent); }
.meb-stock-badge.dn { background: rgba(255,59,92,0.15);  color: var(--loss-2); }
/* Active event notice in market screen */
.meb-market-notice {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin: 0 0 0 0;
  font-size: 11px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.meb-market-notice.theme-crash { background: rgba(255,59,92,0.10); color: var(--loss-2); }
.meb-market-notice.theme-bull  { background: rgba(0,255,140,0.08); color: var(--accent); }
.meb-market-notice.theme-gold  { background: rgba(255,181,71,0.08); color: var(--gold); }
.meb-market-notice-dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;
  animation: meb-blink 0.8s ease-in-out infinite;
}
.meb-modal-timer-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 28px;
}
.meb-modal-timer-label { font-size: 11px; color: var(--t3); }
.meb-modal-timer {
  font-size: 32px; font-weight: 900; font-family: monospace;
  color: var(--gold); min-width: 60px;
  animation: meb-blink 1s ease-in-out infinite;
}
.meb-modal.theme-crash .meb-modal-timer { color: var(--loss-2); }
.meb-modal.theme-bull  .meb-modal-timer { color: var(--accent); }
.meb-modal-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.meb-btn {
  padding: 11px 20px; border-radius: 12px; border: none;
  font-size: 12px; font-weight: 800; cursor: pointer;
  transition: all 0.18s; letter-spacing: 0.04em; text-transform: uppercase;
  min-width: 110px;
}
.meb-btn-primary { background: var(--accent); color: #000; border: none; font-size: 13px; min-width: 160px; }
.meb-btn-primary:hover { background: var(--accent-2); transform: translateY(-2px) scale(1.02); }
.meb-modal.theme-crash .meb-btn-primary { background: var(--loss-2); color: #fff; }
.meb-modal.theme-crash .meb-btn-primary:hover { background: var(--loss); }
.meb-modal.theme-gold  .meb-btn-primary { background: var(--gold); color: #000; }
.meb-btn-secondary { background: rgba(255,255,255,0.06); color: var(--t2); border: 1px solid rgba(255,255,255,0.12); }
.meb-btn-secondary:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.meb-btn:hover { transform: translateY(-2px) scale(1.02); }

/* Topbar event badge */
.meb-topbar-badge {
  display: none; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.meb-topbar-badge.meb-tb-visible { display: flex; }
.meb-topbar-badge.theme-crash { background: rgba(255,59,92,0.15); color: var(--loss-2); border: 1px solid rgba(255,59,92,0.28); }
.meb-topbar-badge.theme-bull  { background: rgba(0,255,140,0.12); color: var(--accent);  border: 1px solid rgba(0,255,140,0.25); }
.meb-topbar-badge.theme-gold  { background: rgba(255,181,71,0.12); color: var(--gold);   border: 1px solid rgba(255,181,71,0.25); }
.meb-tb-dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;
  animation: meb-blink 0.7s ease-in-out infinite;
}

/* App-wide event glow — colored border around the main content */
body.event-crash .main-content { box-shadow: inset 0 0 0 2px rgba(255,59,92,0.35), inset 0 0 60px rgba(255,59,92,0.05); }
body.event-bull  .main-content { box-shadow: inset 0 0 0 2px rgba(0,255,140,0.28), inset 0 0 60px rgba(0,255,140,0.04); }
body.event-gold  .main-content { box-shadow: inset 0 0 0 2px rgba(255,181,71,0.28), inset 0 0 60px rgba(255,181,71,0.04); }

/* Topbar bottom glow during event */
body.event-crash .topbar::after { background: linear-gradient(90deg, transparent, rgba(255,59,92,0.5) 30%, rgba(255,59,92,0.4) 70%, transparent); }
body.event-bull  .topbar::after { background: linear-gradient(90deg, transparent, rgba(0,255,140,0.45) 30%, rgba(0,255,140,0.35) 70%, transparent); }
body.event-gold  .topbar::after { background: linear-gradient(90deg, transparent, rgba(255,181,71,0.45) 30%, rgba(255,181,71,0.35) 70%, transparent); }

/* Mechanic tip box inside modal */
.meb-tip {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 14px;
  text-align: left;
  width: 100%;
}
.meb-tip-label {
  font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent); margin-bottom: 7px;
}
.meb-modal.theme-crash .meb-tip-label { color: var(--loss-2); }
.meb-modal.theme-gold  .meb-tip-label { color: var(--gold); }
.meb-tip-example {
  font-size: 12px; color: var(--t1); line-height: 1.6; margin-bottom: 6px;
}
.meb-tip-rule {
  font-size: 10px; color: var(--t3); font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.07); padding-top: 7px; margin-top: 2px;
}

/* Market notice — improved during-event strip */
.meb-market-notice-sub {
  font-size: 10px; opacity: 0.7; margin-top: 3px; display: block;
}

/* Post-event enhanced toast */
.toast.event-end {
  background: linear-gradient(135deg, rgba(8,12,10,0.96) 0%, rgba(7,9,14,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  max-width: 440px; padding: 16px 24px; gap: 14px;
  align-items: center;
  animation: toast-in 0.4s var(--ease-spring);
}
.meb-post-icon { font-size: 22px; flex-shrink: 0; }
.meb-post-text { text-align: left; }
.meb-post-title { font-size: 13px; font-weight: 800; color: var(--t1); margin-bottom: 3px; }
.meb-post-sub { font-size: 11px; font-weight: 500; color: var(--t2); line-height: 1.45; }

@keyframes meb-fadein { from { opacity:0; } to { opacity:1; } }
@keyframes meb-scaleup { from { opacity:0; transform: scale(0.88) translateY(16px); } to { opacity:1; transform: none; } }
@keyframes meb-blink {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}

/* ═══════════════════════════════
   LEVEL UP MODAL
═══════════════════════════════ */
@keyframes lu-pop-in { from { transform:scale(0.6); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes ru-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}
@keyframes ru-slam-top {
  0%   { opacity:0; transform: translateX(-50%) translateY(-24px); }
  100% { opacity:1; transform: translateX(-50%) translateY(0); }
}
@keyframes ru-slam-bot {
  0%   { opacity:0; transform: translateX(-50%) translateY(24px); }
  100% { opacity:1; transform: translateX(-50%) translateY(0); }
}
/* Logo bounce on landing — CSS only, zero canvas cost */
@keyframes ru-logo-land {
  0%   { transform: translateX(-50%) scale(0.85); }
  55%  { transform: translateX(-50%) scale(1.08); }
  80%  { transform: translateX(-50%) scale(0.97); }
  100% { transform: translateX(-50%) scale(1); }
}
/* Shockwave ring — hardware-accelerated transform+opacity */
@keyframes ru-ring {
  0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 0.75; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}
@keyframes ru-btn-rise {
  0%   { opacity:0; transform:translateX(-50%) translateY(16px); }
  100% { opacity:1; transform:translateX(-50%) translateY(0); }
}
/* Sun rises from the bottom edge of the screen to its final position.
   top is fixed at calc(45vh - 110px), so to start at the bottom edge (100vh):
   translateY_start = 100vh - (45vh - 110px) = 55vh + 110px */
@keyframes ru-sun-rise {
  from { transform: translateX(-50%) translateY(calc(55vh + 110px)); }
  to   { transform: translateX(-50%) translateY(0); }
}
/* Stage light beams — animated via Web Animations API */

/* ═══════════════════════════════
   RANKS SCREEN
═══════════════════════════════ */
.rank-hero-card {
  display:flex; align-items:center; gap:28px;
  background:linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border:1px solid var(--border-2); border-radius:var(--r-lg); padding:28px 32px;
}
.rank-hero-badge { flex-shrink:0; }
.rank-hero-badge svg, .rank-hero-badge img { width:90px; height:90px; }
.rank-hero-info { flex:1; }
.rank-hero-label { font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:6px; }
.rank-hero-name { font-size:28px; font-weight:900; letter-spacing:-0.02em; }
.rank-hero-sub { font-size:13px; color:var(--t2); margin-top:4px; }
.rank-hero-next { display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); }
.rank-next-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.06em; }
.rank-next-badge svg, .rank-next-badge img { width:52px; height:52px; opacity:0.6; }
.rank-next-name { font-size:13px; font-weight:800; color:var(--t2); }
.rank-next-xp { font-size:11px; color:var(--accent); font-weight:700; }

/* ── Ranks Screen — tabs ── */
.rank-tabs-row { display:flex; gap:6px; padding:4px; background:rgba(255,255,255,0.04); border-radius:12px; margin-bottom:16px; }
.rank-tab { flex:1; padding:9px 0; border:none; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700; color:var(--t3); background:transparent; transition:all .2s; font-family:inherit; }
.rank-tab.active { background:rgba(0,255,140,0.12); color:#00ff8c; }

/* ── Division League ── */
.div-header-card { background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:20px; margin-bottom:12px; }
.div-header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.div-header-title { font-size:16px; font-weight:900; color:var(--t1); }
.div-header-badge { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px; font-size:11px; font-weight:800; background:rgba(157,123,255,0.12); border:1px solid rgba(157,123,255,0.25); color:#9D7BFF; }
.div-timer-row { display:flex; align-items:center; justify-content:space-between; }
.div-timer-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; }
.div-timer-val { font-size:13px; font-weight:900; color:var(--t1); font-variant-numeric:tabular-nums; }
.div-trade-btn { width:100%; margin-top:14px; padding:11px; border-radius:10px; border:none; background:linear-gradient(135deg,rgba(157,123,255,0.18),rgba(157,123,255,0.08)); border:1px solid rgba(157,123,255,0.3); color:#9D7BFF; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; transition:background .15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.div-trade-btn:hover { background:linear-gradient(135deg,rgba(157,123,255,0.28),rgba(157,123,255,0.14)); }
.div-trade-btn.sunday { background:rgba(255,255,255,0.04); border-color:var(--border); color:var(--t3); cursor:default; }

.div-standings-card { background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px; }
.div-standings-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 10px; background:linear-gradient(135deg,rgba(255,181,71,0.10),rgba(255,181,71,0.03)); border-bottom:1px solid rgba(255,181,71,0.10); }
.div-standings-title { font-size:9.5px; font-weight:900; color:rgba(255,181,71,0.90); text-transform:uppercase; letter-spacing:.12em; }
.div-standings-prizes { display:flex; align-items:center; gap:5px; font-size:10.5px; }
.div-standings-body { padding:8px; }
.div-league-row { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; margin-bottom:4px; transition:background .15s; border:1px solid transparent; }
.div-league-row:hover { background:rgba(255,255,255,0.04); }
.div-league-row.is-mine { background:rgba(0,255,140,0.07); border-color:rgba(0,255,140,0.18); }
.div-league-row.danger { border-color:rgba(248,113,113,0.15); background:rgba(248,113,113,0.04); }
.div-pos { font-size:14px; font-weight:900; color:var(--t3); width:22px; flex-shrink:0; text-align:center; }
.div-pos.gold { color:#FFD700; } .div-pos.silver { color:#C0C0C0; } .div-pos.bronze { color:#CD7F32; }
.div-pos.zone-green { color:rgba(0,255,140,0.85); font-weight:900; }
.div-pos.zone-red   { color:rgba(248,113,113,0.85); font-weight:900; }
.div-avatar-wrap { flex-shrink:0; display:flex; align-items:center; }
.div-avatar-wrap .lb-user-avatar { width:36px; height:36px; }
.div-name-col { flex:1; min-width:0; }
.div-player-name { font-size:12px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.div-rp-badge { font-size:9px; color:var(--t3); margin-top:1px; }
.div-perf-bar { height:3px; border-radius:2px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:4px; }
.div-perf-fill { height:100%; border-radius:2px; }
.div-return { font-size:13px; font-weight:800; flex-shrink:0; }
.div-return.pos { color:var(--profit); } .div-return.neg { color:var(--loss); } .div-return.neu { color:var(--t3); }
.div-rp-reward { font-size:10px; font-weight:700; flex-shrink:0; width:40px; text-align:right; }
.div-rp-reward.pos { color:rgba(0,255,140,0.8); } .div-rp-reward.neg { color:rgba(248,113,113,0.8); }

.div-how-card { background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px; }
.div-how-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; }
.div-how-header span { font-size:13px; font-weight:700; color:var(--t2); }
.div-how-body { padding:0 16px 16px; display:none; }
.div-how-body.open { display:block; }
.div-rp-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:10px; }
.div-rp-table th { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.07em; padding:4px 8px; text-align:left; }
.div-rp-table td { padding:6px 8px; border-bottom:1px solid var(--border); color:var(--t2); }
.div-rp-table tr:last-child td { border-bottom:none; }
.div-rp-table .rp-pos { color:rgba(0,255,140,0.9); font-weight:700; }
.div-rp-table .rp-neg { color:rgba(248,113,113,0.9); font-weight:700; }
.div-how-note { font-size:11px; color:var(--t3); line-height:1.6; margin-top:12px; padding:10px; background:rgba(255,255,255,0.03); border-radius:8px; }

/* ── Ranks Screen — single unified card ── */
.rank-main-card { background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); overflow:hidden; }
.rank-section { padding:24px 28px; }
.rank-section-divider { height:1px; background:var(--border); margin:0; }

/* Current ↔ Progress ↔ Next layout */
.rank-mid { display:flex; align-items:center; gap:20px; }
.rank-badge-col { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.rank-badge-col svg, .rank-badge-col img { display:block; }
.rank-badge-label { font-size:9px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; }
.rank-badge-name  { font-size:15px; font-weight:900; letter-spacing:-0.01em; }
.rank-badge-sub   { font-size:11px; color:var(--accent); font-weight:700; }
.rank-badge-col.dimmed .rank-badge-name { color:var(--t2); }
.rank-mid-bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.rank-mid-rp  { font-size:12px; font-weight:700; color:var(--accent); }
.rank-mid-track { width:100%; height:8px; background:rgba(255,255,255,0.07); border-radius:99px; overflow:hidden; }
.rank-mid-fill  { height:100%; border-radius:99px; transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1); }

/* How it works — collapsible */
.rank-how-header { display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; font-size:13px; font-weight:700; }
.rank-how-header:hover { opacity:0.8; }
.rank-how-arrow { font-size:11px; color:var(--t3); transition:transform 0.2s; }
.rank-how-arrow.open { transform:rotate(180deg); }
.rank-how-body  { display:none; margin-top:18px; }

/* Compact RP table */
.rp-tables-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.rp-table { border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
.rp-table-head { background:rgba(255,255,255,0.05); padding:8px 12px; font-size:10px; font-weight:800; color:var(--t2); text-transform:uppercase; letter-spacing:0.05em; }
.rp-table-row  { display:grid; grid-template-columns:1.2fr 1fr 1fr; padding:7px 12px; border-top:1px solid var(--border); font-size:11px; align-items:center; }
.rp-table-row.head-row { background:rgba(255,255,255,0.03); font-size:9px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.04em; }
.rp-pos  { color:#00C9A7; font-weight:700; }
.rp-neg  { color:#FF4C4C; font-weight:700; }
.rp-neutral { color:var(--t3); }

/* League table */
.league-table { border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
.league-table-row { display:grid; grid-template-columns:2fr 1fr; padding:8px 12px; border-top:1px solid var(--border); font-size:11px; align-items:center; }
.league-table-row:first-child { border-top:none; background:rgba(255,255,255,0.03); font-size:9px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.04em; }
.rank-how-note { font-size:11px; color:var(--t3); margin-top:12px; line-height:1.6; }

/* RP Graph */
.rp-graph-wrap { position:relative; }
.rp-graph-svg { display:block; width:100%; height:120px; overflow:visible; }
.rp-graph-empty { text-align:center; padding:32px 0; font-size:12px; color:var(--t3); }
.rp-tooltip {
  display:none; position:absolute; pointer-events:none;
  background:rgba(13,27,46,0.95); border:1px solid var(--border-2);
  border-radius:var(--r-sm); padding:8px 12px; font-size:12px;
  white-space:nowrap; z-index:10; transform:translate(-50%,-110%);
}
.rp-tooltip strong { font-size:14px; font-weight:800; }
.rp-section-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:12px; }

/* RP Breakdown */
.rp-breakdown-item {
  display:grid; grid-template-columns:24px 1fr auto auto;
  align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--border); font-size:12px;
}
.rp-breakdown-item:last-child { border-bottom:none; }
.rp-breakdown-icon { font-size:14px; text-align:center; }
.rp-breakdown-label { color:var(--t2); }
.rp-breakdown-time { font-size:10px; color:var(--t3); white-space:nowrap; }
.rp-breakdown-delta { font-weight:800; white-space:nowrap; }
.rp-breakdown-delta.pos { color:#00C9A7; }
.rp-breakdown-delta.neg { color:#FF4C4C; }
.rp-breakdown-empty { font-size:12px; color:var(--t3); text-align:center; padding:20px 0; }

/* Rank Ladder */
.rank-ladder { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.rank-tier-row {
  display:flex; align-items:center; gap:0;
  border-radius:var(--r-md); overflow:hidden;
}
.rank-tier-label-col {
  width:90px; flex-shrink:0; padding:10px 14px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
  display:flex; align-items:center;
}
.rank-divs-row { display:flex; align-items:center; gap:8px; flex:1; padding:10px 14px; }
.rank-div-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:default; opacity:0.4; transition:opacity 0.2s; padding:4px 8px; border-radius:var(--r-sm);
}
.rank-div-item.current { opacity:1; background:rgba(255,255,255,0.06); outline:1px solid rgba(255,255,255,0.12); }
.rank-div-item.unlocked { opacity:0.9; }
.rank-div-item svg, .rank-div-item img { width:44px; height:44px; }
.rank-div-num { font-size:10px; font-weight:700; color:var(--t3); }
.rank-div-lvl { font-size:9px; color:var(--t4); }
.rank-tier-row.current-tier { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.08); }
.rank-tier-info { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; padding:10px 14px; flex-shrink:0; min-width:150px; }
.rank-tier-range  { font-size:11px; font-weight:800; }
.rank-tier-tagline{ font-size:10px; color:var(--t3); }

/* Bottom two-column layout */
.rank-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.rank-bottom-left { display:flex; flex-direction:column; }
.rank-bottom-right { display:flex; flex-direction:column; }

/* ═══════════════════════════════
   UTILITIES
═══════════════════════════════ */
.gain { color:var(--accent); font-weight:700; }
.loss { color:var(--loss); font-weight:700; }
.neutral { color:var(--t2); }
.sep { height:1px; background:var(--border); margin:18px 0; }
.cta-btn {
  width:100%; padding:16px;
  background: var(--grad-accent);
  color:#000; border:none; border-radius:var(--r-md); font-size:15px; font-weight:900;
  cursor:pointer; font-family:'Inter',sans-serif; letter-spacing:0.02em;
  box-shadow: 0 8px 32px rgba(0,255,140,0.32), 0 1px 0 rgba(255,255,255,0.25) inset;
  transition: all 0.25s var(--ease-out);
  position:relative; overflow:hidden;
}
.cta-btn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,255,140,0.42), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.cta-btn:hover::before { transform: translateX(100%); }
.cta-btn:active { transform: scale(0.99) translateY(0); }

/* ═══ AUTH SCREEN — Cinematic Entry ═══ */
/* ═══ AUTH SCREEN — Immersive Landing ═══ */
#auth-screen {
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(ellipse 70% 55% at 75% -5%, rgba(46,230,255,0.10), transparent 55%),
    radial-gradient(ellipse 60% 50% at -5% 105%, rgba(157,123,255,0.09), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,255,140,0.04), transparent 65%),
    #07090E;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto; overflow-x:hidden;
}
/* Dim overlay — tones down the canvas matrix */
#auth-screen::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: rgba(7,9,14,0.52);
}
/* Animated aurora blobs */
#auth-screen::before {
  content:''; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(0,255,140,0.07), transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 70%, rgba(46,230,255,0.06), transparent 60%);
  filter: blur(60px);
  animation: auth-aurora 22s ease-in-out infinite alternate;
}
@keyframes auth-aurora {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(-4%, 6%) rotate(14deg); }
}
#auth-canvas { position:fixed; inset:0; opacity:0.28; pointer-events:none; z-index:0; }

/* ── Content wrapper ── */
.auth-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:98px 24px 40px;
  animation: auth-rise 0.9s var(--ease-spring) both;
  min-height:100vh; justify-content:center; width:100%; flex-shrink:0;
}
@keyframes auth-rise {
  from { opacity:0; transform: translateY(32px); }
  to   { opacity:1; transform: none; }
}

/* ── Logo ── */
.auth-logo {
  font-size:46px; font-weight:900; letter-spacing:0.12em;
  background: linear-gradient(135deg, #FFFFFF 0%, #00FF8C 45%, #2EE6FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(0,255,140,0.45));
  animation: auth-glow 5s ease-in-out infinite;
  margin-bottom:48px;
}
@keyframes auth-glow {
  0%,100% { filter: drop-shadow(0 0 18px rgba(0,255,140,0.42)); }
  50%     { filter: drop-shadow(0 0 32px rgba(46,230,255,0.58)); }
}

/* ── Logo image ── */
.auth-logo-img {
  width: 90px; height: 90px;
  object-fit: contain;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 20px rgba(0,255,140,0.35));
  animation: auth-glow 5s ease-in-out infinite;
}

/* ── Auth Form Overlay ── */
#auth-form-overlay {
  position: fixed; inset: 0; z-index: 10002;
  background: transparent;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  animation: afo-in 0.32s var(--ease-spring) both;
}
@keyframes afo-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.afo-back {
  position: absolute; top: 22px; left: 28px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.45); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  transition: color 0.18s, background 0.18s;
  font-family: 'Inter', sans-serif;
}
.afo-back:hover { color: #fff; background: rgba(255,255,255,0.06); }
.afo-back svg { opacity: 0.7; }
.afo-inner {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 24px 48px; width: 100%; max-width: 520px;
}
.afo-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 36px;
}
.afo-brand-logo {
  width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0,255,140,0.4));
}
.afo-brand-name {
  font-size: 48px; font-weight: 800; letter-spacing: 0.08em;
  background: linear-gradient(135deg, #fff 0%, #00FF8C 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.afo-title {
  font-size: 56px; font-weight: 900; color: #fff;
  letter-spacing: -0.02em; margin-bottom: 8px; text-align: center;
}
.afo-sub {
  font-size: 14px; color: rgba(255,255,255,0.4); margin-bottom: 32px;
  text-align: center;
}
.afo-card {
  width: 100%; background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 32px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

/* ── Top Navbar ── */
#auth-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(7, 9, 14, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.auth-nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
}
.auth-nav-logo {
  width: 28px; height: 28px; object-fit: contain;
  filter: brightness(0) invert(1);
}
.auth-nav-name {
  font-size: 15px; font-weight: 800; letter-spacing: 0.06em;
  color: #fff;
}
.auth-nav-links {
  display: flex; align-items: center; gap: 8px;
}
.auth-nav-link {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.52);
  padding: 6px 14px; border-radius: 8px;
  transition: color 0.18s, background 0.18s;
  letter-spacing: 0.01em;
}
.auth-nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.auth-nav-link.active { color: var(--accent); }
.auth-nav-actions {
  display: flex; align-items: center; gap: 10px;
}
.auth-nav-login {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7);
  padding: 7px 16px; border-radius: 8px;
  transition: color 0.18s;
}
.auth-nav-login:hover { color: #fff; }
.auth-nav-signup {
  background: none;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 13px; font-weight: 700;
  padding: 7px 18px; border-radius: 8px; cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 0 12px rgba(0,255,140,0.15);
}
.auth-nav-signup:hover {
  background: rgba(0,255,140,0.10);
  box-shadow: 0 0 20px rgba(0,255,140,0.28);
}

/* ── Tagline ── */
.auth-tagline {
  font-size:90px; font-weight:900; color:#fff;
  line-height:1.18; letter-spacing:-0.03em;
  margin-bottom:24px;
  text-shadow: 0 2px 60px rgba(0,0,0,0.6);
}
.auth-subtag {
  font-size:18px; font-weight:500; color:rgba(255,255,255,0.72);
  line-height:1.7; letter-spacing:0.01em;
  margin-bottom:40px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.auth-subtag-gold {
  display:inline-block; margin-top:6px;
  color: var(--gold-2);
  font-size:13px; font-weight:800;
  letter-spacing:0.18em; text-transform:uppercase;
  filter: drop-shadow(0 0 14px rgba(255,181,71,0.45));
}
.auth-tagline .auth-word {
  color: var(--accent);
  display:inline-block;
  filter: drop-shadow(0 0 20px rgba(0,255,140,0.65));
}
.auth-tagline .auth-word { display:inline-flex; align-items:baseline; }
.wslot { display:inline-block; overflow:hidden; height:1.15em; vertical-align:top; }
.wdrum { display:flex; flex-direction:column; will-change:transform; width:100%; }
.wdrum-ch { display:block; height:1.15em; line-height:1.15; flex-shrink:0; text-align:center; width:100%; }

/* ── CTA buttons ── */
.auth-cta-row {
  display:flex; gap:14px; margin-bottom:28px;
}
.scroll-hint {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-top:8px; cursor:pointer; opacity:0.45;
  transition: opacity 0.25s;
  user-select:none;
}
.scroll-hint:hover { opacity:0.75; }
.scroll-hint-text {
  font-size:11px; font-weight:500; letter-spacing:0.12em;
  text-transform:uppercase; color:#fff;
}
.scroll-hint-arrow {
  color:#fff;
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}
.auth-cta-btn {
  padding:14px 40px; border-radius:12px; border:none;
  font-size:15px; font-weight:800; letter-spacing:0.04em;
  cursor:pointer; font-family:'Inter',sans-serif;
  transition: all 0.25s var(--ease-out);
  position:relative; overflow:hidden;
}
.auth-cta-btn.primary {
  background: var(--grad-accent); color:#000;
  box-shadow: 0 8px 32px rgba(0,255,140,0.35), 0 1px 0 rgba(255,255,255,0.3) inset;
}
.auth-cta-btn.primary:hover { transform:translateY(-2px); box-shadow: 0 14px 40px rgba(0,255,140,0.48); }
.auth-cta-btn.secondary {
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  backdrop-filter: blur(10px);
}
.auth-cta-btn.secondary:hover { background:rgba(255,255,255,0.12); transform:translateY(-2px); border-color:rgba(255,255,255,0.28); }
.auth-cta-btn:active { transform:scale(0.98); }

/* ── Forms (floating, no card) ── */
.auth-form-wrap {
  width:360px; text-align:left;
  animation: form-drop 0.4s var(--ease-spring) both;
}
@keyframes form-drop {
  from { opacity:0; transform: translateY(-14px); }
  to   { opacity:1; transform: none; }
}
.auth-label {
  font-size:10px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.12em; margin-bottom:7px; display:block;
}
.auth-input {
  width:100%;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px; padding:13px 16px; color:var(--t1);
  font-size:14px; outline:none; font-family:'Inter',sans-serif;
  margin-bottom:16px; box-sizing:border-box;
  transition: all 0.25s var(--ease-out);
  backdrop-filter: blur(8px);
}
.auth-input:focus {
  border-color: rgba(0,255,140,0.45);
  background: rgba(0,255,140,0.05);
  box-shadow: 0 0 0 3px rgba(0,255,140,0.10);
}
/* ── OTP verification boxes ── */
.otp-boxes {
  position:relative;
  display:flex; gap:10px; justify-content:center; margin-bottom:8px;
}
.otp-box {
  width:48px; height:56px; text-align:center;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px; color:var(--t1);
  font-size:22px; font-weight:800; outline:none; font-family:'Inter',sans-serif;
  box-sizing:border-box; transition: all 0.25s var(--ease-out);
  backdrop-filter: blur(8px);
}
.otp-box:focus {
  border-color: rgba(0,255,140,0.45);
  background: rgba(0,255,140,0.05);
  box-shadow: 0 0 0 3px rgba(0,255,140,0.10);
}
.otp-box.filled {
  border-color: rgba(0,255,140,0.3);
}
.otp-box.otp-error {
  border-color: rgba(255,68,68,0.6);
  animation: otp-shake 0.35s;
}
@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ── OTP success: boxes converge to center, then a checkmark blooms ── */
.otp-boxes.otp-success .otp-box {
  transition: transform 0.42s cubic-bezier(.4,0,.2,1), opacity 0.42s ease;
  pointer-events: none;
}
.otp-boxes.otp-success .otp-box[data-otp-index="0"] { transform: translateX(145px) scale(0.3); opacity:0; }
.otp-boxes.otp-success .otp-box[data-otp-index="1"] { transform: translateX(87px)  scale(0.3); opacity:0; }
.otp-boxes.otp-success .otp-box[data-otp-index="2"] { transform: translateX(29px)  scale(0.3); opacity:0; }
.otp-boxes.otp-success .otp-box[data-otp-index="3"] { transform: translateX(-29px) scale(0.3); opacity:0; }
.otp-boxes.otp-success .otp-box[data-otp-index="4"] { transform: translateX(-87px) scale(0.3); opacity:0; }
.otp-boxes.otp-success .otp-box[data-otp-index="5"] { transform: translateX(-145px) scale(0.3); opacity:0; }

#otp-success-check {
  position:absolute; left:50%; top:50%;
  width:48px; height:48px; border-radius:50%;
  background: var(--grad-accent);
  display:flex; align-items:center; justify-content:center;
  transform: translate(-50%,-50%) scale(0);
  opacity:0;
  box-shadow: 0 0 0 rgba(0,255,140,0.5);
  transition: transform 0.4s var(--ease-spring), opacity 0.25s ease, box-shadow 0.4s ease;
}
#otp-success-check.show {
  transform: translate(-50%,-50%) scale(1);
  opacity:1;
  box-shadow: 0 0 28px rgba(0,255,140,0.55);
}

.auth-btn {
  width:100%; padding:14px; border-radius:12px; border:none;
  background: var(--grad-accent);
  color:#000; font-size:14px; font-weight:900; letter-spacing:0.04em;
  cursor:pointer; margin-top:4px; font-family:'Inter',sans-serif;
  box-shadow: 0 8px 32px rgba(0,255,140,0.32);
  transition: all 0.25s var(--ease-out);
}
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,255,140,0.45); }
.auth-btn:active { transform: scale(0.99); }
.auth-switch {
  text-align:center; margin-top:20px; font-size:13px; color:var(--t3); font-weight:500;
}
.auth-switch span { color:var(--accent); cursor:pointer; font-weight:700; }
.auth-switch span:hover { text-shadow: 0 0 10px var(--accent-glow); }
.auth-error {
  background: rgba(255,59,92,0.10); border:1px solid rgba(255,59,92,0.28);
  border-radius:10px; padding:11px 14px; font-size:12px; color:var(--loss-2);
  margin-bottom:14px; display:none; font-weight:600;
}
.remember-row {
  display:flex; align-items:center; gap:10px; margin-bottom:16px; cursor:pointer;
  user-select:none;
}
.remember-box {
  width:18px; height:18px; border-radius:5px; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.18s ease;
}
.remember-box.checked {
  background:var(--accent); border-color:var(--accent);
}
.remember-box svg { display:none; }
.remember-box.checked svg { display:block; }
.remember-label { font-size:13px; color:var(--t2); font-weight:500; }

/* ── News Screen ── */
.news-header-wrap { margin-bottom:16px; }
.news-header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.news-page-title { font-size:21px; font-weight:900; color:var(--t1); letter-spacing:-0.03em; display:flex; align-items:center; gap:10px; }
.news-title-signal { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(0,255,140,0.85); flex-shrink:0; animation:signal-pulse 2.2s ease-in-out infinite; }
@keyframes signal-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:0.55;} }
.news-live-badge { display:flex; align-items:center; gap:6px; padding:5px 14px; border-radius:20px; background:rgba(0,255,140,0.08); border:1px solid rgba(0,255,140,0.26); font-size:10px; font-weight:900; letter-spacing:0.14em; color:var(--accent); }
.news-header-bottom { display:flex; align-items:center; justify-content:space-between; }
.news-tabs { display:flex; gap:0; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:26px; padding:3px; }
.news-tab { padding:7px 20px; border-radius:22px; border:none; background:transparent; color:var(--t3); font-size:13px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.22s var(--ease-out); }
.news-tab.active { background:var(--grad-accent); color:#000; box-shadow:0 3px 14px rgba(0,255,140,0.30); }
.news-tab:hover:not(.active) { color:var(--t1); }
.news-refresh-btn { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); color:var(--t2); font-size:12px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.2s; }
.news-refresh-btn:hover { border-color:rgba(0,255,140,0.30); color:var(--accent); }
.news-refresh-btn.spinning svg { animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.news-live-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:live-dot 1.4s ease-in-out infinite; flex-shrink:0; }
/* Ticker tape */
.news-tape-wrap { overflow:hidden; border-radius:10px; background:rgba(0,0,0,0.45); border:1px solid rgba(0,255,140,0.13); margin-bottom:14px; height:32px; position:relative; }
.news-tape-wrap::before,.news-tape-wrap::after { content:''; position:absolute; top:0; bottom:0; width:36px; z-index:2; pointer-events:none; }
.news-tape-wrap::before { left:0; background:linear-gradient(to right,#080808,transparent); }
.news-tape-wrap::after { right:0; background:linear-gradient(to left,#080808,transparent); }
.news-tape-track { display:flex; align-items:center; height:100%; overflow:hidden; }
.news-tape-inner { display:inline-flex; align-items:center; white-space:nowrap; animation:tape-scroll 70s linear infinite; }
.news-tape-inner:hover { animation-play-state:paused; }
@keyframes tape-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.news-tape-item { display:inline-flex; align-items:center; gap:10px; padding:0 18px; font-size:11px; color:rgba(255,255,255,0.52); font-weight:500; }
.news-tape-sep { color:var(--accent); opacity:0.45; font-size:12px; }
/* Top story label */
.news-top-story-lbl { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.news-top-story-lbl span { font-size:9px; font-weight:900; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.news-top-story-lbl::after { content:''; flex:1; height:1px; background:linear-gradient(to right,rgba(0,255,140,0.28),transparent); }
.news-grid { display:flex; flex-direction:column; gap:12px; }
.news-card {
  background:linear-gradient(135deg,rgba(255,255,255,0.045) 0%,rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:18px 20px;
  cursor:pointer; transition:all 0.22s var(--ease-out);
  display:flex; gap:16px; text-decoration:none;
}
.news-card:hover {
  border-color:rgba(0,255,140,0.22);
  background:linear-gradient(135deg,rgba(0,255,140,0.055) 0%,rgba(255,255,255,0.02) 100%);
  transform:translateY(-1px); box-shadow:0 8px 32px rgba(0,0,0,0.30);
}
.news-card-img { width:80px; height:72px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.news-card-img-placeholder {
  width:80px; height:72px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,255,140,0.10),rgba(46,230,255,0.07));
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.news-card-body { flex:1; min-width:0; }
.news-card-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.news-source { font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); }
.news-time { font-size:11px; color:var(--t3); font-weight:500; }
.news-headline {
  font-size:14px; font-weight:700; color:var(--t1); line-height:1.45; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-summary {
  font-size:12px; color:var(--t3); line-height:1.5; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-tickers { display:flex; flex-wrap:wrap; gap:5px; }
.news-ticker-tag {
  font-size:10px; font-weight:800; letter-spacing:0.05em; padding:2px 8px; border-radius:6px;
  background:rgba(0,255,140,0.11); color:var(--accent); border:1px solid rgba(0,255,140,0.20);
}
.news-empty { text-align:center; padding:64px 20px; color:var(--t3); }
.news-skeleton {
  background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:10px;
}
@keyframes shimmer { to { background-position:-200% 0; } }
/* ── Featured news card ── */
.news-featured { background:linear-gradient(135deg,rgba(0,255,140,0.07) 0%,rgba(46,230,255,0.03) 60%); border:1px solid rgba(0,255,140,0.18); border-radius:18px; overflow:hidden; cursor:pointer; margin-bottom:4px; transition:all .22s var(--ease-out); }
.news-featured:hover { border-color:rgba(0,255,140,0.35); transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.news-feat-img { width:100%; height:170px; object-fit:cover; display:block; }
.news-feat-placeholder { width:100%; height:130px; background:linear-gradient(135deg,rgba(0,255,140,0.10),rgba(46,230,255,0.07)); display:flex; align-items:center; justify-content:center; font-size:52px; }
.news-feat-body { padding:15px 18px 18px; }
.news-feat-badge { font-size:8.5px; font-weight:900; letter-spacing:.14em; color:#00ff8c; text-transform:uppercase; background:rgba(0,255,140,0.12); padding:3px 10px; border-radius:20px; border:1px solid rgba(0,255,140,0.22); display:inline-flex; align-items:center; gap:5px; margin-bottom:10px; }
.news-feat-headline { font-size:17px; font-weight:800; color:var(--t1); line-height:1.32; margin-bottom:10px; }
.news-feat-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Market mood bar */
.news-mood-bar { background:linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.09); border-radius:14px; padding:12px 16px; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.news-mood-lbl { font-size:9px; font-weight:900; color:var(--t3); text-transform:uppercase; letter-spacing:.13em; flex-shrink:0; }
.news-mood-track { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.07); overflow:hidden; }
.news-mood-fill { height:100%; border-radius:3px; transition:width .9s var(--ease-out); }
.news-mood-pct { font-size:11px; font-weight:900; flex-shrink:0; }
.news-section-lbl { display:flex; align-items:center; gap:12px; font-size:9px; font-weight:900; color:var(--t3); text-transform:uppercase; letter-spacing:.16em; margin:18px 0 10px; }
.news-section-lbl::after { content:''; flex:1; height:1px; background:linear-gradient(to right,rgba(255,255,255,0.10),transparent); }

/* ── News Search ── */
.news-search-wrap { position:relative; margin-bottom:12px; }
.news-search-input { width:100%; padding:10px 42px 10px 40px; border-radius:22px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.05); color:var(--t1); font-size:13px; font-weight:500; font-family:'Inter',sans-serif; outline:none; transition:border-color 0.2s,background 0.2s; box-sizing:border-box; }
.news-search-input::placeholder { color:var(--t3); }
.news-search-input:focus { border-color:rgba(0,255,140,0.30); background:rgba(0,255,140,0.03); }
.news-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--t3); font-size:14px; pointer-events:none; line-height:1; }
.news-search-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.08); border:none; border-radius:50%; color:var(--t2); cursor:pointer; font-size:11px; width:20px; height:20px; display:none; align-items:center; justify-content:center; transition:all 0.2s; }
.news-search-clear:hover { background:rgba(255,59,92,0.22); color:#ff4d6d; }
.news-search-fetching { font-size:12px; color:var(--t3); text-align:center; padding:32px 0; }
.news-search-result-hdr { font-size:11px; color:var(--t3); font-weight:600; margin-bottom:12px; }
.news-search-result-hdr strong { color:var(--accent); font-weight:900; }

/* ── Coach AI Screen ── */
.coach-coming-soon {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:68vh; text-align:center; padding:40px;
}
.coach-ai-icon {
  width:120px; height:120px; border-radius:32px; margin-bottom:32px;
  background:linear-gradient(135deg,rgba(212,175,55,0.18),rgba(255,215,0,0.09));
  border:1px solid rgba(212,175,55,0.35);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(212,175,55,0.22);
  animation:hero-pulse 3s ease-in-out infinite;
}
.coach-cs-label {
  font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:#d4af37; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.coach-cs-title {
  font-size:38px; font-weight:900; line-height:1.1; margin-bottom:14px;
  background:linear-gradient(135deg,#d4af37,#ffe680);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.coach-cs-sub {
  font-size:15px; color:var(--t2); max-width:380px; line-height:1.65; margin-bottom:32px;
}
.coach-cs-badge {
  display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border-radius:24px;
  background:rgba(212,175,55,0.12); border:1px solid rgba(212,175,55,0.32);
  font-size:12px; font-weight:800; letter-spacing:0.06em; color:#d4af37;
  text-transform:uppercase;
}
.coach-features-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:32px 0; max-width:480px; width:100%;
}
.coach-feature-card {
  background:rgba(212,175,55,0.05); border:1px solid rgba(212,175,55,0.16);
  border-radius:14px; padding:16px 14px; text-align:center;
}
.coach-feature-icon { font-size:22px; margin-bottom:8px; }
.coach-feature-label { font-size:12px; font-weight:700; color:var(--t2); }

/* ── Coach AI Chat Layout ── */
.coach-layout {
  display:flex; flex:1; overflow:hidden; min-height:0;
}

/* Sidebar */
.coach-sidebar {
  width:230px; flex-shrink:0; background:#0a0a0a;
  border-right:1px solid rgba(255,255,255,0.07);
  display:flex; flex-direction:column; overflow:hidden;
}
.coach-sidebar-header {
  display:flex; align-items:center; gap:10px; padding:16px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,0.07); flex-shrink:0;
}
.coach-sidebar-avatar img {
  width:32px; height:32px; border-radius:50%;
  object-fit:cover; border:1.5px solid rgba(212,175,55,0.4);
}
.coach-sidebar-name {
  font-size:13px; font-weight:700; color:#d4af37; flex:1;
  letter-spacing:0.02em;
}
.coach-new-btn {
  width:28px; height:28px; border-radius:8px; border:none;
  background:rgba(212,175,55,0.15); color:#d4af37;
  font-size:18px; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
  transition:background 0.18s;
}
.coach-new-btn:hover { background:rgba(212,175,55,0.28); }
.coach-convos-list {
  flex:1; overflow-y:auto; padding:8px 6px;
}
.coach-convos-list::-webkit-scrollbar { width:3px; }
.coach-convos-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
.coach-convo-item {
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  border-radius:10px; cursor:pointer; margin-bottom:2px;
  transition:background 0.15s; position:relative; group:true;
}
.coach-convo-item:hover { background:rgba(255,255,255,0.06); }
.coach-convo-item.active { background:rgba(212,175,55,0.12); }
.coach-convo-title {
  flex:1; font-size:12.5px; color:var(--t2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.coach-convo-item.active .coach-convo-title { color:#d4af37; font-weight:600; }
.coach-convo-actions {
  display:none; gap:2px; align-items:center; flex-shrink:0;
}
.coach-convo-item:hover .coach-convo-actions { display:flex; }
.coach-convo-item.active .coach-convo-actions { display:flex; }
.coach-convo-action-btn {
  width:22px; height:22px; border-radius:5px; border:none;
  background:transparent; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:13px; opacity:0.6;
  transition:opacity 0.15s, background 0.15s; color:var(--t2);
}
.coach-convo-action-btn:hover { opacity:1; background:rgba(255,255,255,0.1); }

/* Main Chat */
.coach-chat {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  background:#0d0d0d; min-width:0;
}
.coach-chat-header {
  display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,0.07); flex-shrink:0;
  background:#0a0a0a;
}
.coach-chat-avatar {
  width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(212,175,55,0.4);
  box-shadow:0 0 16px rgba(212,175,55,0.2);
}
.coach-chat-avatar img { width:100%; height:100%; object-fit:cover; }
.coach-player-avatar {
  width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(255,255,255,0.15);
}
.coach-player-avatar img { width:100%; height:100%; object-fit:cover; }
.coach-chat-name { font-size:15px; font-weight:700; color:var(--t1); }
.coach-chat-status { font-size:11px; color:var(--t3); display:flex; align-items:center; gap:5px; margin-top:2px; }
.coach-status-dot {
  width:7px; height:7px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,0.6); display:inline-block;
  animation:status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%,100% { opacity:1; } 50% { opacity:0.5; }
}

/* Messages area */
.coach-messages {
  flex:1; overflow-y:auto; padding:20px; display:flex;
  flex-direction:column; gap:16px;
}
.coach-messages::-webkit-scrollbar { width:4px; }
.coach-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }

/* Welcome screen */
.coach-welcome {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 20px; flex:1; min-height:300px;
}
.coach-welcome-avatar {
  width:80px; height:80px; border-radius:50%; overflow:hidden; margin-bottom:20px;
  border:2.5px solid rgba(212,175,55,0.5);
  box-shadow:0 0 40px rgba(212,175,55,0.25);
}
.coach-welcome-avatar img { width:100%; height:100%; object-fit:cover; }
.coach-welcome-title {
  font-size:22px; font-weight:800; color:var(--t1); margin-bottom:8px;
}
.coach-welcome-sub {
  font-size:14px; color:var(--t2); max-width:360px; line-height:1.6; margin-bottom:24px;
}
.coach-welcome-chips {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:420px;
}
.coach-welcome-chip {
  padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:600;
  background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.25);
  color:#d4af37; cursor:pointer; transition:background 0.18s, border-color 0.18s;
  white-space:nowrap;
}
.coach-welcome-chip:hover { background:rgba(212,175,55,0.18); border-color:rgba(212,175,55,0.5); }

/* Message bubbles */
.coach-msg {
  display:flex; gap:10px; max-width:82%; animation:msg-in 0.2s ease;
}
@keyframes msg-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.coach-msg.user { flex-direction:row; align-self:flex-end; }
.coach-msg.ai { align-self:flex-start; }
.coach-msg-avatar {
  width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0;
  margin-top:2px;
}
.coach-msg-avatar img { width:100%; height:100%; object-fit:cover; }
.coach-msg-avatar-initial {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff; margin-top:2px;
}
.coach-msg-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.coach-msg.user .coach-msg-body { align-items:flex-end; }
.coach-msg-bubble {
  padding:11px 15px; border-radius:18px; font-size:14px;
  line-height:1.6; word-break:break-word;
  position:relative;
  text-align:start;
}
.coach-msg-bubble[dir="rtl"] { text-align:right; }
.coach-msg-bubble[dir="ltr"] { text-align:left; }
.coach-msg-bubble ul { margin:6px 0 6px 18px; padding:0; }
.coach-msg-bubble li { margin:3px 0; }
.coach-msg-bubble strong { color:#fff; font-weight:700; }
.coach-msg-bubble em { font-style:italic; opacity:0.85; }
.coach-msg-bubble h3, .coach-msg-bubble h4 { margin:8px 0 4px; font-size:14px; font-weight:700; color:#fff; }
.coach-msg.ai .coach-msg-bubble {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-bottom-left-radius:5px; color:var(--t1);
}
.coach-msg.user .coach-msg-bubble {
  background:linear-gradient(135deg, rgba(212,175,55,0.25), rgba(212,175,55,0.15));
  border:1px solid rgba(212,175,55,0.3);
  border-bottom-right-radius:5px; color:var(--t1);
}
.coach-msg-time {
  font-size:10px; color:var(--t3); padding:0 4px;
}
.coach-msg-edit-btn {
  font-size:10px; color:var(--t3); padding:0 4px; cursor:pointer;
  opacity:0; transition:opacity 0.15s;
}
.coach-msg:hover .coach-msg-edit-btn { opacity:1; }
.coach-msg-edit-btn:hover { color:#d4af37; }
.coach-msg-bubble pre { white-space:pre-wrap; margin:0; font-family:inherit; }
.coach-msg-bubble code {
  background:rgba(255,255,255,0.08); border-radius:5px;
  padding:2px 6px; font-family:monospace; font-size:13px;
}

/* Typing indicator */
.coach-typing {
  display:flex; align-items:center; gap:5px; padding:12px 16px;
  background:rgba(255,255,255,0.05); border-radius:18px 18px 18px 5px;
  border:1px solid rgba(255,255,255,0.07);
  align-self:flex-start; margin-bottom:4px;
}
.coach-typing span {
  width:7px; height:7px; border-radius:50%;
  background:#d4af37; opacity:0.4;
  animation:typing-dot 1.2s ease-in-out infinite;
}
.coach-typing span:nth-child(2) { animation-delay:0.2s; }
.coach-typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes typing-dot { 0%,80%,100% { transform:scale(0.7); opacity:0.3; } 40% { transform:scale(1); opacity:1; } }

/* Input area */
.coach-input-area {
  display:flex; align-items:flex-end; gap:10px; padding:14px 16px;
  border-top:1px solid rgba(255,255,255,0.07);
  background:#0a0a0a; flex-shrink:0;
}
.coach-input-wrap {
  flex:1; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1); border-radius:16px;
  padding:10px 14px; min-height:44px; box-sizing:border-box;
  transition:border-color 0.18s;
}
.coach-input-wrap:focus-within {
  border-color:rgba(212,175,55,0.5);
  box-shadow:0 0 0 3px rgba(212,175,55,0.08);
}
.coach-textarea {
  display:block; width:100%; box-sizing:border-box;
  background:transparent; border:none; outline:none;
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  font-size:14px; font-family:inherit; caret-color:#ffffff;
  resize:none; height:22px; max-height:140px;
  overflow-y:hidden; line-height:1.55; padding:0; margin:0;
}
.coach-textarea::placeholder { color:rgba(255,255,255,0.34); }
.coach-send-btn {
  width:44px; height:44px; border-radius:14px; border:none; flex-shrink:0;
  background:linear-gradient(135deg, #d4af37, #ffe680);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:opacity 0.18s, transform 0.15s;
  box-shadow:0 2px 12px rgba(212,175,55,0.35);
}
.coach-send-btn:hover { opacity:0.9; transform:scale(1.04); }
.coach-send-btn:active { transform:scale(0.97); }
.coach-send-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

/* Custom modal */
.coach-modal-overlay {
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation:modal-fade-in 0.18s ease;
}
@keyframes modal-fade-in { from { opacity:0; } to { opacity:1; } }
.coach-modal {
  background:#141414; border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:28px 26px; max-width:380px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  animation:modal-scale-in 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modal-scale-in { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
.coach-modal-icon { font-size:36px; text-align:center; margin-bottom:16px; }
.coach-modal-title { font-size:17px; font-weight:800; color:var(--t1); text-align:center; margin-bottom:8px; }
.coach-modal-msg { font-size:13.5px; color:var(--t2); text-align:center; line-height:1.55; margin-bottom:22px; }
.coach-modal-input {
  width:100%; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12); border-radius:12px;
  padding:12px 14px; color:var(--t1); font-size:14px;
  font-family:inherit; outline:none; box-sizing:border-box;
  margin-bottom:18px; transition:border-color 0.18s;
}
.coach-modal-input:focus { border-color:rgba(212,175,55,0.5); }
.coach-modal-btns { display:flex; gap:10px; }
.coach-modal-btn {
  flex:1; padding:12px; border-radius:12px; border:none;
  font-size:14px; font-weight:700; cursor:pointer;
  transition:opacity 0.18s, transform 0.15s;
}
.coach-modal-btn:hover { opacity:0.88; transform:scale(1.02); }
.coach-modal-btn.cancel {
  background:rgba(255,255,255,0.08); color:var(--t2);
}
.coach-modal-btn.confirm {
  background:linear-gradient(135deg, #d4af37, #ffe680); color:#080808;
}
.coach-modal-btn.danger {
  background:rgba(239,68,68,0.18); color:#f87171;
  border:1px solid rgba(239,68,68,0.3);
}

/* News Modal ── */
.news-modal-overlay {
  position:fixed; inset:0; z-index:88888;
  background:rgba(0,0,0,0.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; box-sizing:border-box;
  opacity:0; pointer-events:none; transition:opacity 0.22s ease;
}
.news-modal-overlay.open { opacity:1; pointer-events:all; }
.news-modal {
  background:#0e1621;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:22px; width:100%; max-width:620px; max-height:88vh;
  overflow-y:auto; position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,255,140,0.06);
  transform:translateY(18px) scale(0.97); transition:transform 0.28s cubic-bezier(0.22,1,0.36,1);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.10) transparent;
}
.news-modal-overlay.open .news-modal { transform:translateY(0) scale(1); }
.news-modal-thumb {
  width:100%; height:200px; object-fit:cover;
  border-radius:18px 18px 0 0; display:block;
}
.news-modal-thumb-placeholder {
  width:100%; height:160px; border-radius:18px 18px 0 0;
  background:linear-gradient(135deg,rgba(0,255,140,0.09),rgba(46,230,255,0.06));
  display:flex; align-items:center; justify-content:center; font-size:48px;
}
.news-modal-body { padding:24px 28px 32px; }
.news-modal-meta { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.news-modal-source {
  font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); background:rgba(0,255,140,0.10);
  padding:3px 10px; border-radius:20px; border:1px solid rgba(0,255,140,0.20);
}
.news-modal-time { font-size:12px; color:var(--t3); font-weight:500; }
.news-modal-title {
  font-size:20px; font-weight:800; color:var(--t1); line-height:1.4; margin-bottom:14px;
}
.news-modal-summary { font-size:14px; color:var(--t2); line-height:1.7; margin-bottom:20px; }
.news-modal-tickers { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.news-modal-ticker-tag {
  font-size:11px; font-weight:800; letter-spacing:0.05em;
  padding:4px 12px; border-radius:8px;
  background:rgba(0,255,140,0.10); color:var(--accent);
  border:1px solid rgba(0,255,140,0.22);
}
.news-modal-link-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:12px; border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05); color:var(--t1); font-size:13px; font-weight:700;
  text-decoration:none; cursor:pointer; font-family:'Inter',sans-serif;
  transition:all 0.2s;
}
.news-modal-link-btn:hover { border-color:rgba(0,255,140,0.30); color:var(--accent); background:rgba(0,255,140,0.06); }
.news-modal-close {
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.50); backdrop-filter:blur(8px);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:16px; transition:all 0.18s; line-height:1;
}
.news-modal-close:hover { background:rgba(255,59,92,0.30); transform:scale(1.08); }
.news-modal-what {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px; padding:16px 18px; margin:18px 0 0;
}
.news-modal-what-label {
  font-size:12px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--t2); margin-bottom:10px;
}
.news-modal-what-text {
  font-size:14px; color:var(--t1); line-height:1.75; font-weight:500;
}
.news-simple-box {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px; padding:16px 18px; margin:18px 0;
  transition:border-color 0.3s;
}
.news-simple-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.news-simple-label {
  font-size:12px; font-weight:800; letter-spacing:0.04em;
  color:var(--t2); text-transform:uppercase;
}
.news-simple-direction {
  font-size:13px; font-weight:800; letter-spacing:0.03em;
}
.news-simple-text {
  font-size:14px; color:var(--t1); line-height:1.75;
  font-weight:500;
}
@media (max-width:600px) {
  .news-modal-overlay { padding:12px; align-items:flex-end; }
  .news-modal { max-height:92vh; border-radius:20px 20px 16px 16px; }
  .news-modal-body { padding:18px 18px 28px; }
  .news-modal-title { font-size:17px; }
}

/* ═══════════════════════════════
   LANDING PAGE — Scroll Experience
═══════════════════════════════ */
#landing-scroll {
  width:100%; position:relative; z-index:1;
  background:transparent;
}
#landing-scroll.lp-hidden { display:none; }

.lp-divider {
  height:1px; width:100%; max-width:900px; margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08) 30%,rgba(255,255,255,0.08) 70%,transparent);
}

.lp-section {
  width:100%; max-width:900px; margin:0 auto;
  padding:120px 24px;
}

.lp-section-label {
  font-size:11px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.lp-section-title {
  font-size:44px; font-weight:900; letter-spacing:-0.03em;
  line-height:1.1; color:var(--t1); margin-bottom:20px;
}
.lp-section-sub {
  font-size:17px; color:var(--t2); line-height:1.6; max-width:480px;
}

/* ── Auto-cycling feature cards ── */
#lp-features-outer {
  position:relative;
}
#lp-features-inner {
  display:flex; flex-direction:column; align-items:center;
  padding:40px 24px;
  gap:28px;
}
#lp-card-wrap {
  display:grid;
  width:100%; max-width:560px;
}
/* ── Feature card — futuristic HUD ── */
#lp-fc-1 { --cc:var(--accent);  --cr:0,255,140; }
#lp-fc-2 { --cc:var(--cyan);    --cr:46,230,255; }
#lp-fc-3 { --cc:var(--violet);  --cr:157,123,255; }
#lp-fc-4 { --cc:var(--gold);    --cr:255,181,71; }

.lp-feature-card {
  grid-area:1/1;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(150deg,rgba(12,17,28,0.97) 0%,rgba(7,9,16,0.98) 100%);
  border:1px solid rgba(255,255,255,0.07);
  opacity:0; transform:translateY(20px);
  transition:opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
  pointer-events:none;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
/* Top accent bar */
.lp-feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--cr),0.9) 40%,rgba(var(--cr),0.9) 60%,transparent);
}
.lp-feature-card.lp-card-active {
  opacity:1; transform:none; pointer-events:auto;
  box-shadow:
    0 0 0 1px rgba(var(--cr),0.14),
    0 0 70px rgba(var(--cr),0.07),
    0 32px 80px rgba(0,0,0,0.65);
}
/* Corner brackets */
.lp-fc-corners { position:absolute; inset:0; pointer-events:none; }
.lp-fc-corners::before,
.lp-fc-corners::after {
  content:''; position:absolute; width:14px; height:14px; opacity:0.55;
}
.lp-fc-corners::before {
  top:10px; left:10px;
  border-top:1.5px solid var(--cc); border-left:1.5px solid var(--cc);
}
.lp-fc-corners::after {
  bottom:10px; right:10px;
  border-bottom:1.5px solid var(--cc); border-right:1.5px solid var(--cc);
}
/* Watermark number */
.lp-fc-wm {
  position:absolute; bottom:-16px; right:20px;
  font-size:128px; font-weight:900; font-family:monospace;
  color:var(--cc); opacity:0.045; line-height:1;
  pointer-events:none; user-select:none; z-index:0;
}
/* Inner layout */
.lp-fc-inner { padding:36px 40px 38px; position:relative; z-index:1; }
.lp-fc-head  { display:flex; align-items:center; gap:11px; margin-bottom:24px; }
.lp-fc-icon-sm {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.lp-fc-icon-sm.c-green { background:rgba(0,255,140,0.10);  border:1px solid rgba(0,255,140,0.2);  color:var(--accent); }
.lp-fc-icon-sm.c-cyan  { background:rgba(46,230,255,0.08); border:1px solid rgba(46,230,255,0.2); color:var(--cyan); }
.lp-fc-icon-sm.c-violet{ background:rgba(157,123,255,0.10);border:1px solid rgba(157,123,255,0.2);color:var(--violet); }
.lp-fc-icon-sm.c-gold  { background:rgba(255,181,71,0.09); border:1px solid rgba(255,181,71,0.2); color:var(--gold); }
.lp-fc-num {
  font-size:10px; font-weight:800; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--cc);
  font-family:monospace;
}
.lp-fc-title {
  font-size:34px; font-weight:900; letter-spacing:-0.03em;
  color:#fff; line-height:1.06; margin-bottom:14px;
}
.lp-fc-rule {
  height:1px; margin-bottom:14px;
  background:linear-gradient(90deg,rgba(var(--cr),0.3),transparent 55%);
}
.lp-fc-desc  { font-size:15px; color:rgba(255,255,255,0.46); line-height:1.65; margin-bottom:28px; }
.lp-fc-stat  { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; color:rgba(255,255,255,0.36); letter-spacing:0.02em; }
.lp-fc-dot   { width:6px; height:6px; border-radius:50%; background:var(--cc); box-shadow:0 0 8px var(--cc); flex-shrink:0; }
.lp-fc-stat strong { font-weight:800; color:rgba(255,255,255,0.7); }

/* ── Feature rows (new split layout) ── */
.lp-feat-list {
  width: 100%; max-width: 1400px; margin: 0 auto;
  position: relative;
}
.lp-feat-row {
  display: none; grid-template-columns: 2fr 3fr;
  gap: 48px; align-items: center;
  padding: 28px 0;
  animation: feat-in 0.45s var(--ease-spring) both;
}
.lp-feat-row.lp-feat-active { display: grid; }
@keyframes feat-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.lp-feat-left {
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.lp-feat-num-bg {
  position: absolute; left: 0; top: -24px;
  font-size: 130px; font-weight: 900; font-family: 'Inter', sans-serif;
  line-height: 1; pointer-events: none; user-select: none;
  background: linear-gradient(180deg, var(--feat-color) 0%, transparent 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0.13;
}
.lp-feat-row.lp-feat-flipped { grid-template-columns: 3fr 2fr; }
.lp-feat-row.lp-feat-flipped .lp-feat-left { order: 2; padding-left: 40px; }
.lp-feat-row.lp-feat-flipped .lp-feat-num-bg { left: 40px; }
.lp-feat-row.lp-feat-flipped .lp-feat-right { order: 1; }
.lp-feat-icon-wrap {
  width: 60px; height: 60px; border-radius: 16px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--feat-rgb), 0.10);
  border: 1px solid rgba(var(--feat-rgb), 0.22);
  color: var(--feat-color);
  box-shadow: 0 0 28px rgba(var(--feat-rgb), 0.14);
}
.lp-feat-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--feat-color);
  font-family: monospace; margin-bottom: 14px;
  opacity: 0.85;
}
.lp-feat-name {
  font-size: 38px; font-weight: 900; letter-spacing: -0.03em;
  color: #fff; line-height: 1.08; margin-bottom: 16px;
}
.lp-feat-desc {
  font-size: 14px; color: rgba(255,255,255,0.44); line-height: 1.7;
  margin-bottom: 24px;
}
.lp-feat-stat {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
}
.lp-feat-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--feat-color); box-shadow: 0 0 8px var(--feat-color);
}
.lp-feat-stat strong { font-weight: 800; color: rgba(255,255,255,0.7); }
.lp-feat-right {
  display: flex; align-items: center; justify-content: center;
}
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes feat-border-spin {
  to { --border-angle: 360deg; }
}
.lp-feat-mock-frame {
  width: 88%; aspect-ratio: 7 / 5; position: relative;
  border-radius: 15px; padding: 1.5px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    transparent 33%,
    rgba(var(--feat-rgb), 0.3) 40%,
    rgba(var(--feat-rgb), 1)   43%,
    rgba(var(--feat-rgb), 0.3) 46%,
    transparent 53%,
    transparent 83%,
    rgba(var(--feat-rgb), 0.3) 90%,
    rgba(var(--feat-rgb), 1)   93%,
    rgba(var(--feat-rgb), 0.3) 96%,
    transparent 100%
  );
  animation: feat-border-spin 6s linear infinite;
  box-shadow:
    0 0 40px rgba(var(--feat-rgb), 0.14),
    0 24px 80px rgba(0,0,0,0.6);
}
.lp-feat-mock {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: #0b0f18;
  border: none;
  border-radius: 13.5px; overflow: hidden;
}
.lp-feat-mock-header {
  padding: 10px 16px; border-bottom: 1px solid rgba(var(--feat-rgb), 0.12);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(var(--feat-rgb), 0.04);
}
.lp-feat-mock-title {
  font-size: 11px; color: rgba(var(--feat-rgb), 0.75); font-weight: 700;
  letter-spacing: 0.04em;
}
.lp-feat-mock-winbtns {
  display: flex; gap: 6px; align-items: center;
}
.lp-feat-mock-winbtn {
  width: 20px; height: 20px; border-radius: 4px; border: none; cursor: default;
  background: rgba(255,255,255,0.06); color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-family: monospace;
}
.lp-feat-mock-body { padding: 20px; flex: 1; overflow: hidden; }

.lp-feat-row-1 { --feat-color:#00FF8C; --feat-rgb:0,255,140; }
.lp-feat-row-2 { --feat-color:#2EE6FF; --feat-rgb:46,230,255; }
.lp-feat-row-3 { --feat-color:#9D7BFF; --feat-rgb:157,123,255; }
.lp-feat-row-4 { --feat-color:#FFB547; --feat-rgb:255,181,71; }

/* ── Feature tab bar ── */
.lp-tabs {
  display:inline-flex; gap:6px; margin-bottom:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:16px;
  padding:5px;
  overflow-x:auto; scrollbar-width:none;
  position:relative;
}
.lp-tabs::-webkit-scrollbar { display:none; }

/* Sliding pill glider — holds the progress bar */
.lp-tab-glider {
  position:absolute;
  top:5px; bottom:5px;
  border-radius:11px;
  pointer-events:none; z-index:0;
  overflow:hidden;
  transition:left 0.38s cubic-bezier(0.4,0,0.2,1), width 0.38s cubic-bezier(0.4,0,0.2,1),
             background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Progress bar lives inside the glider pill */
.lp-tabs-progress-track {
  position:absolute; bottom:0; left:0; right:0;
  height:2.5px;
  background:rgba(255,255,255,0.08);
}
.lp-tabs-progress-fill {
  height:100%; width:0%;
  transition:background 0.3s;
}

/* Per-tab accent colors */
.lp-tab[data-card="1"] { --tc: 0,255,140; }
.lp-tab[data-card="2"] { --tc: 46,230,255; }
.lp-tab[data-card="3"] { --tc: 157,123,255; }
.lp-tab[data-card="4"] { --tc: 255,181,71; }

.lp-tab {
  flex:1; min-width:max-content;
  padding:8px 18px;
  display:inline-flex; align-items:center; gap:10px;
  border:none; border-radius:11px;
  background:none;
  color:rgba(255,255,255,0.38);
  font-size:12px; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase;
  cursor:pointer; font-family:'Inter',sans-serif;
  transition:color 0.25s;
  position:relative; z-index:1; white-space:nowrap;
}
.lp-tab .tab-icon {
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
  transition:background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.lp-tab .tab-icon svg { opacity:0.45; transition:opacity 0.25s; }
.lp-tab:hover:not(.lp-tab-active) { color:rgba(255,255,255,0.62); }
.lp-tab:hover:not(.lp-tab-active) .tab-icon svg { opacity:0.65; }
.lp-tab.lp-tab-active { color:rgb(var(--tc)); }
.lp-tab.lp-tab-active .tab-icon {
  background:rgba(var(--tc),0.18);
  border-color:rgba(var(--tc),0.42);
  box-shadow:0 0 10px rgba(var(--tc),0.28);
  animation:tab-icon-pulse 2.4s ease-in-out infinite;
}
.lp-tab.lp-tab-active .tab-icon svg { opacity:1; }
@keyframes tab-icon-pulse {
  0%,100% { box-shadow:0 0 8px rgba(var(--tc),0.22); }
  50%      { box-shadow:0 0 20px rgba(var(--tc),0.48); }
}
.lp-tab-bar { display:none; }

/* ── How it Works — elevator scroll ── */
#lp-sticky-section {
  max-width:1160px; width:100%; padding:100px 80px 180px;
  margin:0 auto; position:relative;
}
#lp-hw-topbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:64px;
}
#lp-hw-section-label {
  font-size:11px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent);
}
#lp-step-dots { display:flex; gap:8px; align-items:center; }
.lp-step-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.12);
  transition:all 0.4s ease;
}
.lp-step-dot.active {
  transform:scale(1.5);
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
}
/* lp-sticky-pin is now just a flex row (no sticky, no full-height) */
#lp-sticky-pin {
  display:flex; align-items:flex-start; gap:80px;
}
#lp-hw-text-col { flex:1; max-width:420px; }
.lp-hw-slide {
  opacity:0.22;
  padding-left:22px;
  border-left:2px solid rgba(255,255,255,0.07);
  margin-bottom:80px;
  transition:opacity 0.45s ease, border-color 0.45s ease;
  pointer-events:auto;
}
.lp-hw-slide:last-child { margin-bottom:0; }
.lp-hw-slide.active {
  opacity:1;
  border-left-color:var(--accent);
}
.lp-hw-slide-label {
  font-size:10px; font-weight:800; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent);
  font-family:monospace; margin-bottom:12px; opacity:0.85;
}
.lp-hw-slide-title {
  font-size:38px; font-weight:900; letter-spacing:-0.03em;
  color:#fff; line-height:1.06; margin-bottom:14px;
}
.lp-hw-slide-desc {
  font-size:15px; color:rgba(255,255,255,0.44); line-height:1.72; margin-bottom:20px;
}
.lp-hw-slide-stat {
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; color:rgba(255,255,255,0.35); letter-spacing:0.03em;
}
.lp-hw-dot {
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--accent); box-shadow:0 0 7px var(--accent-glow);
}
#lp-hw-mock-col {
  flex-shrink:0; width:500px;
  position:sticky; top:88px;
  will-change:transform;
}
#lp-hw-frame {
  position:relative; border-radius:15px; padding:1.5px;
  --hw-rgb: 0,255,140;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%, transparent 33%,
    rgba(0,255,140,0.3) 40%, rgba(0,255,140,1) 43%,
    rgba(0,255,140,0.3) 46%, transparent 53%,
    transparent 83%,
    rgba(0,255,140,0.3) 90%, rgba(0,255,140,1) 93%,
    rgba(0,255,140,0.3) 96%, transparent 100%
  );
  animation: feat-border-spin 8s linear infinite;
  box-shadow: 0 0 50px rgba(0,255,140,0.12), 0 30px 90px rgba(0,0,0,0.7);
}
#lp-hw-win {
  background:#0b0f18; border-radius:13.5px; overflow:hidden;
  --feat-rgb: 0,255,140;
}

/* ── Mock UI panel ── */
.lp-mock {
  background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.lp-mock-header {
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; gap:7px;
}
.lp-mock-dot { width:10px; height:10px; border-radius:50%; }
.lp-mock-body { padding:20px; }
.lp-mock-state { display:none; }
.lp-mock-state.lp-ms-active {
  display:block;
  animation:lp-fadein 0.38s var(--ease-out) both;
}
@keyframes lp-pulse { 0%,100%{opacity:1;box-shadow:0 0 8px rgba(255,215,0,0.8)} 50%{opacity:0.5;box-shadow:0 0 3px rgba(255,215,0,0.3)} }
@keyframes lp-fadein {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}
/* Mock trade rows */
.m-trade-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:13px;
}
.m-trade-row:last-child { border-bottom:none; }
.m-ticker { font-weight:800; color:var(--t1); }
.m-type   { font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; }
.m-type.buy  { background:rgba(0,255,140,0.12); color:var(--accent); }
.m-type.sell { background:rgba(255,59,92,0.10); color:var(--loss-2); }
.m-pnl { font-weight:700; font-family:monospace; font-size:12px; }
.m-pnl.pos { color:var(--accent); }
.m-pnl.neg { color:var(--loss-2); }
/* Mock stat bars */
.m-stat { margin-bottom:14px; }
.m-stat-lbl { font-size:11px; color:var(--t3); font-weight:700; margin-bottom:5px; display:flex; justify-content:space-between; }
.m-stat-bar { height:6px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.m-stat-fill { height:100%; border-radius:4px; }
/* Mock lb rows */
.m-lb { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:13px; }
.m-lb:last-child { border-bottom:none; }
.m-lb-rank { width:20px; font-size:11px; font-weight:800; color:var(--t3); text-align:center; }
.m-lb-rank.top { color:var(--gold); }
.m-lb-name { flex:1; font-weight:600; color:var(--t1); }
.m-lb-val  { font-weight:800; color:var(--accent); font-family:monospace; font-size:12px; }

/* ── Feature grid ── */
.lp-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.lp-grid-card {
  background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.015) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px; padding:28px 24px;
  opacity:0; transform:translateY(18px);
  transition:opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), background 0.25s, border-color 0.25s;
}
.lp-grid-card:hover {
  background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.03) 100%);
  border-color:rgba(255,255,255,0.14); transform:translateY(-2px) !important;
}
.lp-grid-card.lp-gc-visible { opacity:1; transform:translateY(0); }
.lp-grid-icon { margin-bottom:20px; }
.lp-gi-wrap {
  display:inline-flex; width:46px; height:46px; border-radius:13px;
  align-items:center; justify-content:center;
  background:rgba(var(--tc),0.10);
  border:1px solid rgba(var(--tc),0.28);
  color:rgb(var(--tc));
  transition:background 0.3s, box-shadow 0.3s;
}
.lp-grid-card:hover .lp-gi-wrap {
  background:rgba(var(--tc),0.18);
  box-shadow:0 0 22px rgba(var(--tc),0.38), 0 0 6px rgba(var(--tc),0.2) inset;
  animation:gc-pulse 2s ease-in-out infinite;
}
@keyframes gc-pulse {
  0%,100% { box-shadow:0 0 14px rgba(var(--tc),0.28); }
  50%      { box-shadow:0 0 30px rgba(var(--tc),0.55), 0 0 8px rgba(var(--tc),0.2) inset; }
}
.lp-grid-card:hover { border-color:rgba(var(--tc),0.20) !important; }
.lp-grid-title { font-size:15px; font-weight:800; color:var(--t1); margin-bottom:7px; letter-spacing:-0.01em; }
.lp-grid-desc  { font-size:13px; color:var(--t3); line-height:1.55; }

/* ── Phone interactive section ── */
.lp-phone-section { padding:80px 24px 120px; }
.lp-phone-layout {
  display:flex; align-items:center; justify-content:center;
  gap:64px; max-width:960px; margin:0 auto;
}
/* Left info panel */
.lp-phone-info {
  flex:1; height:420px;
  display:flex; align-items:center; justify-content:flex-start;
  overflow:hidden;
}
.lp-phone-info-inner {
  position:relative; width:100%; height:100%;
}
.lp-pi-hint {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(255,255,255,0.22); font-size:13px; letter-spacing:0.02em;
  text-align:center;
  transition:opacity 0.3s;
}
.lp-pi-hint.hidden { opacity:0; pointer-events:none; }
/* Feature detail card that appears on left */
.lp-feat-detail {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%) translateX(-18px);
  opacity:0;
  transition:opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  pointer-events:none;
}
.lp-feat-detail.active {
  opacity:1; transform:translateY(-50%) translateX(0); pointer-events:auto;
}
.lp-feat-detail-icon {
  display:inline-flex; width:60px; height:60px; border-radius:18px;
  align-items:center; justify-content:center;
  background:rgba(var(--fac),0.12);
  border:1px solid rgba(var(--fac),0.32);
  color:rgb(var(--fac));
  margin-bottom:24px;
  box-shadow:0 0 28px rgba(var(--fac),0.2);
}
.lp-feat-detail-title {
  font-size:28px; font-weight:800; color:var(--t1);
  letter-spacing:-0.03em; margin-bottom:14px; line-height:1.1;
}
.lp-feat-detail-desc {
  font-size:15px; color:var(--t3); line-height:1.65;
  max-width:340px;
}
/* Phone mockup */
.lp-phone-wrap {
  flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.lp-phone-frame {
  position:relative;
  width:200px; height:420px;
  background:linear-gradient(160deg,#1a1a1a 0%,#0f0f0f 100%);
  border-radius:38px;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
/* Phone conic-gradient border — same technique as lp-feat-mock-frame */
.lp-phone-outer {
  --oc: 0,255,140;
  padding: 3px; border-radius: 41px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    transparent 33%,
    rgba(var(--oc), 0.25) 40%,
    rgba(var(--oc), 0.95) 43%,
    rgba(var(--oc), 0.25) 46%,
    transparent 53%,
    transparent 83%,
    rgba(var(--oc), 0.25) 90%,
    rgba(var(--oc), 0.95) 93%,
    rgba(var(--oc), 0.25) 96%,
    transparent 100%
  );
  box-shadow: 0 0 36px rgba(var(--oc), 0.12), 0 28px 80px rgba(0,0,0,0.65);
  animation: feat-border-spin 8s linear infinite;
  transition: box-shadow 0.5s;
}
.lp-phone-logo-bg {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:0;
}
.lp-phone-logo-bg img {
  width:200px; opacity:0.13; filter:blur(0.5px);
  user-select:none;
}
.lp-phone-notch {
  position:relative; z-index:2;
  width:72px; height:18px; margin-top:10px;
  background:#0f0f0f;
  border-radius:0 0 14px 14px;
  border:1px solid rgba(255,255,255,0.08);
  border-top:none;
  flex-shrink:0;
}
.lp-phone-apps {
  position:relative; z-index:1;
  flex:1; width:100%;
  display:grid; grid-template-columns:repeat(2,1fr);
  row-gap:0; column-gap:0; padding:56px 28px 60px;
  align-content:space-between;
}
.lp-app-icon {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  width:50px; height:50px;
  margin:0 auto;
  color:rgba(255,255,255,0.35);
  cursor:pointer;
  transition:background 0.22s, border-color 0.22s, transform 0.18s, box-shadow 0.22s, color 0.22s;
}
.lp-app-icon:hover {
  background:rgba(var(--ac),0.18);
  border-color:rgba(var(--ac),0.42);
  color:rgb(var(--ac));
  transform:scale(1.06);
  box-shadow:0 0 18px rgba(var(--ac),0.28);
}
.lp-app-icon.lp-app-active {
  background:rgba(var(--ac),0.22);
  border-color:rgba(var(--ac),0.55);
  color:rgb(var(--ac));
  box-shadow:0 0 24px rgba(var(--ac),0.4), 0 0 6px rgba(var(--ac),0.15) inset;
}
.lp-app-glow {
  position:absolute; inset:-20%; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ac),0.18) 0%,transparent 70%);
  opacity:0; transition:opacity 0.3s;
  pointer-events:none;
}
.lp-app-icon:hover .lp-app-glow,
.lp-app-icon.lp-app-active .lp-app-glow { opacity:1; }
.lp-app-label { display:none; }
.lp-phone-home {
  position:relative; z-index:2;
  width:72px; height:4px; border-radius:4px;
  background:rgba(255,255,255,0.18);
  margin-bottom:12px; flex-shrink:0;
}
/* ── Feature visuals ── */
.lp-feat-visual { margin-bottom:22px; }

/* Candlesticks */
.lp-fv-candles { display:flex; align-items:flex-end; gap:5px; height:70px; }
.lp-fv-candle {
  width:14px; border-radius:3px 3px 0 0;
  height:0; animation:fv-grow 0.55s var(--ease-out) forwards;
  animation-delay:var(--d,0s);
}
@keyframes fv-grow { to { height:var(--h); } }

/* XP bar */
.lp-fv-xp-wrap {
  width:100%; background:rgba(255,255,255,0.07);
  border-radius:6px; overflow:hidden; height:10px;
  display:flex; align-items:center;
}
.lp-fv-xp-bar {
  height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,rgb(var(--fac)),rgba(var(--fac),0.6));
  animation:fv-xp 1.1s var(--ease-out) 0.15s forwards;
  box-shadow:0 0 8px rgba(var(--fac),0.4);
}
@keyframes fv-xp { to { width:72%; } }

/* Sparkline */
.lp-fv-spark { width:100%; }
.lp-fv-spark path {
  animation:fv-spark 1.3s ease-out 0.1s forwards;
}
@keyframes fv-spark { to { stroke-dashoffset:0; } }

/* Rank bars */
.lp-fv-ranks { display:flex; align-items:flex-end; gap:6px; height:44px; }
.lp-fv-rank-bar {
  flex:1; border-radius:3px 3px 0 0;
  height:0; animation:fv-grow 0.5s var(--ease-out) forwards;
  animation-delay:var(--d,0s);
  background:rgba(var(--fac),0.6);
}
.lp-fv-rank-bar:last-child { background:rgb(var(--fac)); box-shadow:0 0 10px rgba(var(--fac),0.5); }

/* Typing dots */
.lp-fv-typing { display:flex; align-items:center; gap:7px; padding:12px 0; }
.lp-fv-typing span {
  width:9px; height:9px; border-radius:50%;
  background:rgb(var(--fac));
  animation:fv-bounce 1.3s ease-in-out infinite;
  opacity:0.35;
}
.lp-fv-typing span:nth-child(2) { animation-delay:0.22s; }
.lp-fv-typing span:nth-child(3) { animation-delay:0.44s; }
@keyframes fv-bounce { 0%,100%{opacity:0.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-5px)} }

/* Devices */
.lp-fv-devices { display:flex; align-items:center; gap:14px; }
.lp-fv-devices svg { opacity:0; animation:fv-fade 0.5s ease-out forwards; }
.lp-fv-devices svg:nth-child(2) { animation-delay:0.2s; }
.lp-fv-devices svg:nth-child(3) { animation-delay:0.35s; }
@keyframes fv-fade { to { opacity:1; } }

/* Bullets */
.lp-feat-bullets { list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:9px; }
.lp-feat-bullets li {
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:rgba(255,255,255,0.5); line-height:1.4;
}
.lp-feat-bullets li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:rgb(var(--fac)); flex-shrink:0;
  box-shadow:0 0 6px rgba(var(--fac),0.5);
}

/* Mobile stacking */
@media(max-width:700px){
  .lp-phone-layout { flex-direction:column-reverse; gap:40px; }
  .lp-phone-info { justify-content:center; min-height:auto; }
  .lp-feat-detail-title { font-size:22px; }
  .lp-feat-detail-desc { font-size:14px; }
  .lp-pi-hint { padding:20px 0; }
}

/* ── CTA section ── */
.lp-cta-section {
  text-align:center; padding:120px 24px 160px;
  width:100%; max-width:900px; margin:0 auto;
  position:relative;
}
.lp-cta-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(0,255,140,0.08),transparent 65%);
  pointer-events:none;
}
.lp-cta-title {
  font-size:52px; font-weight:900; letter-spacing:-0.03em; margin-bottom:18px;
  background:linear-gradient(135deg,#FFFFFF 0%,#00FF8C 50%,#2EE6FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.lp-cta-sub {
  font-size:17px; color:var(--t2); margin-bottom:44px; line-height:1.65; position:relative;
}
.lp-cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 52px; border-radius:14px; border:none;
  background:var(--grad-accent); color:#000;
  font-size:15px; font-weight:900; letter-spacing:0.04em;
  cursor:pointer; font-family:'Inter',sans-serif;
  box-shadow:0 12px 40px rgba(0,255,140,0.38), 0 1px 0 rgba(255,255,255,0.3) inset;
  transition:all 0.28s var(--ease-out); position:relative;
}
.lp-cta-btn:hover { transform:translateY(-3px); box-shadow:0 20px 60px rgba(0,255,140,0.50); }
.lp-cta-btn:active { transform:scale(0.99); }
.lp-cta-note { margin-top:20px; font-size:13px; color:var(--t3); position:relative; }
.lp-cta-note span { color:var(--accent); cursor:pointer; font-weight:700; }
.lp-cta-note span:hover { text-shadow:0 0 10px var(--accent-glow); }

/* ── Testimonials ── */
.lp-testimonials-section {
  padding: 100px 40px;
  display: flex; flex-direction: column; align-items: center;
  position: relative; overflow: hidden;
}
.lp-testimonials-section .lp-section-label { margin-bottom: 16px; }
.lp-testimonials-section .lp-section-title { text-align: center; margin-bottom: 12px; }
.lp-testimonials-subtitle {
  font-size: 15px; color: var(--t2); text-align: center; margin-bottom: 56px;
}
.lp-testi-cols {
  display: flex; gap: 20px; justify-content: center;
  max-height: 580px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  width: 100%; max-width: 960px;
}
.lp-testi-col {
  display: flex; flex-direction: column; gap: 16px;
  width: 280px; flex-shrink: 0;
}
.lp-testi-track {
  display: flex; flex-direction: column; gap: 16px;
  will-change: transform;
}
/* Two spotlight overlays — live outside composited tracks, rAF-driven */
.lp-testi-sp {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 22px;
  opacity: 0;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(0,255,140,0.82), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}
.lp-testi-card {
  background: #0F0F0F;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  cursor: default;
}
.lp-testi-text {
  font-size: 13.5px; color: rgba(255,255,255,0.82);
  line-height: 1.65; font-weight: 400;
}
.lp-testi-author { display: flex; align-items: center; gap: 10px; }
.lp-testi-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.10); flex-shrink: 0;
}
.lp-testi-names { display: flex; flex-direction: column; gap: 1px; }
.lp-testi-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.lp-testi-handle { font-size: 11.5px; color: var(--t3); line-height: 1.3; }

@media (max-width: 768px) {
  .lp-testi-col:nth-child(2),
  .lp-testi-col:nth-child(3) { display: none; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .lp-testi-col:nth-child(3) { display: none; }
}

/* ── Pricing ── */
.lp-pricing-section {
  padding: 100px 40px;
  display: flex; flex-direction: column; align-items: center;
}
.lp-pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; width: 100%; max-width: 1000px; margin-top: 56px;
  align-items: start;
}
.lp-price-card {
  position: relative; border-radius: 24px; padding: 28px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
/* Spotlight border glow */
.lp-price-card::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 27px;
  padding: 3px;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(0,255,140,1), rgba(0,255,140,0.4) 40%, transparent 65%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 0;
}
.lp-price-card:hover::after { opacity: 1; }
.lp-price-card:hover { transform: translateY(-6px); }
.lp-price-card.featured {
  background: rgba(0,255,140,0.05);
  border-color: rgba(0,255,140,0.28);
  box-shadow: 0 0 60px rgba(0,255,140,0.10), 0 24px 60px rgba(0,0,0,0.4);
  transform: translateY(-8px);
}
.lp-price-card.featured:hover { transform: translateY(-14px); }
.lp-price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad-accent); color: #000;
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em;
  padding: 5px 16px; border-radius: 99px; white-space: nowrap;
  text-transform: uppercase;
}
.lp-price-tier {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t3); margin-bottom: 12px;
}
.lp-price-card.featured .lp-price-tier { color: var(--accent); }
.lp-price-amount {
  display: flex; align-items: flex-end; gap: 4px; margin-bottom: 4px;
}
.lp-price-dollar { font-size: 22px; font-weight: 700; color: var(--t2); padding-bottom: 6px; }
.lp-price-num { font-size: 48px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.04em; }
.lp-price-card.featured .lp-price-num { color: var(--accent); }
.lp-price-period { font-size: 13px; color: var(--t3); padding-bottom: 10px; }
.lp-price-free { font-size: 40px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; }
.lp-price-sub { font-size: 12px; color: var(--t3); margin-bottom: 20px; }
.lp-price-divider { height: 1px; background: rgba(255,255,255,0.07); margin-bottom: 16px; }
.lp-price-card.featured .lp-price-divider { background: rgba(0,255,140,0.15); }
.lp-price-features { list-style: none; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.lp-price-card.featured .lp-price-features { gap: 30px; }
.lp-price-feature {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--t2); line-height: 1.4;
}
.lp-price-check {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
}
.lp-price-card.featured .lp-price-check { background: rgba(0,255,140,0.15); }
.lp-price-check svg { stroke: var(--t3); }
.lp-price-card.featured .lp-price-check svg { stroke: var(--accent); }
.lp-price-btn {
  margin-top: 32px; width: 100%; padding: 14px;
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.12);
  background: transparent; color: var(--t2);
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif; letter-spacing: 0.02em;
  transition: all 0.22s var(--ease-out);
}
.lp-price-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.lp-price-btn.accent {
  background: var(--grad-accent); border-color: transparent; color: #000;
  box-shadow: 0 8px 32px rgba(0,255,140,0.32);
}
.lp-price-btn.accent:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,255,140,0.45); }
@media (max-width: 768px) {
  .lp-pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  .lp-price-card.featured { transform: none; }
}

/* ── Pricing toggle switch ── */
.lp-price-toggle-row { display:flex; justify-content:center; margin-top:32px; margin-bottom:8px; }
.lp-price-toggle { position:relative; display:inline-flex; align-items:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius:99px; padding:4px; }
.lp-price-toggle-btn { position:relative; z-index:2; padding:9px 22px; border-radius:99px; font-size:13px; font-weight:600; cursor:pointer; background:none; border:none; color:var(--t3); transition:color 0.25s; font-family:'Inter',sans-serif; white-space:nowrap; }
.lp-price-toggle-btn.active { color:#fff; }
.lp-price-toggle-pill { position:absolute; top:4px; border-radius:99px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); transition:left 0.38s cubic-bezier(0.34,1.4,0.64,1), width 0.38s cubic-bezier(0.34,1.4,0.64,1); z-index:1; pointer-events:none; }
.lp-price-save { font-size:10px; font-weight:800; color:var(--accent); background:rgba(0,255,140,0.12); border:1px solid rgba(0,255,140,0.25); border-radius:99px; padding:2px 7px; margin-left:6px; }

/* ── Card scroll-entry animation ── */
.lp-card-anim-wrap { opacity:0; transform:translateY(36px); transition:opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.lp-card-anim-wrap.lp-visible { opacity:1; transform:translateY(0); }

/* ── Title word reveal ── */
.lp-price-reveal-word { display:inline-block; overflow:hidden; vertical-align:bottom; }
.lp-price-reveal-inner { display:block; transform:translateY(110%); transition:transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.lp-price-title.lp-title-revealed .lp-price-reveal-inner { transform:translateY(0); }

/* ── Number flip ── */
.lp-price-num { overflow:hidden; display:inline-flex; flex-direction:column; }
.lp-price-num-inner { display:block; transition:transform 0.38s cubic-bezier(0.22,1,0.36,1), opacity 0.3s; }

@media (max-width:768px) {
  .lp-section-title { font-size:32px; }
  #lp-sticky-section { padding:60px 24px 100px; }
  #lp-sticky-pin { flex-direction:column; gap:48px; }
  #lp-hw-mock-col { width:100%; position:static; transform:none !important; }
  #lp-hw-text-col { max-width:100%; }
  .lp-hw-slide { opacity:1; }
  .lp-hw-slide-title { font-size:30px; }
  .lp-grid          { grid-template-columns:1fr 1fr; }
  .lp-cta-title     { font-size:36px; }
  .lp-feature-card  { padding:32px 28px; }
  .lp-fc-title      { font-size:26px; }
}

/* ═══════════════════════════════
   MARKET MAP — SQUARIFIED TREEMAP
═══════════════════════════════ */
#screen-heatmap { overflow: hidden; }
.heatmap-screen-inner {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.heatmap-filter-bar {
  padding: 10px 16px 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.heatmap-filter-btn {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  font-family: 'Inter', sans-serif;
}
.heatmap-filter-btn:hover { color: var(--t1); border-color: var(--border-2); }
.heatmap-filter-btn.active {
  background: rgba(0,255,140,0.12);
  border-color: rgba(0,255,140,0.35);
  color: var(--accent);
}
.heatmap-treemap {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.hm-sector-label {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.42);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}
.hm-sector-label-btn {
  pointer-events: all;
  cursor: pointer;
}
.hm-sector-label-btn:hover {
  color: rgba(255,255,255,0.85);
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.hm-tile {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid #080808;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: filter 0.12s, border-color 0.12s;
  box-sizing: border-box;
  user-select: none;
}
.hm-tile:hover {
  filter: brightness(1.35);
  border-color: rgba(255,255,255,0.55);
  z-index: 10;
}
.hm-tile:active { filter: brightness(0.85); }
.hm-ticker {
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.hm-pct {
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  margin-top: 2px;
}
.hm-price {
  color: rgba(255,255,255,0.5);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  margin-top: 1px;
}
.hm-tooltip {
  position: fixed;
  background: rgba(8,8,8,0.97);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 10px;
  padding: 11px 15px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  min-width: 150px;
}
.hm-tt-ticker { font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 2px; }
.hm-tt-name   { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 9px; }
.hm-tt-price  { font-size: 14px; font-weight: 600; color: #fff; }
.hm-tt-pct    { font-size: 13px; font-weight: 700; margin-top: 2px; }

/* ── Watchlist Screen ── */
.wl-header { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.wl-title  { font-size:22px; font-weight:800; color:var(--t1); }
.wl-count  { background:var(--accent-dim); color:var(--accent); font-size:11px; font-weight:800; padding:3px 9px; border-radius:20px; }

/* Card */
.wl-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-md); padding:16px 18px;
  margin-bottom:12px; cursor:pointer;
  transition: border-color 0.18s, background 0.18s;
}
.wl-card:hover { border-color:rgba(0,255,140,0.25); background:var(--bg3); }

/* Row 1: ticker/name + actions */
.wl-row1 { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.wl-ticker-wrap { flex:1; min-width:0; }
.wl-ticker-line { display:flex; align-items:center; gap:8px; }
.wl-ticker  { font-size:16px; font-weight:900; color:var(--t1); letter-spacing:0.02em; }
.wl-sector  {
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:20px;
  letter-spacing:0.04em; text-transform:uppercase;
}
.wl-name    { font-size:12px; color:var(--t3); margin-top:3px; }
.wl-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.wl-trade-btn {
  background:var(--accent-dim); color:var(--accent);
  border:1px solid rgba(0,255,140,0.3); border-radius:var(--r-sm);
  padding:7px 16px; font-size:12px; font-weight:800;
  cursor:pointer; transition:background 0.15s;
}
.wl-trade-btn:hover { background:rgba(0,255,140,0.2); }
.wl-remove-btn {
  background:none; border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--t3); padding:7px 9px; cursor:pointer; display:flex; align-items:center;
  transition:border-color 0.15s, color 0.15s;
}
.wl-remove-btn:hover { border-color:var(--loss); color:var(--loss); }

/* Row 2: price + sparkline */
.wl-row2 { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:12px; }
.wl-price-block {}
.wl-price   { font-size:24px; font-weight:800; color:var(--t1); font-variant-numeric:tabular-nums; line-height:1; }
.wl-chg-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.wl-chg-abs { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.wl-chg-pct { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.wl-chg-abs.gain, .wl-chg-pct.gain { color:var(--accent); }
.wl-chg-abs.loss, .wl-chg-pct.loss { color:var(--loss); }
.wl-sparkline svg { display:block; }

/* Row 3: stats */
.wl-stats { display:flex; gap:20px; padding-top:12px; border-top:1px solid var(--border); margin-bottom:0; }
.wl-stat-label { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:3px; }
.wl-stat-val   { font-size:13px; font-weight:700; color:var(--t1); font-variant-numeric:tabular-nums; }
.wl-stat-val.gain { color:var(--accent); }
.wl-stat-val.loss { color:var(--loss); }

/* Position strip */
.wl-position {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:9px 13px;
  margin-top:12px;
}
.wl-pos-left  { display:flex; align-items:center; gap:10px; }
.wl-pos-label { font-size:10px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; }
.wl-pos-shares{ font-size:12px; color:var(--t2); font-weight:600; }
.wl-pos-right { display:flex; align-items:center; gap:12px; }
.wl-pos-avg   { font-size:11px; color:var(--t3); }
.wl-pos-pnl   { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.wl-pos-pnl.gain { color:var(--accent); }
.wl-pos-pnl.loss { color:var(--loss); }

/* Sector badge colors */
.wl-sector.tech          { background:rgba(59,130,246,0.15);  color:#60a5fa; }
.wl-sector.finance       { background:rgba(245,158,11,0.15);  color:#fbbf24; }
.wl-sector.consumer      { background:rgba(16,185,129,0.15);  color:#34d399; }
.wl-sector.retail        { background:rgba(139,92,246,0.15);  color:#a78bfa; }
.wl-sector.entertainment { background:rgba(244,63,94,0.15);   color:#fb7185; }
.wl-sector.etf           { background:rgba(100,116,139,0.15); color:#94a3b8; }
.wl-sector.crypto        { background:rgba(249,115,22,0.15);  color:#fb923c; }

/* 52W Range bar */
.wl-range { margin-top:12px; }
.wl-range-labels { display:flex; justify-content:space-between; margin-bottom:5px; }
.wl-range-label  { font-size:10px; font-weight:700; color:var(--t3); font-variant-numeric:tabular-nums; }
.wl-range-label span { font-size:9px; text-transform:uppercase; letter-spacing:0.04em; opacity:0.7; display:block; margin-bottom:1px; }
.wl-range-track  { position:relative; height:4px; background:var(--bg3); border-radius:4px; }
.wl-range-fill   { position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,rgba(0,255,140,0.25),var(--accent)); border-radius:4px; }
.wl-range-dot    { position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); transform:translate(-50%,-50%); box-shadow:0 0 6px var(--accent-glow); }
.wl-range-dot.loss { background:var(--loss); box-shadow:0 0 6px rgba(255,59,92,0.4); }

/* Cap tier + volatility badges */
.wl-tier { font-size:10px; font-weight:700; color:var(--t3); margin-top:2px; }

/* Empty */
.wl-empty { text-align:center; padding:60px 24px; }
.wl-empty-icon { color:var(--accent); opacity:0.25; margin-bottom:16px; }
.wl-empty-title { font-size:16px; font-weight:800; color:var(--t2); margin-bottom:6px; }
.wl-empty-sub   { font-size:13px; color:var(--t3); }

/* Watch toggle button in order panel */
.op-watch-btn {
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--t3); padding:5px 7px; cursor:pointer; display:flex; align-items:center;
  transition:all 0.2s; flex-shrink:0;
}
.op-watch-btn:hover { border-color:var(--accent); color:var(--accent); }
.op-watch-btn.watched {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-dim);
  box-shadow:0 0 10px var(--accent-glow);
}

/* ─── Profile Bottom Widgets ─── */
.profile-bottom-widgets {
  display:flex; gap:12px; padding:14px 20px 18px;
  border-top:1px solid var(--border);
}
.pbw-card {
  flex:1; display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:#111; border:1px solid var(--border);
  border-radius:12px; cursor:pointer; transition:all 0.2s; user-select:none;
}
.pbw-card:hover { border-color:var(--accent); background:rgba(0,255,140,0.04); }
.pbw-icon {
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,255,140,0.08); font-size:18px;
}
.pbw-content { flex:1; min-width:0; }
.pbw-title { font-size:13px; font-weight:700; color:var(--t1); margin-bottom:2px; }
.pbw-sub { font-size:11px; color:var(--t3); }
.pbw-arrow { font-size:20px; color:var(--t3); line-height:1; flex-shrink:0; }
.pbw-card:hover .pbw-arrow { color:var(--accent); }

/* ─── Journal Modal — Full Screen ─── */
.jnl-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  backdrop-filter:blur(10px); z-index:9100;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.25s;
}
.jnl-backdrop.open { opacity:1; pointer-events:auto; }
.jnl-modal {
  width:calc(100vw - 48px); height:calc(100vh - 48px);
  background:#0b0b0b; border:1px solid var(--border); border-radius:18px;
  display:flex; flex-direction:column; overflow:hidden;
  transform:scale(0.96); transition:transform 0.28s cubic-bezier(0.22,1,0.36,1);
  box-shadow:0 48px 140px rgba(0,0,0,0.85);
}
.jnl-backdrop.open .jnl-modal { transform:scale(1); }

/* Header */
.jnl-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 22px 13px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.jnl-header-left { display:flex; align-items:center; gap:10px; }
.jnl-header-title { font-size:17px; font-weight:800; color:var(--t1); }
.jnl-header-count {
  font-size:11px; font-weight:700; color:var(--accent);
  background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.2);
  padding:2px 9px; border-radius:20px;
}
.jnl-header-close {
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  background:none; color:var(--t3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:15px; transition:all 0.15s;
}
.jnl-header-close:hover { border-color:var(--accent); color:var(--accent); }

/* Stats bar */
.jnl-stats-bar {
  display:flex; border-bottom:1px solid var(--border); flex-shrink:0;
  background:rgba(255,255,255,0.01);
}
.jnl-sbar-item {
  flex:1; padding:13px 20px;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:4px;
}
.jnl-sbar-item:last-child { border-right:none; }
.jnl-sbar-lbl { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:0.6px; font-weight:600; }
.jnl-sbar-val { font-size:19px; font-weight:800; color:var(--t1); }
.jnl-sbar-val.gain { color:var(--gain); }
.jnl-sbar-val.loss { color:var(--loss-2); }

/* Body = layout area, no scroll here */
.jnl-body { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* 2-column layout */
.jnl-layout { display:flex; flex:1; overflow:hidden; }

/* Left panel — entry list */
.jnl-panel-left {
  width:290px; flex-shrink:0;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.jnl-search-wrap {
  padding:11px 12px 9px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.jnl-search-input {
  width:100%; background:#141414; border:1px solid var(--border);
  border-radius:8px; color:var(--t1); font-family:'Inter',sans-serif;
  font-size:12px; padding:7px 10px; box-sizing:border-box; transition:border-color 0.2s;
}
.jnl-search-input:focus { outline:none; border-color:var(--accent); }
.jnl-search-input::placeholder { color:var(--t3); }

.jnl-filter-tabs {
  display:flex; gap:4px; padding:9px 10px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.jnl-filter-tab {
  flex:1; padding:5px 4px; font-size:11px; font-weight:700;
  background:none; border:1px solid var(--border);
  border-radius:6px; color:var(--t3); cursor:pointer; transition:all 0.15s; text-align:center;
}
.jnl-filter-tab.active { border-color:var(--accent); color:var(--accent); background:rgba(0,255,140,0.07); }
.jnl-filter-tab:hover:not(.active) { border-color:var(--t3); color:var(--t2); }

.jnl-list { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:3px; }
.jnl-list-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%; color:var(--t3); font-size:12px; text-align:center; padding:20px;
}

.jnl-li {
  padding:10px 12px; border-radius:9px;
  border:1px solid transparent; cursor:pointer; transition:all 0.13s;
}
.jnl-li:hover { background:rgba(255,255,255,0.03); border-color:var(--border); }
.jnl-li.active { background:rgba(0,255,140,0.06); border-color:rgba(0,255,140,0.28); }
.jnl-li-top { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.jnl-li-badge {
  font-size:10px; font-weight:800; padding:2px 5px; border-radius:4px; flex-shrink:0;
}
.jnl-li-badge.buy { background:rgba(0,210,100,0.12); color:#00d264; }
.jnl-li-badge.sell-win { background:rgba(0,255,140,0.1); color:var(--gain); }
.jnl-li-badge.sell-loss { background:rgba(255,59,92,0.1); color:var(--loss-2); }
.jnl-li-ticker { font-size:14px; font-weight:800; color:var(--t1); flex:1; }
.jnl-li-pnl { font-size:12px; font-weight:700; }
.jnl-li-pnl.gain { color:var(--gain); }
.jnl-li-pnl.loss { color:var(--loss-2); }
.jnl-li-bottom { display:flex; align-items:center; gap:6px; }
.jnl-li-date { font-size:10px; color:var(--t3); flex:1; }
.jnl-li-note-ico { font-size:10px; color:var(--accent); }

/* Right panel — detail */
.jnl-panel-right { flex:1; overflow-y:auto; display:flex; flex-direction:column; }

.jnl-right-empty {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:var(--t3); text-align:center; padding:40px;
}
.jnl-right-empty-icon { font-size:52px; margin-bottom:18px; opacity:0.5; }
.jnl-right-empty-title { font-size:17px; font-weight:700; color:var(--t2); margin-bottom:8px; }
.jnl-right-empty-sub { font-size:13px; line-height:1.65; max-width:320px; color:var(--t3); }

/* Detail header */
.jnl-det-header {
  padding:26px 30px 22px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.jnl-det-top-row {
  display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px;
}
.jnl-det-ticker { font-size:40px; font-weight:900; color:var(--t1); line-height:1; }
.jnl-det-badge {
  font-size:13px; font-weight:800; padding:4px 11px; border-radius:8px; margin-top:6px; display:inline-block;
}
.jnl-det-badge.buy { background:rgba(0,210,100,0.12); color:#00d264; border:1px solid rgba(0,210,100,0.2); }
.jnl-det-badge.sell-win { background:rgba(0,255,140,0.1); color:var(--gain); border:1px solid rgba(0,255,140,0.2); }
.jnl-det-badge.sell-loss { background:rgba(255,59,92,0.1); color:var(--loss-2); border:1px solid rgba(255,59,92,0.2); }
.jnl-det-pnl-big { font-size:32px; font-weight:900; line-height:1; }
.jnl-det-pnl-big.gain { color:var(--gain); }
.jnl-det-pnl-big.loss { color:var(--loss-2); }
.jnl-det-pnl-big.neutral { color:var(--t2); }
.jnl-det-pct { font-size:15px; font-weight:700; margin-top:4px; }
.jnl-det-pct.gain { color:var(--gain); }
.jnl-det-pct.loss { color:var(--loss-2); }
.jnl-det-date { font-size:12px; color:var(--t3); margin-top:5px; }
.jnl-det-stats { display:flex; gap:28px; flex-wrap:wrap; }
.jnl-det-stat { display:flex; flex-direction:column; gap:3px; }
.jnl-det-stat-lbl { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:0.5px; }
.jnl-det-stat-val { font-size:16px; font-weight:700; color:var(--t1); }

/* Detail body */
.jnl-det-body { flex:1; padding:26px 30px; display:flex; flex-direction:column; gap:24px; }
.jnl-det-sec-title {
  font-size:11px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.7px; margin-bottom:10px;
}
/* Rich-text editor */
.jnl-editor-wrap {
  border:1px solid var(--border); border-radius:10px;
  overflow:hidden; background:#0f0f0f;
}
.jnl-editor-toolbar {
  display:flex; align-items:center; gap:2px;
  padding:6px 10px; border-bottom:1px solid var(--border);
  background:#141414; flex-wrap:wrap;
}
.jnl-tb-btn {
  width:28px; height:26px; border:1px solid transparent; border-radius:5px;
  background:none; color:var(--t2); cursor:pointer; font-size:12px;
  font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:center;
  transition:all 0.12s; flex-shrink:0;
}
.jnl-tb-btn:hover { background:rgba(255,255,255,0.07); border-color:var(--border); color:var(--t1); }
.jnl-tb-btn:active { background:rgba(0,255,140,0.12); color:var(--accent); }
.jnl-tb-btn.wide { width:auto; padding:0 8px; font-size:11px; }
.jnl-tb-sep { width:1px; height:18px; background:var(--border); margin:0 4px; flex-shrink:0; }
.jnl-det-editor {
  min-height:150px; padding:14px 16px;
  color:var(--t1); font-family:'Inter',sans-serif; font-size:13px;
  line-height:1.8; outline:none; box-sizing:border-box;
}
.jnl-det-editor:empty::before {
  content:attr(data-placeholder); color:var(--t3); pointer-events:none;
}
.jnl-det-editor h2 {
  font-size:16px; font-weight:800; color:var(--t1);
  margin:12px 0 6px; border-bottom:1px solid var(--border); padding-bottom:5px;
}
.jnl-det-editor h3 {
  font-size:14px; font-weight:700; color:var(--accent); margin:10px 0 5px;
}
.jnl-det-editor ul { padding-left:20px; margin:6px 0; list-style:disc; }
.jnl-det-editor ol { padding-left:20px; margin:6px 0; }
.jnl-det-editor li { margin:3px 0; }
.jnl-det-editor b, .jnl-det-editor strong { font-weight:700; color:var(--t1); }
.jnl-det-editor em { font-style:italic; color:var(--t2); }
.jnl-det-editor u { text-decoration:underline; text-underline-offset:3px; }
.jnl-det-editor blockquote {
  border-inline-start:3px solid var(--accent);
  padding-inline-start:12px;
  margin:8px 0; color:var(--t2); font-style:italic;
}

.jnl-det-note-actions {
  display:flex; justify-content:space-between; align-items:center; margin-top:9px;
}
.jnl-det-save-btn {
  padding:8px 20px; background:var(--accent); border:none;
  border-radius:8px; color:#000; font-weight:700; font-size:13px; cursor:pointer; transition:opacity 0.2s;
}
.jnl-det-save-btn:hover { opacity:0.85; }
.jnl-det-del-btn {
  padding:7px 14px; background:none;
  border:1px solid rgba(255,59,92,0.2); border-radius:8px;
  color:var(--loss-2); font-size:13px; cursor:pointer; transition:all 0.2s;
}
.jnl-det-del-btn:hover { background:rgba(255,59,92,0.1); }

/* Notebook view (after save) */
.jnl-notebook-wrap { display:flex; flex-direction:column; gap:10px; }
.jnl-notebook-page {
  background:#111;
  border:1px solid rgba(0,255,140,0.1);
  border-radius:10px;
  padding:18px 20px 18px 50px;
  min-height:80px;
  position:relative;
  font-size:13px; line-height:1.85; color:var(--t1);
  overflow:hidden;
}
.jnl-notebook-page::before {
  content:''; position:absolute; left:38px; top:0; bottom:0;
  width:1px; background:rgba(255,80,80,0.18);
}
.jnl-notebook-page::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    transparent, transparent 28px,
    rgba(255,255,255,0.025) 28px, rgba(255,255,255,0.025) 29px
  );
}
.jnl-notebook-content {
  position:relative; z-index:1;
}
.jnl-notebook-content h2 {
  font-size:15px; font-weight:800; color:var(--t1);
  margin:10px 0 6px; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:4px;
}
.jnl-notebook-content h3 { font-size:13px; font-weight:700; color:var(--accent); margin:8px 0 4px; }
.jnl-notebook-content ul { padding-left:18px; margin:5px 0; list-style:disc; }
.jnl-notebook-content ol { padding-left:18px; margin:5px 0; }
.jnl-notebook-content li { margin:3px 0; }
.jnl-notebook-content b, .jnl-notebook-content strong { font-weight:700; }
.jnl-notebook-content blockquote {
  border-inline-start:3px solid var(--accent); padding-inline-start:11px;
  margin:7px 0; color:var(--t2); font-style:italic;
}
.jnl-notebook-empty { color:var(--t3); font-style:italic; }
.jnl-notebook-actions { display:flex; gap:8px; }
.jnl-nb-edit-btn {
  display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  background:none; border:1px solid var(--border); border-radius:7px;
  color:var(--t3); padding:5px 12px; cursor:pointer; transition:all 0.15s;
}
.jnl-nb-edit-btn:hover { border-color:var(--accent); color:var(--accent); }
.jnl-nb-add-btn {
  display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  background:rgba(0,255,140,0.06); border:1px dashed rgba(0,255,140,0.22);
  border-radius:7px; color:var(--accent); padding:5px 12px; cursor:pointer; transition:all 0.15s;
}
.jnl-nb-add-btn:hover { background:rgba(0,255,140,0.11); }

/* AI box */
.jnl-det-ai-box {
  background:rgba(0,255,140,0.03); border:1px solid rgba(0,255,140,0.14);
  border-radius:12px; padding:18px 20px;
}
.jnl-det-ai-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:11px;
}
.jnl-det-ai-label {
  font-size:11px; font-weight:800; color:var(--accent);
  text-transform:uppercase; letter-spacing:0.6px; display:flex; align-items:center; gap:6px;
}
.jnl-det-ai-btn {
  font-size:11px; padding:5px 13px;
  background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.25);
  border-radius:7px; color:var(--accent); cursor:pointer; font-weight:700; transition:all 0.2s;
}
.jnl-det-ai-btn:hover { background:rgba(0,255,140,0.18); }
.jnl-det-ai-text { font-size:13px; color:var(--t2); line-height:1.75; }
.jnl-det-ai-placeholder { font-size:13px; color:var(--t3); font-style:italic; line-height:1.65; }

/* ─── Checklist Modal ─── */
.chk-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.78);
  backdrop-filter:blur(7px); z-index:9100;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.22s;
}
.chk-backdrop.open { opacity:1; pointer-events:auto; }
.chk-modal {
  width:480px; max-width:calc(100vw - 32px); max-height:calc(100vh - 60px);
  background:#0c0c0c; border:1px solid var(--border); border-radius:18px;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(28px); transition:transform 0.22s;
  box-shadow:0 40px 100px rgba(0,0,0,0.7);
}
.chk-backdrop.open .chk-modal { transform:translateY(0); }
.chk-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 13px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.chk-header-left { display:flex; align-items:center; gap:10px; }
.chk-header-title { font-size:16px; font-weight:800; color:var(--t1); }
.chk-pending-badge {
  font-size:11px; font-weight:700; color:#fff;
  background:var(--accent); padding:2px 8px; border-radius:20px; color:#000;
}
.chk-header-close {
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  background:none; color:var(--t3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:14px; transition:all 0.15s;
}
.chk-header-close:hover { border-color:var(--accent); color:var(--accent); }
.chk-add-row {
  display:flex; gap:8px; padding:13px 16px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.chk-input {
  flex:1; background:#141414; border:1px solid var(--border); border-radius:8px;
  color:var(--t1); font-family:'Inter',sans-serif; font-size:13px; padding:8px 12px;
  transition:border-color 0.2s;
}
.chk-input:focus { outline:none; border-color:var(--accent); }
.chk-input::placeholder { color:var(--t3); }
.chk-add-btn {
  padding:8px 15px; background:var(--accent); border:none;
  border-radius:8px; color:#000; font-weight:700; font-size:13px;
  cursor:pointer; transition:opacity 0.2s; flex-shrink:0;
}
.chk-add-btn:hover { opacity:0.85; }
.chk-body {
  flex:1; overflow-y:auto; padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.chk-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:48px 20px; color:var(--t3); text-align:center;
}
.chk-empty-icon { font-size:40px; margin-bottom:12px; opacity:0.7; }
.chk-empty-title { font-size:14px; font-weight:700; color:var(--t2); margin-bottom:4px; }
.chk-empty-sub { font-size:12px; }
.chk-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; background:#111; border:1px solid var(--border);
  border-radius:10px; transition:border-color 0.2s;
}
.chk-item.done { opacity:0.5; }
.chk-item:hover { border-color:rgba(0,255,140,0.2); }
.chk-checkbox {
  width:18px; height:18px; border:1.5px solid var(--border); border-radius:5px;
  cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:none; transition:all 0.15s;
}
.chk-item.done .chk-checkbox { background:var(--accent); border-color:var(--accent); }
.chk-item-text {
  flex:1; font-size:13px; color:var(--t1); line-height:1.4; cursor:pointer; word-break:break-word;
}
.chk-item.done .chk-item-text { text-decoration:line-through; color:var(--t3); }
.chk-del-btn {
  background:none; border:none; color:var(--t3); cursor:pointer;
  padding:3px; display:flex; align-items:center; opacity:0; transition:all 0.15s; flex-shrink:0;
}
.chk-item:hover .chk-del-btn { opacity:1; }
.chk-del-btn:hover { color:var(--loss-2); }
.chk-footer {
  padding:10px 16px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.chk-footer-count { font-size:11px; color:var(--t3); }
.chk-clear-btn {
  font-size:11px; background:none; border:1px solid var(--border);
  border-radius:6px; color:var(--t3); padding:4px 10px; cursor:pointer; transition:all 0.15s;
}
.chk-clear-btn:hover { border-color:var(--loss-2); color:var(--loss-2); }

/* ── Baskets Section ── */
.baskets-section { margin-top:20px; }
.baskets-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--bg2);
  border:1px solid var(--accent); border-radius:14px; margin-bottom:12px;
  box-shadow:0 0 18px rgba(0,255,140,0.08);
}
.baskets-section-left { display:flex; align-items:center; gap:10px; }
.baskets-section-icon {
  width:34px; height:34px; border-radius:9px; background:rgba(0,255,140,0.12);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.baskets-section-text {}
.baskets-section-title { font-size:14px; font-weight:800; color:var(--t1); }
.baskets-section-sub { font-size:11px; color:var(--t3); margin-top:1px; }
.baskets-create-btn {
  display:flex; align-items:center; gap:5px; background:var(--accent);
  color:#000; border:none; border-radius:9px; font-size:12px; font-weight:800;
  padding:8px 14px; cursor:pointer; transition:opacity 0.15s; white-space:nowrap;
}
.baskets-create-btn:hover { opacity:0.85; }

/* basket card */
.basket-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; margin-bottom:12px;
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.basket-card-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  padding:14px 16px 10px;
}
.basket-name { font-size:15px; font-weight:800; color:var(--t1); }
.basket-meta { font-size:10px; color:var(--t3); margin-top:3px; display:flex; gap:8px; }
.basket-meta-chip {
  background:var(--bg3); border-radius:4px; padding:1px 6px; font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
}
.basket-meta-chip svg { flex-shrink:0; opacity:0.8; }
.basket-pnl-block { text-align:right; flex-shrink:0; }
.basket-pnl-val { font-size:16px; font-weight:800; }
.basket-pnl-pct { font-size:11px; margin-top:2px; font-weight:600; }

/* pie + legend layout inside basket */
.basket-pie-layout {
  display:flex; align-items:center; gap:16px; padding:0 16px 14px;
}
.basket-pie-wrap { position:relative; flex-shrink:0; width:120px; height:120px; }
.basket-pie-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.basket-pie-center-label { font-size:8px; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; font-weight:800; }
.basket-pie-center-val { font-size:13px; font-weight:800; color:var(--t1); line-height:1.2; margin-top:2px; }
.basket-legend { flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.basket-legend-row { display:flex; align-items:center; gap:8px; }
.basket-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.basket-legend-ticker { font-size:12px; font-weight:700; color:var(--t1); width:42px; flex-shrink:0; }
.basket-legend-alloc { font-size:10px; color:var(--t3); width:28px; flex-shrink:0; }
.basket-legend-bar-wrap { flex:1; height:3px; background:var(--bg3); border-radius:99px; overflow:hidden; }
.basket-legend-bar { height:100%; border-radius:99px; }
.basket-legend-pnl { font-size:11px; font-weight:700; width:58px; text-align:right; flex-shrink:0; }

/* stats row inside basket */
.basket-stats-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);
}
.basket-stat { padding:10px 14px; border-right:1px solid var(--border); }
.basket-stat:last-child { border-right:none; }
.basket-stat-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-bottom:3px; }
.basket-stat-val { font-size:13px; font-weight:700; color:var(--t1); }

/* close button */
.basket-footer {
  border-top:1px solid var(--border); padding:10px 14px; display:flex; gap:8px;
}
.basket-close-btn {
  flex:1; background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--t2); font-size:12px; font-weight:600; padding:7px 0; cursor:pointer; transition:all 0.15s;
}
.basket-close-btn:hover { border-color:var(--loss-2); color:var(--loss-2); }

/* Edit button alongside Close in basket footer */
.basket-edit-card-btn {
  flex:1; background:none; border:1px solid rgba(0,255,140,0.3); border-radius:8px;
  color:var(--accent); font-size:12px; font-weight:700; padding:7px 0;
  cursor:pointer; transition:all 0.15s; font-family:'Inter',sans-serif;
}
.basket-edit-card-btn:hover { border-color:var(--accent); background:rgba(0,255,140,0.08); }

/* ── Featured Traders (Social Baskets) ── */
.featured-traders-section { margin-top:24px; }
.featured-traders-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.featured-traders-title {
  font-size:14px; font-weight:800; color:var(--t1); display:flex; align-items:center; gap:8px;
}
.featured-traders-pro-badge {
  font-size:9px; font-weight:800; color:#ffd700; background:rgba(255,215,0,0.12);
  border:1px solid rgba(255,215,0,0.35); border-radius:5px; padding:2px 6px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.featured-traders-scroll {
  display:flex; gap:12px; overflow-x:auto; padding-bottom:8px;
  scrollbar-width:none;
}
.featured-traders-scroll::-webkit-scrollbar { display:none; }

.bot-trader-card {
  flex-shrink:0; width:154px; background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:14px 12px; display:flex; flex-direction:column; align-items:center;
  gap:8px; cursor:pointer; transition:all 0.18s; position:relative; overflow:hidden;
}
.bot-trader-card:hover { border-color:rgba(0,255,140,0.4); transform:translateY(-2px); }
.bot-card-avatar {
  width:52px; height:52px; border-radius:50%; background:var(--bg3);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  border:2px solid var(--border); flex-shrink:0;
}
.bot-card-name { font-size:13px; font-weight:800; color:var(--t1); text-align:center; }
.bot-card-strategy { font-size:10px; color:var(--t3); text-align:center; line-height:1.3; }
.bot-card-return { font-size:16px; font-weight:800; color:var(--gain-2); text-align:center; }
.bot-card-return.loss { color:var(--loss-2); }
.bot-card-copy-btn {
  width:100%; padding:7px 0; border-radius:8px; border:1px solid rgba(0,255,140,0.4);
  background:rgba(0,255,140,0.08); color:var(--accent); font-size:11px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s;
}
.bot-card-copy-btn:hover { background:rgba(0,255,140,0.18); border-color:var(--accent); }
.bot-card-lock-overlay {
  display:none; position:absolute; inset:0; background:rgba(8,8,8,0.75);
  backdrop-filter:blur(3px); border-radius:14px; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
}
.bot-trader-card.locked .bot-card-lock-overlay { display:flex; }
.bot-card-lock-icon { font-size:22px; }
.bot-card-lock-label {
  font-size:10px; font-weight:700; color:#ffd700;
  background:rgba(255,215,0,0.12); border:1px solid rgba(255,215,0,0.35);
  border-radius:5px; padding:2px 8px;
}

/* ── User Profile Modal ── */
.uprof-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9200;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.22s;
}
.uprof-overlay.open { opacity:1; pointer-events:all; }
.uprof-sheet {
  width:100%; max-width:480px; max-height:88vh; background:var(--bg1);
  border-radius:22px 22px 0 0; overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(40px); transition:transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.uprof-overlay.open .uprof-sheet { transform:translateY(0); }
.uprof-handle { width:38px; height:4px; background:var(--border); border-radius:99px; margin:10px auto 0; flex-shrink:0; }
.uprof-header {
  padding:16px 18px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; flex-shrink:0; position:relative;
}
.uprof-avatar { width:58px; height:58px; border-radius:50%; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:28px; border:2px solid var(--border); flex-shrink:0; }
.uprof-info { flex:1; min-width:0; }
.uprof-name { font-size:16px; font-weight:800; color:var(--t1); }
.uprof-meta { display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
.uprof-level { font-size:11px; font-weight:700; color:var(--t2); background:var(--bg3); border-radius:5px; padding:2px 7px; }
.uprof-winrate { font-size:11px; font-weight:700; color:var(--gain-2); }
.uprof-value-block { text-align:right; flex-shrink:0; }
.uprof-value-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:2px; }
.uprof-value { font-size:18px; font-weight:800; color:var(--t1); }
.uprof-close { position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%; background:var(--bg3); border:none; color:var(--t2); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.uprof-body { flex:1; overflow-y:auto; padding:14px 14px 24px; display:flex; flex-direction:column; gap:10px; }
.uprof-section-label { font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; }
.uprof-basket-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.uprof-basket-info { flex:1; min-width:0; }
.uprof-basket-name { font-size:13px; font-weight:800; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uprof-basket-tickers { font-size:10px; color:var(--t3); margin-top:3px; display:flex; gap:4px; flex-wrap:wrap; }
.uprof-basket-ticker-pill { background:var(--bg3); border-radius:4px; padding:1px 5px; font-weight:700; }
.uprof-basket-return { font-size:13px; font-weight:800; white-space:nowrap; }
.uprof-basket-copy-btn {
  flex-shrink:0; padding:7px 11px; border-radius:8px; border:1px solid rgba(0,255,140,0.4);
  background:rgba(0,255,140,0.08); color:var(--accent); font-size:11px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:all 0.15s;
}
.uprof-basket-copy-btn:hover { background:rgba(0,255,140,0.18); border-color:var(--accent); }

/* ── Copy Basket Confirmation Modal ── */
.cbasket-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9300;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.cbasket-overlay.open { opacity:1; pointer-events:all; }
.cbasket-modal {
  width:100%; max-width:380px; background:var(--bg1); border:1px solid var(--border-2);
  border-radius:18px; padding:22px 20px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
  transform:scale(0.95); transition:transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.cbasket-overlay.open .cbasket-modal { transform:scale(1); }
.cbasket-title { font-size:16px; font-weight:800; color:var(--t1); }
.cbasket-preview {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
}
.cbasket-basket-name { font-size:15px; font-weight:800; color:var(--t1); }
.cbasket-tickers { display:flex; gap:5px; flex-wrap:wrap; }
.cbasket-ticker-pill {
  background:var(--bg3); border-radius:5px; padding:3px 7px;
  font-size:11px; font-weight:700; color:var(--t2);
}
.cbasket-allocs { display:flex; flex-direction:column; gap:5px; }
.cbasket-alloc-row { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--t2); }
.cbasket-alloc-ticker { width:38px; font-weight:700; flex-shrink:0; }
.cbasket-alloc-pct { width:30px; text-align:right; flex-shrink:0; }
.cbasket-alloc-bar-wrap { flex:1; height:3px; background:var(--bg3); border-radius:99px; overflow:hidden; }
.cbasket-alloc-bar { height:100%; border-radius:99px; }
.cbasket-attribution { font-size:10px; color:var(--t3); }
.cbasket-return { font-size:12px; font-weight:700; }
.cbasket-amount-label { font-size:11px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; }
.cbasket-amount-input {
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg2); color:var(--t1); font-size:15px; font-weight:700;
  font-family:'Inter',sans-serif; outline:none; transition:border-color 0.15s; box-sizing:border-box;
}
.cbasket-amount-input:focus { border-color:var(--accent); }
.cbasket-breakdown { display:flex; flex-direction:column; gap:5px; }
.cbasket-breakdown-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.cbasket-breakdown-row .cb-label { color:var(--t3); }
.cbasket-breakdown-row .cb-val { font-weight:700; color:var(--t1); }
.cbasket-breakdown-row.insufficient .cb-val { color:var(--loss-2); }
.cbasket-warning { font-size:10px; color:var(--t3); line-height:1.4; }
.cbasket-confirm-btn {
  width:100%; padding:13px; border-radius:11px; border:none;
  background:var(--accent); color:#000; font-size:14px; font-weight:800;
  cursor:pointer; font-family:'Inter',sans-serif; transition:opacity 0.15s;
}
.cbasket-confirm-btn:disabled { opacity:0.35; cursor:default; }
.cbasket-confirm-btn:not(:disabled):hover { opacity:0.88; }
.cbasket-cancel-btn {
  width:100%; padding:8px; background:none; border:none; color:var(--t3);
  font-size:13px; cursor:pointer; font-family:'Inter',sans-serif;
}

/* ── Pro Gate bottom sheet ── */
.pro-gate-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:9400; backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.22s;
}
.pro-gate-overlay.open { opacity:1; pointer-events:all; }
.pro-gate-sheet {
  width:min(360px, calc(100vw - 40px)); background:#0f0f14;
  border-radius:20px; padding:32px 24px 24px;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  border:1px solid var(--pg-border, rgba(255,215,0,0.18));
  box-shadow:0 0 0 1px var(--pg-glow, rgba(255,215,0,0.06)), 0 24px 60px rgba(0,0,0,0.7), 0 0 80px var(--pg-glow, rgba(255,215,0,0.06));
  transform:scale(0.88); transition:transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.pro-gate-overlay.open .pro-gate-sheet { transform:scale(1); }
.pro-gate-icon-wrap {
  width:68px; height:68px; border-radius:18px;
  background:var(--pg-bg, rgba(255,215,0,0.15));
  border:1px solid var(--pg-border, rgba(255,215,0,0.25));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 28px var(--pg-glow, rgba(255,215,0,0.12));
  transition:background 0.2s, border-color 0.2s;
}
.pro-gate-tier-badge {
  font-size:9px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; background:var(--pg-badge-bg, rgba(255,215,0,0.12));
  border:1px solid var(--pg-border, rgba(255,215,0,0.3)); color:var(--pg-color, #ffd700);
}
.pro-gate-title { font-size:19px; font-weight:900; color:#fff; line-height:1.2; }
.pro-gate-sub { font-size:12px; color:var(--t2); line-height:1.6; max-width:260px; }
.pro-gate-perks {
  display:flex; flex-direction:column; gap:5px; width:100%;
  background:rgba(255,255,255,0.03); border-radius:12px; padding:12px 14px;
  border:1px solid rgba(255,255,255,0.06); max-height:260px; overflow-y:auto;
}
.pro-gate-perk { display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:var(--t1); text-align:left; line-height:1.4; }
.pro-gate-perk-dot { width:5px; height:5px; border-radius:50%; background:var(--pg-color, #ffd700); flex-shrink:0; margin-top:5px; }
.pro-gate-btn {
  margin-top:2px; width:100%; padding:14px; border-radius:12px;
  border:none; background:var(--pg-btn-bg, linear-gradient(135deg,#ffd700,#ffb800));
  color:var(--pg-btn-text, #000); font-size:14px; font-weight:900;
  cursor:pointer; font-family:'Inter',sans-serif;
  box-shadow:0 4px 20px var(--pg-glow, rgba(255,215,0,0.3)); transition:all 0.15s;
}
.pro-gate-btn:hover { transform:translateY(-1px); }
.pro-gate-cancel { font-size:12px; color:var(--t3); cursor:pointer; background:none; border:none; font-family:'Inter',sans-serif; padding:4px; transition:color 0.15s; }
.pro-gate-cancel:hover { color:var(--t2); }

/* ── Browse Sample Baskets button ── */
.baskets-browse-btn {
  display:flex; align-items:center; gap:5px; padding:7px 11px; border-radius:9px;
  border:1px solid rgba(255,215,0,0.35); background:rgba(255,215,0,0.08);
  color:#ffd700; font-size:11px; font-weight:700; cursor:pointer;
  font-family:'Inter',sans-serif; white-space:nowrap; transition:all 0.15s;
}
.baskets-browse-btn:hover { background:rgba(255,215,0,0.15); border-color:rgba(255,215,0,0.6); }
/* Lock tooltip wrapper */
.browse-btn-wrap { position:relative; display:inline-flex; }
.browse-btn-wrap.locked .baskets-browse-btn { opacity:0.55; cursor:not-allowed; filter:grayscale(0.4); }
.browse-btn-wrap.locked:hover::after {
  content:'🔒 Elite only';
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#1a1a2e; color:#fff; font-size:11px; font-weight:600;
  padding:5px 10px; border-radius:8px; white-space:nowrap;
  border:1px solid rgba(255,215,0,0.3); pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.5); z-index:999;
}
.browse-btn-wrap.locked:hover::before {
  content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1a1a2e; pointer-events:none; z-index:999;
}

/* ── Sample Baskets Screen ── */
#screen-sample-baskets.active { display:flex; flex-direction:column; overflow:hidden; }
.sbs-topbar {
  display:flex; align-items:center; gap:12px; padding:14px 16px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0; background:var(--bg1);
}
.sbs-back {
  background:none; border:1px solid rgba(0,255,140,0.3); color:var(--accent);
  font-size:12px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif;
  padding:6px 11px; border-radius:8px; white-space:nowrap;
}
.sbs-topbar-info { flex:1; }
.sbs-topbar-title { font-size:15px; font-weight:800; color:var(--t1); }
.sbs-topbar-sub { font-size:10px; color:var(--t3); margin-top:1px; }
.sbs-filters { padding:12px 14px 2px; flex-shrink:0; background:var(--bg1); }
.sbs-search {
  width:100%; padding:9px 13px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg2); color:var(--t1); font-size:13px; font-family:'Inter',sans-serif;
  outline:none; margin-bottom:10px; box-sizing:border-box; transition:border-color 0.15s;
}
.sbs-search:focus { border-color:var(--accent); }
.sbs-cats { display:flex; gap:7px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none; }
.sbs-cats::-webkit-scrollbar { display:none; }
.sbs-cat {
  flex-shrink:0; padding:5px 12px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg2); color:var(--t2); font-size:11px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap; transition:all 0.15s;
  display:flex; align-items:center; gap:4px;
}
.sbs-cat.active { background:rgba(0,255,140,0.12); border-color:rgba(0,255,140,0.5); color:var(--accent); }
.sbs-body { flex:1; overflow-y:auto; padding:8px 14px 28px; display:flex; flex-direction:column; gap:12px; }
.sbs-count { font-size:11px; color:var(--t3); padding:2px 0 4px; }
.sbs-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; overflow:hidden; flex-shrink:0; }
.sbs-card-header { padding:14px 16px 10px; display:flex; align-items:flex-start; gap:12px; }
.sbs-card-emoji {
  width:44px; height:44px; border-radius:12px; background:var(--bg3);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.sbs-card-info { flex:1; min-width:0; }
.sbs-card-name { font-size:14px; font-weight:800; color:var(--t1); }
.sbs-card-tags { display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap:wrap; }
.sbs-cat-badge {
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  border-radius:4px; padding:2px 6px; border:1px solid;
}
.sbs-cat-badge.tech     { color:#2ee6ff; background:rgba(46,230,255,0.08); border-color:rgba(46,230,255,0.25); }
.sbs-cat-badge.finance  { color:#ffd700; background:rgba(255,215,0,0.08);  border-color:rgba(255,215,0,0.25); }
.sbs-cat-badge.consumer { color:#fb923c; background:rgba(251,146,60,0.08); border-color:rgba(251,146,60,0.25); }
.sbs-cat-badge.etf      { color:#a78bfa; background:rgba(167,139,250,0.08);border-color:rgba(167,139,250,0.25);}
.sbs-cat-badge.crypto   { color:#f59e0b; background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.25); }
.sbs-cat-badge.thematic { color:#34d399; background:rgba(52,211,153,0.08); border-color:rgba(52,211,153,0.25); }
.sbs-return-big { font-size:18px; font-weight:800; flex-shrink:0; }
.sbs-card-thesis { padding:0 16px 12px; font-size:11px; color:var(--t2); line-height:1.55; border-bottom:1px solid var(--border); }
.sbs-holdings { padding:12px 16px; display:flex; flex-direction:column; gap:6px; }
.sbs-holding-row { display:flex; align-items:center; gap:8px; }
.sbs-holding-ticker { font-size:11px; font-weight:700; color:var(--t1); width:40px; flex-shrink:0; }
.sbs-holding-pct { font-size:10px; color:var(--t3); width:26px; text-align:right; flex-shrink:0; }
.sbs-holding-bar-wrap { flex:1; height:4px; background:var(--bg3); border-radius:99px; overflow:hidden; }
.sbs-holding-bar { height:100%; border-radius:99px; }
.sbs-holding-contrib { font-size:11px; font-weight:700; width:52px; text-align:right; flex-shrink:0; }
.sbs-card-footer { padding:10px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sbs-copy-btn {
  padding:9px 18px; border-radius:9px; border:none;
  background:var(--accent); color:#000; font-size:12px; font-weight:800;
  cursor:pointer; font-family:'Inter',sans-serif; transition:opacity 0.15s;
}
.sbs-copy-btn:hover { opacity:0.85; }

/* Basket card inline edit mode */
.bc-edit-section {
  padding:12px 14px; border-top:1px solid var(--border);
}
.bc-edit-alloc-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.bc-edit-alloc-label {
  font-size:10px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em;
}
.bc-edit-sum { font-size:12px; font-weight:800; }
.bc-edit-list { display:flex; flex-direction:column; gap:6px; }
.bc-edit-row {
  display:flex; align-items:center; gap:8px;
  background:var(--bg3); border-radius:9px; padding:8px 10px;
}
.bc-edit-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bc-edit-ticker { font-size:13px; font-weight:700; color:var(--t1); flex:1; }
.bc-edit-pct {
  width:48px; padding:5px 6px; border-radius:7px;
  border:1px solid var(--border); background:var(--bg1);
  color:var(--t1); font-size:13px; font-weight:700; text-align:center;
  font-family:'Inter',sans-serif; outline:none; transition:border-color 0.15s;
}
.bc-edit-pct:focus { border-color:var(--accent); }
.bc-edit-sym { font-size:12px; color:var(--t3); flex-shrink:0; }
.bc-edit-x {
  background:rgba(255,59,92,0.1); border:1px solid rgba(255,59,92,0.22);
  color:var(--loss-2); border-radius:6px; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:10px; flex-shrink:0;
  transition:all 0.15s; font-family:'Inter',sans-serif;
}
.bc-edit-x:hover { background:rgba(255,59,92,0.2); border-color:var(--loss-2); }
.bc-edit-x:disabled { opacity:0.28; cursor:default; }
.bc-edit-hint { font-size:10px; color:var(--t3); margin-top:8px; }
.bc-cash-section {
  padding:0 14px; border-top:1px solid var(--border);
}
.bc-cash-row {
  display:flex; align-items:center; gap:8px;
  padding:9px 0; border-bottom:1px solid var(--border);
}
.bc-cash-row:last-child { border-bottom:none; }
.bc-cash-icon { font-size:14px; flex-shrink:0; }
.bc-cash-label { font-size:12px; font-weight:700; color:var(--t2); flex:1; }
.bc-cash-input {
  width:82px; padding:6px 8px; border-radius:7px;
  border:1px solid var(--border); background:var(--bg3);
  color:var(--t1); font-size:13px; font-weight:700; text-align:right;
  font-family:'Inter',sans-serif; outline:none; transition:border-color 0.15s;
}
.bc-cash-input:focus { border-color:var(--accent); }
.bc-cash-cap { font-size:10px; color:var(--t3); flex-shrink:0; }
.bc-save-btn {
  flex:2; background:var(--accent); border:none; border-radius:8px;
  color:#000; font-size:13px; font-weight:800; padding:9px 0;
  cursor:pointer; font-family:'Inter',sans-serif; transition:opacity 0.15s;
}
.bc-save-btn:disabled { opacity:0.35; cursor:default; }
.bc-cancel-btn {
  flex:1; background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--t2); font-size:13px; font-weight:700; padding:9px 0;
  cursor:pointer; font-family:'Inter',sans-serif;
}
/* Add stock search */
.bc-add-stock-btn {
  width:100%; margin-top:8px; padding:7px 0; border-radius:8px;
  border:1px dashed rgba(0,255,140,0.3); background:transparent;
  color:var(--accent); font-size:12px; font-weight:700; cursor:pointer;
  font-family:'Inter',sans-serif; transition:all 0.15s;
}
.bc-add-stock-btn:hover { border-color:var(--accent); background:rgba(0,255,140,0.06); }
.bc-stock-search-wrap { margin-top:8px; }
.bc-stock-search-input {
  width:100%; padding:8px 10px; border-radius:8px;
  border:1px solid var(--accent); background:var(--bg3);
  color:var(--t1); font-size:13px; font-family:'Inter',sans-serif;
  outline:none; box-sizing:border-box;
}
.bc-stock-results {
  max-height:140px; overflow-y:auto; margin-top:4px;
  display:flex; flex-direction:column; gap:3px;
}
.bc-stock-result {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; border-radius:7px; background:var(--bg3);
  cursor:pointer; transition:background 0.12s;
}
.bc-stock-result:hover { background:var(--bg1); }
.bc-stock-result-left { display:flex; flex-direction:column; gap:1px; }
.bc-stock-result-ticker { font-size:13px; font-weight:700; color:var(--t1); }
.bc-stock-result-name { font-size:10px; color:var(--t3); }
.bc-stock-result-price { font-size:12px; color:var(--t2); font-weight:600; }

/* empty CTA */
.baskets-empty-cta {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:28px 20px; text-align:center;
  background:var(--bg2); border:1px dashed var(--border); border-radius:14px;
}
.baskets-empty-icon { font-size:28px; opacity:0.4; }
.baskets-empty-title { font-size:13px; font-weight:700; color:var(--t2); }
.baskets-empty-sub { font-size:11px; color:var(--t3); max-width:220px; }

/* ── Basket chip tooltip ── */
.bchip {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:3px 8px; font-size:11px; white-space:nowrap; cursor:default;
  position:relative;
}
.bchip:hover { border-color:var(--accent); box-shadow:0 0 8px rgba(0,255,140,0.35); }
.bchip-tip {
  display:none; position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); background:#1a1a1a; border:1px solid var(--border);
  border-radius:7px; padding:6px 10px; white-space:nowrap; z-index:200;
  font-size:11px; color:var(--t1); line-height:1.5;
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
  pointer-events:none;
}
.bchip-tip::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1a1a1a;
}
.bchip:hover .bchip-tip { display:block; }

/* ── Basket Modal ── */
.basket-modal-overlay {
  position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,0.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:flex-end; justify-content:center;
}
.basket-modal-overlay.hidden { display:none; }
.basket-modal {
  background:var(--bg1); border:1px solid var(--border-2); border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,0.7);
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto; padding:20px 16px 32px;
}
.basket-modal-title { font-size:16px; font-weight:800; color:var(--t1); margin-bottom:16px; }
.basket-modal-section { margin-bottom:16px; }
.basket-modal-label { font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:6px; }
.basket-name-input {
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--t1); font-size:14px; padding:9px 12px; outline:none; box-sizing:border-box;
}
.basket-name-input:focus { border-color:var(--accent); }
.basket-stock-search {
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--t1); font-size:13px; padding:8px 12px; outline:none; box-sizing:border-box; margin-bottom:8px;
}
.basket-stock-search:focus { border-color:var(--accent); }
.basket-stock-list { display:flex; flex-direction:column; gap:4px; max-height:160px; overflow-y:auto; }
.basket-stock-item {
  display:flex; align-items:center; justify-content:space-between; padding:7px 10px;
  background:var(--bg3); border:1px solid transparent; border-radius:8px; cursor:pointer; transition:all 0.12s;
}
.basket-stock-item:hover { border-color:var(--border); }
.basket-stock-item.selected { border-color:var(--accent); background:rgba(0,255,140,0.06); }
.basket-stock-item-left { display:flex; flex-direction:column; gap:1px; }
.basket-stock-ticker { font-size:13px; font-weight:700; color:var(--t1); }
.basket-stock-name { font-size:10px; color:var(--t3); }
.basket-stock-price { font-size:12px; color:var(--t2); }
.basket-alloc-list { display:flex; flex-direction:column; gap:8px; }
.basket-alloc-row { display:flex; align-items:center; gap:10px; }
.basket-alloc-ticker { font-size:13px; font-weight:700; color:var(--t1); width:50px; flex-shrink:0; }
.basket-alloc-input {
  flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:7px;
  color:var(--t1); font-size:13px; padding:6px 10px; outline:none; text-align:right;
}
.basket-alloc-input:focus { border-color:var(--accent); }
.basket-alloc-pct { font-size:12px; color:var(--t3); flex-shrink:0; }
.basket-alloc-sum { font-size:12px; font-weight:700; margin-top:4px; }
.basket-amount-input {
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--t1); font-size:15px; padding:9px 12px; outline:none; box-sizing:border-box; font-weight:700;
}
.basket-amount-input:focus { border-color:var(--accent); }
.basket-modal-confirm-btn {
  width:100%; padding:13px; background:var(--accent); border:none; border-radius:10px;
  color:#000; font-size:15px; font-weight:800; cursor:pointer; transition:opacity 0.15s; margin-top:8px;
}
.basket-modal-confirm-btn:disabled { opacity:0.35; cursor:default; }
.basket-modal-cancel-btn {
  width:100%; padding:10px; background:none; border:none; color:var(--t3); font-size:13px; cursor:pointer; margin-top:4px;
}

/* ── Basket Detail Screen ── */
#screen-basket-detail { overflow:hidden; }
#screen-basket-detail.active { display:flex; flex-direction:column; overflow:hidden; }

.bdet-topbar {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--bg); flex-shrink:0;
}
.bdet-back {
  background:none; border:none; color:var(--t2); font-size:13px; font-weight:700;
  cursor:pointer; padding:6px 10px 6px 0; display:flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.bdet-back:hover { color:var(--t1); }
.bdet-topbar-name {
  font-size:15px; font-weight:800; color:var(--t1); flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.bdet-content {
  flex:1; overflow-y:auto; padding:16px 16px 32px;
  display:flex; flex-direction:column; gap:16px;
  min-height:0;
}

/* Hero card */
.bdet-hero {
  border-radius:16px; padding:28px 20px 22px; flex-shrink:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,255,140,0.12) 0%, transparent 55%),
    linear-gradient(135deg, rgba(0,255,140,0.06) 0%, rgba(46,230,255,0.03) 60%, transparent 100%);
  border:1px solid rgba(255,255,255,0.08);
  text-align:center;
}
.bdet-hero-icon { font-size:32px; display:block; margin-bottom:10px; }
.bdet-hero-name { font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:6px; display:block; }
.bdet-hero-val { font-size:42px; font-weight:900; color:var(--t1); letter-spacing:-1px; line-height:1.1; display:block; }
.bdet-hero-pnl { font-size:18px; font-weight:700; margin-top:10px; display:block; }
.bdet-hero-pnl.gain { color:var(--accent); }
.bdet-hero-pnl.loss { color:var(--loss-2); }
.bdet-hero-pnl.neutral { color:var(--t3); }
.bdet-hero-meta { font-size:11px; color:var(--t3); margin-top:10px; display:flex; justify-content:center; gap:14px; }
.bdet-hero-meta-chip { display:flex; align-items:center; gap:4px; }

/* Stats 2x2 grid */
.bdet-stats {
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--bg2); flex-shrink:0;
}
.bdet-stat {
  padding:16px 14px; text-align:center;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.bdet-stat:nth-child(2) { border-right:none; }
.bdet-stat:nth-child(3) { border-bottom:none; }
.bdet-stat:nth-child(4) { border-right:none; border-bottom:none; }
.bdet-stat-label { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-bottom:6px; display:block; }
.bdet-stat-val { font-size:16px; font-weight:800; color:var(--t1); display:block; }
.bdet-stat-val.gain { color:var(--accent); }
.bdet-stat-val.loss { color:var(--loss-2); }

/* Donut chart section — donut centered, legend below in 2 cols */
.bdet-chart-section {
  border:1px solid var(--border); border-radius:14px; padding:18px 16px;
  background:var(--bg2); flex-shrink:0;
}
.bdet-chart-title {
  font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase;
  letter-spacing:0.1em; margin-bottom:16px;
}
.bdet-donut-wrap { position:relative; width:180px; height:180px; margin:0 auto 18px; }
.bdet-donut-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.bdet-donut-center-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; }
.bdet-donut-center-val { font-size:16px; font-weight:800; color:var(--t1); margin-top:3px; }
.bdet-donut-center-cnt { font-size:10px; color:var(--t3); margin-top:2px; }
/* Legend: 2-column grid below the donut */
.bdet-chart-legend { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.bdet-legend-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);
}
.bdet-legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.bdet-legend-info { flex:1; min-width:0; }
.bdet-legend-ticker { font-size:13px; font-weight:800; color:var(--t1); }
.bdet-legend-pct { font-size:10px; color:var(--t3); margin-top:1px; }
.bdet-legend-pnl { font-size:12px; font-weight:700; flex-shrink:0; }

/* Holdings list */
.bdet-holdings-section {
  border:1px solid var(--border); border-radius:14px;
  background:var(--bg2); overflow:hidden; flex-shrink:0;
}
.bdet-holdings-header {
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.bdet-holdings-title { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; }
.bdet-holdings-count { font-size:11px; color:var(--t3); }
.bdet-holding-row {
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.04);
  cursor:pointer; transition:background 0.12s;
}
.bdet-holding-row:last-child { border-bottom:none; }
.bdet-holding-row:hover { background:rgba(255,255,255,0.03); }
.bdet-holding-main {
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.bdet-holding-color { width:4px; height:44px; border-radius:99px; flex-shrink:0; }
.bdet-holding-body { flex:1; min-width:0; }
.bdet-holding-ticker { font-size:15px; font-weight:800; color:var(--t1); }
.bdet-holding-name { font-size:11px; color:var(--t3); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bdet-holding-meta { font-size:11px; color:var(--t3); margin-top:3px; display:flex; gap:8px; }
.bdet-holding-right { text-align:right; flex-shrink:0; }
.bdet-holding-val { font-size:15px; font-weight:800; color:var(--t1); }
.bdet-holding-pnl { font-size:12px; font-weight:700; margin-top:3px; }
.bdet-holding-pnl.gain { color:var(--accent); }
.bdet-holding-pnl.loss { color:var(--loss-2); }
.bdet-holding-bar-row { display:flex; align-items:center; gap:10px; padding-left:16px; }
.bdet-holding-bar-wrap { flex:1; height:4px; background:var(--bg3); border-radius:99px; overflow:hidden; }
.bdet-holding-bar { height:100%; border-radius:99px; }
.bdet-holding-bar-pct { font-size:11px; font-weight:600; color:var(--t3); width:30px; text-align:right; flex-shrink:0; }

/* Sector breakdown */
.bdet-sector-section {
  border:1px solid var(--border); border-radius:14px; padding:16px;
  background:var(--bg2); flex-shrink:0;
}
.bdet-sector-title { font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px; }
.bdet-sector-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.bdet-sector-row:last-child { margin-bottom:0; }
.bdet-sector-label { font-size:12px; color:var(--t1); font-weight:600; width:80px; flex-shrink:0; text-transform:capitalize; }
.bdet-sector-bar-wrap { flex:1; height:7px; background:var(--bg3); border-radius:99px; overflow:hidden; }
.bdet-sector-bar-fill { height:100%; border-radius:99px; }
.bdet-sector-pct { font-size:11px; color:var(--t3); width:32px; text-align:right; flex-shrink:0; font-weight:600; }

/* Close action button */
.bdet-close-btn {
  width:100%; padding:16px; border-radius:13px;
  border:1px solid rgba(255,59,92,0.3); background:rgba(255,59,92,0.06);
  color:var(--loss-2); font-size:15px; font-weight:700; cursor:pointer;
  transition:all 0.15s;
}
.bdet-close-btn:hover { border-color:var(--loss-2); background:rgba(255,59,92,0.12); }

/* Edit + Close action row in basket detail */
.bdet-action-row { display:flex; gap:10px; margin-top:4px; }
.bdet-edit-btn {
  flex:1; padding:16px; border-radius:13px;
  border:1px solid rgba(0,255,140,0.35); background:rgba(0,255,140,0.07);
  color:var(--accent); font-size:15px; font-weight:700; cursor:pointer;
  transition:all 0.15s; font-family:'Inter',sans-serif;
}
.bdet-edit-btn:hover { border-color:var(--accent); background:rgba(0,255,140,0.14); }
.bdet-action-row .bdet-close-btn { flex:1; margin-top:0; }

/* ═══════════════════════════════════════════════════════
   BASKET INLINE EDIT MODE
═══════════════════════════════════════════════════════ */
/* Allocations edit block */
.bdet-ie-section {
  background:var(--bg2); border-radius:14px; padding:14px 16px; margin-bottom:12px;
}
.bdet-ie-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.bdet-ie-label {
  font-size:11px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.07em;
}
.bdet-ie-sum { font-size:13px; font-weight:800; }
.bdet-ie-list { display:flex; flex-direction:column; gap:8px; }
.bdet-ie-row {
  display:flex; align-items:center; gap:10px;
  background:var(--bg3); border-radius:10px; padding:10px 12px;
}
.bdet-ie-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.bdet-ie-ticker { font-size:14px; font-weight:700; color:var(--t1); flex:1; }
.bdet-ie-pct {
  width:54px; padding:6px 8px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg1);
  color:var(--t1); font-size:14px; font-weight:700; text-align:center;
  font-family:'Inter',sans-serif; outline:none; transition:border-color 0.15s;
}
.bdet-ie-pct:focus { border-color:var(--accent); }
.bdet-ie-sym { font-size:13px; color:var(--t3); flex-shrink:0; }
.bdet-ie-x {
  background:rgba(255,59,92,0.1); border:1px solid rgba(255,59,92,0.25);
  color:var(--loss-2); border-radius:6px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12px; flex-shrink:0; transition:all 0.15s;
  font-family:'Inter',sans-serif;
}
.bdet-ie-x:hover { background:rgba(255,59,92,0.22); border-color:var(--loss-2); }
.bdet-ie-x:disabled { opacity:0.28; cursor:default; }
.bdet-ie-hint { font-size:11px; color:var(--t3); margin-top:10px; }
/* Cash in / out block */
.bdet-ie-cash {
  background:var(--bg2); border-radius:14px; padding:0 16px; margin-bottom:12px;
  overflow:hidden;
}
.bdet-ie-cash-row {
  display:flex; align-items:center; gap:10px;
  padding:13px 0; border-bottom:1px solid var(--border);
}
.bdet-ie-cash-row:last-child { border-bottom:none; }
.bdet-ie-cash-icon { font-size:16px; flex-shrink:0; }
.bdet-ie-cash-label { font-size:13px; font-weight:700; color:var(--t2); flex:1; }
.bdet-ie-cash-input {
  width:96px; padding:7px 10px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg3);
  color:var(--t1); font-size:14px; font-weight:700; text-align:right;
  font-family:'Inter',sans-serif; outline:none; transition:border-color 0.15s;
}
.bdet-ie-cash-input:focus { border-color:var(--accent); }
.bdet-ie-cash-cap { font-size:11px; color:var(--t3); width:78px; text-align:right; flex-shrink:0; }
/* Save / Cancel row */
.bdet-ie-actions { display:flex; gap:10px; }
.bdet-ie-save {
  flex:2; padding:16px; border-radius:13px; border:none;
  background:var(--accent); color:#000; font-size:15px; font-weight:800;
  cursor:pointer; font-family:'Inter',sans-serif; transition:opacity 0.15s;
}
.bdet-ie-save:disabled { opacity:0.38; cursor:default; }
.bdet-ie-cancel {
  flex:1; padding:16px; border-radius:13px;
  border:1px solid var(--border); background:transparent;
  color:var(--t2); font-size:15px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif;
}

/* ── Chart fullscreen modal ── */
.chart-fs-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:9000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.22s ease; }
.chart-fs-overlay.open { opacity:1; pointer-events:all; }
.chart-fs-box { width:90vw; height:82vh; max-width:1400px; background:#080808; border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transform:scale(0.96); transition:transform 0.22s ease; position:relative; }
.chart-fs-overlay.open .chart-fs-box { transform:scale(1); }
.chart-fs-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.chart-fs-title { font-size:13px; font-weight:800; letter-spacing:0.04em; color:var(--t1); }
.chart-fs-back { background:rgba(255,255,255,0.07); border:1px solid var(--border); border-radius:8px; color:var(--t2); font-size:12px; font-weight:700; padding:5px 14px; cursor:pointer; font-family:'Inter',sans-serif; transition:all 0.15s; }
.chart-fs-back:hover { background:rgba(255,255,255,0.13); color:var(--t1); }
.chart-fs-body { flex:1; height:0; }
.chart-expand-btn { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); border-radius:6px; color:rgba(255,255,255,0.7); font-size:15px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; flex-shrink:0; }
.chart-expand-btn:hover { background:rgba(255,255,255,0.15); color:#fff; border-color:rgba(255,255,255,0.35); }

/* ═══════════════════════════════
   SETTINGS SCREEN
═══════════════════════════════ */
.settings-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
  align-items: start;
}

.settings-group { display:flex; flex-direction:column; gap:2px; }

.settings-group-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--t3);
  padding: 0 4px 8px;
  display: flex; align-items: center; gap: 8px;
}
.settings-group-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

.settings-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}

.settings-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.12s;
  cursor: default;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: rgba(255,255,255,0.03); }

.settings-row-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.settings-row-body { flex: 1; min-width: 0; }
.settings-row-title { font-size: 14px; font-weight: 600; color: var(--t1); line-height: 1.3; }
.settings-row-sub { font-size: 12px; color: var(--t3); margin-top: 2px; line-height: 1.4; }
.settings-row-ctrl { flex-shrink: 0; }

/* Toggle switch */
.stt { position: relative; display: inline-block; width: 42px; height: 24px; }
.stt input { opacity: 0; width: 0; height: 0; }
.stt-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,0.10); border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.2s, border-color 0.2s;
}
.stt-slider::before {
  content: ''; position: absolute;
  height: 18px; width: 18px; left: 2px; top: 2px;
  background: rgba(255,255,255,0.5); border-radius: 50%;
  transition: transform 0.22s var(--ease-spring), background 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.stt input:checked + .stt-slider { background: var(--accent); border-color: var(--accent); }
.stt input:checked + .stt-slider::before { transform: translateX(18px); background: #080808; }

/* Segment control */
.settings-seg {
  display: flex; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px; padding: 3px; gap: 2px;
}
.settings-seg-btn {
  flex: 1; padding: 5px 12px; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--t3); background: transparent;
  font-family: inherit;
  transition: all 0.15s; white-space: nowrap;
}
.settings-seg-btn.active { background: var(--accent); color: #080808; }

/* Your Plan row (settings) */
.your-plan-icon-free  { background:rgba(138,138,138,0.12); }
.your-plan-icon-pro   { background:rgba(192,132,252,0.12); }
.your-plan-icon-elite { background:rgba(255,215,0,0.1); }

/* Plan modal */
.plan-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.88); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .18s;
}
.plan-modal-overlay.hidden { display:none; }
.plan-modal {
  width:100%; max-width:700px; max-height:92vh; overflow-y:auto;
  background:#0e0e0e; border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  padding:28px 24px 32px;
}
.plan-modal-header {
  display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px;
}
.plan-modal-title { font-size:20px; font-weight:900; color:var(--t1); }
.plan-modal-sub { font-size:13px; color:var(--t3); margin-bottom:24px; }
.plan-modal-close {
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.07); border:none; cursor:pointer;
  color:var(--t2); font-size:16px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px;
}
.plan-modal-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.pmc { /* plan modal card */
  border-radius:14px; padding:20px 16px; display:flex; flex-direction:column; gap:0;
  transition:border-color 0.18s, background 0.18s;
}
.pmc.pmc-free  { background:rgba(138,138,138,0.04); border:1.5px solid rgba(138,138,138,0.2); }
.pmc.pmc-pro   { background:rgba(192,132,252,0.05); border:1.5px solid rgba(192,132,252,0.3); }
.pmc.pmc-elite { background:rgba(255,215,0,0.04);   border:1.5px solid rgba(255,215,0,0.28); }
.pmc.pmc-free.pmc-active   { border-color:rgba(138,138,138,0.55); background:rgba(255,255,255,0.07); }
.pmc.pmc-pro.pmc-active    { border-color:rgba(192,132,252,0.6);  background:rgba(192,132,252,0.09); }
.pmc.pmc-elite.pmc-active  { border-color:rgba(255,215,0,0.55);   background:rgba(255,215,0,0.07); }
.pmc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.pmc-name { font-size:17px; font-weight:900; color:var(--t1); }
.pmc-price { font-size:22px; font-weight:900; color:var(--t1); margin:12px 0 2px; line-height:1; }
.pmc-period { font-size:11px; color:var(--t3); margin-bottom:16px; }
.pmc-divider { height:1px; background:rgba(255,255,255,0.07); margin-bottom:14px; }
.pmc-features { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pmc-features li { font-size:11.5px; color:var(--t1); display:flex; align-items:flex-start; gap:7px; line-height:1.4; }
.pmc-feat-check { width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:900; flex-shrink:0; margin-top:1px; }
.pmc-free  .pmc-feat-check { background:rgba(138,138,138,0.2); color:#8a8a8a; }
.pmc-pro   .pmc-feat-check { background:rgba(192,132,252,0.15); color:#c084fc; }
.pmc-elite .pmc-feat-check { background:rgba(255,215,0,0.15); color:#ffd700; }
.pmc-select-btn {
  width:100%; padding:10px; border-radius:9px; border:none; cursor:pointer;
  font-size:13px; font-weight:700; font-family:inherit; transition:all 0.15s;
}
.pmc-free  .pmc-select-btn { background:rgba(138,138,138,0.15); color:#aaa; }
.pmc-pro   .pmc-select-btn { background:rgba(192,132,252,0.15); color:#c084fc; }
.pmc-elite .pmc-select-btn { background:rgba(255,215,0,0.15); color:#ffd700; }
.pmc-free.pmc-active  .pmc-select-btn { background:rgba(138,138,138,0.25); color:#ccc; cursor:default; }
.pmc-pro.pmc-active   .pmc-select-btn { background:rgba(192,132,252,0.25); color:#c084fc; cursor:default; }
.pmc-elite.pmc-active .pmc-select-btn { background:rgba(255,215,0,0.25); color:#ffd700; cursor:default; }
.pmc-free:not(.pmc-active)  .pmc-select-btn:hover { background:rgba(138,138,138,0.28); }
.pmc-pro:not(.pmc-active)   .pmc-select-btn:hover { background:rgba(192,132,252,0.28); }
.pmc-elite:not(.pmc-active) .pmc-select-btn:hover { background:rgba(255,215,0,0.28); }

/* Action buttons */
.settings-btn-action {
  padding: 7px 16px; border-radius: 8px;
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.05); color: var(--t2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.settings-btn-action:hover { background: rgba(255,255,255,0.1); color: var(--t1); border-color: rgba(255,255,255,0.3); }

/* Export modal */
.export-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.export-modal-overlay.visible { opacity: 1; pointer-events: all; }
.export-modal {
  background: #111; border: 1px solid var(--border-2);
  border-radius: 18px; padding: 28px; width: 100%; max-width: 340px;
  transform: translateY(16px) scale(0.97); transition: transform .2s;
}
.export-modal-overlay.visible .export-modal { transform: translateY(0) scale(1); }
.export-modal-title { font-size: 16px; font-weight: 800; color: var(--t1); margin-bottom: 4px; }
.export-modal-sub { font-size: 12px; color: var(--t3); margin-bottom: 20px; }
.export-modal-btns { display: flex; flex-direction: column; gap: 10px; }
.export-opt-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border-2); background: rgba(255,255,255,0.04);
  cursor: pointer; text-align: left; transition: all .15s; font-family: inherit;
}
.export-opt-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.export-opt-icon { font-size: 22px; flex-shrink: 0; }
.export-opt-label { font-size: 14px; font-weight: 700; color: var(--t1); }
.export-opt-desc { font-size: 11px; color: var(--t3); margin-top: 1px; }
.export-modal-cancel {
  margin-top: 14px; width: 100%; padding: 10px;
  background: transparent; border: none; color: var(--t3);
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.export-modal-cancel:hover { color: var(--t2); }

.settings-btn-danger {
  padding: 7px 16px; border-radius: 8px;
  border: 1px solid rgba(255,59,92,0.25);
  background: rgba(255,59,92,0.07); color: var(--loss-2);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.settings-btn-danger:hover { background: rgba(255,59,92,0.16); border-color: rgba(255,59,92,0.5); }

.sett-acct-avatar {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-dim); border: 1px solid var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--accent);
  flex-shrink: 0;
}

.sett-field {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13px; font-weight: 500;
  color: var(--t1); font-family: inherit;
  outline: none; transition: border-color 0.15s;
}
.sett-field::placeholder { color: var(--t3); }
.sett-field:focus { border-color: var(--accent); }

/* ── Rules Panel (single collapsible) ── */
.rules-trigger {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px; cursor: pointer;
  transition: background 0.18s; user-select: none;
}
.rules-trigger:hover { background: rgba(255,255,255,0.03); }
.rules-trigger-ico {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(255,255,255,0.06);
}
.rules-trigger-body { flex: 1; }
.rules-trigger-title { font-size: 13.5px; font-weight: 700; color: var(--t1); }
.rules-trigger-sub { font-size: 11.5px; color: var(--t3); margin-top: 1px; }
.rules-trigger-chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); transition: transform 0.28s var(--ease-out), color 0.2s;
}
.rules-card.open .rules-trigger-chevron { transform: rotate(180deg); color: var(--accent); }
.rules-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s var(--ease-out), opacity 0.35s;
  opacity: 0;
  border-top: 0px solid rgba(255,255,255,0.05);
}
.rules-card.open .rules-panel {
  max-height: 4000px;
  opacity: 1;
  border-top-width: 1px;
}
.rules-panel-inner {
  padding: 8px 0 4px;
}
.rules-section {
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.rules-section:last-child { border-bottom: none; }
.rules-section-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.rules-section-ico {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px;
}
.rules-section-name {
  font-size: 12px; font-weight: 800; color: var(--t1);
  text-transform: uppercase; letter-spacing: 0.06em; flex: 1;
}
.rules-section-tag {
  font-size: 9.5px; font-weight: 700; color: var(--t3);
  background: rgba(255,255,255,0.06); border-radius: 5px;
  padding: 2px 7px; letter-spacing: 0.04em;
}
.rules-list {
  list-style: none; display: flex; flex-direction: column; gap: 6px;
  padding-left: 4px;
}
.rules-list li {
  font-size: 12.5px; color: var(--t2); line-height: 1.55;
  display: flex; align-items: flex-start; gap: 9px;
}
.rules-list li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
  box-shadow: 0 0 5px var(--accent-glow);
}
.rules-list li b { color: var(--t1); font-weight: 700; }

.settings-footer {
  grid-column: 1 / -1;
  text-align: center; padding: 4px 0 16px;
  font-size: 11px; color: var(--t4); letter-spacing: 0.05em;
}

/* no-animations mode */
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
  animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
body.no-animations::after { display: none; }

/* ── League Podium Overlay ── */
.lc-podium-overlay {
  position:absolute; inset:0; z-index:10; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 6px 4px; border-radius:inherit; gap:6px;
}
.lc-pod-dismiss-btn {
  position:absolute; top:5px; right:5px; z-index:12;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.6); font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0; line-height:1; font-family:system-ui; transition:background .15s,color .15s;
}
.lc-pod-dismiss-btn:hover { background:rgba(255,255,255,0.2); color:#fff; }
.lc-pod-title {
  position:absolute; top:6px; left:0; right:30px;
  text-align:center; pointer-events:none; z-index:5;
}
.lc-pod-row { display:flex; align-items:flex-end; justify-content:center; gap:6px; z-index:5; position:relative; }
.lc-pod-wrap { display:flex; flex-direction:column; align-items:center; }
.lc-pod-step { display:flex; flex-direction:column; align-items:center; opacity:0; }
.lc-pod-step.active { animation: podiumRise 1.15s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes podiumRise {
  0%   { opacity:0; transform:translateY(80%); filter:brightness(0.3); }
  55%  { opacity:1; transform:translateY(0%);  filter:brightness(2.8) drop-shadow(0 0 28px var(--glow,#fff)) drop-shadow(0 0 14px #fffc); }
  78%  { opacity:1; transform:translateY(0%);  filter:brightness(1.5) drop-shadow(0 0 16px var(--glow,#fff)); }
  100% { opacity:1; transform:translateY(0%);  filter:brightness(1.0) drop-shadow(0 0 8px var(--glow,#fff3)); }
}

/* ═══ WEEKLY / DIVISION LEAGUE PODIUM REVEAL (full-screen, one-shot) ═══ */
.pl-podium-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: radial-gradient(ellipse at 50% 30%, rgba(30,24,0,0.5) 0%, rgba(0,0,0,0.94) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: fadeIn .3s ease;
}
.pl-podium-overlay.hidden { display: none; }
.pl-pod-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 1; width: 100%; height: 100%; }
.pl-pod-dismiss-btn {
  position: absolute; top: 18px; right: 18px; z-index: 12;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; font-family: system-ui; transition: background .15s, color .15s;
}
.pl-pod-dismiss-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.pl-pod-title { position: relative; z-index: 5; margin-bottom: 26px; text-align: center; }

/* ═══ PREMIUM BALANCE CHIP ═══ */
.balance-chip.premium { cursor:pointer; }
.balance-chip.premium .balance-icon { filter: drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
.balance-chip.premium .balance-amt  { color:#FFD700; }
.balance-chip.premium:hover { border-color:rgba(255,215,0,0.4); transform:translateY(-1px); }

/* ═══ SOCIAL FEED SCREEN ═══ */

.social-page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.social-page-title {
  font-size:20px; font-weight:800; color:var(--t1);
}
.social-tabs {
  display:flex; gap:4px;
  background:rgba(255,255,255,0.04);
  border-radius:10px; padding:4px;
  margin-bottom:16px;
}
.social-tab {
  flex:1; padding:8px 0; border:none; background:transparent;
  border-radius:7px; color:var(--t3); font-size:13px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.social-tab.active {
  background:rgba(0,255,140,0.1);
  color:var(--accent);
  border:1px solid rgba(0,255,140,0.2);
}
.feed-empty {
  text-align:center; padding:48px 24px;
  color:var(--t3); font-size:14px; line-height:1.6;
}
.feed-empty-icon {
  width:48px; height:48px; margin:0 auto 16px;
  background:rgba(255,255,255,0.04); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.feed-empty-title { font-size:16px; font-weight:700; color:var(--t2); margin-bottom:8px; }
.feed-empty-btn {
  margin-top:16px; padding:10px 20px;
  background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.3);
  color:var(--accent); border-radius:99px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s;
}
.feed-empty-btn:hover { background:rgba(0,255,140,0.18); }
.feed-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:14px 16px; margin-bottom:8px;
  cursor:pointer; transition:background .15s; display:flex; align-items:center; gap:14px;
}
.feed-card:hover { background:rgba(255,255,255,0.055); }
.feed-card-avatar {
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:var(--accent); flex-shrink:0;
}
.feed-card-body { flex:1; min-width:0; }
.feed-card-name { font-size:13px; font-weight:700; color:var(--t1); margin-bottom:3px; }
.feed-card-action { font-size:12px; color:var(--t3); }
.feed-card-action .ticker { color:var(--t2); font-weight:700; }
.feed-card-pct { font-size:16px; font-weight:800; flex-shrink:0; }
.feed-card-pct.gain { color:var(--profit); }
.feed-card-pct.loss { color:var(--loss); }
.feed-card-time { font-size:11px; color:var(--t3); margin-top:2px; }
.trader-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:16px; margin-bottom:10px;
  cursor:pointer; transition:all .18s;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-left-width:3px;
}
.trader-card.gain {
  border-left-color:var(--profit);
  background:rgba(0,255,140,0.03);
}
.trader-card.loss {
  border-left-color:var(--loss);
  background:rgba(255,59,92,0.03);
}
.trader-card.gain:hover { background:rgba(0,255,140,0.06); }
.trader-card.loss:hover { background:rgba(255,59,92,0.06); }
.trader-card-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.trader-card-info { flex:1; min-width:0; }
.trader-card-name { font-size:14px; font-weight:800; color:var(--t1); margin-bottom:3px; }
.trader-card-sub { font-size:12px; color:var(--t3); margin-bottom:6px; }
.trader-card-tickers {
  font-size:11px; font-weight:700; color:var(--t2);
  background:rgba(255,255,255,0.06); border-radius:6px;
  padding:3px 8px; display:inline-block;
}
.trader-card-right { text-align:right; flex-shrink:0; }
.trader-card-week-wrap {
  display:inline-flex; align-items:baseline; gap:3px;
  padding:5px 10px; border-radius:10px; margin-bottom:4px;
}
.trader-card-week-wrap.gain { background:rgba(0,255,140,0.12); }
.trader-card-week-wrap.loss { background:rgba(255,59,92,0.12); }
.trader-card-week { font-size:20px; font-weight:800; line-height:1.1; }
.trader-card-week-label { font-size:10px; font-weight:600; opacity:0.7; margin-left:2px; }
.trader-card-season { font-size:11px; font-weight:700; display:block; text-align:right; }

.feed-action-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2px; margin-top:6px;
}
.feed-action-btn {
  padding:6px 12px; border-radius:99px; border:1px solid rgba(255,255,255,0.1);
  background:transparent; color:var(--t3); font-size:11px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s;
  display:flex; align-items:center; gap:5px;
}
.feed-action-btn:hover { border-color:rgba(0,255,140,0.3); color:var(--accent); }

/* Network screen */
#screen-social-network { overflow:hidden; display:none; flex-direction:column; }
#screen-social-network.active { display:flex; }
#screen-social-network .screen-inner { flex:1; overflow-y:auto; padding-bottom:32px; }

.network-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.network-row:last-child { border-bottom:none; }
.network-avatar {
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,255,140,0.1); border:1px solid rgba(0,255,140,0.18);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:var(--accent); flex-shrink:0; cursor:pointer;
}
.network-info { flex:1; min-width:0; cursor:pointer; }
.network-name { font-size:13px; font-weight:700; color:var(--t1); }
.network-stat { font-size:12px; color:var(--t3); margin-top:2px; }
.network-stat .pos { color:var(--profit); font-weight:700; }
@keyframes follow-glow-pulse {
  0%   { box-shadow:0 0 0px rgba(0,255,140,0); }
  40%  { box-shadow:0 0 14px 4px rgba(0,255,140,0.55); }
  100% { box-shadow:0 0 0px rgba(0,255,140,0); }
}
@keyframes unfollow-glow-pulse {
  0%   { box-shadow:0 0 0px rgba(255,59,92,0); }
  40%  { box-shadow:0 0 14px 4px rgba(255,59,92,0.55); }
  100% { box-shadow:0 0 0px rgba(255,59,92,0); }
}
.network-follow-btn {
  padding:6px 14px; border-radius:99px; border:1px solid rgba(0,255,140,0.3);
  background:rgba(0,255,140,0.08); color:var(--accent); font-size:12px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s; flex-shrink:0;
}
.network-follow-btn:hover { background:rgba(0,255,140,0.16); }
.network-follow-btn.following {
  border-color:rgba(255,255,255,0.12); background:transparent; color:var(--t3);
}
.network-follow-btn.following::after { content:'✓ Following'; }
.network-follow-btn.following:hover {
  border-color:rgba(255,59,92,0.5);
  background:rgba(255,59,92,0.08);
  color:var(--loss);
}
.network-follow-btn.following:hover::after { content:'Unfollow'; }
.network-follow-btn.glow-follow   { animation:follow-glow-pulse .5s ease-out forwards; }
.network-follow-btn.glow-unfollow { animation:unfollow-glow-pulse .5s ease-out forwards; }

/* ═══ SHOP SCREEN ═══ */
#screen-shop { overflow:hidden; display:none; flex-direction:column; }
#screen-shop.active { display:flex; }
#screen-shop .screen-inner { flex:1; overflow-y:auto; padding-bottom:110px; }

.shop-season-banner {
  margin:16px 16px 0;
  background:linear-gradient(135deg,rgba(255,165,0,0.15) 0%,rgba(255,100,0,0.08) 100%);
  border:1px solid rgba(255,165,0,0.25);
  border-radius:16px; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.shop-season-name { font-size:18px; font-weight:900; letter-spacing:-0.02em; color:#FFB347; }
.shop-season-sub  { font-size:11px; color:rgba(255,255,255,0.45); margin-top:2px; font-weight:600; }
.shop-season-badge {
  background:rgba(255,165,0,0.2); border:1px solid rgba(255,165,0,0.35);
  border-radius:20px; padding:5px 12px;
  font-size:11px; font-weight:800; color:#FFB347; letter-spacing:0.04em;
}

.shop-section-title {
  font-size:10px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.12em;
  padding:18px 16px 10px;
}

/* Daily rotation */
.shop-daily-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; padding:0 16px;
}
.shop-item-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
  position:relative; overflow:hidden;
  transition:border-color .2s, transform .2s;
  cursor:pointer;
}
.shop-item-card:hover { border-color:rgba(255,255,255,0.18); transform:translateY(-2px); }
.shop-item-card.is-owned { }
.shop-item-card.is-owned:hover { transform:none; }
.shop-item-card.is-owned .shop-item-preview,
.shop-item-card.is-owned .shop-item-price,
.shop-item-card.is-owned .shop-item-timer { filter:blur(2.5px); opacity:0.5; pointer-events:none; }
.shop-owned-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; pointer-events:none; z-index:3; border-radius:14px; background:rgba(8,8,8,0.28); }
.shop-owned-overlay-text { font-size:15px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.shop-item-card.featured {
  grid-column:1/-1;
  background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(59,130,246,0.06));
  border-color:rgba(139,92,246,0.25);
}
.shop-item-card.featured:hover { border-color:rgba(139,92,246,0.5); }

.shop-item-tier {
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em;
  padding:2px 7px; border-radius:10px; align-self:flex-start;
}
.tier-common   { background:rgba(180,180,180,0.15); color:#b4b4b4; border:1px solid rgba(180,180,180,0.25); }
.tier-rare     { background:rgba(59,130,246,0.15);  color:#60a5fa; border:1px solid rgba(59,130,246,0.3); }
.tier-epic     { background:rgba(139,92,246,0.15);  color:#a78bfa; border:1px solid rgba(139,92,246,0.3); }
.tier-legendary{ background:rgba(255,215,0,0.15);   color:#FFD700; border:1px solid rgba(255,215,0,0.35); }

.shop-item-preview {
  height:80px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; background:rgba(255,255,255,0.04);
}
.shop-item-card.featured .shop-item-preview { height:100px; font-size:48px; }

.shop-item-name  { font-size:13px; font-weight:800; color:var(--t1); }
.shop-item-type  { font-size:10px; color:var(--t3); font-weight:600; }
.shop-item-price {
  display:flex; align-items:center; gap:5px;
  font-size:13px; font-weight:800; color:#FFD700;
  margin-top:auto;
}
.shop-item-price img { width:14px; height:14px; filter:drop-shadow(0 0 4px rgba(255,215,0,0.5)); }

.shop-item-timer {
  font-size:9px; font-weight:700; color:var(--t3);
  display:flex; align-items:center; gap:4px;
}
.shop-item-timer svg { opacity:0.5; }

/* Legendary event */
.shop-legendary-card {
  margin:0 16px;
  background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(255,150,0,0.04));
  border:1px solid rgba(255,215,0,0.3);
  border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
}
.shop-legendary-card::before {
  content:''; position:absolute; top:-60px; right:-40px;
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,215,0,0.08),transparent 70%);
  pointer-events:none;
}
.shop-legendary-header { display:flex; align-items:center; gap:12px; }
.shop-legendary-icon   { font-size:48px; }
.shop-legendary-info   { flex:1; }
.shop-legendary-name   { font-size:16px; font-weight:900; color:#FFD700; letter-spacing:-0.01em; }
.shop-legendary-desc   { font-size:11px; color:rgba(255,255,255,0.5); margin-top:3px; line-height:1.4; }
.shop-legendary-countdown {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; color:rgba(255,215,0,0.8);
}
.shop-legendary-buy {
  background:linear-gradient(135deg,#FFD700,#FF8C00);
  color:#000; border:none; border-radius:10px;
  padding:12px 20px; font-size:14px; font-weight:900;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:opacity .2s, transform .2s;
}
.shop-legendary-buy:hover { opacity:0.9; transform:translateY(-1px); }
.shop-legendary-buy img  { width:16px; height:16px; }

/* ═══ BUY GEMS MODAL ═══ */
.buy-gems-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(12px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.buy-gems-overlay.open { opacity:1; pointer-events:all; }
.buy-gems-sheet {
  width:100%; max-width:480px;
  background:#0d0d0d; border:1px solid rgba(255,255,255,0.1);
  border-radius:24px 24px 0 0; padding:28px 24px 40px;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.buy-gems-overlay.open .buy-gems-sheet { transform:translateY(0); }

.buy-gems-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.buy-gems-title  { font-size:20px; font-weight:900; color:#FFD700; }
.buy-gems-close  {
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.07); color:var(--t2);
  cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
}
.buy-gems-sub    { font-size:12px; color:var(--t3); margin-bottom:24px; }
.buy-gems-balance{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.2);
  border-radius:12px; padding:10px 14px; margin-bottom:20px;
  font-size:13px; font-weight:700; color:#FFD700;
}
.buy-gems-balance img { width:18px; height:18px; }

.buy-gems-packages { display:flex; flex-direction:column; gap:10px; }
.buy-gems-pkg {
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:14px 16px;
  cursor:pointer; transition:border-color .2s, transform .2s;
  position:relative;
}
.buy-gems-pkg:hover { border-color:rgba(255,215,0,0.3); transform:translateX(2px); }
.buy-gems-pkg.popular {
  background:rgba(255,215,0,0.06); border-color:rgba(255,215,0,0.3);
}
.buy-gems-pkg-badge {
  position:absolute; top:-8px; right:12px;
  background:#FFD700; color:#000; font-size:9px; font-weight:900;
  padding:2px 8px; border-radius:10px; letter-spacing:0.06em;
}
.buy-gems-pkg-icon { font-size:28px; flex-shrink:0; }
.buy-gems-pkg-info { flex:1; }
.buy-gems-pkg-amount { font-size:16px; font-weight:900; color:#FFD700; }
.buy-gems-pkg-label  { font-size:11px; color:var(--t3); font-weight:600; margin-top:1px; }
.buy-gems-pkg-price  {
  font-size:15px; font-weight:900; color:var(--t1);
  background:rgba(255,255,255,0.08); border-radius:8px;
  padding:6px 12px; flex-shrink:0;
}
.buy-gems-pkg-coin {
  width:36px; height:36px; flex-shrink:0;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.4));
}

/* ═══ ITEM PREVIEW MODAL ═══ */
.item-preview-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,0.9); backdrop-filter:blur(16px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.item-preview-overlay.open { opacity:1; pointer-events:all; }
.item-preview-sheet {
  width:100%; max-width:480px;
  background:#0a0a0a; border:1px solid rgba(255,255,255,0.08);
  border-radius:24px 24px 0 0;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.22,1,.36,1);
  max-height:92vh; overflow-y:auto;
}
.item-preview-overlay.open .item-preview-sheet { transform:translateY(0); }

.ipm-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 0;
}
.ipm-close {
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.07); color:var(--t2);
  cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ipm-tier-label {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em;
  padding:3px 10px; border-radius:10px;
}

/* Big preview area */
.ipm-visual {
  margin:16px 20px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:18px;
  min-height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; position:relative; overflow:hidden;
}
.ipm-visual-label {
  position:absolute; top:10px; left:12px;
  font-size:9px; font-weight:800; color:rgba(255,255,255,0.3);
  text-transform:uppercase; letter-spacing:0.1em;
}

/* Context preview area */
.ipm-context {
  margin:0 20px 16px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px; padding:16px;
}
.ipm-context-label {
  font-size:9px; font-weight:800; color:rgba(255,255,255,0.3);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:12px;
}

.ipm-info { padding:0 20px 16px; }
.ipm-name { font-size:20px; font-weight:900; color:var(--t1); letter-spacing:-0.02em; }
.ipm-type { font-size:12px; color:var(--t3); font-weight:600; margin-top:2px; }
.ipm-desc { font-size:12px; color:rgba(255,255,255,0.5); line-height:1.6; margin-top:10px; }

.ipm-buy {
  margin:4px 20px 32px;
  display:flex; gap:10px;
}
.ipm-buy-btn {
  flex:1; background:linear-gradient(135deg,#FFD700,#FF8C00);
  color:#000; border:none; border-radius:12px;
  padding:14px 20px; font-size:15px; font-weight:900;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:opacity .2s, transform .15s;
}
.ipm-buy-btn:hover { opacity:0.9; transform:translateY(-1px); }
.ipm-buy-btn img { width:16px; height:16px; }

/* Mock leaderboard row for context */
.ipm-mock-row {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.04); border-radius:10px; padding:10px 12px;
}
.ipm-mock-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#00ff8c22,#00ff8c44);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#00ff8c; flex-shrink:0;
}
.ipm-mock-name { font-size:13px; font-weight:700; color:var(--t1); }
.ipm-mock-sub  { font-size:10px; color:var(--t3); margin-top:1px; font-weight:600; }
.ipm-mock-right { margin-left:auto; text-align:right; }
.ipm-mock-val  { font-size:13px; font-weight:800; color:#00ff8c; }
.ipm-mock-rank { font-size:10px; color:var(--t3); margin-top:1px; }

/* ── Confirmation section ── */
.ipm-confirm-section {
  margin:4px 20px 32px; display:none; flex-direction:column; gap:10px;
}
.ipm-confirm-text {
  font-size:13px; color:rgba(255,255,255,0.55); text-align:center; font-weight:600; line-height:1.5;
}
.ipm-confirm-text strong { color:var(--t1); }
.ipm-confirm-cost {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:20px; font-weight:900; color:#FFD700;
}
.ipm-confirm-cost img { width:20px; height:20px; }
.ipm-confirm-row { display:flex; gap:10px; }
.ipm-cancel-btn {
  flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  color:var(--t2); border-radius:12px; padding:14px; font-size:14px; font-weight:700; cursor:pointer;
}
.ipm-cancel-btn:hover { background:rgba(255,255,255,0.12); }
.ipm-do-buy-btn {
  flex:2; background:linear-gradient(135deg,#FFD700,#FF8C00); color:#000;
  border:none; border-radius:12px; padding:14px; font-size:14px; font-weight:900;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
}
.ipm-do-buy-btn img { width:16px; height:16px; }
.ipm-do-buy-btn:hover { opacity:0.9; }

/* ── Podium animation keyframes ── */
@keyframes ipm-bar-rise {
  0%   { transform:scaleY(0); opacity:0; }
  60%  { transform:scaleY(1.08); opacity:1; }
  100% { transform:scaleY(1); opacity:1; }
}
@keyframes ipm-ray-burst {
  0%   { opacity:0; transform:translateX(-50%) scale(0.2); }
  55%  { opacity:1; }
  100% { opacity:0.45; transform:translateX(-50%) scale(1); }
}
@keyframes ipm-avatar-pop {
  0%   { transform:translateX(-50%) scale(0); opacity:0; }
  65%  { transform:translateX(-50%) scale(1.18); opacity:1; }
  100% { transform:translateX(-50%) scale(1); opacity:1; }
}
@keyframes ipm-name-appear {
  0%   { opacity:0; letter-spacing:0.4em; }
  100% { opacity:0.8; letter-spacing:0.15em; }
}
@keyframes ipm-shockwave {
  0%   { transform:translateX(-50%) scale(0); opacity:0.7; }
  100% { transform:translateX(-50%) scale(2.8); opacity:0; }
}
.ipm-pbar { transform-origin:bottom; animation:ipm-bar-rise 0.55s cubic-bezier(.22,1,.36,1) both; }
.ipm-pbar-l { animation-delay:0.5s; }
.ipm-pbar-c { animation-delay:0.15s; }
.ipm-pbar-r { animation-delay:0.65s; }
.ipm-rays  { position:absolute; top:0; left:50%; animation:ipm-ray-burst 0.7s ease-out 0.4s both; }
.ipm-apin  { position:absolute; left:50%; animation:ipm-avatar-pop 0.45s cubic-bezier(.22,1,.36,1) 0.85s both; }
.ipm-pname { animation:ipm-name-appear 0.5s ease-out 1.05s both; }
.ipm-shock { position:absolute; left:50%; animation:ipm-shockwave 0.55s ease-out 1.05s both; }

/* ═══════════════════════════
   SPLASH SCREEN
═══════════════════════════ */
#splash-screen {
  position: fixed;
  inset: 0;
  background: #080808;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#splash-screen.splash-hidden { opacity: 0; }
#splash-canvas { width: 280px; height: 280px; }

/* ── Profile screen enter animation ── */
@keyframes screen-slide-in {
  from { transform: translateX(36px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.screen-enter { animation: screen-slide-in 0.26s var(--ease-out) both; }

/* ── Follow button idle pulse (draws eye on page load) ── */
@keyframes follow-idle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,167,0.55); }
  50%       { box-shadow: 0 0 0 10px rgba(0,201,167,0); }
}
.bp-follow-btn.not-following {
  animation: follow-idle-pulse 1.6s ease-in-out 0.4s 3;
}
.follow-idle-pulse {
  animation: follow-idle-pulse 1.6s ease-in-out 0.4s 3;
}

/* ── Follow click pulse (green = follow, red = unfollow) ── */
@keyframes follow-click-pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(0,201,167,0.7); }
  60%  { box-shadow: 0 0 0 18px rgba(0,201,167,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,201,167,0); }
}
@keyframes follow-click-pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(255,60,60,0.7); }
  60%  { box-shadow: 0 0 0 18px rgba(255,60,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,60,60,0); }
}
@keyframes proOnlyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,132,252,0); background: rgba(192,132,252,0.15); }
  50%       { box-shadow: 0 0 12px 3px rgba(192,132,252,0.25); background: rgba(192,132,252,0.28); }
}
.follow-pulse-green { animation: follow-click-pulse-green 0.5s ease-out forwards; }
.follow-pulse-red   { animation: follow-click-pulse-red   0.5s ease-out forwards; }

/* ── Downgrade confirm modal ── */
@keyframes dcm-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); border-color: rgba(255,59,92,0.4); }
  50%       { box-shadow: 0 0 32px 8px rgba(255,59,92,0.35); border-color: rgba(255,59,92,0.9); }
}
.downgrade-confirm-modal {
  background: #111;
  border: 1.5px solid rgba(255,59,92,0.5);
  border-radius: 18px;
  padding: 36px 32px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  animation: dcm-flash 1s ease-in-out 3;
}
.dcm-icon { font-size: 36px; margin-bottom: 12px; }
.dcm-title {
  font-size: 20px; font-weight: 800; color: #ff3b5c;
  margin-bottom: 10px; letter-spacing: 0.3px;
}
.dcm-body {
  font-size: 13px; color: #aaa; line-height: 1.55;
  margin-bottom: 28px;
}
.dcm-btns { display: flex; gap: 10px; }
.dcm-btn-cancel {
  flex: 1; padding: 12px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06); color: #ccc;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.dcm-btn-cancel:hover { background: rgba(255,255,255,0.1); }
.dcm-btn-confirm {
  flex: 1; padding: 12px; border-radius: 10px;
  border: none; background: #ff3b5c; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.dcm-btn-confirm:hover { background: #ff1f45; }

/* ── League Reward Popup ───────────────────────────── */
/* ── League Reward Popup ───────────────────────────── */
.league-reward-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .3s ease;
}
.league-reward-overlay.hidden { display: none; }
.league-reward-modal {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0e1a14 0%, #080808 60%);
  border: 1.5px solid rgba(255,215,0,0.45);
  border-radius: 24px; padding: 36px 28px 28px;
  width: min(340px, 92vw); text-align: center;
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.08),
    0 0 24px rgba(255,200,0,0.35),
    0 0 60px rgba(255,180,0,0.2),
    0 0 120px rgba(255,150,0,0.12),
    0 20px 60px rgba(0,0,0,0.8);
  animation: lrSlideUp .35s cubic-bezier(.22,.68,0,1.2);
}
@keyframes lrSlideUp {
  from { transform: translateY(40px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.lr-glow-bg {
  position: absolute; inset: -60px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,200,0,0.12) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.lr-season-badge {
  position: relative; z-index: 1;
  display: inline-block; padding: 4px 14px; border-radius: 99px;
  background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.35);
  font-size: 11px; font-weight: 700; color: #FFD700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 20px;
}
.lr-icon-wrap {
  position: relative; z-index: 1;
  display: flex; justify-content: center; margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(255,200,0,0.7));
}
.lr-title {
  position: relative; z-index: 1;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px;
}
.lr-week-dates {
  position: relative; z-index: 1;
  font-size: 12px; color: rgba(255,255,255,0.35); margin-bottom: 22px;
}
.lr-rank-block {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  margin-bottom: 20px;
}
.lr-rank {
  font-size: 56px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #FFE566, #E08000);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(255,200,0,0.5));
}
.lr-pnl { font-size: 20px; font-weight: 800; font-family: monospace; }
.lr-divider {
  position: relative; z-index: 1;
  height: 1px; background: rgba(255,255,255,0.06); margin-bottom: 18px;
}
.lr-prizes { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.lr-prize-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 12px 16px;
}
.lr-prize-icon-wrap {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lr-prize-xp { background: rgba(46,230,255,0.12); color: #2ee6ff; }
.lr-prize-rp { background: rgba(255,215,0,0.12); color: #FFD700; }
.lr-prize-val   { font-size: 15px; font-weight: 800; color: #fff; flex: 1; text-align: left; }
.lr-prize-label { font-size: 11px; color: rgba(255,255,255,0.35); }
.lr-claim-btn {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 15px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #00ff8c, #00cc6a);
  color: #000; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 20px rgba(0,255,140,0.35);
}
.lr-claim-btn:hover  { opacity: .9; }
.lr-claim-btn:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════
   1v1 DUEL SYSTEM
═══════════════════════════════════════════════════════════ */

:root {
  --duel-accent:   #FF6432;
  --duel-gold:     #FFD700;
  --duel-win:      #00ff8c;
  --duel-loss:     #FF4C4C;
  --duel-draw:     #aaa;
}

/* ── Tab ─────────────────────────────────────────────────── */
.lb-tab-duel {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 1;
}
.lb-tab-duel.active {
  color: #FF3B5C !important;
  border-bottom-color: #FF3B5C !important;
  background: rgba(255,59,92,0.07) !important;
}

/* ── Search Overlay ─────────────────────────────────────── */
#duel-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8,8,8,0.97);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#duel-search-overlay.visible { display: flex; }

.duel-search-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.duel-search-logo-wrap-OLD {
  animation: duelLogoSwing 1.4s ease-in-out infinite;
}
.duel-search-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(255,100,50,0.5));
}
@keyframes duelLogoSwing {
  0%,100% { transform: translateY(0px) scale(1);    filter: drop-shadow(0 0 18px rgba(255,100,50,.4)); }
  50%      { transform: translateY(-10px) scale(1.05); filter: drop-shadow(0 0 32px rgba(255,100,50,.7)); }
}

.duel-search-label {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
}
.duel-search-sub {
  font-size: 12px;
  color: var(--t3);
}

.duel-search-dots {
  display: flex;
  gap: 8px;
}
.duel-search-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--duel-accent);
  animation: duelDot 1.2s ease-in-out infinite;
}
.duel-search-dots span:nth-child(2) { animation-delay: .2s; }
.duel-search-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes duelDot {
  0%,80%,100% { transform: scale(.6); opacity: .3; }
  40%         { transform: scale(1);  opacity: 1;  }
}

.duel-search-cancel-btn {
  margin-top: 8px;
  padding: 10px 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--t2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.duel-search-cancel-btn:hover { background: rgba(255,255,255,0.1); }

/* ── Lobby (start screen) ────────────────────────────────── */
.duel-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  gap: 0;
}

.duel-lobby-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.duel-lobby-sword-left  { color: var(--duel-accent); opacity: .85; }
.duel-lobby-sword-right { color: var(--duel-accent); opacity: .85; }
.duel-lobby-crown { filter: drop-shadow(0 0 12px rgba(255,215,0,.5)); }

.duel-lobby-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
  margin-bottom: 8px;
}
.duel-lobby-sub {
  font-size: 13px;
  color: var(--t3);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 22px;
}

.duel-lobby-rules {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 22px;
}
.duel-rule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--t2);
}
.duel-rule-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255,100,50,0.12);
  border: 1px solid rgba(255,100,50,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--duel-accent);
  flex-shrink: 0;
}

.duel-lobby-rewards {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
}
.duel-lobby-reward {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  gap: 6px;
}
.duel-lobby-reward.win  { background: rgba(0,255,140,0.04); }
.duel-lobby-reward.loss { background: rgba(255,76,76,0.04); }
.duel-lobby-reward-sep {
  width: 1px;
  background: rgba(255,255,255,0.07);
  align-self: stretch;
}
.duel-lobby-reward-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.duel-lobby-reward-icon.win  { background: rgba(0,255,140,0.12); color: var(--duel-win); }
.duel-lobby-reward-icon.loss { background: rgba(255,76,76,0.12);  color: var(--duel-loss); }
.duel-lobby-reward-vals { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.duel-lobby-reward-rp {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.3px;
}
.duel-lobby-reward-rp.win  { color: var(--duel-win); }
.duel-lobby-reward-rp.loss { color: var(--duel-loss); }
.duel-lobby-reward-xp {
  font-size: 11px;
  font-weight: 700;
  color: #CCFF2E;
}
.duel-lobby-reward-lbl {
  font-size: 10px;
  color: var(--t3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.duel-find-btn {
  width: 100%;
  padding: 15px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(135deg, #FF6432, #FF3060);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 24px rgba(255,100,50,0.4);
  transition: transform .12s, box-shadow .12s;
  margin-bottom: 12px;
}
.duel-find-btn:hover  { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(255,100,50,.5); }
.duel-find-btn:active { transform: scale(.98); }

.duel-history-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color .15s;
}
.duel-history-btn:hover { color: var(--t1); }

/* ── Active Match View ───────────────────────────────────── */
.duel-active-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px 28px;
  gap: 0;
}

.duel-active-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.duel-live-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,100,50,0.14);
  border: 1px solid rgba(255,100,50,0.3);
  font-size: 10px;
  font-weight: 900;
  color: var(--duel-accent);
  letter-spacing: .08em;
}
.duel-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--duel-accent);
  animation: duelLivePulse 1.4s ease-in-out infinite;
}
@keyframes duelLivePulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}

.duel-active-timer-wrap { text-align: center; }
.duel-active-countdown {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.duel-active-countdown-lbl {
  font-size: 10px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* Arena — two player cards + VS */
.duel-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 22px;
}

.duel-pcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color .3s, background .3s;
  gap: 4px;
  min-width: 0;
}
.duel-pcard-lead {
  background: rgba(255,100,50,0.07);
  border-color: rgba(255,100,50,0.25);
  box-shadow: 0 0 20px rgba(255,100,50,0.1);
}

.duel-pcard-ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2.5px solid var(--rc, #9B9B9B);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rc, #9B9B9B) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  position: relative;
}
.duel-pcard-av {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.duel-pcard-letter {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.duel-pcard-rank-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.duel-pcard-username {
  font-size: 13px;
  font-weight: 800;
  color: var(--t1);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-pcard-level {
  font-size: 10px;
  color: var(--t3);
}
.duel-pcard-return {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.4px;
  margin-top: 4px;
}
.duel-pcard-return.pos { color: var(--duel-win); }
.duel-pcard-return.neg { color: var(--duel-loss); }

.duel-pcard-leading {
  margin-top: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--duel-accent);
  background: rgba(255,100,50,0.14);
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,100,50,0.25);
}
.duel-pcard-trailing {
  margin-top: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--t3);
  padding: 3px 8px;
}

.duel-arena-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.duel-arena-vs-text {
  font-size: 14px;
  font-weight: 900;
  color: var(--t3);
  letter-spacing: .05em;
}
.duel-arena-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
}

/* ── Arena v2 — animated VS face-off + tug-of-war ────────── */
.duel-arena-v2 {
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}
.duel-arena-v2 .duel-pcard {
  padding: 18px 8px 14px;
  position: relative;
  overflow: hidden;
}
.duel-fighter-me  { animation: duelSlideL .5s cubic-bezier(.22,1,.36,1) both; }
.duel-fighter-opp { animation: duelSlideR .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes duelSlideL { from { opacity:0; transform:translateX(-22px); } to { opacity:1; transform:none; } }
@keyframes duelSlideR { from { opacity:0; transform:translateX(22px);  } to { opacity:1; transform:none; } }

.duel-arena-v2 .duel-pcard-lead::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,100,50,0.18), transparent 65%);
  animation: duelLeadGlow 2.2s ease-in-out infinite;
}
@keyframes duelLeadGlow { 0%,100% { opacity:.5; } 50% { opacity:1; } }

.duel-pcard-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--duel-accent);
  margin-bottom: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-pcard-status {
  margin-top: 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 3px 9px;
  border-radius: 10px;
}
.duel-pcard-status.lead {
  color: var(--duel-accent);
  background: rgba(255,100,50,0.14);
  border: 1px solid rgba(255,100,50,0.3);
  box-shadow: 0 0 12px rgba(255,100,50,0.18);
}
.duel-pcard-status.trail {
  color: var(--t3);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Center core — VS badge with energy beams */
.duel-arena-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 0 2px;
}
.duel-arena-vs-badge {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .04em;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,100,50,0.28), rgba(255,40,90,0.22));
  border: 1px solid rgba(255,100,50,0.5);
  box-shadow: 0 0 16px rgba(255,100,50,0.35);
  animation: duelVsPulse 1.8s ease-in-out infinite;
}
@keyframes duelVsPulse {
  0%,100% { transform: scale(1);   box-shadow: 0 0 14px rgba(255,100,50,0.3); }
  50%     { transform: scale(1.08); box-shadow: 0 0 22px rgba(255,100,50,0.55); }
}
.duel-arena-beam {
  width: 2px; height: 26px;
  background: linear-gradient(to bottom, transparent, rgba(255,100,50,0.25), transparent);
  position: relative; overflow: hidden;
}
.duel-arena-beam span {
  position: absolute; left: 0; right: 0; height: 8px;
  background: linear-gradient(to bottom, transparent, var(--duel-accent), transparent);
  animation: duelBeam 1.6s linear infinite;
}
@keyframes duelBeam { from { top: -8px; } to { top: 26px; } }

/* Tug-of-war momentum bar */
.duel-tug {
  width: 100%;
  margin-bottom: 18px;
}
.duel-tug-track {
  position: relative;
  height: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: visible;
}
.duel-tug-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, rgba(255,100,50,0.5), var(--duel-accent));
  box-shadow: 0 0 12px rgba(255,100,50,0.4);
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.duel-tug-knob {
  position: absolute; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--duel-accent);
  box-shadow: 0 0 10px rgba(255,100,50,0.6);
  transform: translate(-50%, -50%);
  transition: left .6s cubic-bezier(.22,1,.36,1);
  z-index: 2;
}
.duel-tug-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 800;
}
.duel-tug-you { color: var(--duel-accent); letter-spacing: .08em; }
.duel-tug-opp { color: var(--t2); max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-tug-mid {
  color: var(--t2);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.duel-trade-now-btn {
  width: 100%;
  padding: 14px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(135deg, rgba(255,100,50,0.18), rgba(255,50,100,0.12));
  border: 1px solid rgba(255,100,50,0.3);
  color: var(--duel-accent);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, transform .1s;
}
.duel-trade-now-btn:hover  { background: rgba(255,100,50,0.22); }
.duel-trade-now-btn:active { transform: scale(.98); }

/* ── Duel: Your Positions (live) ─────────────────────────── */
.duel-pos-section { width: 100%; margin-top: 16px; }
.duel-pos-hdr {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 8px;
}
.duel-pos-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--t3);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
}
.duel-pos-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 13px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}
.duel-pos-left { flex: 1; min-width: 0; }
.duel-pos-ticker { font-size: 14px; font-weight: 900; color: var(--t1); }
.duel-pos-sh { font-size: 10px; color: var(--t3); margin-top: 1px; }
.duel-pos-mid { text-align: right; }
.duel-pos-val { font-size: 13px; font-weight: 800; color: var(--t1); }
.duel-pos-pnl { font-size: 11px; font-weight: 800; margin-top: 1px; }
.duel-pos-pnl.pos { color: var(--duel-win, #00ff8c); }
.duel-pos-pnl.neg { color: var(--duel-loss, #ff3b5c); }
.duel-pos-sell {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 9px;
  border: 1px solid rgba(255,100,50,0.3);
  background: rgba(255,100,50,0.1);
  color: var(--duel-accent);
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.duel-pos-sell:hover { background: rgba(255,100,50,0.2); }

/* ── Duel Trade Panel (slide-up) ─────────────────────────── */
#du-trade-panel {
  position:fixed; bottom:0; left:0; right:0; z-index:9002;
  background:linear-gradient(180deg,#170d0a 0%,#0d0805 100%);
  border-top:1px solid rgba(255,100,50,0.30);
  border-radius:22px 22px 0 0;
  padding:22px 24px 38px;
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(0.22,1,0.36,1);
  box-shadow:0 -14px 50px rgba(0,0,0,0.65);
}
#du-trade-panel.open { transform:translateY(0); }
#du-tp-backdrop {
  position:fixed; inset:0; z-index:9001; background:rgba(0,0,0,0);
  pointer-events:none; transition:background .3s;
}
#du-tp-backdrop.open { background:rgba(0,0,0,0.58); pointer-events:all; }

/* ── Duel Trade Screen ───────────────────────────────────── */
.duel-trade-screen-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--duel-accent);
}
.duel-trade-return-chip {
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,100,50,0.12);
  border: 1px solid rgba(255,100,50,0.25);
  font-size: 11px;
  font-weight: 800;
  color: var(--duel-accent);
}
.duel-trade-hero {
  background: linear-gradient(135deg, rgba(255,100,50,0.1), rgba(255,50,100,0.05)) !important;
}

/* ── Result Modal ────────────────────────────────────────── */
.duel-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}
.duel-modal-backdrop.open { display: flex; }

.duel-result-card {
  position: relative;
  background: linear-gradient(160deg, #141414, #0e0e0e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 32px 24px 28px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}

.duel-result-glow {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,100,50,0.2), transparent 70%);
  pointer-events: none;
}

.duel-result-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.8px;
  text-shadow: 0 0 30px currentColor;
}
.duel-result-title.win  { color: var(--duel-win); }
.duel-result-title.loss { color: var(--duel-loss); }
.duel-result-title.draw { color: var(--duel-draw); }

.duel-result-scoreboard {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
}
.duel-result-player-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  gap: 6px;
}
.duel-result-vs-col {
  font-size: 12px;
  font-weight: 900;
  color: var(--t3);
  padding: 0 4px;
  flex-shrink: 0;
}
.duel-result-player-lbl {
  font-size: 11px;
  color: var(--t3);
  font-weight: 700;
}
.duel-result-ret {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.5px;
}
.duel-result-ret.pos { color: var(--duel-win); }
.duel-result-ret.neg { color: var(--duel-loss); }

.duel-result-rewards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.duel-result-rp-val {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.5px;
}
.duel-result-rp-val.win  { color: var(--duel-win); }
.duel-result-rp-val.loss { color: var(--duel-loss); }
.duel-result-xp-val {
  font-size: 14px;
  font-weight: 800;
  color: #CCFF2E;
}

.duel-result-close-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #FF6432, #FF3060);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 20px rgba(255,100,50,0.35);
  transition: transform .1s;
}
.duel-result-close-btn:active { transform: scale(.98); }

/* ── History Modal ───────────────────────────────────────── */
.duel-history-card {
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: 100%;
  max-width: 380px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.duel-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.duel-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--t1);
}
.duel-history-close {
  background: none;
  border: none;
  color: var(--t3);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.duel-history-close:hover { color: var(--t1); }

.duel-history-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.duel-hist-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--t3);
  font-size: 13px;
  line-height: 1.6;
}
.duel-hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.duel-hist-row:last-child { border-bottom: none; }

.duel-hist-badge {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.duel-hist-badge.win  { background: rgba(0,255,140,0.15); color: var(--duel-win);  border: 1px solid rgba(0,255,140,0.3); }
.duel-hist-badge.loss { background: rgba(255,76,76,0.15);  color: var(--duel-loss); border: 1px solid rgba(255,76,76,0.3); }
.duel-hist-badge.draw { background: rgba(170,170,170,0.1); color: var(--duel-draw); border: 1px solid rgba(170,170,170,0.2); }

.duel-hist-info {
  flex: 1;
  min-width: 0;
}
.duel-hist-opp {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duel-hist-date {
  font-size: 11px;
  color: var(--t3);
}
.duel-hist-myret {
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.duel-hist-myret.pos { color: var(--duel-win); }
.duel-hist-myret.neg { color: var(--duel-loss); }

.duel-hist-rp {
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}
.duel-hist-rp.win  { color: var(--duel-win); }
.duel-hist-rp.loss { color: var(--duel-loss); }

/* ── Duel Info inline button ──────────────────────────────── */
.duel-info-inline-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,100,50,.08);
  border: 1px solid rgba(255,100,50,.25);
  color: var(--duel-accent);
  border-radius: 22px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  margin: 0 auto 20px;
  transition: background .2s;
}
.duel-info-inline-btn:hover { background: rgba(255,100,50,.2); border-color: rgba(255,100,50,.5); color: #ff8060; }

/* ── Duel Lobby Profile Card ──────────────────────────────── */
.duel-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
  margin: 0 0 20px;
  position: relative;
}
.duel-profile-av-wrap { flex-shrink: 0; }
.duel-profile-ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2.5px solid var(--rc, #9B9B9B);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 0 10px color-mix(in srgb, var(--rc,#9B9B9B) 30%, transparent);
}
.duel-profile-av {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a2e;
}
.duel-profile-info {
  flex: 1;
  min-width: 0;
}
.duel-profile-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.duel-profile-rank {
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 7px;
}
.duel-profile-record {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.duel-rec-w  { color: var(--duel-win);  font-weight: 900; font-size: 13px; }
.duel-rec-l  { color: var(--duel-loss); font-weight: 900; font-size: 13px; }
.duel-rec-d  { color: #aaa;             font-weight: 900; font-size: 13px; }
.duel-rec-sep { color: rgba(255,255,255,.25); font-size: 12px; }
.duel-rec-rate {
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 600;
  margin-left: 2px;
}
.duel-profile-no-record {
  font-size: 11.5px;
  color: rgba(255,255,255,.3);
  font-style: italic;
}
/* VS section */
.duel-profile-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.duel-profile-vs-text {
  font-size: 13px;
  font-weight: 900;
  color: var(--duel-accent);
  letter-spacing: 1px;
}
.duel-profile-unknown-av {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45);
}
.duel-profile-unknown-lbl {
  font-size: 10.5px;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  letter-spacing: .3px;
  text-align: center;
}

/* ── Duel info modal — icon without box, orange ──────────── */
.duel-explain-icon {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* ── Duel info divider — orange gradient ─────────────────── */
.duel-info-divider {
  width: 1px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,100,50,.6) 30%,
    rgba(255,60,92,.8) 50%,
    rgba(255,100,50,.6) 70%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 8px rgba(255,80,50,.35);
  margin: 0 24px !important;
}

/* ── Duel profile ring — use rank color (already done via --rc) */
/* Override the default silver/gray border on the card */
.duel-profile-card {
  border-color: rgba(255,100,50,.15);
}
.duel-explain-icon svg { stroke: var(--duel-accent) !important; }

/* ── Duel search: canvas replaces logo img ─────────────── */
.duel-search-logo-wrap { /* no swing — canvas animates */ }
.duel-search-canvas { width: 160px; height: 160px; display: block; }

/* ═══════════════════════════════════════════════════════════
   TUTORIAL OVERLAY
═══════════════════════════════════════════════════════════ */

/* Trust card */
#tut-trust {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.95);
  cursor: pointer;
  animation: tut-fade-in 0.4s ease;
}
#tut-trust-card {
  text-align: center;
  padding: 40px 32px;
  max-width: 300px;
  animation: tut-pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
}
#tut-trust-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.35);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  color: #ffd700;
  animation: tut-pulse-ring 2s ease-in-out infinite;
}
#tut-trust-title {
  font-size: 26px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
#tut-trust-sub {
  font-size: 16px; color: rgba(255,255,255,0.6);
  line-height: 1.7; margin-bottom: 32px;
}
#tut-trust-cta {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em; text-transform: uppercase;
  animation: tut-blink 1.8s ease-in-out infinite;
}

/* Main overlay container */
#tut-overlay {
  position: fixed; inset: 0; z-index: 9500;
  pointer-events: none;
}

/* Full-screen dim (when no spotlight) */
#tut-dim {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.75);
  pointer-events: none;
}

/* Spotlight hole — box-shadow creates dim surround + white glow ring */
#tut-spot {
  position: fixed;
  background: transparent;
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.72),
    0 0 0 2px rgba(255,255,255,0.85),
    0 0 0 4px rgba(255,255,255,0.2),
    0 0 20px 6px rgba(255,255,255,0.45),
    0 0 50px 12px rgba(255,255,255,0.2),
    0 0 90px 20px rgba(255,255,255,0.08);
  pointer-events: none;
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1),
              top 0.3s cubic-bezier(0.4,0,0.2,1),
              width 0.3s cubic-bezier(0.4,0,0.2,1),
              height 0.3s cubic-bezier(0.4,0,0.2,1);
  z-index: 9501;
}

/* Four interaction blockers */
.tut-blocker {
  position: fixed;
  z-index: 9502;
  background: transparent;
  pointer-events: auto;
}

/* Coach character + bubble */
#tut-coach {
  position: fixed;
  bottom: 0; right: 8px;
  z-index: 9503;
  pointer-events: none; /* container + coach img must never intercept taps meant for spotlit elements (esp. coachCenter overlapping a button); only #tut-bubble re-enables clicks */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  animation: tut-slide-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
  max-width: calc(100vw - 16px);
  /* shown/hidden via JS */
}
#tut-coach-img {
  width: min(420px, 70vw);
  height: auto;
  display: block;
  pointer-events: none; /* decorative — never intercept taps meant for spotlit elements (e.g. bounce scale overlapping a button) */
  filter:
    drop-shadow(0 0 30px rgba(255,215,0,0.45))
    drop-shadow(0 0 70px rgba(255,200,50,0.2))
    drop-shadow(0 24px 60px rgba(0,0,0,0.7));
}
#tut-coach-img.tut-bounce {
  animation: tut-bounce 0.55s ease;
}

/* Center-bottom mode — used when coach would cover a spotlit element on the right */
#tut-coach.tut-coach-center {
  right: 50%;
  transform: translateX(50%);
  align-items: center;
}
#tut-coach.tut-coach-center #tut-bubble::after {
  display: none; /* hide right-pointing tail when centered */
}

/* Left-side mode — used when spotlit element is on the right (e.g. send button) */
#tut-coach.tut-coach-left {
  right: auto;
  left: 8px;
  align-items: flex-start;
}
#tut-coach.tut-coach-left #tut-bubble::after {
  display: none;
}

/* Big coach mode — goodbye step */
#tut-coach.tut-coach-big {
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  align-items: center;
  z-index: 10003;
  max-width: none;
}
#tut-coach.tut-coach-big #tut-coach-img {
  width: min(90vw, 560px);
  filter:
    drop-shadow(0 0 50px rgba(255,215,0,0.65))
    drop-shadow(0 0 110px rgba(255,200,50,0.35))
    drop-shadow(0 30px 80px rgba(0,0,0,0.85));
}
#tut-coach.tut-coach-big #tut-bubble {
  max-width: min(86vw, 460px);
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  padding: 20px 22px;
  align-self: center;
  background: rgba(8,8,8,0.96);
  border-color: rgba(255,215,0,0.3);
  box-shadow: 0 8px 40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,215,0,0.1);
}
#tut-coach.tut-coach-big #tut-actions {
  justify-content: center;
}
#tut-coach.tut-coach-big #tut-next {
  font-size: 14px;
  padding: 11px 30px;
}

/* Bubble */
#tut-bubble {
  pointer-events: auto; /* re-enable clicks (Got it / Skip / Back) — parent #tut-coach is pointer-events:none */
  background: rgba(16,16,20,0.97);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 16px 18px 14px;
  max-width: min(260px, calc(100vw - 80px));
  box-shadow:
    0 12px 40px rgba(0,0,0,0.75),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.08) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-right: 0;
  position: relative;
}
/* small tail pointing right toward coach */
#tut-bubble::after {
  content: '';
  position: absolute;
  bottom: 22px; right: -8px;
  width: 16px; height: 16px;
  background: rgba(16,16,20,0.97);
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transform: rotate(-45deg);
  border-radius: 0 0 3px 0;
}

/* Progress dots */
#tut-dots {
  display: flex; gap: 4px;
  margin-bottom: 10px;
}
.tut-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.25s;
}
.tut-dot.active {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
  width: 14px;
  border-radius: 3px;
}
.tut-dot.done { background: rgba(74,222,128,0.35); }

/* Bubble text */
#tut-text {
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  line-height: 1.6;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}

/* Bubble action row */
#tut-actions {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
#tut-back {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.38);
  font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 5px 9px;
  border-radius: 8px; font-family: inherit;
  margin-right: auto;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  line-height: 1;
}
#tut-back:hover {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.05);
}
#tut-skip {
  background: none; border: none;
  color: rgba(255,255,255,0.28);
  font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 0;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
#tut-skip:hover { color: rgba(255,255,255,0.5); }
#tut-next {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: #052012;
  border: none; border-radius: 9px;
  font-size: 12px; font-weight: 800;
  padding: 7px 15px;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s, transform 0.12s;
  box-shadow: none;
  letter-spacing: 0.02em;
}
#tut-next:hover { opacity: 0.9; transform: scale(1.03); }
#tut-next:active { transform: scale(0.97); }

/* Reward overlay */
#tut-reward {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 52%, rgba(0,180,80,0.2) 0%, rgba(0,0,0,0.96) 65%);
  animation: tut-fade-in 0.4s ease;
  overflow: hidden;
}
#tut-reward::before { display: none; }

/* Dim layer for bigCoach goodbye step */
#tut-big-dim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 10002;
  pointer-events: none;
  animation: tut-fade-in 0.3s ease;
}

/* Welcome card — step 0 */
#tut-welcome {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
  padding-bottom: 220px; /* leave room for coach at bottom */
  animation: tut-fade-in 0.5s ease;
}
#tut-welcome-logo {
  width: min(200px, 54vw);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(74,222,128,0.25)) drop-shadow(0 4px 20px rgba(0,0,0,0.6));
  animation: tut-pop-in 0.6s cubic-bezier(0.34,1.56,0.64,1), tut-logo-breathe 3s ease-in-out 0.6s infinite;
}
#tut-welcome-title {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
  animation: tut-fade-in 0.5s ease 0.15s both;
}
#tut-welcome-slogan {
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: tut-fade-in 0.5s ease 0.3s both;
  margin-top: -8px;
}
/* Lift coach above big-dim on welcome step */
#tut-coach.tut-coach-welcome {
  z-index: 10004;
}
#tut-reward::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 58%,
    rgba(255,215,0,0.07) 0deg 4deg,
    transparent 4deg 18deg
  );
  animation: tut-rays-spin 16s linear infinite;
  pointer-events: none;
}
#tut-reward-card {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 40px 32px 36px;
  border-radius: 28px;
  background: rgba(10,10,10,0.6);
  border: 1px solid rgba(74,222,128,0.25);
  box-shadow: 0 0 80px rgba(0,200,80,0.2), 0 0 0 1px rgba(74,222,128,0.08) inset;
  max-width: 340px; width: 90vw;
  animation: tut-pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
#tut-reward-coins {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-size: 56px; font-weight: 900;
  color: #4ade80;
  margin-bottom: 10px;
  animation: tut-coin-glow 2s ease-in-out infinite;
}
#tut-reward-coins img {
  width: 48px; height: 48px;
  filter: drop-shadow(0 0 18px rgba(74,222,128,0.9));
}
#tut-reward-label {
  font-size: 22px; font-weight: 900;
  color: #fff; margin-bottom: 6px;
  letter-spacing: -0.3px;
}
#tut-reward-sub {
  font-size: 13px; color: rgba(255,255,255,0.45);
  margin-bottom: 28px;
}
#tut-reward-finish {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: #000;
  border: none; border-radius: 14px;
  font-size: 16px; font-weight: 900;
  padding: 15px 48px;
  cursor: pointer; font-family: inherit;
  letter-spacing: 0.4px;
  box-shadow: 0 0 0 0 rgba(0,230,100,0.4);
  transition: transform 0.15s;
  animation: tut-btn-pulse 2s ease-in-out 0.5s infinite,
             tut-pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}
#tut-reward-finish:hover { transform: scale(1.04); }

/* Animations */
@keyframes tut-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tut-slide-in {
  from { opacity: 0; transform: translateX(80px) translateY(20px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes tut-slide-in-left {
  from { opacity: 0; transform: translateX(-80px) translateY(20px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes tut-bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-18px) scale(1.05); }
  65%  { transform: translateY(-7px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes tut-pop-in {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tut-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.25); }
  50%       { box-shadow: 0 0 0 10px rgba(255,215,0,0); }
}
@keyframes tut-blink {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.6; }
}
@keyframes tut-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes tut-rays-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes tut-coin-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(74,222,128,0.5); }
  50%       { text-shadow: 0 0 50px rgba(74,222,128,1), 0 0 100px rgba(0,200,80,0.6); }
}
@keyframes tut-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  50%       { box-shadow: 0 0 0 14px rgba(74,222,128,0); }
}
@keyframes tut-firework-burst {
  0%   { transform: scale(0); opacity: 1; }
  60%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes tut-logo-breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 40px rgba(74,222,128,0.25)) drop-shadow(0 4px 20px rgba(0,0,0,0.6)); }
  50%       { transform: scale(1.06); filter: drop-shadow(0 0 55px rgba(74,222,128,0.4))  drop-shadow(0 4px 20px rgba(0,0,0,0.6)); }
}