/* ChartFalcon design tokens. Light is the default; [data-theme=dark]
   matches the dark-mode toggle. */
:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #fff;
  --surface-raised: #fff;
  --surface-hover: #eef1f7;
  --surface-soft: #f8f9fc;
  --text: #171a23;
  --text-secondary: #454b5c;
  --text-muted: #6b7182;
  --border: #d3d8e2;
  --border-subtle: #e5e8f0;
  --primary: #2f6fed;
  --primary-strong: #2456c4;
  --primary-soft: #e1eafd;
  --positive: #1a9d5c;
  --positive-soft: #dcf5e7;
  --warning: #b8720e;
  --warning-soft: #fbecd4;
  --negative: #d13b4e;
  --negative-soft: #fbe2e6;
  --neutral: #2a2e3d;
  --neutral-soft: #eceef4;
  --blue: #3b82c9;
  --blue-soft: #dceafc;
  --purple: #7c5cd6;
  --purple-soft: #ece6fa;
  --rose: #c2367a;
  --rose-soft: #fbe3ee;
  --watchlist-highlight: #eef1f7;
  --shadow-sm: 0 1px 2px #171a2314;
  --shadow-md: 0 16px 40px #171a2326;
  --header-height: 56px;
  /* 3D glass surfaces: translucent + blurred with a bright top rim to read
     as a pane of glass catching light, not just a dimmed panel. */
  --glass-bg: linear-gradient(155deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 100%);
  --glass-border: rgba(255,255,255,.6);
  --glass-highlight: rgba(255,255,255,.8);
  --glass-shadow: 0 20px 44px -12px rgba(23,26,35,.22), inset 0 1px 0 var(--glass-highlight);
  --glass-blur: blur(20px) saturate(1.5);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f16;
  --surface: #151822;
  --surface-raised: #1b1f2c;
  --surface-hover: #222736;
  --surface-soft: #12141c;
  --text: #eef0f6;
  --text-secondary: #c3c7d6;
  --text-muted: #8a90a6;
  --border: #333850;
  --border-subtle: #242838;
  --primary: #6d94f5;
  --primary-strong: #93b0f8;
  --primary-soft: #23294a;
  --positive: #3fcf87;
  --positive-soft: #123626;
  --warning: #f0ac4c;
  --warning-soft: #3a2c14;
  --negative: #ee6b7c;
  --negative-soft: #3c1f26;
  --neutral: #c3c7d6;
  --neutral-soft: #242838;
  --blue: #6ea8f0;
  --blue-soft: #1c2c47;
  --purple: #b295ec;
  --purple-soft: #2a2340;
  --rose: #ef7fb3;
  --rose-soft: #3a2030;
  --watchlist-highlight: #262b3c;
  --shadow-sm: 0 1px 2px #00000040;
  --shadow-md: 0 12px 36px #00000060;
  /* Dark glass leans on a light rim + faint sheen rather than a bright
     white fill — a full white gradient here would just look washed out
     against the dark backdrop instead of reading as glass. */
  --glass-bg: linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 100%);
  --glass-border: rgba(255,255,255,.14);
  --glass-highlight: rgba(255,255,255,.18);
  --glass-shadow: 0 20px 44px -12px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-highlight);
  --glass-blur: blur(20px) saturate(1.6);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; min-width: 320px; }
body {
  background: var(--bg);
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  letter-spacing: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; letter-spacing: 0; }
a { color: inherit; }

/* ---------- Dashboard shell: left sidebar + page sections ---------- */
.app-shell { display: flex; align-items: flex-start; }
.sidebar {
  --sidebar-w: 208px;
  width: var(--sidebar-w); flex-shrink: 0; box-sizing: border-box;
  position: sticky; top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-x: hidden; overflow-y: auto;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-soft);
  padding: 8px 10px 16px;
  transition: width 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.sidebar-top {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 4px 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle);
}
.sidebar-toggle-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 6px; border: none;
  background: none; color: var(--text-muted); cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.18s ease;
}
.sidebar-toggle-btn:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-toggle-btn svg { transition: transform 0.18s ease; }

.sidebar-item {
  position: relative;
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  text-align: left; padding: 9px 12px; margin-bottom: 2px; border: none; background: none;
  border-radius: 8px; color: var(--text-secondary); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease; font-family: inherit;
  white-space: nowrap; text-decoration: none; box-sizing: border-box;
}
.sidebar-item:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-item.active { background: var(--primary-soft); color: var(--primary); }
.sidebar-item.active::before {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 3px; background: var(--primary);
}

/* Sub-items nested under the Dashboard sidebar entry (Stocks/Sectors/
   Darvas) — a left guide-line plus extra indent is what actually reads as
   "belongs to the item above" rather than "a second, unrelated group". */
