/* =========================================================================
   Momentum — Stock Portal design system
   Premium dark fintech theme. Semantic colors are the dataviz-validated
   status palette; brand accent is an indigo→violet gradient.
   ========================================================================= */

:root {
  /* Surfaces (cool dark, fintech) */
  --plane:        #0a0d13;
  --surface-1:    #10141d;
  --surface-2:    #161b26;
  --surface-3:    #1c2230;
  --surface-hi:   #222a3a;

  /* Ink */
  --text-1: #eef2f8;
  --text-2: #9aa6bd;
  --text-3: #66718a;

  /* Hairlines / borders */
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.12);
  --ring:      rgba(139,92,246,0.55);

  /* Brand accent */
  --brand-1: #6366f1;   /* indigo */
  --brand-2: #8b5cf6;   /* violet */
  --brand-3: #22d3ee;   /* cyan pop */
  --brand-grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --brand-glow: 0 8px 30px rgba(99,102,241,0.35);

  /* Semantic (validated status hues) */
  --up:      #16c784;   /* gains */
  --up-dim:  rgba(22,199,132,0.14);
  --down:    #ef4a4a;   /* losses */
  --down-dim:rgba(239,74,74,0.14);
  --good:    #16c784;
  --amber:   #f5b544;
  --amber-dim: rgba(245,181,68,0.15);
  --red:     #ef4a4a;
  --red-dim: rgba(239,74,74,0.14);
  --green-dim: rgba(22,199,132,0.14);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.55);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --sidebar-w: 244px;
  --topbar-h: 62px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text-1);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Ambient background glow */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(99,102,241,0.16), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, rgba(34,211,238,0.10), transparent 55%),
    radial-gradient(700px 600px at 50% 120%, rgba(139,92,246,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hidden { display: none !important; }
.muted { color: var(--text-2); }
.xs { font-size: 11px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-hi); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #2e384c; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================ App shell ============================ */
/* --app-h cancels the UI-scale zoom: a 100vh box renders 'zoom'× taller than the
   screen, which would push the sidebar footer (version label) off the bottom. JS
   (applyScale) sets --app-h to (100/zoom)vh so the app stays exactly one screen tall. */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: var(--app-h, 100vh); }

.sidebar {
  background: linear-gradient(180deg, rgba(22,27,38,0.9), rgba(16,20,29,0.92));
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 18px 14px;
  gap: 8px;
  z-index: 40;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 14px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-grad);
  box-shadow: var(--brand-glow);
  position: relative; flex: none;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/62% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 22l6-7 4 3 10-11' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.brand-mark.lg { width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.brand-tag { font-size: 11px; color: var(--text-2); }

.nav { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 11px;
  color: var(--text-2); font-weight: 500; font-size: 14px;
  cursor: pointer; border: 1px solid transparent;
  transition: all 0.18s var(--ease);
  user-select: none;
}
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: 0.85; }
.nav-item:hover { background: var(--surface-2); color: var(--text-1); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.12));
  color: #fff; border-color: rgba(139,92,246,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav-item.active svg { opacity: 1; color: var(--brand-2); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 6px 2px; }
.app-version { font-size: 11.5px; font-weight: 700; color: var(--text-2); letter-spacing: .01em;
  padding: 5px 8px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border);
  text-align: center; }
.app-version.stale { color: var(--amber); border-color: rgba(201,133,0,.4); background: var(--amber-dim); }
.scale-ctl { display: flex; align-items: center; gap: 6px; }
.scale-btn { width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); font-weight: 800; font-size: 12px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.scale-btn:hover { color: var(--text-1); border-color: var(--brand-2); }
.scale-val { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }
.engine-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
  padding: 7px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border);
}
.engine-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
.engine-chip.on .dot { background: var(--up); box-shadow: 0 0 10px var(--up); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }

/* Global "scan running" indicator (sidebar) */
.job-chip {
  padding: 10px 11px; border-radius: 11px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.10));
  border: 1px solid rgba(139,92,246,0.35);
  display: flex; flex-direction: column; gap: 8px;
  animation: fadeUp 0.3s var(--ease);
}
.job-chip .jc-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.job-chip .jc-detail { margin-left: auto; color: var(--text-2); font-size: 12px; }
.job-chip .jc-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.job-chip .jc-bar > i { display: block; height: 100%; width: 8%; border-radius: 3px; background: var(--brand-grad); transition: width 0.3s var(--ease); box-shadow: 0 0 10px rgba(99,102,241,0.5); }

/* Ranked table "updating" veil */
.wl-updating { position: relative; }
.wl-veil {
  position: absolute; inset: 0; z-index: 5; border-radius: var(--radius);
  background: rgba(10,13,19,0.72); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--text-2); font-size: 13.5px; font-weight: 500; animation: fadeUp 0.25s var(--ease);
}

.sidebar .sidebar-close, .topbar .menu-btn { display: none; }
.sidebar-scrim { display: none; }