.sidebar-subnav {
  display: flex; flex-direction: column; gap: 1px;
  margin: 0 0 4px 24px; padding-left: 10px; border-left: 1px solid var(--border-subtle);
}
.sidebar-subitem {
  text-align: left; padding: 6px 10px; border: none; background: none; border-radius: 6px;
  color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-subitem:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-subitem.active { color: var(--primary); background: var(--primary-soft); }
.sidebar.collapsed .sidebar-subnav { display: none; }

.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--positive); flex-shrink: 0; margin-left: auto;
  box-shadow: 0 0 0 rgba(22, 163, 74, 0.55); animation: liveDotPulse 2s infinite;
}
@keyframes liveDotPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 55%, transparent); }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sidebar.collapsed .live-dot { display: none; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.sidebar-icon { display: flex; width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-icon svg { width: 100%; height: 100%; }
.sidebar-divider { height: 1px; background: var(--border-subtle); margin: 10px 6px; }
.sidebar-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 4px 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; }

/* Collapsed state (user-toggled, persisted in localStorage) — icons only,
   labels/section headers hidden, active item's accent bar still visible so
   the current page stays identifiable even collapsed. */
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-eyebrow-text,
.sidebar.collapsed .sidebar-eyebrow-main, .sidebar.collapsed .sidebar-eyebrow { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sidebar-top { justify-content: center; }
.sidebar.collapsed .sidebar-toggle-btn svg { transform: rotate(180deg); }

.content-area { flex: 1; min-width: 0; }
.page { display: none; }
.page.active { display: block; }
.page-inner { padding: 22px 26px; }
.page-inner h2 { margin: 0 0 4px; font-size: 19px; }
.page-inner .page-desc { margin: 0 0 18px; }
.dashboard-page-header { padding: 18px 16px 4px; }
.dashboard-page-header h2 { margin: 0 0 4px; font-size: 19px; }
.dashboard-page-header .page-desc { margin: 0; }
@media (max-width: 860px) {
  .sidebar:not(.expanded-mobile) { width: 60px; }
  .sidebar:not(.expanded-mobile) .sidebar-label, .sidebar:not(.expanded-mobile) .sidebar-eyebrow-text,
  .sidebar:not(.expanded-mobile) .sidebar-eyebrow-main, .sidebar:not(.expanded-mobile) .sidebar-eyebrow { display: none; }
  .sidebar:not(.expanded-mobile) .sidebar-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar:not(.expanded-mobile) .sidebar-top { justify-content: center; }
}

/* ---------- Header ---------- */
.app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 var(--glass-highlight) inset, 0 8px 24px -16px rgba(0,0,0,.3);
  position: sticky;
  top: 0;
  z-index: 40;
  animation: headerSlideDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes headerSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-header .logo {
  height: 24px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: none; background: none; padding: 0; font: inherit;
}
.app-header .logo:hover svg { animation: logoWing 0.6s ease-in-out; }
.app-header .logo-word { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  .app-header { animation: none; }
  .app-header .logo:hover svg { animation: none; }
}
.app-header .search {
  flex: 1;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-header .search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.app-header .search svg { flex-shrink: 0; }
.app-header .search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  color: var(--text);
  font-size: 13px;
}
.header-spacer { flex: 1; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 96%, white 10%), color-mix(in srgb, var(--surface) 82%, transparent));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.icon-btn:hover { background: var(--surface-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight); }
.icon-btn:active { transform: translateY(0) scale(0.97); }
.icon-btn.spin-once { animation: spinOnce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes spinOnce { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } to { transform: rotate(360deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .icon-btn.spin-once { animation: none; }
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary) center/cover no-repeat; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: none; cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.avatar:hover { transform: scale(1.08); box-shadow: 0 0 0 3px var(--primary-soft); }
.avatar-wrap { position: relative; }
.avatar-premium-badge {
  position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f0ac4c, #e08a2b); color: #fff;
  border-radius: 50%; border: 2px solid var(--bg);
  font-size: 8.5px; line-height: 1; pointer-events: none;
}
.alerts-badge {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--negative); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}
.alerts-empty { padding: 14px 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
.alerts-item { padding: 8px 10px; border-radius: 6px; font-size: 12.5px; }
.alerts-item:hover { background: var(--surface-hover); }
.alerts-item-symbol { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.alerts-item-flips { color: var(--text-secondary); }

.sig-bar {
  display: inline-flex; align-items: flex-end; justify-content: center;
  width: 9px; height: 22px; margin-right: 1px; border-radius: 2px;
  background: var(--border-subtle); font-size: 9px; line-height: 22px; vertical-align: bottom;
  cursor: default;
}
.sig-bar.on { background: color-mix(in srgb, var(--positive) 55%, var(--border-subtle)); }
.avatar-menu {
  display: none; position: absolute; top: 38px; right: 0; z-index: 110;
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 10px;
  box-shadow: var(--glass-shadow); min-width: 160px; padding: 6px;
  transform-origin: top right;
}
.avatar-menu.open { display: block; animation: dropdownPop 0.16s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dropdownPop {
  from { opacity: 0; transform: scale(0.9) translateY(-6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.avatar-menu-email {
  padding: 6px 10px 8px; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; word-break: break-all;
}
.premium-badge {
  display: inline-flex; align-items: center; gap: 3px; margin: 0 10px 8px;
  background: linear-gradient(135deg, #f0ac4c, #e08a2b); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
}
.avatar-menu-upgrade { color: var(--warning); font-weight: 600; }
.toolbar-btn.upgrade-cta {
  background: linear-gradient(135deg, var(--warning-soft), color-mix(in srgb, var(--warning-soft) 60%, transparent));
  color: var(--warning); border-color: var(--warning); font-weight: 600;
}
.upgrade-price { font-size: 28px; font-weight: 800; color: var(--text); margin: 14px 0 16px; }
.avatar-menu-item {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px;
  background: none; border: none; color: var(--text); font-size: 13px; cursor: pointer;
  box-sizing: border-box; text-decoration: none; transition: background 0.12s ease, padding-left 0.12s ease;
}
.avatar-menu-item:hover { background: var(--surface-hover); padding-left: 13px; }

.auth-error {
  background: var(--negative-soft); color: var(--negative); border-radius: 6px;
  padding: 8px 10px; font-size: 12px; margin-bottom: 10px;
}
.auth-switch { margin-top: 16px; font-size: 12px; color: var(--text-muted); text-align: center; }
.link-btn {
  background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px;
  font-weight: 600; padding: 0 0 0 4px; text-decoration: none;
}

/* ---------- Legal pages (Terms/Privacy/Refund) ---------- */
body.legal-page {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 32px 24px 60px; }
.legal-wrap h1 { font-size: 26px; margin: 16px 0 4px; }
.legal-wrap h2 { font-size: 16px; margin: 28px 0 8px; color: var(--text); }
.legal-wrap p, .legal-wrap li { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.legal-updated { color: var(--text-muted); font-size: 12px; margin-bottom: 20px; }
.legal-notice {
  background: var(--warning-soft); color: var(--warning); border-radius: 8px; padding: 12px 16px;
  font-size: 13px; line-height: 1.5; margin-bottom: 24px;
}
.legal-notice strong { display: block; margin-bottom: 4px; }

/* ---------- Standalone login/signup page ---------- */
body.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0; overflow: hidden; position: relative;
  background:
    radial-gradient(ellipse 900px 600px at 50% 12%, var(--primary-soft) 0%, transparent 60%),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- 3D animated stock-market hero scene (background of the login page) ---- */
.login-bg-scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  perspective: 1400px;
}
.scene-grid {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 70%;
  background-image:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: rotateX(62deg) translateZ(-40px);
  transform-origin: bottom center;
  opacity: 0.55;
  animation: gridDrift 14s linear infinite;
  mask-image: linear-gradient(to top, black 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 85%);
}
@keyframes gridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 96px, 0 96px; }
}
.scene-glow {
  position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  border-radius: 50%; filter: blur(80px); opacity: 0.35; animation: glowDrift 16s ease-in-out infinite;
}
.glow-a { background: var(--positive); top: -10%; left: -8%; }
.glow-b { background: var(--primary); bottom: -14%; right: -6%; animation-delay: -8s; }
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 6%) scale(1.12); }
}

.candle-field {
  position: absolute; left: 50%; bottom: 6%; width: min(760px, 92vw); height: 34vh; max-height: 300px;
  transform: translateX(-50%); transform-style: preserve-3d;
}
.candle-scene {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(calc(8deg + var(--tiltY, 0deg))) rotateY(var(--tiltX, 0deg));
  transition: transform 0.25s ease-out;
}
.trend-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(30px); }
.trend-line {
  fill: none; stroke: var(--positive); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 8 6; opacity: 0.55; animation: dashFlow 2.2s linear infinite;
}
.trend-line-glow {
  stroke-width: 5; stroke-dasharray: none; opacity: 0.3; filter: blur(4px);
  animation: none;
}
@keyframes dashFlow { to { stroke-dashoffset: -140; } }

.candle {
  position: absolute; bottom: 0; width: 14px; height: var(--h);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, white 15%), var(--c));
  border-radius: 3px; box-shadow: 0 0 14px 0 color-mix(in srgb, var(--c) 55%, transparent);
  transform: translateZ(var(--z));
  animation: candleFloat 5s ease-in-out infinite;
  animation-delay: var(--d);
}
.candle::before {
  content: ""; position: absolute; left: 50%; top: -14%; bottom: -14%; width: 2px;
  transform: translateX(-50%); background: var(--c); opacity: 0.55; border-radius: 2px;
}
.candle.up { --c: var(--positive); }
.candle.down { --c: var(--negative); }
@keyframes candleFloat {
  0%, 100% { transform: translateZ(var(--z)) translateY(0) rotateY(0deg); }
  50% { transform: translateZ(var(--z)) translateY(-9px) rotateY(7deg); }
}

.floating-chip {
  position: absolute; display: flex; align-items: center; gap: 6px;
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--glass-border); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  color: var(--text); font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 20px;
  box-shadow: var(--glass-shadow); transform-style: preserve-3d;
  animation: chipFloat 6s ease-in-out infinite;
}
.floating-chip b { font-weight: 800; }
.chip-arrow.up { color: var(--positive); }
.chip-arrow.down { color: var(--negative); }
.chip1 { top: 18%; left: 8%; animation-delay: 0s; }
.chip2 { top: 14%; right: 10%; animation-delay: -2s; }
.chip3 { bottom: 30%; left: 4%; animation-delay: -4s; }
.chip5 { bottom: 26%; right: 6%; animation-delay: -1.2s; }
.chip-rupee {
  top: 46%; left: 50%; width: 40px; height: 40px; border-radius: 50%; justify-content: center;
  font-size: 18px; padding: 0; animation-delay: -3s;
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0) translateZ(0) rotate(0deg); }
  50% { transform: translateY(-14px) translateZ(20px) rotate(-2deg); }
}

@media (max-width: 720px) {
  .login-bg-scene { opacity: 0.5; }
  .floating-chip.chip3, .floating-chip.chip5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-grid, .scene-glow, .candle, .floating-chip, .trend-line { animation: none !important; }
  .candle-scene { transition: none; }
}

.login-card {
  position: relative; z-index: 1;
  width: 340px; max-width: 90vw;
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 32px 28px; box-shadow: var(--glass-shadow);
  transition: width 0.15s ease;
  animation: cardPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cardPopIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96) perspective(800px) rotateX(6deg); }
  to { opacity: 1; transform: translateY(0) scale(1) perspective(800px) rotateX(0deg); }
}
.login-card.login-card-wide { width: 420px; }
.login-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.login-logo svg { animation: logoWing 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes logoWing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg) scale(1.05); }
}
.login-logo-word { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.login-card h1 { margin: 0 0 4px; font-size: 19px; color: var(--text); }
.login-subtitle { margin: 0 0 18px; font-size: 13px; color: var(--text-muted); }
.login-card input, .login-card select {
  width: 100%; padding: 10px 11px; margin-bottom: 10px; box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px; background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text); font-size: 13px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.login-card input:focus, .login-card select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.login-row { display: flex; gap: 10px; }
.login-row input, .login-row select { flex: 1; min-width: 0; }
.login-submit { width: 100%; justify-content: center; margin-top: 4px; }
.login-legal-links { text-align: center; font-size: 11px; color: var(--text-muted); margin: 16px 0 0; }
.login-legal-links a { color: var(--text-muted); text-decoration: none; }
.login-legal-links a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- Admin dashboard ---------- */
body.admin-page { position: relative; }
.admin-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.admin-ambient .scene-glow { opacity: 0.16; }
.admin-badge {
  background: var(--primary-soft); color: var(--primary-strong); font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; margin-left: 10px; text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-body { padding: 20px 24px; position: relative; }
.admin-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.admin-stat-card {
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 75%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 14px 18px; min-width: 120px;
  box-shadow: var(--glass-shadow);
  animation: cardRiseIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.admin-stat-card:hover {
  transform: perspective(600px) translateY(-4px) rotateX(4deg);
  box-shadow: var(--glass-shadow), var(--shadow-md); border-color: var(--primary);
}
@keyframes cardRiseIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.admin-stat-value { font-size: 20px; font-weight: 700; color: var(--text); }
.admin-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.admin-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.admin-toolbar input {
  flex: 0 1 320px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-toolbar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);
  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text); transition: background 0.1s ease; }
.admin-table tr:hover td { background: var(--surface-hover); }
.admin-table tbody tr {
  animation: rowFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 25ms);
}
@media (prefers-reduced-motion: reduce) {
  .admin-stat-card, .admin-table tbody tr { animation: none; }
}