/* ============================ Main ============================ */
.main { display: flex; flex-direction: column; min-width: 0; height: var(--app-h, 100vh); }
.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(10,13,19,0.6); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px; scroll-behavior: smooth; }
.view-in { animation: fadeUp 0.4s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.page-head { margin-bottom: 20px; }
.page-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.page-head p { margin: 0; color: var(--text-2); font-size: 14px; }

/* ============================ Cards ============================ */
.card {
  background: linear-gradient(180deg, rgba(28,34,48,0.55), rgba(16,20,29,0.65));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(8px);
}
.card-pad { padding: 18px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; }

.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================ Stat tiles ============================ */
.stat {
  position: relative; overflow: hidden;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28,34,48,0.6), rgba(16,20,29,0.7));
  border: 1px solid var(--border);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.stat:hover { transform: translateY(-3px); border-color: var(--border-2); }
.stat::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(99,102,241,0.16), transparent 70%);
}
.stat-label { font-size: 12px; color: var(--text-2); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.stat-label svg { width: 15px; height: 15px; }
.stat-value { font-size: 30px; font-weight: 780; letter-spacing: -0.02em; margin-top: 8px; line-height: 1; }
.stat-sub { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.stat-accent .stat-value { background: linear-gradient(120deg, var(--brand-1), var(--brand-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 11px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-1);
  cursor: pointer; transition: all 0.18s var(--ease); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--surface-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: var(--brand-glow); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 34px rgba(99,102,241,0.45); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn-ghost:hover { color: var(--text-1); background: var(--surface-2); }
.btn-sm { padding: 7px 11px; font-size: 12.5px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--red-dim); border-color: rgba(239,74,74,0.3); color: #ff9a9a; }
.btn-danger:hover { background: rgba(239,74,74,0.22); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: all 0.18s var(--ease);
}
.icon-btn:hover { color: var(--text-1); background: var(--surface-3); }
.icon-btn svg { width: 18px; height: 18px; }

/* ============================ Inputs ============================ */
.input, .select {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  background: var(--surface-1); border: 1px solid var(--border-2); color: var(--text-1);
  font-family: var(--sans); font-size: 14px; outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.input::placeholder { color: var(--text-3); }
.input:focus, .select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.input-sm { padding: 7px 10px; font-size: 13px; }
.input.mini { width: 82px; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 13.5px; color: var(--text-1); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 40px; height: 23px; border-radius: 20px; background: var(--surface-hi); border: 1px solid var(--border-2); transition: all 0.22s var(--ease); flex: none; }
.switch .track::after { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: all 0.22s var(--ease); box-shadow: var(--shadow-1); }
.switch input:checked + .track { background: var(--brand-grad); border-color: transparent; }
.switch input:checked + .track::after { left: 20px; }

/* Segmented control */
.segmented { display: inline-flex; padding: 4px; gap: 3px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 11px; }
.segmented button { border: none; background: transparent; color: var(--text-2); padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.18s var(--ease); font-family: var(--sans); }
.segmented button:hover { color: var(--text-1); }
.segmented button.active { background: var(--brand-grad); color: #fff; box-shadow: var(--brand-glow); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; transition: all 0.16s var(--ease);
}
.chip:hover { color: var(--text-1); border-color: var(--border-2); }
.chip.active { background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(139,92,246,0.16)); color: #fff; border-color: rgba(139,92,246,0.4); }
.chip.excluded { text-decoration: line-through; opacity: 0.5; }

/* ============================ Pills & badges ============================ */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-green { background: var(--green-dim); color: #4be3a8; }
.pill-amber { background: var(--amber-dim); color: var(--amber); }
.pill-red   { background: var(--red-dim); color: #ff8a8a; }
.pill-neutral { background: var(--surface-hi); color: var(--text-2); }

.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.badge-F { background: rgba(99,102,241,0.2); color: #a5b4ff; }
.badge-C { background: rgba(34,211,238,0.16); color: #67e8f9; }
.badge-dash { background: var(--surface-hi); color: var(--text-3); }

.stage-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 8px; border-radius: 7px;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: default;
}
.stage-badge.stage2 { background: var(--green-dim); color: #4be3a8; }
.stage-badge.stage3 { background: var(--amber-dim); color: var(--amber); }
.stage-badge.stage4 { background: var(--red-dim); color: #ff8a8a; }
.stage-badge.stage1 { background: rgba(99,102,241,0.20); color: #a5b4ff; }

.updown { font-variant-numeric: tabular-nums; font-weight: 600; }
.updown.pos { color: var(--up); }
.updown.neg { color: var(--down); }

/* ============================ Tables ============================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  text-align: right; padding: 12px 14px; font-weight: 600; font-size: 12px;
  color: var(--text-2); white-space: nowrap; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
}
.table thead th.l, .table td.l { text-align: left; }
.table thead th.c, .table td.c { text-align: center; }
.table thead th:hover { color: var(--text-1); }
.table thead th .arrow { opacity: 0.5; font-size: 10px; margin-left: 3px; }
.table tbody td { padding: 11px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.04); font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background 0.12s; cursor: default; }
.table tbody tr:hover { background: rgba(255,255,255,0.03); }
.table tbody tr:last-child td { border-bottom: none; }
.rank-num { color: var(--text-3); font-size: 12px; }
.tick { font-weight: 700; color: var(--text-1); letter-spacing: -0.01em; }
.tick.inlist { color: #fff; }

/* ---- Ongoing Trades ---- */
.pos-summary { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-2); }
.pos-stat .ps-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; }
.pos-stat .ps-val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pos-stat .ps-val.pos { color: var(--up); } .pos-stat .ps-val.neg { color: var(--down); }
.pos-live td, .pos-live th { padding: 9px 12px; }
.pos-live .nowrap { white-space: nowrap; }
.pos-close-btn { padding: 3px 12px; font-size: 11px; font-weight: 700; color: var(--up);
  background: var(--green-dim); border: 1px solid rgba(22,199,132,0.35); border-radius: 7px; margin-right: 6px; }
.pos-close-btn:hover { background: rgba(22,199,132,0.22); border-color: var(--up); }
.pos-th { cursor: grab; user-select: none; }
.pos-th:hover { color: var(--text-1); }
.pos-th.dragging { opacity: .4; }
.pos-th.drop-target { box-shadow: inset 2px 0 0 var(--brand-2); color: var(--brand-2); }
/* ‘Now’ price + freshness stamp (live vs cached close) */
.now-cell { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.now-px { font-variant-numeric: tabular-nums; font-weight: 600; }
.fresh { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; margin-top: 1px; }
.px-fresh { display: inline-flex; align-items: center; gap: 5px; }
.fr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.fr-live { color: var(--up); }
.fr-live .fr-dot { background: var(--up); box-shadow: 0 0 6px var(--up); animation: frpulse 1.8s ease-in-out infinite; }
.fr-close { color: var(--text-3); }
.fr-close .fr-dot { background: var(--warn, #e0a33e); }
.fr-none { color: var(--text-3); }
@keyframes frpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* Ranked-watchlist: draggable/reorderable headers + the Columns show/hide menu */
.wl-th { cursor: grab; user-select: none; }
.wl-th.dragging { opacity: .4; }
.wl-th.drop-target { box-shadow: inset 2px 0 0 var(--brand-2); color: var(--brand-2); }
.wl-tools { display: flex; justify-content: flex-end; align-items: center; padding: 10px 12px 0; }
.wl-cols-wrap { position: relative; }
.wl-cols-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 200px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.wl-cols-menu.hidden { display: none; }
.wl-cols-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--text-3); padding: 2px 6px 8px; border-bottom: 1px solid var(--border-2); margin-bottom: 6px; }
.wl-cols-reset { background: none; border: none; color: var(--brand-2); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; }
.wl-cols-reset:hover { text-decoration: underline; }
.wl-cols-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.wl-cols-item:hover { background: var(--surface-2); }
.pos-row { cursor: pointer; }
.pos-row:hover { background: rgba(255,255,255,.03); }
.pos-row.open { background: rgba(90,120,255,.06); }
.pos-row .caret { color: var(--text-3); margin-right: 7px; font-size: 10px; }
.src-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--brand-2); background: rgba(139,92,246,.14); border-radius: 4px; padding: 1px 4px; margin-left: 6px; vertical-align: middle; }
.st-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st-badge.st-open { color: var(--text-2); background: rgba(255,255,255,.06); }
.st-badge.st-partial { color: #6fb0ff; background: rgba(57,135,229,.14); }
.st-badge.st-exit { color: var(--amber); background: var(--amber-dim); }
.st-badge.st-sl { color: var(--down); background: rgba(217,89,38,.14); }
.alert-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.alert-pill.ap-warn { color: var(--down); background: rgba(217,89,38,.14); }
.alert-pill.ap-exit { color: var(--amber); background: var(--amber-dim); }
.alert-pill.ap-tgt { color: var(--up); background: var(--green-dim); }
.alert-pill.ap-info { color: var(--text-2); background: rgba(255,255,255,.05); }
.pos-detail-row > td { background: rgba(0,0,0,.18); padding: 0 !important; }
.pos-detail { padding: 14px 18px 16px; }
.pd-size { margin-bottom: 12px; }
.pd-timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; }
.pd-ev { display: flex; gap: 12px; padding: 6px 0 6px 4px; position: relative; }
.pd-ev .pd-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 3px; background: var(--text-3); box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.pd-ev:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -6px; width: 2px; background: var(--border-2); }
.pd-entry .pd-dot { background: var(--text-1); }
.pd-partial .pd-dot { background: var(--up); }
.pd-runner_exit .pd-dot { background: var(--amber); }
.pd-sl .pd-dot { background: var(--down); }
.pd-close .pd-dot { background: var(--brand-2); }
.pd-now .pd-dot { background: #6fb0ff; box-shadow: 0 0 8px #6fb0ff; }
.pd-ev-note { font-size: 12.5px; color: var(--text-1); font-weight: 500; }
.pd-pnl { padding-top: 10px; border-top: 1px solid var(--border-2); font-size: 13px; }
/* annotated trade chart */
.pd-chart { margin-bottom: 14px; }
.trade-svg { width: 100%; height: auto; display: block; }
.trade-svg .tl-close { fill: none; stroke: var(--text-2); stroke-width: 1.6; }
.trade-svg .tl-ma { fill: none; stroke: var(--amber); stroke-width: 1.3; stroke-dasharray: 4 3; opacity: .85; }
.trade-svg .tl-ref { stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.trade-svg .tl-ref.entry { stroke: var(--text-1); }
.trade-svg .tl-ref.sl { stroke: var(--down); }
.trade-svg .tl-ref.tp { stroke: var(--up); }
.trade-svg .tl-reflabel { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trade-svg .tl-reflabel.entry { fill: var(--text-1); }
.trade-svg .tl-reflabel.sl { fill: var(--down); }
.trade-svg .tl-reflabel.tp { fill: var(--up); }
.trade-svg .ev-dot { stroke: var(--surface-1); stroke-width: 1.5; }
.trade-svg .ev-dot.ev-entry { fill: #fff; }
.trade-svg .ev-dot.ev-partial { fill: var(--up); }
.trade-svg .ev-dot.ev-exit { fill: var(--amber); }
.trade-svg .ev-dot.ev-sl { fill: var(--down); }
.trade-svg .ev-dot.ev-close { fill: var(--brand-2); }
.trade-svg .ev-dot.ev-now { fill: #6fb0ff; stroke: none; }
.trade-svg .ev-label { font-size: 10px; font-weight: 700; }
.trade-svg .ev-label.ev-entry { fill: var(--text-1); }
.trade-svg .ev-label.ev-partial { fill: var(--up); }
.trade-svg .ev-label.ev-exit { fill: var(--amber); }
.trade-svg .ev-label.ev-sl { fill: var(--down); }
.trade-svg .ev-label.ev-close { fill: var(--brand-2); }
.trade-svg .tl-reflabel.cur { fill: #6fb0ff; }
/* candlesticks (green up / red down) */
.trade-svg .cs-wick { stroke-width: 1; }
.trade-svg .cs-body { stroke-width: 0; }
.trade-svg .cs-up { stroke: var(--up); }
.trade-svg .cs-up.cs-body { fill: var(--up); }
.trade-svg .cs-down { stroke: var(--down); }
.trade-svg .cs-down.cs-body { fill: var(--down); }
/* reward (entry→TP) and risk (entry→SL) zones, projected forward into the empty space */
.trade-svg .tz-reward { fill: var(--up); opacity: .10; }
.trade-svg .tz-risk { fill: var(--down); opacity: .10; }
.trade-svg .tz-entryx { stroke: var(--text-1); stroke-width: 1; stroke-dasharray: 2 3; opacity: .30; }
.trade-svg .ev-dot.ev-now { fill: #6fb0ff; stroke: #0b0e14; stroke-width: 1.5; }
/* bull-flag overlay: pole guide, consolidation box, resistance, breakout candle */
.trade-svg .fl-box { fill: #8b5cf6; opacity: .12; stroke: #8b5cf6; stroke-opacity: .45; stroke-width: 1; }
.trade-svg .fl-pole { stroke: #8b5cf6; stroke-width: 1.6; opacity: .7; }
.trade-svg .fl-res { stroke: #8b5cf6; stroke-width: 1.8; stroke-dasharray: 5 3; opacity: .9; }
.trade-svg .fl-res-lbl { fill: #a78bfa; font-size: 9.5px; font-weight: 700; }
.trade-svg .fl-brk-band { fill: #eab308; opacity: .12; }
.trade-svg .cs-brk { stroke: #facc15; stroke-width: 1.4; stroke-opacity: 1; }
.trade-svg .fl-brk-lbl { fill: #facc15; font-size: 9.5px; font-weight: 800; }
/* Cap the text columns so the numeric columns (Score, Stage, Trend…) always fit */
.table td.sector-cell { color: var(--text-2); font-size: 12.5px; text-align: left; max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
.pattern-cell { font-size: 15px; }

/* score cell mini bar */
.score-cell { display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end; }
.score-bar { width: 42px; height: 6px; border-radius: 3px; background: var(--surface-hi); overflow: hidden; }
.score-bar > i { display: block; height: 100%; border-radius: 3px; }

/* row drag affordance */
.table tbody tr.drag-src { opacity: 0.4; }
.drop-live { outline: 2px dashed var(--ring); outline-offset: -2px; border-radius: var(--radius); }

/* ============================ Watchlist layout ============================ */
.wl-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.listbox { display: flex; flex-direction: column; }
.listbox .lb-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.listbox .lb-head > span:first-child { display: inline-flex; color: var(--brand-2); }
.listbox .lb-head svg { width: 17px; height: 17px; flex: none; }
.listbox .lb-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.listbox .lb-head .count { margin-left: auto; font-size: 12px; color: var(--text-3); }
.lb-items { padding: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; min-height: 60px; }
.lb-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px;
  background: var(--surface-1); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600;
  cursor: grab; transition: all 0.15s var(--ease);
}
.lb-item:hover { border-color: var(--border-2); background: var(--surface-2); }
.lb-item .star { color: var(--amber); cursor: pointer; }
.lb-item .lb-sym { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.lb-item .lb-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; flex: none; }
.lb-item .rm { color: var(--text-3); cursor: pointer; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; }
.lb-item .rm.mv:hover { color: var(--brand-2); background: var(--surface-3); }
.lb-item .rm.del:hover { color: var(--down); background: var(--red-dim); }
.lb-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.lb-add { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }

/* ============================ Screener ============================ */
.screener-form { display: flex; flex-direction: column; gap: 16px; }
.criteria { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.criterion { display: flex; align-items: center; gap: 9px; }
.filters-note { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.filters-note b { color: var(--text-1); font-weight: 600; }

.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tik-card {
  padding: 14px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(28,34,48,0.5), rgba(16,20,29,0.6));
  border: 1px solid var(--border); transition: all 0.2s var(--ease); cursor: pointer;
}
.tik-card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--shadow-2); }
.tik-card .row { display: flex; align-items: center; justify-content: space-between; }
.tik-sym { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.tik-badge { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.tik-badge.ok { background: var(--green-dim); color: var(--up); }
.tik-badge.no { background: var(--red-dim); color: var(--down); }
.tik-spark { margin: 10px 0 8px; height: 46px; }
.tik-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }

/* ============================ Progress ============================ */
.progress { height: 8px; border-radius: 6px; background: var(--surface-hi); overflow: hidden; position: relative; }
.progress > i { display: block; height: 100%; background: var(--brand-grad); border-radius: 6px; transition: width 0.3s var(--ease); box-shadow: 0 0 12px rgba(99,102,241,0.5); }
.progress.indet > i { width: 35% !important; animation: indet 1.1s infinite var(--ease); }
@keyframes indet { 0% { margin-left: -35% } 100% { margin-left: 100% } }
.progress-row { display: flex; align-items: center; gap: 12px; }
.progress-row .lbl { font-size: 12.5px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================ Charts ============================ */
.chart-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chart-host { width: 100%; height: 560px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface-1); position: relative; }
.chart-legend { position: absolute; left: 14px; top: 12px; z-index: 3; font-size: 13px; font-weight: 600; pointer-events: none; }
.chart-legend .lg-sym { font-size: 15px; font-weight: 800; }
.chart-legend .lg-row { color: var(--text-2); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text-3); }

/* ============================ Tooltip (breakdown) ============================ */
.tooltip {
  position: fixed; z-index: 100; max-width: 320px; pointer-events: none;
  background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: var(--shadow-3); padding: 14px; font-size: 12.5px; opacity: 0;
  transform: translateY(4px); transition: opacity 0.12s, transform 0.12s;
}
.tooltip.show { opacity: 1; transform: none; }
.tt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tt-head .s { font-weight: 800; font-size: 14px; }
.tt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--text-2); }
.tt-row .v { color: var(--text-1); font-variant-numeric: tabular-nums; }
.tt-bar { height: 5px; border-radius: 3px; background: var(--surface-hi); margin-top: 4px; overflow: hidden; }
.tt-bar > i { display: block; height: 100%; background: var(--brand-grad); }
.tt-sep { height: 1px; background: var(--border); margin: 9px 0; }
.tt-total { display: flex; justify-content: space-between; font-weight: 700; color: var(--text-1); }

/* ===================== Tradeable setup (badge, row, tooltip chart) ===================== */
/* Setup badge in the ranked table */
.trade-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; line-height: 1;
}
.trade-badge .ts { font-weight: 600; font-size: 9px; text-transform: uppercase; opacity: 0.75; letter-spacing: 0.04em; }
.trade-badge.on { background: var(--green-dim); color: var(--up); box-shadow: inset 0 0 0 1px rgba(22,199,132,0.4); }
.trade-badge.dim { background: rgba(139,92,246,0.12); color: #b9a5f6; box-shadow: inset 0 0 0 1px rgba(139,92,246,0.3); }
.trade-badge .warn20 { color: var(--amber); font-weight: 900; margin-left: 1px; }
td .muted.xs { font-size: 11px; color: var(--text-3); }

/* Action badge (Enter now / Forming / Watch) — the trade-likelihood tier.
   Fixed-width badge slot + fixed chips slot so chips line up across every row. */
.act-wrap { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start; }
.act-sigs { display: inline-flex; align-items: center; gap: 4px; min-height: 16px; }
.act-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 84px; box-sizing: border-box; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; line-height: 1;
}
.act-badge.none { background: transparent; }
.act-badge.enter { background: var(--green-dim); color: var(--up); box-shadow: inset 0 0 0 1px rgba(22,199,132,0.5); }
.act-badge.forming { background: rgba(57,135,229,0.14); color: #6fb0ff; box-shadow: inset 0 0 0 1px rgba(57,135,229,0.4); }
.act-badge.watch { background: rgba(255,255,255,0.05); color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.act-badge .warn20 { color: var(--amber); font-weight: 900; margin-left: 1px; }
.act-wrap .sig { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.act-wrap .sig.ok { color: var(--up); background: var(--green-dim); }
.act-wrap .sig.weak { color: var(--text-3); background: rgba(255,255,255,0.05); }
.setup-chip.form .sc-dot { background: #6fb0ff; }
.setup-chip.on .sc-dot { background: var(--up); }

/* Market-regime banner */
.wl-market { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px;
  margin-bottom: 14px; font-size: 12.5px; color: var(--text-2); }
.wl-market b { color: var(--text-1); }
.wl-market .wl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wl-market.on { background: var(--green-dim); box-shadow: inset 0 0 0 1px rgba(22,199,132,0.25); }
.wl-market.on .wl-dot { background: var(--up); box-shadow: 0 0 8px var(--up); }
.wl-market.off { background: var(--amber-dim); box-shadow: inset 0 0 0 1px rgba(201,133,0,0.3); }
.wl-market.off .wl-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* "Why not tradeable" reason column */
.table td.reason-cell { white-space: normal; text-align: left; max-width: 200px; vertical-align: middle; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.reason-tag {
  font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--amber);
  background: var(--amber-dim); border: 1px solid rgba(245,181,68,0.25);
  border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.reason-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--up); }
.reason-ok .rc-ico { display: inline-flex; }
.reason-ok .rc-ico svg { width: 13px; height: 13px; }

/* Row tint for tradeable names */
tr.wl-trade > td { background: linear-gradient(90deg, rgba(22,199,132,0.10), rgba(22,199,132,0.02) 60%, transparent); }
tr.wl-trade:hover > td { background: linear-gradient(90deg, rgba(22,199,132,0.16), rgba(22,199,132,0.05) 60%, transparent); }
tr.wl-trade > td:first-child { box-shadow: inset 3px 0 0 var(--up); }

/* "Tradeable only" toggle */
.btn.btn-trade-on { background: var(--green-dim); border-color: rgba(22,199,132,0.5); color: var(--up); }
.btn.btn-trade-on:hover { background: rgba(22,199,132,0.2); }

/* Tooltip chart variant */
.tooltip-chart { max-width: 372px; width: 372px; padding: 13px; }
.tt-state { font-size: 11.5px; margin: -4px 0 8px; }
.tt-flagstate { font-weight: 700; }
.tt-flagstate.forming { color: #b9a5f6; }
.tt-flagstate.broke { color: var(--up); }
.tt-flagstate.old { color: var(--text-3); }
.tt-flagstate.none { color: var(--text-3); font-weight: 600; }
.tt-flagmeta { color: var(--text-3); }
.tt-nottrade { font-size: 10.5px; font-weight: 700; color: var(--text-3); padding: 2px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-2); }
.tt-chart {
  background: rgba(9,12,20,0.55); border: 1px solid var(--border); border-radius: 9px;
  padding: 2px 3px; overflow: hidden;
}
.tt-chart svg { display: block; }
.tt-chart-load { color: var(--text-3); font-size: 12px; padding: 26px 0; text-align: center; }
.tt-legend { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 7px 1px 2px; font-size: 10px; color: var(--text-3); }
.tt-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
.tt-legend .lg-flag { background: #8b5cf6; }
.tt-legend .lg-brk { background: #e2e8f0; border-radius: 50%; }
.tt-legend .lg-e { background: #22c55e; }
.tt-legend .lg-s { background: #ef4444; }
.tt-legend .lg-t { background: #3b82f6; }
.tt-legend .lg-ma { background: #eab308; }
.tt-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 9px 0 2px; }
.tt-levels .lvl {
  display: flex; flex-direction: column; gap: 1px; padding: 5px 6px; border-radius: 7px;
  background: var(--surface-hi); text-align: center;
}
.tt-levels .lvl span { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; }
.tt-levels .lvl b { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-1); }
.tt-levels .lvl.e { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.4); }
.tt-levels .lvl.e b { color: #34d07d; }
.tt-levels .lvl.s { box-shadow: inset 0 0 0 1px rgba(239,68,68,0.4); }
.tt-levels .lvl.s b { color: #f26d6d; }
.tt-levels .lvl.t { box-shadow: inset 0 0 0 1px rgba(59,130,246,0.4); }
.tt-levels .lvl.t b { color: #5b9bf6; }
.tt-red20 { margin-top: 8px; font-size: 11px; color: var(--amber); background: var(--amber-dim); border-radius: 7px; padding: 6px 8px; line-height: 1.35; }

/* ===================== Last-updated strip + Setup filter ===================== */
.updated-bar { display: flex; align-items: center; gap: 8px; margin: 2px 2px 14px; font-size: 12.5px; flex-wrap: wrap; }
.updated-bar .ub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); flex: none; }
.updated-bar .ub-dot.off { background: var(--text-3); box-shadow: none; }
.updated-bar .ub-k { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 700; }
.updated-bar .ub-v { color: var(--text-1); font-weight: 600; }
.updated-bar .ub-meta { color: var(--text-3); }

.filter-sep { height: 1px; background: var(--border); margin: 14px 0; }
.linklike { background: none; border: none; padding: 0; cursor: pointer; color: var(--brand-2); font-size: 11px; font-weight: 700; }
.linklike:hover { color: var(--brand-3); text-decoration: underline; }

.setup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-2);
  transition: opacity 0.12s, border-color 0.12s, background 0.12s;
}
.setup-chip .sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.setup-chip .sc-n { font-size: 10.5px; font-weight: 800; color: var(--text-2); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; }
.setup-chip.on .sc-dot { background: var(--up); }
.setup-chip.dim .sc-dot { background: #8b5cf6; }
.setup-chip.old .sc-dot { background: var(--text-2); }
.setup-chip.none .sc-dot { background: var(--text-3); }
.setup-chip:not(.sel) { opacity: 0.4; }
.setup-chip:not(.sel):hover { opacity: 0.7; }
.setup-chip.sel { color: var(--text-1); }
.setup-chip.sel.on { border-color: rgba(22,199,132,0.55); background: var(--green-dim); }
.setup-chip.sel.on .sc-n { color: var(--up); }
.setup-chip.sel.dim { border-color: rgba(139,92,246,0.5); background: rgba(139,92,246,0.14); }
.setup-chip.sel.dim .sc-n { color: #b9a5f6; }
.setup-chip.sel.old, .setup-chip.sel.none { border-color: var(--border-2); background: var(--surface-3); }

/* Info "i" popover explaining the setup chips */
.info-ico { position: relative; display: inline-flex; align-items: center; margin-left: 7px; cursor: help; color: var(--text-3); outline: none; }
.info-ico:hover, .info-ico:focus { color: var(--brand-2); }
.info-ico .info-glyph { display: inline-flex; }
.info-ico .info-glyph svg { width: 15px; height: 15px; }
.info-panel {
  position: absolute; top: calc(100% + 8px); left: -4px; z-index: 60; width: 322px;
  background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: var(--shadow-3); padding: 12px 13px; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
}
.info-ico:hover .info-panel, .info-ico:focus .info-panel, .info-ico:focus-within .info-panel {
  opacity: 1; visibility: visible; transform: none;
}
.info-panel .info-title { font-size: 11px; font-weight: 800; color: var(--text-1); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.info-panel .info-row { display: flex; gap: 9px; padding: 6px 0; align-items: flex-start; }
.info-panel .info-row + .info-row { border-top: 1px solid var(--border); }
.info-panel .info-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--text-3); }
.info-panel .info-dot.on { background: var(--up); }
.info-panel .info-dot.dim { background: #8b5cf6; }
.info-panel .info-dot.old { background: var(--text-2); }
.info-panel .info-dot.none { background: var(--text-3); }
.info-panel .info-lbl { font-size: 12px; font-weight: 700; color: var(--text-1); }
.info-panel .info-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.4; margin-top: 1px; }

/* ===================== Backtest page ===================== */
.bt-h { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.bt-h > span:first-child { color:var(--brand-2); display:inline-flex; }
.bt-h svg { width:18px; height:18px; }
.bt-h h3 { margin:0; font-size:14px; font-weight:700; }
.bt-data-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bt-fetch-prog { display:block; margin-top:10px; }
.bt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bt-adv { margin-top:12px; }
.bt-field { display:flex; flex-direction:column; gap:5px; position:relative; }
.bt-field > span:first-child { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.bt-num { width:100%; padding-right:30px; }
.bt-suf { position:absolute; right:11px; bottom:9px; color:var(--text-3); font-size:12px; pointer-events:none; font-weight:600; }
.bt-adv-toggle { display:block; background:none; border:none; color:var(--brand-2); font-weight:700; font-size:12.5px; cursor:pointer; margin-top:16px; padding:0; text-align:left; }
.bt-run { display:flex; align-items:center; }
.btn.on { color:var(--text-1); background:var(--surface-3); border-color:var(--border-2); }
.bt-results > .card { margin-top:16px; }
.bt-meta { display:flex; flex-wrap:wrap; gap:8px 10px; margin:20px 0 4px; }
.bt-mchip { display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:5px 11px; font-size:12px; }
.bt-mchip .k { color:var(--text-3); text-transform:uppercase; font-size:10px; letter-spacing:.03em; font-weight:700; }
.bt-mchip b { color:var(--text-1); font-weight:700; }
.bt-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:-1px; }
.bt-kpi td, .bt-kpi th { padding:11px 12px; }
.bt-kpi .bt-big { font-weight:800; font-size:15px; }
.bt-results .pos { color:var(--up); } .bt-results .neg { color:var(--down); }
tr.bt-best > td { background:rgba(22,199,132,.06); }
tr.bt-best > td:first-child { box-shadow:inset 3px 0 0 var(--up); }
.bt-tools { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.bt-chart svg { display:block; width:100%; height:auto; }
.bt-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12px; color:var(--text-2); }
.bt-li { display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.bt-li.off { opacity:.35; }
.bt-sw { width:12px; height:3px; border-radius:2px; }
.bt-tt { position:fixed; pointer-events:none; background:var(--surface-3); border:1px solid var(--border-2);
  border-radius:10px; padding:9px 11px; font-size:12px; box-shadow:var(--shadow-3); opacity:0; transition:opacity .1s;
  z-index:120; min-width:150px; }
.bt-tt .d { color:var(--text-3); font-size:11px; margin-bottom:5px; }
.bt-tt .r { display:flex; justify-content:space-between; gap:14px; padding:1px 0; }
.bt-tt .r b { font-variant-numeric:tabular-nums; }
.bt-tt .bt-dot { width:8px; height:8px; }
.bt-seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-bottom:2px; }
.bt-seg button { background:none; border:none; color:var(--text-2); padding:6px 12px; font-size:12px; cursor:pointer; font-weight:600; }
.bt-seg button.on { background:var(--surface-3); color:var(--text-1); }
.bt-seg-n { margin-left:7px; font-size:10.5px; font-weight:800; background:rgba(255,255,255,.08); color:var(--text-2); border-radius:999px; padding:1px 6px; }
.bt-seg button.on .bt-seg-n { background:var(--brand-2); color:#fff; }
.bt-gate-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 2px; }
.bt-gate-note { color:var(--amber); }
select.bt-sel { cursor:pointer; }
.bt-setup-desc { margin-top:6px; line-height:1.4; }
.bt-checkrow { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:13px; color:var(--text-1); cursor:pointer; }
.bt-check { width:16px; height:16px; accent-color:var(--brand-2); cursor:pointer; flex:none; }
.bt-field select.bt-sel { width:100%; }
.bt-apply { border-color:var(--brand-2); color:var(--brand-2); font-weight:600; }
.bt-apply:hover { background:var(--brand-2); color:#fff; }
.bt-custom-win { display:flex; align-items:flex-end; gap:14px; margin-top:12px; flex-wrap:wrap; }
.bt-custom-win .bt-field { min-width:120px; }
.bt-custom-win .bt-winnote { padding-bottom:8px; }
.bt-sweep { margin-top:16px; }
.bt-sweeptbl th, .bt-sweeptbl td { padding:10px 12px; }
.bt-sweeptbl .sw-label { font-weight:600; }
.bt-sweeptbl tr.sw-base > td { background:rgba(255,255,255,.03); }
.sw-win { font-weight:700; font-variant-numeric:tabular-nums; }
.sw-win.pos { color:var(--up); } .sw-win.neg { color:var(--down); }
.sw-sub { font-size:10.5px; color:var(--text-3); margin-top:2px; font-variant-numeric:tabular-nums; }
.sw-verdict { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.sw-verdict.ok { color:var(--up); background:var(--green-dim); }
.sw-verdict.bad { color:var(--text-3); background:rgba(255,255,255,.06); }
.sw-verdict.mix { color:var(--amber); background:var(--amber-dim); }
.sw-verdict.na { color:var(--text-3); background:rgba(255,255,255,.04); font-weight:600; }
/* metric toggle */
.sw-controls { display:flex; align-items:center; gap:10px; margin-top:2px; }
.sw-metric-seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border-2); border-radius:8px; padding:2px; gap:2px; }
.sw-mbtn { font-size:12px; font-weight:600; color:var(--text-3); background:transparent; border:0; border-radius:6px; padding:5px 12px; cursor:pointer; }
.sw-mbtn:hover { color:var(--text-1); }
.sw-mbtn.on { color:#fff; background:var(--brand-2); }
/* per-window headers */
.sw-wlabel { font-weight:700; font-size:12px; color:var(--text-1); text-transform:none; letter-spacing:0; }
.sw-wrange { font-size:9.5px; color:var(--text-3); margin-top:1px; font-weight:500; font-variant-numeric:tabular-nums; }
.bt-sweeptbl th.sw-indiv, .bt-sweeptbl td.sw-indiv { background:rgba(90,120,255,.055); }
.bt-sweeptbl th.sw-indiv { box-shadow:inset 0 2px 0 var(--brand-2); }
.bt-sw-dash { background:transparent !important; border-top:2px dashed #aeb6c7; border-radius:0; height:0; align-self:center; }
.bt-dot-dash { box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
tr.bt-bench-row > td { border-top:1px solid var(--border-2); background:rgba(174,182,199,.05); }
.bt-bench-tag { margin-left:8px; font-size:10px; font-weight:700; color:var(--text-3); background:rgba(255,255,255,.06); border-radius:999px; padding:1px 7px; }
.bt-tl td, .bt-tl th { padding:8px 9px; font-size:12.5px; }
.bt-tag { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; }
.bt-tag.tp { color:var(--up); background:var(--green-dim); }
.bt-tag.sl { color:var(--down); background:var(--red-dim); }
.bt-tag.ma { color:#8fb7ff; background:rgba(57,135,229,.16); }
.bt-tag.op { color:var(--text-2); background:rgba(255,255,255,.06); }
.bt-caveat ul { margin:0; padding-left:18px; }
.bt-caveat li { margin:7px 0; color:var(--text-2); font-size:13px; line-height:1.45; }
.bt-caveat b { color:var(--text-1); }
@media (max-width:820px){ .bt-grid { grid-template-columns:repeat(2,1fr); } }

/* ============================ Toasts ============================ */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  padding: 13px 16px; border-radius: 12px; background: var(--surface-3);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-3); color: var(--text-1);
  font-size: 13.5px; display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 360px;
  animation: toastIn 0.3s var(--ease);
}
.toast .ic { width: 18px; height: 18px; flex: none; }
.toast.ok { border-left: 3px solid var(--up); }
.toast.err { border-left: 3px solid var(--down); }
.toast.info { border-left: 3px solid var(--brand-2); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: none } }

/* ============================ Login ============================ */
.login-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 360px; padding: 34px 30px; text-align: center; }
.login-card h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; }
.login-card form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.login-error { color: #ff8a8a; font-size: 13px; min-height: 18px; }

/* ============================ Misc ============================ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 14px; text-align: center; color: var(--text-3); }
.empty-state svg { width: 48px; height: 48px; opacity: 0.4; }
.empty-state .t { font-size: 16px; font-weight: 600; color: var(--text-2); }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.hstack { display: flex; align-items: center; gap: 10px; }
.vstack { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1; }
.sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ============================ Responsive ============================ */
@media (max-width: 1080px) {
  .wl-grid { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 260px; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
    transform: translateX(-105%); transition: transform 0.3s var(--ease);
  }
  .app.nav-open .sidebar { transform: none; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 39; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .app.nav-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .sidebar .sidebar-close { display: inline-flex; }
  .topbar .menu-btn { display: inline-flex; }
  .cols-3 { grid-template-columns: 1fr; }
  .view { padding: 16px; }
  .topbar { padding: 0 16px; }
}
@media (max-width: 560px) {
  .cols-4, .cols-2 { grid-template-columns: 1fr; }
  .chart-host { height: 420px; }
  .stat-value { font-size: 26px; }
}