/* ---------- Market health tiles ---------- */
.health-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.health-tile {
  background: var(--glass-bg), var(--surface);
  padding: 12px 16px;
  cursor: pointer;
  border: none;
  text-align: left;
  font-family: inherit;
  position: relative; z-index: 0;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, z-index 0s;
}
.health-tile:hover {
  background: var(--glass-bg), var(--surface-hover);
  transform: perspective(600px) translateY(-3px) rotateX(3deg);
  box-shadow: var(--glass-shadow); z-index: 2;
}
.health-tile .label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.health-tile .value { font-size: 22px; font-weight: 700; color: var(--text); transition: color 0.15s ease; }
.health-tile .delta { font-size: 11.5px; margin-left: 6px; font-weight: 600; }
.health-tile .delta.up { color: var(--positive); }
.health-tile .delta.down { color: var(--negative); }

/* ---------- Tabs + toolbar ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
}
.toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border);
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 96%, white 10%), color-mix(in srgb, var(--surface) 82%, transparent));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  color: var(--text-secondary); border-radius: 7px; padding: 7px 12px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.toolbar-btn svg { flex-shrink: 0; }
.toolbar-btn:hover { background: var(--surface-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight); }
.toolbar-btn:active { transform: translateY(0) scale(0.97); }
.toolbar-btn.active { background: var(--primary-soft); color: var(--primary-strong); border-color: var(--primary); }
.select-field {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 7px; padding: 5px 10px;
}
.select-field label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.select-field select { border: none; background: none; color: var(--text); font-size: 13px; outline: none; }
.timeframe-group { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.timeframe-group button { border: none; background: var(--surface); padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.timeframe-group button.active { background: var(--primary); color: #fff; }
.select-field { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.select-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.filter-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
}
.filter-row .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); text-transform: uppercase; margin-right: 4px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border);
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 96%, white 10%), color-mix(in srgb, var(--surface) 82%, transparent));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  color: var(--text-secondary);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, box-shadow 0.15s ease;
}
.chip-btn svg { flex-shrink: 0; }
.heatmap-table th { text-align: center; }
.heatmap-cell { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 4px; min-width: 64px; }
.chip-btn:hover { background: var(--surface-hover); transform: translateY(-1px) scale(1.03); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight); }
.chip-btn:active { transform: translateY(0) scale(0.96); }
.chip-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.row-meta { padding: 6px 16px; font-size: 12.5px; color: var(--text-muted); display: flex; justify-content: space-between; }

/* ---------- Table ---------- */
/* Thin, theme-colored scrollbars instead of the OS default — applied to
   every internally-scrolling panel in the app, not just tables. */
.tbl-wrap, .sidebar, .gated-panel .box {
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.tbl-wrap::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .gated-panel .box::-webkit-scrollbar { width: 8px; height: 8px; }
.tbl-wrap::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track, .gated-panel .box::-webkit-scrollbar-track { background: transparent; }
.tbl-wrap::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .gated-panel .box::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.tbl-wrap::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover, .gated-panel .box::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* Same elevated-glass recipe as .tbl-wrap, for non-table content blocks
   (e.g. the Watchlists cards) that want the same "raised panel" look. */
.data-card {
  background: var(--glass-bg), var(--surface);
  border: 1px solid var(--glass-border); border-radius: 10px;
  box-shadow: var(--glass-shadow);
}

/* ---------- Scans page: category browser + results panel ---------- */
.scan-browser { display: flex; gap: 16px; align-items: flex-start; }
/* Pinned in place the same way the left nav sidebar is (position: sticky
   under the header, its own scroll for the overflow) — otherwise the
   46-category, 351-pattern list is taller than the viewport and scrolls
   away together with the page while browsing results. */
.scan-browser-side {
  width: 340px; flex-shrink: 0; padding: 14px; box-sizing: border-box;
  position: sticky; top: var(--header-height);
  max-height: calc(100vh - var(--header-height) - 16px);
  overflow-y: auto;
}
.scan-browser-main { flex: 1; min-width: 0; padding: 18px; box-sizing: border-box; }
.scan-category-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text); border-radius: 6px;
}
.scan-category-header:hover { background: var(--surface-hover); }
.scan-category-header .chevron { color: var(--text-muted); }
.scan-category-header .chevron-wrap { display: inline-flex; transition: transform 0.15s ease; }
.scan-category-header.collapsed .chevron-wrap { transform: rotate(-90deg); }
.scan-category-count {
  margin-left: auto; background: var(--surface-hover); color: var(--text-muted);
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
}
.scan-pattern-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 26px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
.scan-pattern-row:hover { background: var(--surface-hover); }
.scan-pattern-row.selected { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.scan-pattern-row.scan-pattern-no-data { cursor: not-allowed; opacity: 0.55; }
.scan-pattern-row.scan-pattern-no-data:hover { background: none; }
.scan-pattern-radio {
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0;
}
.scan-pattern-row.selected .scan-pattern-radio { border-color: var(--primary); background: var(--primary); }
.scan-pattern-label { flex: 1; }
.scan-tf-badge {
  font-size: 10px; font-weight: 800; border-radius: 4px; padding: 3px 7px; border: none; cursor: pointer;
  color: #fff; opacity: 0.55; transition: opacity 0.12s ease, transform 0.12s ease;
}
.scan-tf-badge:hover { opacity: 0.85; }
.scan-tf-badge.active { opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 2px var(--primary-soft); }
.scan-tf-badge.tf-d { background: #e0a02f; }
.scan-tf-badge.tf-w { background: #6b7280; }
.scan-tf-badge.tf-m { background: #2f8a5c; }
.scan-tf-badge:disabled { cursor: not-allowed; opacity: 0.25; }
.scan-tf-badge:disabled:hover { opacity: 0.25; }

.wl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-hover); border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 5px 6px 5px 12px; font-size: 12.5px; font-weight: 600;
}
.wl-chip > span { cursor: pointer; }
.wl-chip > span:hover { color: var(--primary); }
.wl-chip button {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; border: none; background: none;
  color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
}
.wl-chip button:hover { background: var(--negative-soft); color: var(--negative); }

.tbl-wrap {
  overflow: auto; max-height: calc(100vh - 300px);
  /* Same "elevated glass panel" recipe already used for this app's modals
     (.gated-panel .box) — a plain var(--surface) fill plus a soft shadow
     is nearly invisible in dark mode, since --surface (#151822) sits only
     a shade above --bg (#0d0f16) and a dark drop-shadow does nothing on an
     already-near-black background. The glass gradient + a real border is
     what actually reads as a raised card here (confirmed against the
     modals, which already look right using this exact combination). */
  background: var(--glass-bg), var(--surface);
  border: 1px solid var(--glass-border); border-radius: 10px;
  box-shadow: var(--glass-shadow);
}
/* Sticky headers need their own radius clipped at the top corners — the
   wrapper's border-radius alone won't clip a `position: sticky` child. */
.tbl-wrap table thead tr:first-child th:first-child { border-top-left-radius: 9px; }
.tbl-wrap table thead tr:first-child th:last-child { border-top-right-radius: 9px; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-soft); color: var(--text-muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
  padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: center;
  cursor: pointer;
}
thead tr.group-row th {
  background: var(--surface); color: var(--text-secondary); font-size: 9.5px;
  border-bottom: 1px solid var(--border-subtle); top: 0;
}
thead tr.col-row th { top: 24px; }
/* The 24px offset above only makes sense under the main scan table's
   two-tier header (a .group-row sits above .col-row there). The Backtest
   and Market Pulse panels reuse .col-row's styling for a single-row
   header with nothing above it, so that offset just pushes the sticky
   header 24px into the table body instead of pinning it at the top —
   looks like the header duplicating mid-list on scroll. */
#backtest-results .col-row th, #market-pulse-body .col-row th, #corp-actions-body .col-row th, #hof-table .col-row th, #pf-holdings-body .col-row th, #scan-results-table-wrap .col-row th, #pt-positions-body .col-row th, #pt-trades-body .col-row th, #sectors-view .col-row th, #darvas-view .col-row th { top: 0; }
tbody td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; transition: background 0.1s ease; }
/* Zebra striping so a dense table reads as rows, not one continuous grid —
   ordered before the hover rule below so hover (equal specificity, later
   in the cascade) always wins over the stripe on the row being pointed at. */
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 3%, transparent); }
tbody tr:hover td { background: var(--surface-hover); }
#results-body tr {
  animation: rowFadeIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 10ms);
}
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #results-body tr { animation: none; }
}

/* ---------- Premium-locked table cells ----------
   Two layers: ::before is a soft blurred glow blob, ::after is the
   "Premium" label sitting on top of it. The cell itself is never given
   real content for these columns in the first place (see PREMIUM_LOCKED_COLS
   in scanner.js — the value still exists in scanData for client-side
   filters/sort, it's just never rendered into the DOM), so there's nothing
   underneath to cover — the row's own background shows through around the
   glow exactly as-is. */
.premium-locked-cell { position: relative; }
.premium-locked-cell::before {
  content: "";
  position: absolute; left: 14%; right: 14%; top: 20%; bottom: 20%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--text) 55%, transparent) 0%, transparent 75%);
  filter: blur(4px);
  pointer-events: none;
}
.premium-locked-cell::after {
  content: "Premium";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-secondary);
  pointer-events: none;
}
.premium-locked-interactive { cursor: pointer; }
.premium-locked-interactive::after { pointer-events: auto; }

/* Drilldown watchlist stars / notes input — same lock, lighter dimming
   treatment since these sit outside the table's cell-overlay layout. */
.premium-locked-icon { opacity: 0.4; cursor: pointer; }
input.premium-locked-icon { cursor: text; }

/* Sticky lead columns (#, watchlist, cap, ticker) so identity stays visible
   while scrolling through the 25+ data columns. Scoped to #results-table
   specifically — the offsets (34px/130px/176px) are tuned to that table's
   narrow row-number/star/cap columns. Applied globally these would clamp
   sticky columns in every other table (Portfolio, Backtest, Paper Trading,
   etc.) to the wrong offset the instant their own (wider) first column
   exceeds it, visually overlapping columns that were never meant to stick. */
#results-table thead th:nth-child(1), #results-table tbody td:nth-child(1) { position: sticky; left: 0; z-index: 4; background: var(--surface); }
#results-table thead th:nth-child(2), #results-table tbody td:nth-child(2) { position: sticky; left: 34px; z-index: 4; background: var(--surface); }
#results-table thead th:nth-child(3), #results-table tbody td:nth-child(3) { position: sticky; left: 130px; z-index: 4; background: var(--surface); }
#results-table thead th:nth-child(4), #results-table tbody td:nth-child(4) { position: sticky; left: 176px; z-index: 4; background: var(--surface); box-shadow: 2px 0 4px -2px rgba(0,0,0,.15); }
#results-table thead tr.group-row th:nth-child(1) { z-index: 6; }
#results-table thead tr.col-row th:nth-child(-n+4) { z-index: 6; }
#results-table tbody tr:hover td:nth-child(-n+4) { background: var(--surface-hover); }
td.sym-cell { cursor: pointer; }
td.sym-cell:hover { color: var(--primary); text-decoration: underline; }
td.sym-cell { text-align: left; font-weight: 700; }
td.sector-cell { text-align: left; color: var(--text-secondary); }
.cap-tag {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  background: var(--neutral-soft); color: var(--neutral);
}
.chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600;
}
.chip.pos { background: var(--positive-soft); color: var(--positive); }
.chip.neg { background: var(--negative-soft); color: var(--negative); }
.chip.warn { background: var(--warning-soft); color: var(--warning); }
.chip.neutral { background: var(--neutral-soft); color: var(--neutral); }
.chip.blue { background: var(--blue-soft); color: var(--blue); }
.muted { color: var(--text-muted); }
.ema-badges { display: inline-flex; gap: 2px; }
.ema-badges span { font-size: 9.5px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: var(--neutral-soft); color: var(--text-muted); }
.ema-badges span.on { background: var(--positive-soft); color: var(--positive); }
.rs-hist { display: inline-flex; align-items: center; gap: 3px; }
.rs-hist .n { width: 22px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 10px; font-weight: 700; }
@keyframes starPop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
.watch-star {
  border: none; background: none; cursor: pointer; padding: 0; font-size: 15px; line-height: 1;
  color: var(--text-muted); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}
.watch-star:hover { transform: scale(1.25); color: var(--primary); }
.watch-star.on { color: var(--warning, #e0a02f); animation: starPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.notes-input { width: 100px; border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; font-size: 11.5px; background: var(--surface); color: var(--text); }

.gated-panel {
  position: fixed; inset: 0; background: rgba(10,12,20,.4); display: none;
  align-items: center; justify-content: center; z-index: 100;
  perspective: 1000px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.gated-panel.open { display: flex; animation: overlayFadeIn 0.18s ease both; }
.gated-panel .box {
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 24px; width: 380px; max-width: 90vw;
  box-shadow: var(--glass-shadow); max-height: 80vh; overflow: auto;
  animation: panelPopIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelPopIn {
  from { opacity: 0; transform: perspective(900px) rotateX(-10deg) scale(0.92) translateY(14px); }
  to { opacity: 1; transform: perspective(900px) rotateX(0deg) scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .gated-panel.open, .gated-panel .box { animation: none; }
}
.gated-panel h3 { margin: 0 0 12px; font-size: 15px; }
.gated-panel .close-x {
  float: right; cursor: pointer; color: var(--text-muted); font-size: 18px; background: none; border: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.gated-panel .close-x:hover { color: var(--negative); transform: rotate(90deg); }

#profile-panel input, #edit-user-panel input {
  width: 100%; padding: 8px; margin-bottom: 10px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px;
}
.profile-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.profile-pic-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.profile-pic-preview {
  width: 56px; height: 56px; border-radius: 50%; background: var(--primary) center/cover no-repeat;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.profile-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 20px 0; }

/* ---------- Chart drilldown: a right-side drawer, not a centered modal --- */
#drilldown-panel { justify-content: flex-end; background: rgba(0,0,0,.45); }
.dd-box {
  position: relative;
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-border);
  width: 620px; max-width: 96vw; min-width: 380px;
  height: 100vh;
  padding: 20px 24px 20px 32px;
  overflow-y: auto;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: ddSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ddSlideIn {
  from { opacity: 0; transform: perspective(1200px) rotateY(8deg) translateX(40px); }
  to { opacity: 1; transform: perspective(1200px) rotateY(0deg) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dd-box { animation: none; }
}
.dd-resize-handle {
  position: absolute; top: 0; left: 0; bottom: 0; width: 10px;
  cursor: ew-resize; z-index: 5;
}
.dd-resize-handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px;
  background: var(--border); transition: background .15s;
}
.dd-resize-handle:hover::after, .dd-resize-handle.dragging::after { background: var(--primary); width: 3px; }
.dd-header { position: relative; }
.dd-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dd-symbol { font-size: 20px; font-weight: 800; }
.dd-price-val { font-size: 18px; font-weight: 700; }
.dd-date { font-size: 12px; color: var(--text-muted); margin-left: auto; padding-right: 130px; }
.dd-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.dd-header-icons { position: absolute; top: 0; right: 0; display: flex; gap: 4px; }
.dd-icon {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.dd-icon:hover { background: var(--surface-hover); }
.dd-icon.on { color: var(--warning); border-color: var(--warning); }

.dd-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dd-badges .grp { display: inline-flex; gap: 4px; align-items: center; }
.dd-badges .lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-right: 2px; }
.dd-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; background: var(--neutral-soft); color: var(--text-muted); }
.dd-badge.on { background: var(--positive-soft); color: var(--positive); }
.dd-badge.warn { background: var(--warning-soft); color: var(--warning); }
.dd-badge.blue { background: var(--blue-soft); color: var(--blue); }
.dd-spacer-grow { flex: 1; }

.dd-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.dd-controls-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.dd-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.dd-seg button { border: none; background: var(--surface); color: var(--text-muted); padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.dd-seg button.active { background: var(--primary); color: #fff; }
.dd-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--ema-color, var(--text-secondary)); font-weight: 700; font-size: 12px; }
.dd-check input { accent-color: var(--ema-color, var(--primary)); }

.dd-chart { border: 1px solid var(--border-subtle); border-radius: 6px; }
.dd-subchart-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); margin-bottom: -8px; }
.dd-notes-input {
  border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px;
  font-size: 13px; background: var(--surface); color: var(--text); width: 100%;
}

/* Guided tour — a scrim with a spotlight cutout (box-shadow trick: the
   highlight box's own shadow covers the rest of the viewport, so no
   separate full-screen overlay element is needed to punch the hole). */
.tour-highlight {
  position: fixed;
  z-index: 200;
  border-radius: 8px;
  box-shadow: 0 0 0 4000px #0009;
  pointer-events: none;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-card {
  position: fixed;
  z-index: 201;
  width: 300px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 16px;
  transition: top .2s ease, left .2s ease;
}
.tour-card .tour-step { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.tour-card .tour-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tour-card .tour-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }
.tour-card .tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-card .tour-skip { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 4px 0; }
.tour-card .tour-nav { display: flex; gap: 6px; }
.tour-card .tour-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tour-card .tour-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Mobile ---------- */
/* Nothing below hides any feature — only compacts labels/spacing and lets
   the chart drawer go full-width, since the header had no wrap/shrink
   behavior at all before this and was forcing the whole page to scroll
   horizontally just to reach the header buttons. */
@media (max-width: 640px) {
  .app-header { gap: 8px; padding: 0 10px; }
  .app-header .logo svg { width: 16px; height: 16px; }
  .app-header .logo-word { font-size: 13px; }
  .app-header .search { max-width: 120px; min-width: 0; }
  .icon-btn-label { display: none; }
  .icon-btn { padding: 7px 9px; }

  .dd-box { width: 100%; min-width: 0; max-width: 100%; padding: 16px 14px 16px 20px; }
  .dd-resize-handle { display: none; }

  /* The icons row is absolutely positioned over the title row on desktop
     (there's room to spare); on narrow screens that overlaps real content,
     so it drops into normal flow above the title instead. */
  .dd-header { display: flex; flex-direction: column; gap: 6px; }
  .dd-header-icons { position: static; align-self: flex-end; order: -1; }
  .dd-date { padding-right: 0; margin-left: 8px; }
}

/* ---------- Inline per-column filter controls ---------- */
.col-filter {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 5px;
  vertical-align: middle; text-transform: none;
}
.col-filter-check { margin: 0; cursor: pointer; accent-color: var(--primary); }
.col-filter-edit {
  border: none; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 11px; padding: 0; line-height: 1; display: inline-flex;
}
.col-filter-edit:hover { color: var(--primary); }
.col-filter-popover {
  position: fixed; z-index: 210; width: 220px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: 12px; text-transform: none;
  font-size: 12.5px; font-weight: 400; color: var(--text);
}
.col-filter-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; }
.dd-alert-popover {
  position: absolute; top: 32px; right: 0; z-index: 210; width: 240px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: 12px; font-size: 12.5px; color: var(--text);
}
.dd-alert-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
}
.dd-alert-row:last-of-type { border-bottom: none; }
.col-filter-input-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-weight: 600; }
.col-filter-input-row input {
  width: 64px; border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px;
  background: var(--surface); color: var(--text); font-size: 12.5px;
}

.watchlist-popover {
  position: fixed; z-index: 210; width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: 12px; font-size: 12.5px; color: var(--text);
}
.wl-popover-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.wl-popover-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-height: 180px; overflow-y: auto; }
.wl-popover-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.wl-popover-new { display: flex; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.wl-popover-new-input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px;
  background: var(--surface); color: var(--text); font-size: 12px;
}

/* ---------- Symbol autocomplete (Paper Trading / Portfolio "Add holding") ---------- */
.symbol-suggest {
  z-index: 210; max-height: 260px; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: 6px; font-size: 12.5px;
}
.symbol-suggest-row {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 8px; border-radius: 5px; cursor: pointer;
}
.symbol-suggest-row:hover { background: var(--surface-hover); }
.symbol-suggest-sym { font-weight: 700; color: var(--text); flex-shrink: 0; }
.symbol-suggest-name {
  color: var(--text-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Home page: card grid + lightweight charts ---------- */
.home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .home-grid { grid-template-columns: 1fr; } }

.home-card {
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px;
  border-top: 2px solid var(--accent); transition: box-shadow .15s, transform .15s;
}
.home-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.home-card--blue { --accent: var(--primary); --accent-soft: var(--primary-soft); }
.home-card--purple { --accent: var(--purple); --accent-soft: var(--purple-soft); }
.home-card--teal { --accent: var(--blue); --accent-soft: var(--blue-soft); }
.home-card--amber { --accent: var(--warning); --accent-soft: var(--warning-soft); }
.home-card--green { --accent: var(--positive); --accent-soft: var(--positive-soft); }
.home-card--rose { --accent: var(--rose); --accent-soft: var(--rose-soft); }

/* Status banner + top-movers strip, sit above the card grid */
.home-status-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-secondary); margin-bottom: 14px;
}
.home-status-item { display: flex; align-items: center; gap: 7px; }
.home-status-sep { color: var(--border); }
.home-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.home-status-dot.on { background: var(--positive); box-shadow: 0 0 0 rgba(0,0,0,0); animation: liveDotPulse 2s infinite; }
.home-status-dot.off { background: var(--negative); }
@media (prefers-reduced-motion: reduce) { .home-status-dot.on { animation: none; } }

.home-movers-strip { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.home-movers-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-movers-group .home-movers-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-right: 2px; }
.home-mover-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-soft); border: 1px solid var(--border-subtle); font-size: 12px; cursor: pointer;
}
.home-mover-chip:hover { border-color: var(--border); }
.home-mover-chip .sym { font-weight: 700; color: var(--text); }
.home-mover-chip .chg { font-weight: 700; font-variant-numeric: tabular-nums; }
.home-mover-chip .chg.pos { color: var(--positive); }
.home-mover-chip .chg.neg { color: var(--negative); }

/* Paper Trading + Darvas preview card bodies */
.home-pt-hero { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.home-pt-net { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-pt-net .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.home-pt-net .d { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; }
.home-pt-net .d.pos { color: var(--positive); background: var(--positive-soft); }
.home-pt-net .d.neg { color: var(--negative); background: var(--negative-soft); }
.home-pt-net .d.neutral { color: var(--text-muted); background: var(--surface-soft); }

.home-darvas-list { display: flex; flex-direction: column; gap: 8px; flex: 1; width: 100%; }
.home-darvas-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); cursor: pointer;
}
.home-darvas-row:hover { background: var(--surface-hover); }
.home-darvas-row .sym { font-weight: 700; color: var(--text); }
.home-darvas-row .note { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 8px; flex: 1; }

.home-card-head { display: flex; align-items: flex-start; gap: 12px; }
.home-card-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.home-card-icon svg { width: 17px; height: 17px; }
.home-card-title { flex: 1; min-width: 0; }
.home-card-title h3 { margin: 0 0 2px; font-size: 14.5px; }
.home-card-title p { margin: 0; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-card-link {
  font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap;
  cursor: pointer; padding-top: 3px; flex-shrink: 0;
}
.home-card-link:hover { text-decoration: underline; }
.home-card-body { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; flex: 1; }

.home-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 11px; }
.home-bar-row { display: grid; grid-template-columns: 112px 1fr 54px; align-items: center; gap: 10px; font-size: 12px; }
.home-bar-row .l { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-bar-track { height: 9px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 1px 2px #00000030; overflow: hidden; }
.home-bar-fill { position: relative; height: 100%; border-radius: 999px; overflow: hidden; }
.home-bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 100%); }
.home-bar-fill--pos { background: var(--positive); box-shadow: 0 0 9px -1px var(--positive); }
.home-bar-fill--mid { background: var(--warning); box-shadow: 0 0 9px -1px var(--warning); }
.home-bar-fill--neg { background: var(--negative); box-shadow: 0 0 9px -1px var(--negative); }
.home-bar-row .v {
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: 2px 8px; font-size: 11.5px;
}
.home-bar-v--pos { color: var(--positive); background: var(--positive-soft); }
.home-bar-v--mid { color: var(--warning); background: var(--warning-soft); }
.home-bar-v--neg { color: var(--negative); background: var(--negative-soft); }

.home-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.home-donut {
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--donut-stops, var(--border-subtle) 0 100%));
  box-shadow: var(--shadow-sm);
}
.home-donut::after {
  content: ""; width: 64%; height: 64%; border-radius: 50%; background: var(--surface-raised);
}
.home-donut-center { position: relative; }
.home-donut-center .home-donut-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; font-size: 10.5px; color: var(--text-muted); text-align: center; line-height: 1.2;
}
.home-donut-center .home-donut-label strong { font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.home-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.home-legend-row { display: flex; align-items: center; gap: 7px; }
.home-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.home-legend-row .n { font-weight: 700; margin-left: 3px; font-variant-numeric: tabular-nums; }

.home-stat-strip { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 180px; }
.home-stat {
  text-align: left; background: var(--surface-soft); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 7px 12px; flex: 1; min-width: 84px;
}
.home-stat .l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-stat .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------- Darvas Box picks (admin-curated) ---------- */
.darvas-admin-card { padding: 18px 20px; margin-bottom: 18px; }
.darvas-admin-head h3 { margin: 0 0 4px; font-size: 15px; }
.darvas-admin-head p { margin: 0 0 14px; font-size: 12.5px; }
.darvas-admin-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.darvas-admin-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.darvas-pick-card {
  border: 1px solid var(--border); border-radius: 9px; padding: 14px 16px;
  background: var(--glass-bg), color-mix(in srgb, var(--surface) 92%, transparent);
}
.darvas-pick-card.feedback-unread { border-color: var(--warning); }
.darvas-pick-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.darvas-pick-symbol { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.darvas-price { font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; }
.darvas-pick-note {
  margin: 10px 0 8px; padding-left: 12px; border-left: 2px solid var(--primary-soft);
  font-size: 13px; font-style: italic; color: var(--text-secondary); line-height: 1.5;
}
.darvas-pick-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); }

/* ---------- Paper Trading ---------- */
.pt-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--glass-bg), linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface));
  border: 1px solid var(--glass-border); border-radius: 12px; padding: 20px 24px;
  box-shadow: var(--glass-shadow); margin: 14px 0;
}
.pt-hero-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.pt-hero-value { font-size: 36px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pt-hero-delta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
}
.pt-hero-delta.pos { background: var(--positive-soft); color: var(--positive); }
.pt-hero-delta.neg { background: var(--negative-soft); color: var(--negative); }
.pt-hero-delta.neutral { background: var(--neutral-soft); color: var(--neutral); }
.pt-hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.pt-hero-stat { text-align: right; }
.pt-hero-stat .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; white-space: nowrap; }
.pt-hero-stat .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.pt-hero-stat .v.pos { color: var(--positive); }
.pt-hero-stat .v.neg { color: var(--negative); }

.pt-ticket { padding: 16px 18px; margin-bottom: 16px; }
.pt-ticket-head { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.pt-ticket-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pt-field { display: flex; flex-direction: column; }
.pt-ltp { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding-bottom: 9px; font-variant-numeric: tabular-nums; min-width: 90px; }
.pt-buy-btn, .pt-sell-btn {
  border-radius: 7px; padding: 8px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.pt-buy-btn:active, .pt-sell-btn:active { transform: scale(0.97); }
.pt-buy-btn { border: 1px solid var(--positive); background: var(--positive); color: #fff; }
.pt-buy-btn:hover { filter: brightness(1.08); }
.pt-sell-btn { border: 1px solid var(--negative); background: var(--negative-soft); color: var(--negative); }
.pt-sell-btn:hover { background: var(--negative); color: #fff; }

.pt-table td { vertical-align: middle; }

/* ---------- Live price (Upstox), Dashboard table + drilldown badge ---------- */
.live-price { color: var(--positive); font-weight: 700; }
.live-price::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--positive); margin-right: 5px; vertical-align: middle;
  animation: liveDotPulse 2s infinite;
}
@media (prefers-reduced-motion: reduce) { .live-price::before { animation: none; } }
.pt-alloc-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.pt-alloc-bar span { display: block; height: 100%; background: var(--primary); border-radius: 2px; }

/* ---------- Toasts ---------- */
/* Confirms actions that otherwise happen silently (watchlist toggle, notes
   save, filter save/delete) so the user isn't left guessing whether a
   click actually did anything. */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-bg), color-mix(in srgb, var(--surface-raised) 82%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 500;
  box-shadow: var(--glass-shadow); max-width: 320px;
  opacity: 0; transform: translateY(10px) scale(0.94);
  transition: opacity .25s cubic-bezier(0.34, 1.56, 0.64, 1), transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.show .toast-icon { animation: toastIconPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.05s; }
@keyframes toastIconPop { from { transform: scale(0); } to { transform: scale(1); } }
.toast.success { border-color: var(--positive); }
.toast.success .toast-icon { color: var(--positive); }
.toast.error { border-color: var(--negative); }
.toast.error .toast-icon { color: var(--negative); }
.toast-icon { display: inline-flex; font-weight: 800; flex-shrink: 0; }
.col-filter-apply { width: 100%; justify-content: center; }