/* ── components.css ──────────────────────────────────────────────────────
 * App shell, navigation, cards, chart frame. Vanilla CSS — no @layer,
 * no preprocessors. Selectors are flat and scoped with the .wot- prefix
 * so the SPA can't bleed into anything else if embedded.
 * ───────────────────────────────────────────────────────────────────── */

/* ── App shell ─────────────────────────────────────────────────────────── */

.wot-app {
  display: grid;
  grid-template-rows: var(--wot-h-header) 1fr;
  min-height: 100vh;
}

.wot-shell-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--wot-border);
  background: rgba(10,10,10,0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  position: sticky; top: 0; z-index: 50;
}

.wot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wot-brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--wot-grad);
  box-shadow: var(--wot-grad-glow);
  position: relative;
}
.wot-brand-mark::after {
  content: '';
  position: absolute; inset: 6px;
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.4) 40% 46%, transparent 46% 60%, rgba(255,255,255,0.4) 60% 66%, transparent 66%);
  border-radius: 4px;
}
.wot-brand-name {
  display: grid;
  line-height: 1;
}
.wot-brand-name strong {
  font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
  background: var(--wot-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wot-brand-name em {
  font-size: 10px; font-style: normal; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wot-text-2); margin-top: 3px;
}
/* Top row of the brand lockup — "WOT" + the alpha chip on the same
   baseline. The chip MUST sit immediately to the right of "WOT" (not
   to the right of the whole two-line block), otherwise it visually
   attaches to "Weekly Options Trader" instead. */
.wot-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
/* "alpha" chip next to the WOT wordmark — visually identical to the
   one in the landing-page footer (.wot-lp-foot-pill) so the work-in-
   progress signal stays consistent everywhere in the app. */
.wot-brand-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 107, 31, 0.12); color: #ffd9a8;
  border: 1px solid rgba(255, 107, 31, 0.30);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
  line-height: 1;
  /* Lift slightly so the chip optically centers on the cap-height of
     "WOT" rather than its full glyph box. */
  transform: translateY(-0.5px);
}

.wot-nav {
  display: flex; gap: 4px;
  justify-self: center;
  background: var(--wot-bg-1);
  padding: 4px;
  border-radius: var(--wot-r-pill);
  border: 1px solid var(--wot-border);
}
.wot-nav a {
  padding: 7px 14px;
  border-radius: var(--wot-r-pill);
  font-size: 12px; font-weight: 600;
  color: var(--wot-text-1);
  letter-spacing: 0.02em;
  transition: color 0.15s, background 0.15s;
}
.wot-nav a:hover { color: var(--wot-text-0); background: var(--wot-bg-2); }
.wot-nav a.is-active {
  background: var(--wot-grad);
  color: #fff;
  box-shadow: var(--wot-grad-glow);
}

.wot-shell-meta {
  font-size: 11px; color: var(--wot-text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wot-view {
  padding: 24px;
  outline: none;
  min-height: calc(100vh - var(--wot-h-header));
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.wot-toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--wot-bg-3);
  border: 1px solid var(--wot-border-strong);
  border-radius: var(--wot-r-pill);
  padding: 10px 18px;
  font-size: 12px; font-weight: 600;
  color: var(--wot-text-0);
  box-shadow: var(--wot-shadow-pop);
  opacity: 0; pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 100;
  max-width: 80vw;
}
.wot-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.wot-toast.is-error { border-color: var(--wot-bear); color: #ffd9d9; }

/* ── Page heading ──────────────────────────────────────────────────────── */
.wot-page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.wot-page-title {
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--wot-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wot-page-sub {
  font-size: 12px; color: var(--wot-text-2);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.wot-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.wot-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--wot-r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.1s ease, background 0.15s, border-color 0.15s;
  border: 1px solid var(--wot-border-strong);
  background: var(--wot-bg-2);
  color: var(--wot-text-1);
}
.wot-btn:hover { color: var(--wot-text-0); background: var(--wot-bg-3); border-color: rgba(255,255,255,0.22); }
.wot-btn:active { transform: translateY(1px); }
.wot-btn.is-primary {
  background: var(--wot-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--wot-grad-glow);
}
.wot-btn.is-primary:hover { color: #fff; background: var(--wot-grad); filter: brightness(1.08); }
.wot-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.wot-btn-ghost { padding: 6px 10px; font-size: 11px; }

/* ── Inputs ────────────────────────────────────────────────────────────── */
.wot-input {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 10px 14px;
  color: var(--wot-text-0);
  font-size: 14px;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.wot-input:focus { border-color: var(--wot-grad-end); outline: none; background: var(--wot-bg-2); }

/* ── Empty state ───────────────────────────────────────────────────────── */
.wot-empty {
  display: grid; place-items: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--wot-text-2);
  border: 1px dashed var(--wot-border-strong);
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-1);
}
.wot-empty h3 {
  font-size: 18px; font-weight: 700; color: var(--wot-text-1);
  margin-bottom: 6px; letter-spacing: -0.01em;
}
.wot-empty p { font-size: 12px; max-width: 320px; line-height: 1.6; }

/* ── Section card (generic dark panel) ─────────────────────────────────── */
.wot-panel {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 18px 20px;
}
.wot-panel-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin-bottom: 14px;
}

/* ── Card grid (trade-card host) ───────────────────────────────────────── */
.wot-card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Trade card ────────────────────────────────────────────────────────── */
.wot-tcard {
  position: relative;
  background: linear-gradient(180deg, var(--wot-bg-2), var(--wot-bg-1) 30%);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 18px;
  display: grid;
  gap: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s, box-shadow 0.2s;
}
.wot-tcard::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent, var(--wot-grad-end));
}
/* Directional TOP border: thick green for CALL, thick red for PUT.
   Same thickness on both. The rest of the card border stays neutral —
   the top edge alone carries the directional signal. */
.wot-tcard.is-call::before { background: var(--wot-bull, #22c55e); }
.wot-tcard.is-put::before  { background: var(--wot-bear, #ef4444); }
.wot-tcard:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: var(--wot-shadow-card);
}

/* Pinned-to-today cards get a subtle violet "PIN" badge and tinted
   border so the user can tell which cards are their curated picks vs.
   the auto-generated ones. */
.wot-tcard.is-pinned { box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.35) inset, 0 4px 14px rgba(0,0,0,0.5); }
.wot-tcard-pin-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--wot-r-pill, 999px);
  background: rgba(124, 92, 255, 0.18);
  color: #b9a8ff;
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  border: 1px solid rgba(124, 92, 255, 0.35);
}

/* Duplicate-to-today button — same ghost style as the chart icon. */
.wot-tcard-dupe .wot-icon svg,
.wot-tcard-unpin .wot-icon svg { width: 13px; height: 13px; }
.wot-tcard-dupe { color: var(--wot-text-2); }
.wot-tcard-dupe:hover { color: var(--wot-grad-end); border-color: var(--wot-grad-end); }
.wot-tcard-unpin:hover { color: var(--wot-bear); border-color: var(--wot-bear); }

.wot-tcard-head {
  display: flex; align-items: center; gap: 12px;
}
.wot-tcard-avatar {
  width: 34px; height: 34px;
  border-radius: var(--wot-r-sm);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800; color: #fff;
  background: var(--accent, var(--wot-grad));
  letter-spacing: -0.02em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.wot-tcard-sym {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--accent, var(--wot-text-0));
  font-variant-numeric: tabular-nums;
}

/* Confidence pill (high/med/low) — derived from the SR-cross-reference
   score the trade-plan + weekly-rec prompts emit. Hover surfaces the
   confluence summary so the user can see exactly which signals fired. */
.wot-tcard-conf {
  margin-left: auto;
  font-size: 10px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid currentColor;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.wot-tcard-conf.is-high { color: var(--wot-bull); background: rgba(34, 197, 94, 0.10); }
.wot-tcard-conf.is-med  { color: var(--wot-chop); background: rgba(245, 180, 0, 0.10); }
.wot-tcard-conf.is-low  { color: var(--wot-bear); background: rgba(239, 68, 68, 0.10); }

.wot-tcard-rule {
  height: 1px; background: var(--wot-border);
  margin: 0 -18px;
}

.wot-tcard-trigger {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wot-tcard-date {
  font-size: 12px; color: var(--wot-text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.wot-tcard-strike {
  font-size: 12px; font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.wot-tcard-strike.is-call { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.wot-tcard-strike.is-put  { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.wot-tcard-at {
  font-size: 11px; color: var(--wot-text-2);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.wot-tcard-price {
  font-size: 18px; font-weight: 800;
  color: var(--wot-text-0);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.wot-tcard-targets {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 18px;
  align-items: start;
}
.wot-tcard-targets ul { display: grid; gap: 4px; }
.wot-tcard-targets li {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--wot-target);
  font-weight: 600;
}
.wot-tcard-targets li .wot-icon { color: var(--wot-target); }
.wot-tcard-stop {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--wot-stop);
  font-weight: 600;
  align-self: start;
}
.wot-tcard-stop .wot-icon { color: var(--wot-stop); }
.wot-tcard-stop.is-empty { color: var(--wot-text-3); }

.wot-tcard-narrative {
  position: relative;
  max-height: 4.4em;
  overflow: hidden;
  font-size: 12px; color: var(--wot-text-1);
  line-height: 1.55;
}
.wot-tcard-narrative::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 18px;
  background: linear-gradient(transparent, var(--wot-bg-1));
}

.wot-tcard-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap;
}
.wot-tcard-foot .wot-pill:first-child { margin-right: auto; }
.wot-tcard-updated {
  font-size: 10px; color: var(--wot-text-3); letter-spacing: 0.02em;
  white-space: nowrap;
}
.wot-tcard-refresh, .wot-tcard-edit {
  padding: 4px 8px; font-size: 11px; line-height: 1;
}
.wot-tcard-refresh svg { width: 12px; height: 12px; }

/* ── Trade Plan Editor (components/trade-plan-editor.js) ───────────── */
.wot-tpe { display: grid; gap: 18px; }
.wot-tpe .tpe-section {
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 14px 16px;
}
.wot-tpe .tpe-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.10em; color: var(--wot-text-2);
  margin-bottom: 12px;
}
.wot-tpe .tpe-row { display: grid; gap: 12px; }
.wot-tpe .tpe-row.cols1 { grid-template-columns: 1fr; }
.wot-tpe .tpe-row.cols2 { grid-template-columns: 1fr 1fr; }
.wot-tpe .tpe-row.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.wot-tpe .tpe-fg { display: grid; gap: 5px; min-width: 0; }
.wot-tpe .tpe-fg label {
  font-size: 11px; color: var(--wot-text-2); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.wot-tpe .tpe-fg .wot-input[disabled] {
  opacity: 0.55; cursor: not-allowed;
}
.wot-tpe .tpe-opt { color: var(--wot-text-3); font-weight: 400; font-size: 10px; }
.wot-tpe .tpe-hint {
  margin-left: auto; font-size: 10px; color: var(--wot-text-3);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.wot-tpe .tpe-radio-row { display: flex; gap: 6px; }
.wot-tpe .tpe-radio {
  flex: 1; padding: 8px 10px; border-radius: var(--wot-r-sm);
  border: 1px solid var(--wot-border); background: transparent;
  color: var(--wot-text-2); font-weight: 600; font-size: 12px;
  cursor: pointer; transition: all 0.15s;
}
.wot-tpe .tpe-radio:hover { color: var(--wot-text-1); }
.wot-tpe .tpe-radio.is-call.is-on { background: rgba(34,197,94,0.18); border-color: var(--wot-bull); color: var(--wot-bull); }
.wot-tpe .tpe-radio.is-put.is-on  { background: rgba(239,68,68,0.18); border-color: var(--wot-bear); color: var(--wot-bear); }
.wot-tpe .tpe-foot-note {
  font-size: 11px; color: var(--wot-text-3); margin: 0; line-height: 1.5;
}
@media (max-width: 640px) {
  .wot-tpe .tpe-row.cols2,
  .wot-tpe .tpe-row.cols3 { grid-template-columns: 1fr; }
}
.wot-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--wot-r-pill);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff;
}
.wot-pill[data-status="active"]    { background: var(--wot-pill-active); }
.wot-pill[data-status="planned"]   { background: var(--wot-pill-planned); }
.wot-pill[data-status="triggered"] { background: var(--wot-pill-triggered); color: #1a1300; }
.wot-pill[data-status="filled"]    { background: var(--wot-pill-filled); }
.wot-pill[data-status="closed"]    { background: var(--wot-pill-closed); }
.wot-pill[data-status="missed"]    { background: var(--wot-pill-missed); color: var(--wot-text-2); }
.wot-pill[data-status="invalid"]   { background: var(--wot-pill-invalid); }
.wot-pill[data-status="no-rec"]    { background: var(--wot-chop); color: #1a1300; }

.wot-tcard-week {
  font-size: 11px; color: var(--wot-text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.wot-tcard-act {
  padding: 6px 12px; font-size: 10px;
}

/* "Add Trade Plan" empty card */
.wot-tcard.is-empty-state {
  display: grid;
  align-content: center; justify-items: center; gap: 10px;
  min-height: 280px;
  border-style: dashed;
  background: transparent;
  color: var(--wot-text-2);
  cursor: pointer;
}
.wot-tcard.is-empty-state::before { content: none; }
.wot-tcard.is-empty-state:hover {
  border-color: var(--wot-grad-end);
  color: var(--wot-text-0);
  transform: none;
  box-shadow: none;
}
.wot-tcard.is-empty-state .plus {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 800;
  border: 1px dashed currentColor;
}

/* ── Chart frame ───────────────────────────────────────────────────────── */
.wot-chart-frame {
  background:
    radial-gradient(900px 240px at 50% -10%, rgba(255, 107, 31, 0.04), transparent 70%),
    var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  overflow: hidden;
}
.wot-chart-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wot-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.wot-chart-tabs {
  display: flex; gap: 2px;
  background: var(--wot-bg-2);
  padding: 3px;
  border-radius: var(--wot-r-pill);
  border: 1px solid var(--wot-border);
}
.wot-chart-tabs button {
  padding: 5px 12px;
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wot-text-2);
  transition: color 0.15s, background 0.15s;
}
.wot-chart-tabs button:hover { color: var(--wot-text-1); }
.wot-chart-tabs button.is-active {
  background: var(--wot-grad);
  color: #fff;
  box-shadow: var(--wot-grad-glow);
}

/* Left side of the chart toolbar — holds the timeframe + chart-mode tabs
   side-by-side without breaking the toolbar's 3-column grid. */
.wot-chart-leftgroup {
  display: flex; gap: 8px; align-items: center;
}

/* Chart-mode tabs (Normal / Inverted) reuse the .wot-chart-tabs pill
   shell but paint the active tab with a hot-pink ring instead of the
   brand gradient — so the user can tell at a glance which axis is
   flipped without confusing it with the timeframe selector. */
.wot-chart-modes button.is-active {
  background: var(--wot-bg-3);
  color: var(--wot-text-0);
  box-shadow: inset 0 0 0 1px var(--wot-grad-end);
}
.wot-chart-modes button[data-mode="inverted"].is-active {
  background: linear-gradient(135deg, rgba(255, 31, 143, 0.18), rgba(255, 107, 31, 0.18));
  color: #ff7fb8;
  box-shadow: inset 0 0 0 1px var(--wot-grad-end), 0 0 0 1px rgba(255, 31, 143, 0.25);
}

.wot-chart-ranges {
  display: flex; gap: 2px;
  background: var(--wot-bg-2);
  padding: 3px;
  border-radius: var(--wot-r-pill);
  border: 1px solid var(--wot-border);
  justify-self: center;
}
.wot-chart-ranges button {
  padding: 4px 10px;
  border-radius: var(--wot-r-pill);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wot-text-2);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, background 0.15s;
}
.wot-chart-ranges button:hover { color: var(--wot-text-1); background: var(--wot-bg-3); }
.wot-chart-ranges button.is-active {
  background: var(--wot-bg-3);
  color: var(--wot-text-0);
  box-shadow: inset 0 0 0 1px var(--wot-border-strong);
}

.wot-chart-toggles {
  display: flex; gap: 6px; align-items: center;
}
.wot-chart-toggles button {
  padding: 5px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wot-text-2);
  border-radius: var(--wot-r-pill);
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-2);
  transition: all 0.15s;
}
.wot-chart-toggles button:hover { color: var(--wot-text-1); border-color: var(--wot-border-strong); }
.wot-chart-toggles button.is-on {
  color: var(--wot-text-0);
  background: var(--wot-bg-3);
  border-color: var(--wot-grad-end);
  box-shadow: 0 0 0 1px rgba(255, 31, 143, 0.2);
}

.wot-chart-meta {
  font-size: 11px; color: var(--wot-text-2);
  font-variant-numeric: tabular-nums;
}
.wot-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.wot-chart-body {
  /* Fixed min-height so the chart, spinner, and error states all occupy
   * the same vertical space — no layout jump during reload, no visual
   * "duplication" feel when switching tabs or hitting Regenerate. */
  min-height: 520px;
  position: relative;
}
.wot-chart-empty {
  display: grid; place-items: center;
  min-height: 520px;
  color: var(--wot-text-2);
  font-size: 13px;
  text-align: center;
  padding: 60px 24px;
}

/* ── Regenerate progress bar (ticker view) ────────────────────────────── */
.wot-regen-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
}
.wot-regen-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  color: var(--wot-text-2);
  letter-spacing: 0.02em;
  padding: 6px 8px;
  border-radius: var(--wot-r-sm);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  min-width: 0;
}
.wot-regen-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wot-text-3);
  flex-shrink: 0;
}
.wot-regen-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wot-regen-step.is-pending .wot-regen-dot { background: var(--wot-text-3); }
.wot-regen-step.is-running .wot-regen-dot { background: var(--wot-chop); animation: wot-pulse 1s ease-in-out infinite; }
.wot-regen-step.is-running { color: var(--wot-text-0); border-color: var(--wot-chop); }
.wot-regen-step.is-ok      .wot-regen-dot { background: var(--wot-bull); box-shadow: 0 0 8px var(--wot-bull); }
.wot-regen-step.is-ok      { color: var(--wot-bull); border-color: rgba(34,197,94,0.3); }
.wot-regen-step.is-fail    .wot-regen-dot { background: var(--wot-bear); }
.wot-regen-step.is-fail    { color: var(--wot-bear); border-color: rgba(239,68,68,0.4); }

@media (max-width: 768px) {
  .wot-regen-bar { grid-template-columns: 1fr 1fr; }
}

/* ── Collapsible levels editor ───────────────────────────────────────── */
.wot-levels-details summary {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 4px 0;
}
.wot-levels-details summary::-webkit-details-marker { display: none; }
.wot-levels-details summary::before {
  content: '▸';
  display: inline-block;
  font-size: 10px;
  color: var(--wot-text-2);
  transition: transform 0.15s;
  width: 12px;
}
.wot-levels-details[open] summary::before { transform: rotate(90deg); }

/* Reset-zoom button — now lives in the toolbar's toggle group, BEFORE
   the Vol button. Inherits the toolbar button shape (.wot-chart-toggles
   button) and adds a pink accent so it stands out as "active state". */
.wot-chart-reset-toolbar {
  color: var(--wot-text-0) !important;
  background: rgba(255, 31, 143, 0.18) !important;
  border-color: var(--wot-grad-end) !important;
  box-shadow: 0 0 0 1px rgba(255, 31, 143, 0.25) !important;
}
.wot-chart-reset-toolbar:hover {
  background: rgba(255, 31, 143, 0.30) !important;
}

/* OHLC hover card */
.wot-chart-ohlc {
  position: absolute;
  background: rgba(16, 16, 22, 0.96);
  border: 1px solid var(--wot-border-strong);
  border-radius: var(--wot-r-sm);
  padding: 8px 10px;
  font-family: var(--wot-font-mono);
  font-size: 11px;
  color: var(--wot-text-1);
  pointer-events: none;
  box-shadow: var(--wot-shadow-pop);
  min-width: 168px;
  z-index: 10;
  backdrop-filter: blur(6px);
}
.wot-chart-ohlc .d {
  font-size: 10px;
  color: var(--wot-text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--wot-border);
}
.wot-chart-ohlc .row {
  display: grid;
  grid-template-columns: 12px 1fr 12px 1fr;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
}
.wot-chart-ohlc .k {
  font-size: 9px;
  color: var(--wot-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.wot-chart-ohlc .v {
  color: var(--wot-text-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wot-chart-ohlc .pct {
  grid-column: 3 / span 2;
  text-align: right;
  font-weight: 800;
}
.wot-chart-ohlc .pct.is-up   { color: var(--wot-bull); }
.wot-chart-ohlc .pct.is-down { color: var(--wot-bear); }

/* Level hover card — shows when the cursor is near a horizontal SR line.
   Compact, mouse-anchored, pointer-events:none so it never blocks the
   crosshair underneath. */
.wot-chart-level-card {
  position: absolute;
  background: rgba(16, 16, 22, 0.96);
  border: 1px solid var(--wot-border-strong);
  border-radius: var(--wot-r-sm);
  padding: 7px 10px;
  font-family: var(--wot-font-mono);
  pointer-events: none;
  box-shadow: var(--wot-shadow-pop);
  z-index: 11;
  backdrop-filter: blur(6px);
  min-width: 110px;
}
.wot-chart-level-card .lvc-price {
  font-size: 15px; font-weight: 800;
  color: var(--wot-text-0);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wot-chart-level-card .lvc-role {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-top: 3px;
}
.wot-chart-level-card .lvc-meta {
  font-size: 10px;
  color: var(--wot-text-2);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--wot-border);
}

/* ── Watchlist ─────────────────────────────────────────────────────────── */
.wot-add-row {
  display: flex; gap: 10px; align-items: stretch;
  max-width: 540px;
  margin-bottom: 24px;
}
.wot-add-row .wot-input { flex: 1; }

/* The Add-ticker searchable picker (replaces the free-text input). Mirrors
   the chart-view ticker dropdown but with a "+ Add a ticker" CTA in the
   button face. The pickable list = global universe minus user's watchlist. */
.wot-add-picker-host { width: 100%; }
.wot-add-picker .wot-ticker-picker-btn { width: 100%; }
.wot-add-picker .tp-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.wot-add-picker .tp-avatar .wot-icon { width: 14px; height: 14px; }
.wot-add-picker .tp-empty {
  padding: 16px 18px; color: var(--wot-text-2);
  font-size: 12px; text-align: center; font-style: italic;
}
.wot-add-picker .wot-ticker-picker-btn.is-busy {
  opacity: 0.6; pointer-events: none;
}

.wot-mini-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.wot-mini-card {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 16px;
  display: grid; gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.wot-mini-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  border-top-left-radius: var(--wot-r-md);
  border-top-right-radius: var(--wot-r-md);
}
.wot-mini-card:hover { border-color: var(--wot-border-strong); transform: translateY(-2px); }
.wot-mini-card .sym { font-size: 18px; font-weight: 800; color: var(--accent); }
.wot-mini-card .name { font-size: 11px; color: var(--wot-text-2); letter-spacing: 0.04em; }
.wot-mini-card .px { font-size: 13px; color: var(--wot-text-1); font-variant-numeric: tabular-nums; }
.wot-mini-card.is-loading {
  opacity: 0.7;
  background: linear-gradient(90deg, var(--wot-bg-1) 0%, var(--wot-bg-2) 50%, var(--wot-bg-1) 100%);
  background-size: 200% 100%;
  animation: wot-shimmer 1.4s linear infinite;
}
@keyframes wot-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Rules / discipline ────────────────────────────────────────────────── */
.wot-rules-list { display: grid; gap: 10px; }
.wot-rule-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  align-items: center;
  cursor: pointer;
}
.wot-rule-row .num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: var(--wot-bg-3); color: var(--wot-text-2);
}
.wot-rule-row.is-hard .num { background: var(--wot-grad); color: #fff; box-shadow: var(--wot-grad-glow); }
.wot-rule-row .check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--wot-border-strong);
  display: grid; place-items: center;
}
.wot-rule-row.is-checked .check {
  background: var(--wot-bull);
  border-color: var(--wot-bull);
  color: #062716;
}
.wot-rule-row .text { font-size: 13px; color: var(--wot-text-1); }
.wot-rule-row.is-hard .text { color: var(--wot-text-0); font-weight: 600; }

/* ── Discipline strip on Today ─────────────────────────────────────────── */
.wot-discipline-strip {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 12px;
  margin-bottom: 18px;
  align-items: center;
}
.wot-discipline-strip .strip-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin-right: 8px;
}
.wot-discipline-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--wot-r-pill);
  background: var(--wot-bg-3); color: var(--wot-text-2);
  border: 1px solid var(--wot-border);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.wot-discipline-pill.is-checked.is-hard { background: var(--wot-grad); color: #fff; border-color: transparent; }
.wot-discipline-pill.is-checked:not(.is-hard) { background: var(--wot-bull); color: #062716; border-color: transparent; }

/* ── Focus selector ────────────────────────────────────────────────────── */
.wot-focus-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.wot-focus-row .label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin-right: 4px;
}
.wot-focus-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: var(--wot-r-pill);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  color: var(--wot-text-1);
}
.wot-focus-chip.is-selected { background: var(--wot-grad); color: #fff; border-color: transparent; }

/* ── Market analysis block ─────────────────────────────────────────────── */
.wot-ma-block {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 22px 26px;
  margin-top: 22px;
  font-family: var(--wot-font);
}
.wot-ma-block h2 {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  background: var(--wot-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.wot-ma-block .body {
  font-size: 14px; line-height: 1.7; color: var(--wot-text-1);
  margin-bottom: 14px;
}
.wot-ma-block .levels {
  display: grid; gap: 6px;
  font-family: var(--wot-font-mono);
  font-size: 12px; color: var(--wot-text-1);
}

.wot-provenance {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--wot-border);
}
.wot-provenance summary {
  cursor: pointer;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wot-text-2);
  list-style: none;
}
.wot-provenance summary::-webkit-details-marker { display: none; }
.wot-provenance ul { margin-top: 8px; display: grid; gap: 4px; }
.wot-provenance a {
  font-size: 11px; color: var(--wot-text-2);
  font-family: var(--wot-font-mono);
  word-break: break-all;
}
.wot-provenance a:hover { color: var(--wot-grad-end); }

/* ── Auth-failed banner (top of screen, persistent) ───────────────────── */
.wot-auth-banner {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(255, 31, 143, 0.18), rgba(255, 107, 31, 0.18)), var(--wot-bg-2);
  border: 1px solid var(--wot-grad-end);
  border-radius: var(--wot-r-pill);
  padding: 10px 14px 10px 18px;
  font-size: 12px;
  color: var(--wot-text-0);
  box-shadow: 0 12px 40px rgba(255, 31, 143, 0.25), 0 2px 8px rgba(0,0,0,0.7);
  z-index: 300;
  max-width: 90vw;
  backdrop-filter: blur(10px);
}
.wot-auth-banner strong {
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--wot-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wot-auth-banner span { color: var(--wot-text-1); }
.wot-auth-banner code {
  background: rgba(255,255,255,0.08);
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--wot-font-mono);
  font-size: 11px;
}

/* ── Settings modal internals ─────────────────────────────────────────── */
.wot-set-alert {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #ffd9d9;
  padding: 10px 12px;
  border-radius: var(--wot-r-sm);
  font-size: 12px; line-height: 1.5;
  margin-bottom: 14px;
}
.wot-set-status {
  display: grid; gap: 6px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.wot-set-status .row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.wot-set-status .lbl { color: var(--wot-text-1); }
.wot-set-status .val {
  font-family: var(--wot-font-mono);
  font-size: 11px;
  color: var(--wot-text-2);
}
.wot-set-status .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wot-text-3);
  display: inline-block;
}
.wot-set-status .dot.is-ok       { background: var(--wot-bull); box-shadow: 0 0 8px var(--wot-bull); }
.wot-set-status .dot.is-fail     { background: var(--wot-bear); box-shadow: 0 0 8px var(--wot-bear); }
.wot-set-status .dot.is-pending  { background: var(--wot-chop); animation: wot-pulse 1s ease-in-out infinite; }
@keyframes wot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.wot-set-info {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--wot-r-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--wot-text-1);
  line-height: 1.5;
}
.wot-set-info strong {
  font-family: var(--wot-font-mono);
  color: var(--wot-bull);
  font-weight: 700;
}

.wot-set-field {
  display: grid; gap: 6px;
  margin-bottom: 14px;
}
.wot-set-field > span:first-child {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wot-text-2);
}
.wot-set-field .hint {
  font-size: 11px; color: var(--wot-text-3); line-height: 1.5;
}
.wot-set-field .hint code {
  background: var(--wot-bg-2);
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--wot-font-mono); font-size: 10.5px;
  color: var(--wot-text-1);
}
.wot-set-eye {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0;
  color: var(--wot-text-2);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
}
.wot-set-eye:hover { color: var(--wot-text-0); }

/* ── Modals ────────────────────────────────────────────────────────────── */
.wot-modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: grid; place-items: center;
  z-index: 200;
  backdrop-filter: blur(6px);
}
.wot-modal {
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border-strong);
  border-radius: var(--wot-r-md);
  padding: 24px;
  width: min(520px, 90vw);
  box-shadow: var(--wot-shadow-pop);
}
.wot-modal h2 {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.wot-modal .actions {
  display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end;
}

/* ── Icon helper ───────────────────────────────────────────────────────── */
.wot-icon { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.wot-icon svg { display: block; width: 100%; height: 100%; }

/* ── Spinner ───────────────────────────────────────────────────────────── */
.wot-spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--wot-border-strong);
  border-top-color: var(--wot-grad-end);
  animation: wot-spin 0.6s linear infinite;
  display: inline-block;
  vertical-align: -3px;
}
@keyframes wot-spin { to { transform: rotate(360deg); } }

/* ── Share Trade Plan modal ────────────────────────────────────────────── */
.wot-share-hint {
  color: var(--wot-text-2);
  font-size: 13px;
  margin: 0 0 14px;
}
.wot-share-hint strong { color: var(--wot-text-0); }

.wot-share-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px;
}

.wot-share-tile {
  position: relative;
  text-align: left;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-left: 4px solid var(--accent, var(--wot-grad-end));
  border-radius: var(--wot-r-md);
  padding: 12px 14px 14px;
  color: var(--wot-text-0);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  font: inherit;
}
.wot-share-tile:hover { background: var(--wot-bg-2); }
.wot-share-tile.is-selected {
  background: rgba(255, 31, 143, 0.08);
  border-color: var(--wot-grad-end);
}
.wot-share-tile.is-selected .wot-share-tile-check { opacity: 1; }
.wot-share-tile-check {
  position: absolute; top: 8px; right: 10px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wot-grad);
  color: #fff;
  opacity: 0;
  transition: opacity 120ms ease;
}
.wot-share-tile-check .wot-icon { width: 13px; height: 13px; }

.wot-share-tile-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.wot-share-tile-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent, var(--wot-grad-end));
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display: grid; place-items: center;
}
.wot-share-tile-sym {
  font-weight: 800; font-size: 14px;
  color: var(--accent, var(--wot-text-0));
}
.wot-share-tile-kind {
  margin-left: auto;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--wot-text-2);
  text-transform: uppercase;
}

.wot-share-tile-body {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
}
.wot-share-tile-body strong {
  font-weight: 800;
}
.wot-share-tile.is-call .wot-share-tile-body strong { color: var(--wot-bull); }
.wot-share-tile.is-put  .wot-share-tile-body strong { color: var(--wot-bear); }
.wot-share-tile-body span { color: var(--wot-text-2); }

.wot-share-tile-targets {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--wot-text-1);
}
.wot-share-tile-targets .wot-icon { width: 11px; height: 11px; color: var(--wot-target); }
.wot-share-tile-targets .is-stop { color: var(--wot-stop); margin-left: auto; }
.wot-share-tile-targets .is-stop .wot-icon { color: var(--wot-stop); }

.wot-share-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
}
.wot-share-count {
  font-size: 12px;
  color: var(--wot-text-2);
}

/* Preview step ----------------------------------------------------------- */
.wot-share-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 1fr);
  gap: 18px;
}
.wot-share-preview-img {
  background: #0a0a0a;
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wot-share-preview-img canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.wot-share-preview-side {
  display: flex; flex-direction: column;
  gap: 10px;
}
.wot-share-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wot-text-2);
}
.wot-share-text {
  width: 100%;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-0);
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 10px;
  resize: vertical;
  min-height: 120px;
}
.wot-share-btn-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.wot-share-btn-row .wot-btn { flex: 1; min-width: 110px; }
.wot-share-tip {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--wot-text-2);
  line-height: 1.5;
}
.wot-share-tip strong { color: var(--wot-text-1); }

@media (max-width: 720px) {
  .wot-share-preview { grid-template-columns: 1fr; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wot-shell-header { grid-template-columns: 1fr auto; gap: 12px; padding: 0 14px; }
  .wot-nav { grid-column: span 2; overflow-x: auto; justify-self: stretch; padding: 4px; }
  .wot-shell-meta { display: none; }
  .wot-view { padding: 14px; }
  .wot-page-title { font-size: 22px; }
  .wot-card-grid { grid-template-columns: 1fr; }
}

/* ── Signup + billing ──────────────────────────────────────────────────── */
.wot-signup, .wot-billing {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

/* Hero — logo lockup, title, one-line tagline. Generous vertical rhythm
   so the eye lands here first; the action card below it gets visual
   priority via contrast, not size. */
.wot-signup-hero {
  text-align: center;
  margin-bottom: 28px;
}
.wot-signup-hero.is-tight { margin-bottom: 20px; }

.wot-signup-mark {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: var(--wot-grad);
  box-shadow: 0 14px 40px rgba(255, 31, 143, 0.28);
  display: grid;
  place-items: center;
}
.wot-signup-mark::after {
  /* Chart polyline matching favicon — peaks/valleys signalling weekly OHLC */
  content: "";
  width: 36px;
  height: 36px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8 22 L13 13 L17 18 L22 10 L24 22Z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M8 22 L13 13 L17 18 L22 10 L24 22Z' fill='black'/></svg>") center/contain no-repeat;
}

.wot-signup-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--wot-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.15;
  margin-bottom: 10px;
}
.wot-signup-tag {
  color: var(--wot-text-1);
  font-size: 15px;
  line-height: 1.5;
  max-width: 38ch;
  margin: 0 auto;
}

/* Action card — surface where the user clicks. */
.wot-signup-card {
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-lg);
  padding: 32px;
  box-shadow: var(--wot-shadow-card);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

/* "Continue with Social Stream" — primary CTA. Wide block button with the
   SSM logo mark on the left so the brand handoff is unmistakable. */
.wot-btn-ss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  background: #15151b;
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--wot-r-md);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.wot-btn-ss:hover {
  background: #1c1c24;
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.wot-btn-ss:active { transform: translateY(0); }
.wot-btn-ss:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.wot-btn-ss-mark {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wot-btn-ss-mark svg { width: 100%; height: 100%; display: block; }
.wot-btn-ss-label { white-space: nowrap; }

/* Bullets below the CTA — short, scannable, no marketing wall. */
.wot-signup-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wot-signup-bullets li {
  color: var(--wot-text-1);
  font-size: 13.5px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.wot-signup-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wot-grad);
}
.wot-signup-bullets strong { color: var(--wot-text-0); font-weight: 600; }

.wot-signup-fine {
  color: var(--wot-text-2);
  font-size: 12.5px;
  text-align: center;
  margin-top: 18px;
}

/* Loading skeleton. Pulsing block placeholders so the user sees motion
   instead of an empty card while bootProbe runs. */
.wot-signup-skeleton {
  background: linear-gradient(90deg, var(--wot-bg-1) 0%, rgba(255,255,255,0.04) 50%, var(--wot-bg-1) 100%);
  background-size: 200% 100%;
  animation: wot-skel 1.2s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes wot-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Blocked / error state — same card chrome, red accent + a reason code. */
.wot-signup-card.is-error {
  border-color: rgba(239, 68, 68, 0.32);
  box-shadow: 0 14px 40px rgba(239, 68, 68, 0.12), 0 2px 8px rgba(0,0,0,0.6);
}
.wot-signup-reason {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: var(--wot-r-md);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--wot-text-1);
}
.wot-signup-reason code {
  background: var(--wot-bg-1);
  color: var(--wot-bear);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.wot-signup-detail {
  margin-top: 6px;
  color: var(--wot-text-2);
  font-size: 12px;
  word-break: break-word;
}
.wot-signup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wot-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--wot-text-1);
  padding: 10px 16px;
  border-radius: var(--wot-r-md);
  border: 1px solid var(--wot-border);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.wot-btn-secondary:hover { color: var(--wot-text-0); border-color: rgba(255,255,255,0.18); }

/* Plan picker (post-signin). Two cards, side by side, tightened. */
.wot-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wot-plan-card {
  position: relative;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 22px 20px 20px;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  color: var(--wot-text-0);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wot-plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: var(--wot-bg-1);
}
.wot-plan-card.is-best { border-color: rgba(255, 107, 31, 0.55); }
.wot-plan-card.is-best::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--wot-r-md);
  padding: 1px;
  background: var(--wot-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.wot-plan-card:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.wot-plan-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #fff;
  background: var(--wot-grad);
  padding: 3px 8px;
  border-radius: 999px;
}
.wot-plan-head { display: flex; align-items: center; gap: 8px; }
.wot-plan-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wot-text-2);
  text-transform: uppercase;
}
.wot-plan-price { display: flex; align-items: baseline; gap: 4px; }
.wot-plan-amount { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.wot-plan-unit { color: var(--wot-text-2); font-size: 13px; }
.wot-plan-desc {
  color: var(--wot-text-1);
  font-size: 13px;
  line-height: 1.45;
  margin: 2px 0 4px;
}
.wot-plan-cta {
  color: var(--wot-grad-end);
  font-weight: 600;
  font-size: 13.5px;
  margin-top: auto;
}

.wot-billing-head { margin-bottom: 20px; }
.wot-billing-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.wot-billing-head p { color: var(--wot-text-1); margin-top: 4px; }
.wot-billing-card {
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 24px;
  margin-bottom: 20px;
}
.wot-billing-status strong { font-size: 18px; }
.wot-billing-status p { color: var(--wot-text-1); margin-top: 6px; }
.wot-billing-status.is-inactive strong { color: var(--wot-bear); }
.wot-billing-status.is-daypass strong { color: var(--wot-chop); }
.wot-billing-status.is-monthly strong { color: var(--wot-bull); }
.wot-billing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .wot-plan-grid { grid-template-columns: 1fr; }
  .wot-signup-card { padding: 28px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TODAY VIEW — three layout variants (Terminal / Cards / Briefing)
   ═══════════════════════════════════════════════════════════════════════ */

.wot-today-shell { display: grid; gap: 18px; }

/* ── Variant tabs (the 3-way switcher) ──────────────────────────────── */
.wot-variant-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
}
.wot-variant-tab {
  display: grid; gap: 2px;
  padding: 12px 16px;
  border-radius: var(--wot-r-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.wot-variant-tab:hover { background: var(--wot-bg-2); border-color: var(--wot-border); }
.wot-variant-tab strong {
  font-size: 13px; font-weight: 700;
  color: var(--wot-text-1);
  letter-spacing: 0.01em;
}
.wot-variant-tab em {
  font-size: 11px; font-style: normal;
  color: var(--wot-text-3);
}
.wot-variant-tab.is-active {
  background: var(--wot-bg-3);
  border-color: var(--wot-grad-end);
  box-shadow: 0 0 0 1px rgba(255, 31, 143, 0.25) inset;
}
.wot-variant-tab.is-active strong {
  background: var(--wot-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wot-variant-stage { min-height: 200px; }
.wot-gate-warn {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--wot-r-sm);
  background: rgba(245, 180, 0, 0.08);
  border: 1px solid rgba(245, 180, 0, 0.35);
  font-size: 11px; color: var(--wot-chop);
  letter-spacing: 0.04em;
}

/* ── Rules strip (pills layout — Terminal + Cards variants) ────────── */
.wot-rules-block { display: grid; }
.wot-rules-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
}
.wot-rules-strip.is-pills .lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin-right: 4px;
}
.wot-rules-strip .wot-rules-strip-body {
  display: flex; gap: 4px; flex-wrap: wrap; flex: 1;
}
.wot-rules-strip .meta {
  font-size: 11px; color: var(--wot-text-2); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.wot-rules-strip .meta.is-green { color: var(--wot-bull); }
.wot-rules-strip .meta strong { color: var(--wot-text-0); font-weight: 800; }

.wot-rule-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 9px;
  border-radius: var(--wot-r-pill);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wot-text-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wot-rule-pill:hover { color: var(--wot-text-1); border-color: var(--wot-border-strong); }
.wot-rule-pill .num { font-variant-numeric: tabular-nums; }
.wot-rule-pill .star { color: var(--wot-grad-end); font-size: 9px; }
.wot-rule-pill.is-checked {
  background: var(--wot-bull); color: #062716; border-color: transparent;
}
.wot-rule-pill.is-checked.is-hard {
  background: var(--wot-grad); color: #fff;
}
.wot-rule-pill.is-checked .star { color: #fff; }

/* Rules strip — grid layout (Briefing variant) */
.wot-rules-strip.is-grid {
  display: grid; gap: 12px;
  padding: 16px 18px;
}
.wot-rules-strip.is-grid .wot-rules-strip-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.wot-rules-strip.is-grid .wot-rules-strip-head .lbl {
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--wot-text-0);
}
.wot-rules-strip.is-grid .wot-rules-strip-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 6px;
}
.wot-rules-strip.is-grid .wot-rule-pill {
  padding: 8px 10px;
  border-radius: var(--wot-r-sm);
  justify-content: flex-start;
  gap: 8px;
}
.wot-rules-strip.is-grid .wot-rule-pill .short {
  font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ── Action chip (CALL/PUT/SKIP) ──────────────────────────────────── */
.wot-action-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.wot-action-chip .sym {
  font-size: 13px; line-height: 1; font-weight: 900;
  letter-spacing: -0.02em;
}
.wot-action-chip.is-call { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.wot-action-chip.is-put  { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.wot-action-chip.is-skip { background: rgba(245, 180, 0, 0.15); color: #fbbf24; }

/* ── Confidence dots ●●● ●●○ ●○○ ────────────────────────────────── */
.wot-conf-dots {
  display: inline-flex; gap: 2px;
  font-size: 9px;
  line-height: 1;
}
.wot-conf-dots span { letter-spacing: 0; }
.wot-conf-dots .on  { color: var(--wot-grad-end); }
.wot-conf-dots .off { color: var(--wot-text-3); }
.wot-conf-dots.is-high .on { color: var(--wot-bull); }
.wot-conf-dots.is-low  .on { color: var(--wot-chop); }

/* ── Range bar (projected weekly) ─────────────────────────────────── */
.wot-range-bar {
  display: grid; gap: 6px;
}
.wot-range-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--wot-bg-3);
  border: 1px solid var(--wot-border);
}
.wot-range-band {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.35), rgba(239, 68, 68, 0.35));
  border-radius: 4px;
}
.wot-range-marker {
  position: absolute; top: -3px; bottom: -3px;
  width: 3px;
  border-radius: 1px;
  background: var(--wot-text-0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  transform: translateX(-1.5px);
}
.wot-range-marker.out-band { background: var(--wot-chop); box-shadow: 0 0 8px var(--wot-chop); }
.wot-range-meta {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--wot-text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.wot-range-meta .cur { color: var(--wot-text-0); font-weight: 700; }
.wot-range-empty {
  font-size: 11px; color: var(--wot-text-3); font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   Variant A — TERMINAL (trader-desk dense rows)
   ═══════════════════════════════════════════════════════════════════════ */

.wot-terminal {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  overflow: hidden;
}
.wot-terminal-head,
.wot-terminal-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.4fr)   /* sym */
    minmax(72px, 0.7fr)    /* last */
    minmax(64px, 0.6fr)    /* chg */
    minmax(180px, 2fr)     /* range */
    minmax(110px, 1fr)     /* act */
    minmax(78px, 0.7fr)    /* strike */
    minmax(56px, 0.5fr)    /* conf */
    minmax(90px, 0.9fr)    /* spark */
    24px;                  /* caret */
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.wot-terminal-head {
  background: var(--wot-bg-2);
  border-bottom: 1px solid var(--wot-border);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wot-text-3);
}
.wot-terminal-body { display: grid; }

.wot-terminal-row {
  position: relative;
  font-size: 13px;
  border-bottom: 1px solid var(--wot-border);
  cursor: pointer;
  transition: background 0.12s;
}
.wot-terminal-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--wot-grad-end));
}
.wot-terminal-row:hover { background: var(--wot-bg-2); }
.wot-terminal-row.is-open { background: var(--wot-bg-2); }
.wot-terminal-row.is-skip { opacity: 0.7; }

.wot-terminal-row .c-sym {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.wot-terminal-row .c-sym .avatar {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: var(--accent, var(--wot-grad));
  color: #fff; font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.wot-terminal-row .c-sym .lock { display: grid; min-width: 0; }
.wot-terminal-row .c-sym strong {
  font-size: 13px; font-weight: 800;
  color: var(--accent, var(--wot-text-0));
  font-variant-numeric: tabular-nums;
}
.wot-terminal-row .c-sym em {
  font-size: 10px; font-style: normal;
  color: var(--wot-text-3);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.wot-terminal-row .c-last,
.wot-terminal-row .c-strike {
  font-family: var(--wot-font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--wot-text-0);
  font-weight: 600;
}
.wot-terminal-row .c-chg {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}
.wot-terminal-row .c-chg.is-up   { color: var(--wot-bull); }
.wot-terminal-row .c-chg.is-down { color: var(--wot-bear); }

.wot-terminal-row .c-range .rng {
  display: grid; gap: 4px;
}
.wot-terminal-row .c-range .track {
  position: relative;
  height: 6px;
  background: var(--wot-bg-3);
  border-radius: 3px;
  border: 1px solid var(--wot-border);
}
.wot-terminal-row .c-range .band {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.4), rgba(239, 68, 68, 0.4));
  border-radius: 3px;
}
.wot-terminal-row .c-range .cur {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px;
  background: var(--wot-text-0);
  transform: translateX(-1px);
}
.wot-terminal-row .c-range .cur.out { background: var(--wot-chop); }
.wot-terminal-row .c-range .meta {
  display: flex; justify-content: space-between;
  font-size: 9px;
  color: var(--wot-text-3);
  font-variant-numeric: tabular-nums;
}

.wot-terminal-row .c-spark svg {
  width: 100%; height: 22px;
}
.wot-terminal-row .c-exp {
  color: var(--wot-text-3);
  transition: transform 0.15s;
}
.wot-terminal-row.is-open .c-exp { transform: rotate(180deg); color: var(--wot-text-0); }

.wot-terminal-drawer {
  position: relative;
  background: var(--wot-bg-2);
  border-bottom: 1px solid var(--wot-border);
  padding: 18px 20px 20px;
}
/* Continue the row's accent bar down through the drawer so the CALL/PUT
   red/green highlight isn't lost the moment a row expands. */
.wot-terminal-drawer::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--wot-grad-end));
}
/* Subtle action-tinted wash on the drawer so the relationship between
   row + drawer reads at a glance. */
.wot-terminal-drawer.is-call { background: linear-gradient(180deg, rgba(34, 197, 94, 0.07), transparent 80%), var(--wot-bg-2); }
.wot-terminal-drawer.is-put  { background: linear-gradient(180deg, rgba(239, 68, 68, 0.07), transparent 80%), var(--wot-bg-2); }
.wot-terminal-drawer.is-skip { background: linear-gradient(180deg, rgba(245, 180, 0, 0.06), transparent 80%), var(--wot-bg-2); }
/* When the row above is open, keep the action-tinted highlight on the
   row itself too (instead of the flat bg-2 it used to flip to). */
.wot-terminal-row.is-open.is-call { background: rgba(34, 197, 94, 0.10); }
.wot-terminal-row.is-open.is-put  { background: rgba(239, 68, 68, 0.10); }
.wot-terminal-row.is-open.is-skip { background: rgba(245, 180, 0, 0.08); }
.wot-terminal-drawer .drawer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.wot-terminal-drawer .thesis .hd,
.wot-terminal-drawer .meta-block .hd {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wot-text-3);
  margin-bottom: 6px;
}
.wot-terminal-drawer .thesis .body {
  font-size: 12.5px; line-height: 1.65;
  color: var(--wot-text-1);
}
.wot-terminal-drawer .risk {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.07);
  border-left: 2px solid var(--wot-bear);
  font-size: 11.5px; color: var(--wot-text-1);
  display: flex; gap: 8px;
}
.wot-terminal-drawer .risk .lbl {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 9px; font-weight: 800; color: var(--wot-bear);
}
.wot-terminal-drawer .risk.earn {
  background: rgba(245, 180, 0, 0.07);
  border-left-color: var(--wot-chop);
}
.wot-terminal-drawer .risk.earn .lbl { color: var(--wot-chop); }
.wot-terminal-drawer .meta-col { display: grid; gap: 14px; }
.wot-terminal-drawer .meta-block { font-size: 11px; }
.wot-terminal-drawer .meta-block .body {
  color: var(--wot-text-1); line-height: 1.5;
}
.wot-terminal-drawer .oi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.wot-terminal-drawer .oi-col {
  background: var(--wot-bg-1);
  border-radius: var(--wot-r-sm);
  padding: 6px 8px;
}
.wot-terminal-drawer .oi-hd {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 4px;
}
.wot-terminal-drawer .oi-hd.is-call { color: #4ade80; }
.wot-terminal-drawer .oi-hd.is-put  { color: #fca5a5; }
.wot-terminal-drawer .oi-row {
  display: flex; justify-content: space-between;
  font-variant-numeric: tabular-nums;
  font-size: 11px; padding: 2px 0;
  color: var(--wot-text-1);
}
.wot-terminal-drawer .oi-row .oi {
  color: var(--wot-text-3);
}
.wot-terminal-drawer .oi-foot {
  margin-top: 8px;
  font-size: 10px; color: var(--wot-text-3);
  letter-spacing: 0.04em;
}
.wot-terminal-drawer .oi-foot strong { color: var(--wot-text-0); }
.wot-terminal-drawer .src-list {
  display: grid; gap: 2px;
  list-style: none; padding: 0; margin: 0;
}
.wot-terminal-drawer .src-list a {
  font-size: 10.5px; color: var(--wot-text-3);
  font-family: var(--wot-font-mono, ui-monospace, monospace);
}
.wot-terminal-drawer .src-list a:hover { color: var(--wot-grad-end); }

.wot-terminal-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  font-size: 11px; color: var(--wot-text-3);
  letter-spacing: 0.04em;
  background: var(--wot-bg-2);
  border-top: 1px solid var(--wot-border);
}
.wot-terminal-foot strong { color: var(--wot-text-1); font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .wot-terminal-head,
  .wot-terminal-row {
    grid-template-columns:
      minmax(120px, 1.2fr)
      minmax(64px, 0.7fr)
      minmax(110px, 1fr)
      minmax(70px, 0.7fr)
      minmax(56px, 0.5fr)
      24px;
    gap: 8px;
    padding: 10px 12px;
  }
  .wot-terminal-head .c-chg,
  .wot-terminal-head .c-range,
  .wot-terminal-head .c-spark,
  .wot-terminal-row .c-chg,
  .wot-terminal-row .c-range,
  .wot-terminal-row .c-spark { display: none; }
  .wot-terminal-drawer .drawer-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Variant B — CARDS (polished card grid)
   ═══════════════════════════════════════════════════════════════════════ */

.wot-rec-cards { display: grid; gap: 16px; }
.wot-rec-cards-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 16px 18px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
}
.wot-rec-cards-head .lock { display: grid; gap: 2px; }
.wot-rec-cards-head strong { font-size: 14px; color: var(--wot-text-0); font-weight: 800; }
.wot-rec-cards-head em {
  font-style: normal; font-size: 11px; color: var(--wot-text-3);
  letter-spacing: 0.04em;
}
.wot-rec-cards-head .counts { display: flex; gap: 8px; }
.count-chip {
  padding: 6px 12px;
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; gap: 6px; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.count-chip strong { font-size: 13px; font-weight: 900; }
.count-chip.is-call { background: rgba(34, 197, 94, 0.10); color: #4ade80; }
.count-chip.is-put  { background: rgba(239, 68, 68, 0.10); color: #fca5a5; }
.count-chip.is-skip { background: rgba(245, 180, 0, 0.10); color: #fbbf24; }

.wot-rec-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.wot-rec-card {
  position: relative;
  background: linear-gradient(180deg, var(--wot-bg-2), var(--wot-bg-1) 30%);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 18px;
  display: grid; gap: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  overflow: hidden;
}
.wot-rec-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent, var(--wot-grad-end));
}
.wot-rec-card.is-call::before { background: var(--wot-bull, #22c55e); }
.wot-rec-card.is-put::before  { background: var(--wot-bear, #ef4444); }
.wot-rec-card.is-skip { opacity: 0.78; }
.wot-rec-card.is-skip::before { background: var(--wot-chop); opacity: 0.6; }

.rec-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
}
.rec-card-head .avatar {
  width: 36px; height: 36px;
  border-radius: var(--wot-r-sm);
  display: grid; place-items: center;
  background: var(--accent, var(--wot-grad));
  color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.rec-card-head .lock { display: grid; gap: 2px; min-width: 0; }
.rec-card-head .sym {
  font-size: 18px; font-weight: 800;
  color: var(--accent, var(--wot-text-0));
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.rec-card-head .name {
  font-style: normal; font-size: 11px;
  color: var(--wot-text-3);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rec-card-head .px { text-align: right; display: grid; gap: 2px; }
.rec-card-head .last {
  font-size: 14px; font-weight: 800;
  color: var(--wot-text-0);
  font-variant-numeric: tabular-nums;
}
.rec-card-head .chg {
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rec-card-head .chg.is-up   { color: var(--wot-bull); }
.rec-card-head .chg.is-down { color: var(--wot-bear); }

.rec-card-action {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--wot-bg-2);
  border-radius: var(--wot-r-sm);
  border: 1px solid var(--wot-border);
}
.rec-card-action .strike {
  display: grid; gap: 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rec-card-action .strike strong {
  font-size: 16px; font-weight: 800; color: var(--wot-text-0);
}
.rec-card-action .strike span {
  font-size: 10px; color: var(--wot-text-3);
  letter-spacing: 0.04em;
}
.rec-card-action .strike .muted { font-style: italic; color: var(--wot-text-3); font-size: 12px; }

.rec-card-range { display: grid; }

.rec-card-oi {
  display: grid; gap: 6px;
  padding: 10px 12px;
  background: var(--wot-bg-2);
  border-radius: var(--wot-r-sm);
  border: 1px solid var(--wot-border);
  font-size: 11px;
}
.rec-card-oi .oi-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rec-card-oi .oi-label {
  font-weight: 800;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  min-width: 72px;
}
.rec-card-oi .oi-label.is-call { color: #4ade80; }
.rec-card-oi .oi-label.is-put  { color: #fca5a5; }
.oi-pill {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--wot-r-pill);
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600;
}
.oi-pill em { font-style: normal; color: var(--wot-text-3); font-size: 9px; }
.oi-pill.is-call { background: rgba(34, 197, 94, 0.10); color: #86efac; }
.oi-pill.is-put  { background: rgba(239, 68, 68, 0.10); color: #fda4af; }
.rec-card-oi .oi-foot {
  font-size: 10px; color: var(--wot-text-3);
  letter-spacing: 0.04em;
  padding-top: 4px; margin-top: 2px;
  border-top: 1px dashed var(--wot-border);
}
.rec-card-oi .muted { color: var(--wot-text-3); font-style: italic; font-size: 11px; }

.rec-card-earn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(245, 180, 0, 0.08);
  border: 1px solid rgba(245, 180, 0, 0.35);
  border-radius: var(--wot-r-sm);
  font-size: 11.5px; color: var(--wot-chop);
  letter-spacing: 0.04em;
}

.rec-card-thesis {
  font-size: 12.5px; line-height: 1.6;
  color: var(--wot-text-1);
}
.rec-card-foot {
  display: flex; align-items: center; justify-content: space-between;
}
.rec-card-foot .risk {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--wot-bear);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700;
  cursor: help;
}

.thesis-modal { display: grid; gap: 12px; }
.thesis-modal .thesis-action {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
}
.thesis-modal .action {
  padding: 4px 10px;
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.thesis-modal .action.is-call { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.thesis-modal .action.is-put  { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.thesis-modal .action.is-skip { background: rgba(245, 180, 0, 0.15); color: #fbbf24; }
.thesis-modal .conf { color: var(--wot-text-2); font-size: 11px; }
.thesis-modal .conf strong { color: var(--wot-text-0); text-transform: capitalize; }
.thesis-modal .thesis-h {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wot-text-3);
  margin-top: 6px;
}
.thesis-modal .thesis-body p {
  font-size: 13px; line-height: 1.65;
  color: var(--wot-text-1);
  margin-bottom: 10px;
}
.thesis-modal .thesis-risk {
  font-size: 12px; color: var(--wot-text-1); line-height: 1.6;
  padding: 8px 12px; background: rgba(239, 68, 68, 0.07);
  border-left: 2px solid var(--wot-bear);
}
.thesis-modal .thesis-earn {
  font-size: 12px; color: var(--wot-text-1); line-height: 1.6;
  padding: 8px 12px; background: rgba(245, 180, 0, 0.07);
  border-left: 2px solid var(--wot-chop);
}
.thesis-modal .thesis-sources {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 3px;
}
.thesis-modal .thesis-sources a {
  font-size: 11px; color: var(--wot-text-3);
  font-family: var(--wot-font-mono, ui-monospace, monospace);
}
.thesis-modal .thesis-sources a:hover { color: var(--wot-grad-end); }

/* ═══════════════════════════════════════════════════════════════════════
   Variant C — BRIEFING (magazine-style long-form)
   ═══════════════════════════════════════════════════════════════════════ */

.wot-briefing { display: grid; gap: 28px; }

.wot-briefing-hero {
  padding: 32px 36px;
  background:
    radial-gradient(800px 240px at 30% 0%, rgba(255, 31, 143, 0.10), transparent 70%),
    var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-lg);
  display: grid; gap: 14px;
}
.wot-briefing-hero .kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--wot-grad-end);
}
.wot-briefing-hero h1 {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wot-text-0);
  line-height: 1.05;
}
.wot-briefing-hero .dek {
  font-size: 15px; line-height: 1.6;
  color: var(--wot-text-1);
  max-width: 72ch;
}
.wot-briefing-hero .dek strong { color: var(--wot-text-0); font-weight: 700; }
.wot-briefing-hero .hero-roll {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 6px;
}
.roll-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.roll-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  border-top-left-radius: var(--wot-r-md);
  border-bottom-left-radius: var(--wot-r-md);
}
.roll-item em {
  font-style: normal; font-weight: 800; font-size: 13px;
  color: var(--wot-text-0);
  letter-spacing: 0.02em;
}
.roll-item span { font-size: 12px; color: var(--wot-text-2); }
.roll-item.is-call span { color: #4ade80; }
.roll-item.is-put  span { color: #fca5a5; }

.wot-briefing-body { display: grid; gap: 28px; }

.brief-sec {
  padding: 28px 32px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-lg);
  position: relative;
}
.brief-sec::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, var(--wot-grad-end));
  border-top-left-radius: var(--wot-r-lg);
  border-bottom-left-radius: var(--wot-r-lg);
}
.brief-sec.is-skip { opacity: 0.78; }

.brief-sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px; align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--wot-border);
  margin-bottom: 20px;
}
.brief-sec-head .mark {
  width: 58px; height: 58px;
  border-radius: var(--wot-r-md);
  background: var(--accent, var(--wot-grad));
  color: #fff;
  font-size: 26px; font-weight: 800;
  display: grid; place-items: center;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.brief-sec-head h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wot-text-0);
}
.brief-sec-head h2 strong { font-weight: 800; }
.brief-sec-head h2 em {
  font-style: normal; font-weight: 400;
  color: var(--wot-text-3); font-size: 14px;
  margin-left: 8px;
}
.brief-sec-head .kick {
  margin-top: 6px;
  font-size: 12.5px; color: var(--wot-text-2);
  letter-spacing: 0.02em;
}
.brief-sec-head .verdict {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--wot-r-pill);
  font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.brief-sec-head .verdict.is-call { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.brief-sec-head .verdict.is-put  { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.brief-sec-head .verdict.is-skip { background: rgba(245, 180, 0, 0.15); color: #fbbf24; }
.brief-sec-head .bias {
  text-transform: capitalize; font-weight: 700;
}
.brief-sec-head .meta-right {
  text-align: right; font-variant-numeric: tabular-nums;
}
.brief-sec-head .meta-right .px {
  font-size: 24px; font-weight: 800; color: var(--wot-text-0);
}
.brief-sec-head .meta-right .chg {
  font-size: 12px; font-weight: 700;
}
.brief-sec-head .meta-right .chg.is-up   { color: var(--wot-bull); }
.brief-sec-head .meta-right .chg.is-down { color: var(--wot-bear); }

.brief-charts {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px;
  margin-bottom: 20px;
  align-items: center;
}
.brief-spark {
  width: 100%; height: 60px;
  display: block;
}
.brief-projrange { display: grid; gap: 6px; }
.brief-projrange .lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wot-text-3);
}
.brief-projrange .bar {
  position: relative; height: 14px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: 7px;
  overflow: hidden;
}
.brief-projrange .band {
  position: absolute; left: 15%; right: 15%; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.35), rgba(74, 222, 128, 0.30), rgba(239, 68, 68, 0.35));
}
.brief-projrange .tick.low {
  position: absolute; left: 15%; top: 0; bottom: 0; width: 2px;
  background: var(--wot-bull);
}
.brief-projrange .tick.high {
  position: absolute; right: 15%; top: 0; bottom: 0; width: 2px;
  background: var(--wot-bear);
}
.brief-projrange .cur {
  position: absolute; top: -4px; bottom: -4px; width: 3px;
  background: var(--wot-text-0);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  transform: translateX(-1.5px);
}
.brief-projrange .meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--wot-text-3);
}
.brief-projrange .meta span { display: grid; gap: 1px; text-align: center; }
.brief-projrange .meta em { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.brief-projrange .meta strong {
  font-size: 13px; color: var(--wot-text-0); font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.brief-action-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 11.5px; color: var(--wot-text-2);
  letter-spacing: 0.04em;
}
.brief-action-row strong {
  color: var(--wot-text-0); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.brief-thesis p {
  font-size: 14.5px; line-height: 1.75;
  color: var(--wot-text-1);
  margin-bottom: 14px;
  max-width: 72ch;
}
.brief-thesis .fn {
  display: inline-block;
  font-size: 10px;
  color: var(--wot-grad-end);
  font-weight: 700;
  margin-left: 2px;
  vertical-align: super;
}

.brief-risk {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 12px 16px;
  margin-top: 18px;
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid var(--wot-bear);
  border-radius: var(--wot-r-sm);
  font-size: 13px; color: var(--wot-text-1);
  line-height: 1.5;
}
.brief-risk .lbl {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wot-bear);
  align-self: center;
}

.brief-oi {
  margin-top: 22px;
  padding: 18px;
  background: var(--wot-bg-2);
  border-radius: var(--wot-r-md);
  border: 1px solid var(--wot-border);
}
.brief-oi .oi-hd {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-3);
  margin-bottom: 12px;
}
.brief-oi .oi-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.brief-oi .cap {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--wot-border);
}
.brief-oi .cap.is-call { color: #4ade80; }
.brief-oi .cap.is-put  { color: #fca5a5; }
.brief-oi .oi-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px; color: var(--wot-text-1);
  font-variant-numeric: tabular-nums;
}
.brief-oi .oi-line .iv {
  color: var(--wot-text-3); font-size: 10.5px;
}

.brief-recap {
  margin-top: 16px;
  font-size: 12px; color: var(--wot-text-2);
  font-style: italic;
  display: flex; gap: 10px;
}
.brief-recap .lbl {
  font-style: normal; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 10px;
  color: var(--wot-text-3); align-self: center;
}

.brief-footnotes {
  list-style: decimal inside;
  margin-top: 22px; padding: 16px 20px;
  background: var(--wot-bg-2);
  border-radius: var(--wot-r-sm);
  border-left: 2px solid var(--wot-grad-end);
  font-size: 11px; color: var(--wot-text-3);
  line-height: 1.7;
}
.brief-footnotes a {
  color: var(--wot-text-2);
  font-family: var(--wot-font-mono, ui-monospace, monospace);
}
.brief-footnotes a:hover { color: var(--wot-grad-end); }

@media (max-width: 900px) {
  .wot-briefing-hero { padding: 22px 22px; }
  .wot-briefing-hero h1 { font-size: 28px; }
  .brief-sec { padding: 22px 20px; }
  .brief-sec-head { grid-template-columns: auto 1fr; }
  .brief-sec-head .meta-right { grid-column: 1 / -1; text-align: left; }
  .brief-charts { grid-template-columns: 1fr; gap: 16px; }
  .brief-oi .oi-grid { grid-template-columns: 1fr; }
}

/* ── Daily strip (weekday-only secondary section below Today variant) ── */
.wot-daily-strip {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed var(--wot-border-strong);
  display: grid; gap: 14px;
}
.wot-daily-strip .daily-strip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.wot-daily-strip .kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wot-text-3);
}
.wot-daily-strip h2 {
  font-size: 18px; font-weight: 700;
  color: var(--wot-text-0);
  letter-spacing: -0.01em;
}
.wot-daily-strip .meta { font-size: 12px; color: var(--wot-text-2); }
.wot-daily-strip .meta strong { color: var(--wot-text-0); text-transform: capitalize; }

/* Retained past-week weekly-recommendation history on Market Analysis.
   Mirrors the daily-strip header; bodies reuse the .wot-tp-group
   collapsible groups from the Trade Plan tab. */
.wot-weekly-history {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed var(--wot-border-strong);
  display: grid; gap: 14px;
}
.wot-weekly-history .wot-history-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.wot-weekly-history .kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wot-text-3);
}
.wot-weekly-history h2 {
  font-size: 18px; font-weight: 700;
  color: var(--wot-text-0); letter-spacing: -0.01em;
}
.wot-weekly-history .meta { font-size: 12px; color: var(--wot-text-2); }
.wot-weekly-history #history-groups { display: grid; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   JOURNAL — calendar of rule check-offs (month / week / day views)
   ═══════════════════════════════════════════════════════════════════════ */

.wot-journal { display: grid; gap: 16px; }

.wot-mode-tabs {
  display: flex; gap: 2px;
  background: var(--wot-bg-2);
  padding: 3px;
  border-radius: var(--wot-r-pill);
  border: 1px solid var(--wot-border);
}
.wot-mode-tab {
  padding: 6px 14px;
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wot-text-2);
  cursor: pointer;
}
.wot-mode-tab:hover { color: var(--wot-text-1); }
.wot-mode-tab.is-active {
  background: var(--wot-grad);
  color: #fff;
  box-shadow: var(--wot-grad-glow);
}

.wot-journal-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
}
.wot-journal-anchor {
  flex: 1;
  font-size: 16px; font-weight: 700;
  color: var(--wot-text-0);
  letter-spacing: -0.01em;
}

.wot-journal-stage { min-height: 240px; }

.wot-journal-legend {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  font-size: 11px; color: var(--wot-text-3);
  letter-spacing: 0.04em;
}
.wot-journal-legend .legend-key {
  font-weight: 700; color: var(--wot-text-2);
  text-transform: uppercase; font-size: 10px;
}
.legend-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--wot-r-pill);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid var(--wot-border);
}
.legend-chip.is-none { background: var(--wot-bg-2); color: var(--wot-text-3); }
.legend-chip.is-low  { background: rgba(245, 180, 0, 0.10); color: var(--wot-chop); border-color: rgba(245, 180, 0, 0.3); }
.legend-chip.is-mid  { background: rgba(74, 222, 128, 0.10); color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }
.legend-chip.is-full { background: var(--wot-bull); color: #062716; border-color: transparent; }

/* ── Month view ───────────────────────────────────────────────────── */
.wot-cal-month {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 14px;
}
.wot-cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; padding: 0 4px 8px;
}
.wot-cal-head .dow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--wot-text-3);
  text-transform: uppercase;
  text-align: center;
}
.wot-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wot-cal-tile {
  display: grid; gap: 6px; align-content: start;
  min-height: 96px;
  padding: 8px 10px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  position: relative;
}
.wot-cal-tile:hover { border-color: var(--wot-grad-end); transform: translateY(-1px); }
.wot-cal-tile.is-blank { background: transparent; border-color: transparent; cursor: default; }
.wot-cal-tile.is-blank:hover { transform: none; }
.wot-cal-tile.is-today { box-shadow: inset 0 0 0 1px var(--wot-grad-end); }
.wot-cal-tile .hd {
  display: flex; justify-content: space-between; align-items: baseline;
}
.wot-cal-tile .dom {
  font-size: 13px; font-weight: 800;
  color: var(--wot-text-0);
  font-variant-numeric: tabular-nums;
}
.wot-cal-tile .hard-ok {
  font-size: 11px; color: var(--wot-grad-end);
}
.wot-cal-tile .meta {
  display: flex; justify-content: space-between;
  font-size: 10px;
  color: var(--wot-text-3);
  font-variant-numeric: tabular-nums;
}
.wot-cal-tile .pct {
  font-weight: 800;
}
.wot-cal-tile .mini {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.wot-cal-tile .m-pill {
  display: block;
  height: 4px; border-radius: 2px;
  background: var(--wot-bg-3);
}
.wot-cal-tile .m-pill.is-on { background: var(--wot-bull); }
.wot-cal-tile .m-pill.is-hard.is-on { background: var(--wot-grad-end); }
.wot-cal-tile.is-low  { background: linear-gradient(180deg, rgba(245, 180, 0, 0.06), var(--wot-bg-2)); }
.wot-cal-tile.is-mid  { background: linear-gradient(180deg, rgba(74, 222, 128, 0.08), var(--wot-bg-2)); }
.wot-cal-tile.is-full { background: linear-gradient(180deg, rgba(34, 197, 94, 0.20), var(--wot-bg-2)); }

.wot-cal-totals {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--wot-border);
  font-size: 11px; color: var(--wot-text-3);
  letter-spacing: 0.04em;
}
.wot-cal-totals em { font-style: normal; font-weight: 800; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }

/* ── Week view ────────────────────────────────────────────────────── */
.wot-cal-week {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  overflow: hidden;
}
.wot-cal-week .wk-head {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(7, minmax(56px, 1fr));
  background: var(--wot-bg-2);
  border-bottom: 1px solid var(--wot-border);
}
.wot-cal-week .wk-head .day-col {
  display: grid; gap: 2px;
  text-align: center;
  padding: 10px 4px;
  border-left: 1px solid var(--wot-border);
}
.wot-cal-week .wk-head .day-col strong {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--wot-text-3);
  text-transform: uppercase;
}
.wot-cal-week .wk-head .day-col em {
  font-style: normal; font-size: 12px;
  color: var(--wot-text-1);
  font-variant-numeric: tabular-nums;
}
.wot-cal-week .wk-head .day-col.is-today em { color: var(--wot-grad-end); font-weight: 800; }

.wot-cal-week .wk-body { display: grid; }
.wot-cal-week .wk-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(7, minmax(56px, 1fr));
  border-bottom: 1px solid var(--wot-border);
  align-items: stretch;
}
.wot-cal-week .wk-row:last-child { border-bottom: none; }
.wot-cal-week .wk-row.is-hard .rule-col { background: linear-gradient(90deg, rgba(255, 31, 143, 0.05), transparent 80%); }
.wot-cal-week .rule-col {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--wot-text-1);
}
.wot-cal-week .rule-col .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
  background: var(--wot-bg-3); color: var(--wot-text-2);
  flex-shrink: 0;
}
.wot-cal-week .wk-row.is-hard .rule-col .num { background: var(--wot-grad); color: #fff; }
.wot-cal-week .rule-col .text {
  font-size: 12px; line-height: 1.3;
}
.wot-cal-week .rule-col .hg {
  font-style: normal; font-size: 9px; font-weight: 800;
  letter-spacing: 0.1em; color: var(--wot-grad-end);
  margin-left: 6px;
}
.wot-cal-week .cell {
  border-left: 1px solid var(--wot-border);
  display: grid; place-items: center;
  cursor: pointer;
  color: transparent;
  background: transparent;
  transition: background 0.12s;
}
.wot-cal-week .cell:hover { background: var(--wot-bg-2); color: var(--wot-text-3); }
.wot-cal-week .cell::before { content: '·'; color: var(--wot-text-3); font-size: 14px; }
.wot-cal-week .cell.is-checked { background: rgba(34, 197, 94, 0.18); color: var(--wot-bull); }
.wot-cal-week .cell.is-checked::before { content: none; }
.wot-cal-week .wk-row.is-hard .cell.is-checked { background: rgba(255, 31, 143, 0.18); color: var(--wot-grad-end); }

/* ── Day view ─────────────────────────────────────────────────────── */
.wot-cal-day {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 22px 28px;
  display: grid; gap: 18px;
}
.wot-cal-day .day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wot-border);
}
.wot-cal-day .day-head .kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wot-text-3);
}
.wot-cal-day .day-head h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wot-text-0);
}
.wot-cal-day .day-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.day-meta-pill {
  padding: 6px 12px;
  border-radius: var(--wot-r-pill);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  font-size: 11px; color: var(--wot-text-2);
  letter-spacing: 0.04em;
}
.day-meta-pill strong { color: var(--wot-text-0); font-weight: 800; font-variant-numeric: tabular-nums; }
.day-meta-pill.is-none { color: var(--wot-text-3); }
.day-meta-pill.is-low  { background: rgba(245, 180, 0, 0.10); color: var(--wot-chop); border-color: rgba(245, 180, 0, 0.30); }
.day-meta-pill.is-low  strong { color: var(--wot-chop); }
.day-meta-pill.is-mid  { background: rgba(74, 222, 128, 0.10); color: #4ade80; border-color: rgba(74, 222, 128, 0.30); }
.day-meta-pill.is-mid  strong { color: #4ade80; }
.day-meta-pill.is-full { background: var(--wot-bull); color: #062716; border-color: transparent; }
.day-meta-pill.is-full strong { color: #062716; }

.wot-day-rules {
  display: grid; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.wot-day-rules .dr {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  cursor: pointer;
}
.wot-day-rules .dr:hover { border-color: var(--wot-border-strong); }
.wot-day-rules .dr .num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: var(--wot-bg-3); color: var(--wot-text-2);
}
.wot-day-rules .dr.is-hard .num { background: var(--wot-grad); color: #fff; box-shadow: var(--wot-grad-glow); }
.wot-day-rules .dr .check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--wot-border-strong);
  display: grid; place-items: center;
}
.wot-day-rules .dr.is-checked .check {
  background: var(--wot-bull); border-color: var(--wot-bull); color: #062716;
}
.wot-day-rules .dr .text { font-size: 13px; color: var(--wot-text-1); }
.wot-day-rules .dr.is-hard .text { color: var(--wot-text-0); font-weight: 600; }
.wot-day-rules .dr .hg {
  font-style: normal; font-size: 9px; font-weight: 800;
  letter-spacing: 0.1em; color: var(--wot-grad-end);
  margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Trade Spec — trigger / T1 / T2 / T3 / stop. Renders inside Cards +
   Terminal drawer + Briefing. The shared shape so the user reads the
   same vocabulary everywhere.
   ═══════════════════════════════════════════════════════════════════════ */
.wot-trade-spec {
  display: grid; gap: 8px;
  padding: 12px 14px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  font-variant-numeric: tabular-nums;
}
.wot-trade-spec.is-call { border-left: 3px solid var(--wot-bull); }
.wot-trade-spec.is-put  { border-left: 3px solid var(--wot-bear); }
.wot-trade-spec.is-skip {
  text-align: center;
  padding: 14px;
  color: var(--wot-chop);
  font-size: 12px;
}
.wot-trade-spec .ts-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: baseline;
  gap: 10px;
}
.wot-trade-spec .ts-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wot-text-3);
}
.wot-trade-spec .ts-row.ts-trigger .ts-val {
  font-size: 18px; font-weight: 800;
  color: var(--wot-entry);
}
.wot-trade-spec.is-put .ts-row.ts-trigger .ts-val { color: var(--wot-bear); }
.wot-trade-spec .ts-strike {
  font-size: 11px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.wot-trade-spec.is-call .ts-strike { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.wot-trade-spec.is-put  .ts-strike { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

.wot-trade-spec .ts-targets {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px; align-items: start;
}
.wot-trade-spec .ts-list {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.wot-trade-spec .ts-t {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(212, 240, 74, 0.10);
  font-size: 12px;
  color: var(--wot-target);
  font-weight: 700;
}
.wot-trade-spec .ts-t .wot-icon { color: var(--wot-target); width: 11px; height: 11px; }
.wot-trade-spec .ts-empty-mini { color: var(--wot-text-3); font-size: 11px; }
.wot-trade-spec .ts-row.ts-stop .ts-val {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--wot-stop);
}
.wot-trade-spec .ts-row.ts-stop .ts-val .wot-icon { color: var(--wot-stop); width: 11px; height: 11px; }

/* Briefing variant gives the spec block more breathing room */
.brief-trade-spec {
  margin: 18px 0;
}
.brief-trade-spec .wot-trade-spec {
  padding: 16px 18px;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Terminal: new c-trig column (Entry → T1 / Stop)
   ═══════════════════════════════════════════════════════════════════════ */
.wot-terminal-head,
.wot-terminal-row {
  grid-template-columns:
    minmax(140px, 1.3fr)   /* sym */
    minmax(64px, 0.6fr)    /* last */
    minmax(58px, 0.55fr)   /* chg */
    minmax(160px, 1.7fr)   /* range */
    minmax(96px, 0.9fr)    /* act */
    minmax(120px, 1.1fr)   /* trig */
    minmax(70px, 0.65fr)   /* strike */
    minmax(50px, 0.45fr)   /* conf */
    minmax(78px, 0.8fr)    /* spark */
    24px;                  /* caret */
}
.wot-terminal-row .c-trig {
  display: grid; gap: 1px;
  font-variant-numeric: tabular-nums;
}
.wot-terminal-row .c-trig .trig-line {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 11px;
}
.wot-terminal-row .c-trig .trig-line em {
  font-style: normal;
  color: var(--wot-text-1);
  font-weight: 600;
}
.wot-terminal-row .c-trig .trig-line .arrow { color: var(--wot-text-3); font-size: 10px; }
.wot-terminal-row .c-trig .trig-line strong {
  color: var(--wot-target);
  font-weight: 700;
}
.wot-terminal-row .c-trig .trig-stop {
  font-size: 10px;
  color: var(--wot-stop);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .wot-terminal-head,
  .wot-terminal-row {
    grid-template-columns:
      minmax(110px, 1.1fr)
      minmax(60px, 0.6fr)
      minmax(96px, 1fr)
      minmax(100px, 1.0fr)
      minmax(64px, 0.6fr)
      minmax(48px, 0.4fr)
      24px;
  }
  .wot-terminal-head .c-chg,
  .wot-terminal-head .c-range,
  .wot-terminal-head .c-spark,
  .wot-terminal-row .c-chg,
  .wot-terminal-row .c-range,
  .wot-terminal-row .c-spark { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Week tab summary chips
   ═══════════════════════════════════════════════════════════════════════ */
.wot-week-summary {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.wot-week-summary .ws-chip {
  padding: 6px 12px;
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  display: inline-flex; gap: 5px; align-items: baseline;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
}
.wot-week-summary .ws-chip strong { font-size: 13px; font-weight: 900; }
.wot-week-summary .ws-chip.is-call    { background: rgba(34, 197, 94, 0.10); color: #4ade80; border-color: rgba(34, 197, 94, 0.25); }
.wot-week-summary .ws-chip.is-put     { background: rgba(239, 68, 68, 0.10); color: #fca5a5; border-color: rgba(239, 68, 68, 0.25); }
.wot-week-summary .ws-chip.is-skip    { background: rgba(245, 180, 0, 0.10); color: #fbbf24; border-color: rgba(245, 180, 0, 0.25); }
.wot-week-summary .ws-chip.is-pending { color: var(--wot-text-3); }

/* ═══════════════════════════════════════════════════════════════════════
   Per-card "regenerate one" — appears on every recommendation card in
   Cards / Terminal / Briefing / Week. Subtle by default; while running
   the card pulses a soft border so the user can keep scanning others.
   ═══════════════════════════════════════════════════════════════════════ */
.wot-row-regen {
  background: transparent;
  border: 1px solid var(--wot-border);
  color: var(--wot-text-2);
  padding: 4px 6px;
  border-radius: var(--wot-r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wot-row-regen:hover { background: var(--wot-bg-3); color: var(--wot-grad-end); border-color: var(--wot-grad-end); }
.wot-row-regen .wot-icon { width: 12px; height: 12px; }

.is-regenerating {
  position: relative;
  pointer-events: none;
  animation: wot-card-pulse 1.4s ease-in-out infinite;
  border-color: var(--wot-grad-end) !important;
}
.is-regenerating::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 31, 143, 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: wot-card-shimmer 2s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes wot-card-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 31, 143, 0.0); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 31, 143, 0.25); }
}
@keyframes wot-card-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Regenerate progress modal — fires from #regen-week
   ═══════════════════════════════════════════════════════════════════════ */
.wot-regen-modal { display: grid; gap: 16px; }
.wot-regen-modal .regen-summary {
  display: grid; gap: 4px;
  padding: 14px 16px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
}
.wot-regen-modal .regen-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--wot-text-0);
}
.wot-regen-modal .regen-meta {
  font-size: 11.5px; color: var(--wot-text-2);
  letter-spacing: 0.02em;
}

.wot-regen-modal .regen-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
}
.wot-regen-modal .regen-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1.6fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--wot-bg-2);
  border-bottom: 1px solid var(--wot-border);
}
.wot-regen-modal .regen-row:last-child { border-bottom: none; }
.wot-regen-modal .regen-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
}
.wot-regen-modal .rg-avatar {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff; font-weight: 800; font-size: 11px;
}
.wot-regen-modal .rg-sym { display: grid; min-width: 0; }
.wot-regen-modal .rg-sym strong { font-size: 12px; font-weight: 800; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }
.wot-regen-modal .rg-sym em { font-style: normal; font-size: 10px; color: var(--wot-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wot-regen-modal .rg-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wot-text-3);
}
.wot-regen-modal .rg-spinner {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wot-text-3);
  flex-shrink: 0;
}
.wot-regen-modal .regen-row.is-queued .rg-spinner { background: var(--wot-text-3); }
.wot-regen-modal .regen-row.is-running .rg-spinner {
  background: var(--wot-chop);
  animation: wot-pulse 1s ease-in-out infinite;
}
.wot-regen-modal .regen-row.is-running .rg-state { color: var(--wot-chop); }
.wot-regen-modal .regen-row.is-done .rg-spinner    { background: var(--wot-bull); box-shadow: 0 0 6px var(--wot-bull); }
.wot-regen-modal .regen-row.is-done .rg-state      { color: var(--wot-bull); }
.wot-regen-modal .regen-row.is-failed .rg-spinner  { background: var(--wot-bear); }
.wot-regen-modal .regen-row.is-failed .rg-state    { color: var(--wot-bear); }

.wot-regen-modal .rg-action { display: inline-flex; gap: 6px; align-items: center; min-width: 110px; justify-content: flex-end; }
.wot-regen-modal .rg-pill {
  padding: 3px 8px;
  border-radius: var(--wot-r-pill);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.wot-regen-modal .rg-pill.is-call   { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.wot-regen-modal .rg-pill.is-put    { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.wot-regen-modal .rg-pill.is-skip   { background: rgba(245, 180, 0, 0.18); color: #fbbf24; }
.wot-regen-modal .rg-pill.is-failed { background: rgba(239, 68, 68, 0.30); color: #fff; }
.wot-regen-modal .rg-conf {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wot-text-3);
}
.wot-regen-modal .rg-conf.is-high { color: var(--wot-bull); }
.wot-regen-modal .rg-conf.is-med  { color: var(--wot-chop); }
.wot-regen-modal .rg-conf.is-low  { color: var(--wot-bear); }

.wot-regen-modal .regen-foot {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--wot-text-3);
}
.wot-regen-modal .regen-foot strong { color: var(--wot-text-0); font-variant-numeric: tabular-nums; }
.wot-regen-modal .regen-foot em { font-style: normal; }

@media (max-width: 768px) {
  .wot-variant-tabs { grid-template-columns: 1fr; }
  .wot-cal-grid { gap: 4px; }
  .wot-cal-tile { min-height: 78px; padding: 6px 6px; }
  .wot-cal-tile .mini { display: none; }
  .wot-cal-week .wk-head,
  .wot-cal-week .wk-row {
    grid-template-columns: minmax(150px, 1.5fr) repeat(7, minmax(36px, 1fr));
  }
  .wot-cal-week .rule-col { padding: 8px 8px; font-size: 11px; }
  .wot-cal-week .rule-col .text { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHARTS & LEVELS VIEW (#/charts/:symbol)
   The dedicated chart-first workspace — fancy ticker dropdown, active
   trade plans banner, full-width chart engine with navigator strip.
   ═══════════════════════════════════════════════════════════════════════ */

.wot-charts-view { display: grid; gap: 16px; }

.wot-charts-head { margin-bottom: 6px; }

/* Top row: ticker dropdown + scope checkbox + active trade plans button */
.wot-chart-symbar {
  display: grid;
  grid-template-columns: minmax(260px, 320px) auto 1fr;
  gap: 14px;
  align-items: center;
}
.wot-chart-scope {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 12px; color: var(--wot-text-1);
  border: 1px solid var(--wot-border); border-radius: 999px;
  background: rgba(255,255,255,0.02);
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.wot-chart-scope:hover { border-color: rgba(255,255,255,0.22); }
.wot-chart-scope input { accent-color: var(--wot-grad-end); cursor: pointer; }

/* Wider chart frame — fills the screen edge to edge inside the .wot-view padding */
.wot-chart-frame-xl {
  background:
    radial-gradient(1200px 320px at 50% -10%, rgba(255, 107, 31, 0.05), transparent 70%),
    linear-gradient(180deg, var(--wot-bg-1), var(--wot-bg-0));
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.wot-chart-frame-xl .wot-chart-toolbar {
  padding: 12px 18px;
}
.wot-chart-body-xl {
  min-height: 620px;
  padding: 8px 6px 4px;
}
.wot-chart-sub {
  font-size: 11px;
  font-family: var(--wot-font-mono);
  color: var(--wot-text-3);
  padding: 4px 18px 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Ticker picker (combobox dropdown) ──────────────────────────────── */
.wot-ticker-picker {
  position: relative;
}
.wot-ticker-picker-btn {
  width: 100%;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border-strong);
  border-radius: var(--wot-r-md);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 36px 1fr 22px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--wot-text-0);
  text-align: left;
}
.wot-ticker-picker-btn:hover {
  border-color: var(--wot-grad-end);
  background: var(--wot-bg-3);
}
.wot-ticker-picker.is-open .wot-ticker-picker-btn {
  border-color: var(--wot-grad-end);
  box-shadow: 0 0 0 3px rgba(255, 31, 143, 0.15);
}
.wot-ticker-picker-btn .tp-avatar {
  width: 36px; height: 36px;
  border-radius: var(--wot-r-sm);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 16px;
  letter-spacing: -0.02em;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.wot-ticker-picker-btn .tp-text {
  display: grid;
  line-height: 1.15;
  min-width: 0;
}
.wot-ticker-picker-btn .tp-sym {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--wot-text-0);
}
.wot-ticker-picker-btn .tp-name {
  font-size: 11px;
  font-style: normal;
  color: var(--wot-text-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-ticker-picker-btn .tp-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wot-text-2);
  transition: transform 0.15s;
}
.wot-ticker-picker.is-open .tp-caret { transform: rotate(180deg); }

.wot-ticker-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 280px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border-strong);
  border-radius: var(--wot-r-md);
  box-shadow: var(--wot-shadow-pop);
  z-index: 40;
  overflow: hidden;
  animation: wot-picker-in 0.12s ease-out;
}
@keyframes wot-picker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.wot-ticker-picker-menu .tp-search {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--wot-border);
  padding: 0 4px 0 12px;
  background: var(--wot-bg-1);
}
.wot-ticker-picker-menu .tp-search-icon { color: var(--wot-text-3); display: inline-flex; }
.wot-ticker-picker-menu .tp-search-input {
  background: transparent;
  border: 0;
  outline: none;
  color: var(--wot-text-0);
  padding: 10px 4px;
  font-size: 13px;
  font-family: var(--wot-font);
  width: 100%;
}
.wot-ticker-picker-menu .tp-search-input::placeholder { color: var(--wot-text-3); }

.wot-ticker-picker-menu .tp-list {
  /* Tighter cap so the dropdown stays compact even when the universe
     has 500+ tickers — overflow scrolls. */
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: 4px;
  margin: 0;
}
.wot-ticker-picker-menu .tp-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;          /* was 8px — tighter rows match other tabs */
  border-radius: var(--wot-r-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.wot-ticker-picker-menu .tp-item:hover { background: var(--wot-bg-3); }
.wot-ticker-picker-menu .tp-item.is-active {
  background: rgba(255, 31, 143, 0.10);
  outline: 1px solid rgba(255, 31, 143, 0.32);
}
.wot-ticker-picker-menu .tp-item-avatar {
  width: 26px; height: 26px;
  border-radius: 6px;
  color: #fff; font-weight: 800; font-size: 12px;
  display: grid; place-items: center;
}
.wot-ticker-picker-menu .tp-item-text {
  display: grid; line-height: 1.15; min-width: 0;
}
.wot-ticker-picker-menu .tp-item-text strong {
  font-size: 13px; color: var(--wot-text-0); font-weight: 700;
}
.wot-ticker-picker-menu .tp-item-text em {
  font-size: 10.5px;
  font-style: normal;
  color: var(--wot-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wot-ticker-picker-menu .tp-item-check {
  color: var(--wot-grad-end);
  display: inline-flex;
}
.wot-ticker-picker-menu .tp-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--wot-border);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wot-grad-end);
  text-transform: uppercase;
  background: var(--wot-bg-1);
}
.wot-ticker-picker-menu .tp-add:hover { background: var(--wot-bg-3); }
.wot-ticker-picker-menu .tp-item.is-loading {
  pointer-events: none; opacity: 0.6;
}
.wot-ticker-picker-menu .tp-item.is-loading em {
  font-style: italic;
}

/* Dropdown footer — left slot for tab-specific actions, right slot for
   the embedded "Only my watchlist" toggle. Used by Markov Chain / Trade
   Plan / Valuation / Market-Cap Risk / 10-K&Q via the shared
   js/components/ticker-picker.js mounter. */
.wot-ticker-picker-menu .tp-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--wot-border);
  background: var(--wot-bg-1);
}
.wot-ticker-picker-menu .tp-footer-left {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  color: var(--wot-text-2); font-size: 12px;
}
.wot-ticker-picker-menu .tp-footer-left:empty { display: none; }
.wot-ticker-picker-menu .tp-footer-left .tp-add {
  /* Anchor "Add a new ticker"-style actions on the footer left without
     the surrounding picker's default tp-add border-top (already on the
     footer itself). */
  border-top: 0; padding: 4px 8px; background: transparent;
}
.wot-ticker-picker-menu .tp-scope {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  font-size: 12px; color: var(--wot-text-1);
  cursor: pointer;
  user-select: none;
}
.wot-ticker-picker-menu .tp-scope input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--wot-grad-end);
  cursor: pointer;
}
.wot-ticker-picker-menu .tp-scope:hover { color: var(--wot-text-0); }

/* ── Active trade plans banner ─────────────────────────────────────── */
.wot-active-plans-host { display: flex; align-items: stretch; }
.wot-active-plans {
  width: 100%;
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--wot-r-md);
  background: linear-gradient(135deg, rgba(255, 107, 31, 0.16), rgba(255, 31, 143, 0.16)), var(--wot-bg-2);
  border: 1px solid rgba(255, 31, 143, 0.35);
  box-shadow: 0 6px 20px rgba(255, 31, 143, 0.18);
  cursor: pointer;
  color: var(--wot-text-0);
  text-decoration: none;
  text-align: left;
  transition: transform 0.1s, box-shadow 0.15s;
  font-family: var(--wot-font);
}
.wot-active-plans:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 31, 143, 0.28);
}
.wot-active-plans .ap-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--wot-grad);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 31, 143, 0.4);
}
.wot-active-plans .ap-icon .wot-icon { width: 16px; height: 16px; }
.wot-active-plans .ap-text {
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--wot-text-1);
}
.wot-active-plans .ap-text strong {
  color: var(--wot-text-0);
  font-weight: 800;
  font-size: 15px;
  margin-right: 2px;
}
.wot-active-plans .ap-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.wot-active-plans .ap-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--wot-r-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--wot-bg-3);
  border: 1px solid var(--wot-border);
}
.wot-active-plans .ap-chip.is-call { color: #4ade80; border-color: rgba(34,197,94,0.4); }
.wot-active-plans .ap-chip.is-put  { color: #fca5a5; border-color: rgba(239,68,68,0.4); }
.wot-active-plans .ap-cta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--wot-r-pill);
  background: var(--wot-grad);
  color: #fff;
  box-shadow: var(--wot-grad-glow);
}

.wot-active-plans-modal { display: grid; gap: 16px; }
.wot-active-plans-modal .apm-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wot-text-2);
  margin-top: 4px;
}

/* ── Detected-levels list (read-only, in expandable panel) ─────────── */
.wot-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  font-family: var(--wot-font-mono);
  font-size: 12px;
  color: var(--wot-text-1);
  padding-top: 12px;
}
.wot-level-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
}
.wot-level-row .lv-price { font-weight: 700; }
.wot-level-row .lv-meta {
  font-size: 10px;
  color: var(--wot-text-3);
  letter-spacing: 0.02em;
}
.wot-level-row .lv-pct {
  font-size: 10.5px;
  color: var(--wot-text-2);
  font-variant-numeric: tabular-nums;
}

/* ── Trade card chart-icon button (in card footers) ────────────────── */
.wot-tcard-chart {
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wot-tcard-chart svg { width: 13px; height: 13px; }
.wot-tcard-chart:hover {
  color: var(--wot-grad-end);
  border-color: var(--wot-grad-end);
}

/* ── Mobile: collapse symbar to single column ─────────────────────── */
@media (max-width: 860px) {
  .wot-chart-symbar { grid-template-columns: 1fr; }
  .wot-active-plans { grid-template-columns: 28px auto 1fr; }
  .wot-active-plans .ap-chips { display: none; }
  .wot-chart-body-xl { min-height: 480px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Filter bar — Trade Plan tab. Modelled visually on
   local-trading-journal's gf-dr (date range) picker + multi-select
   pattern but rewritten in WOT tokens (no css var --accent shim).
   ═══════════════════════════════════════════════════════════════════════ */
.wot-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  margin-bottom: 16px;
}
.wot-filter-bar .wfb-grp { position: relative; display: flex; align-items: center; gap: 6px; }
.wot-filter-bar .wfb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-1);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 12px; height: 34px;
  cursor: pointer; transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.wot-filter-bar .wfb-btn:hover { color: var(--wot-text-0); border-color: var(--wot-grad-end); }
.wot-filter-bar .wfb-btn.is-active { color: var(--wot-grad-end); border-color: var(--wot-grad-end); }
.wot-filter-bar .wfb-btn .wot-icon svg { width: 13px; height: 13px; opacity: .85; }
.wot-filter-bar .wfb-caret .wot-icon svg { width: 11px; height: 11px; opacity: .6; }

.wot-filter-bar .wfb-pill {
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-pill, 999px);
  color: var(--wot-text-2);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.10em;
  padding: 6px 12px; height: 30px;
  cursor: pointer; transition: all .15s;
}
.wot-filter-bar .wfb-pill.is-on.wfb-pill-call { background: rgba(34,197,94,0.14); color: #4ade80; border-color: rgba(34,197,94,0.40); }
.wot-filter-bar .wfb-pill.is-on.wfb-pill-put  { background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.40); }

.wot-filter-bar .wfb-dr-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-2);
  color: var(--wot-text-2);
  font-size: 12px; cursor: pointer;
  transition: all .15s;
}
.wot-filter-bar .wfb-dr-clear:hover { border-color: var(--wot-bear); color: var(--wot-bear); }

.wot-filter-bar .wfb-reset {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 6px 10px; height: 30px;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.wot-filter-bar .wfb-reset:hover { color: var(--wot-text-0); border-color: var(--wot-grad-end); }

/* ── Dropdown shell shared by tickers + date range ───────────────────── */
.wot-filter-bar .wfb-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  padding: 12px;
}

/* ── Ticker multi ─────────────────────────────────────────────────────── */
.wfb-tickers-drop { min-width: 280px; max-width: 380px; }
.wfb-tickers-drop .wfb-drop-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.wfb-tickers-drop .wfb-drop-body {
  max-height: 320px; overflow-y: auto;
  display: grid; gap: 2px;
}
.wfb-tickers-drop .wfb-row {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--wot-r-sm);
  cursor: pointer; font-size: 12px;
  color: var(--wot-text-1);
}
.wfb-tickers-drop .wfb-row:hover { background: var(--wot-bg-2); }
.wfb-tickers-drop .wfb-row .sym { font-weight: 800; letter-spacing: 0.04em; }
.wfb-tickers-drop .wfb-row .name { color: var(--wot-text-3); font-size: 11px; }
.wfb-tickers-drop .wfb-row input[type="checkbox"] { accent-color: var(--wot-grad-end); }
.wfb-tickers-drop .wfb-search {
  flex: 1;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-0);
  padding: 6px 10px; font-size: 12px;
  outline: none;
}
.wfb-tickers-drop .wfb-search:focus { border-color: var(--wot-grad-end); }
.wfb-tickers-drop .wfb-empty {
  display: block; padding: 12px; text-align: center; color: var(--wot-text-3); font-size: 12px;
}

.wot-filter-bar .wfb-mini {
  background: transparent;
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 9px;
  cursor: pointer; transition: all .15s;
  text-align: left;
}
.wot-filter-bar .wfb-mini:hover { color: var(--wot-grad-end); border-color: var(--wot-grad-end); }

/* ── Date range popover ─────────────────────────────────────────────── */
.wfb-dr-pop {
  display: flex; flex-direction: row;
  min-width: 560px;
  padding: 0;
}
.wfb-dr-cals {
  display: flex; gap: 0; padding: 14px;
  border-right: 1px solid var(--wot-border);
}
.wfb-dr-cal { width: 220px; }
.wfb-dr-cal + .wfb-dr-cal { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--wot-border); }
.wfb-dr-cal-head {
  display: grid; grid-template-columns: 28px 1fr 28px;
  align-items: center; margin-bottom: 8px;
  font-size: 12px; color: var(--wot-text-0);
  text-transform: uppercase; letter-spacing: 0.06em;
  text-align: center;
}
.wfb-dr-cal-head strong { font-weight: 800; font-size: 12px; }
.wfb-dr-nav {
  background: transparent; border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-1); width: 24px; height: 24px;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.wfb-dr-nav:hover { color: var(--wot-grad-end); border-color: var(--wot-grad-end); }
.wfb-dr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wfb-dr-dow { color: var(--wot-text-3); font-size: 10px; text-align: center; padding-bottom: 4px; text-transform: uppercase; }
.wfb-day {
  text-align: center;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  padding: 5px 0;
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-1);
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.wfb-day.other { color: transparent; cursor: default; pointer-events: none; }
.wfb-day:hover:not(.other) { background: var(--wot-bg-2); }
.wfb-day.is-today { font-weight: 800; color: var(--wot-grad-end); }
.wfb-day.in-range { background: rgba(255, 31, 143, 0.15); border-radius: 0; }
.wfb-day.range-start, .wfb-day.range-end {
  background: var(--wot-grad-end); color: #fff; font-weight: 800;
  border-radius: var(--wot-r-sm);
}
.wfb-dr-presets {
  display: flex; flex-direction: column;
  padding: 12px 10px; gap: 2px; min-width: 148px;
}
.wfb-dr-presets .wfb-mini { padding: 7px 12px; }

/* Divider above the prior-weeks weekly-recommendation history. */
.wot-tp-history-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 14px;
  color: var(--wot-text-3);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wot-tp-history-divider::before,
.wot-tp-history-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--wot-border);
}

/* ── Trade Plan groupings (collapsible day & week sections) ─────────── */
.wot-tp-group {
  margin-bottom: 18px;
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-1);
  overflow: hidden;
}
.wot-tp-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.wot-tp-group-head:hover { background: var(--wot-bg-2); }
.wot-tp-group-head .caret {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wot-text-2);
  transition: transform .2s;
}
.wot-tp-group.is-open .wot-tp-group-head .caret { transform: rotate(180deg); }
.wot-tp-group-head .grp-title {
  font-weight: 800; font-size: 13px; letter-spacing: 0.04em;
  color: var(--wot-text-0);
}
.wot-tp-group-head .grp-sub {
  font-size: 11px; color: var(--wot-text-3); letter-spacing: 0.04em;
  text-transform: uppercase; margin-left: auto;
}
.wot-tp-group-head .grp-count {
  margin-left: 12px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-pill, 999px);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 8px; color: var(--wot-text-1);
}
.wot-tp-group-body {
  padding: 14px;
  border-top: 1px solid var(--wot-border);
  background: var(--wot-bg-0);
}
.wot-tp-group:not(.is-open) .wot-tp-group-body { display: none; }
.wot-tp-empty {
  padding: 32px; text-align: center; color: var(--wot-text-3); font-size: 12px;
}

@media (max-width: 720px) {
  .wfb-dr-pop { min-width: 0; flex-direction: column; }
  .wfb-dr-cals { flex-direction: column; border-right: 0; border-bottom: 1px solid var(--wot-border); }
  .wfb-dr-cal + .wfb-dr-cal { margin-left: 0; padding-left: 0; border-left: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wot-border); }
  .wfb-dr-presets { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Watchlist mini-card: per-card remove button (× in top-right corner).
   ═══════════════════════════════════════════════════════════════════════ */
.wot-mini-card { position: relative; }
.wot-mini-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--wot-border);
  border-radius: 50%;
  color: var(--wot-text-2);
  cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
  z-index: 2;
}
.wot-mini-card:hover .wot-mini-remove,
.wot-mini-remove:focus-visible { opacity: 1; }
.wot-mini-remove:hover { color: var(--wot-bear); border-color: var(--wot-bear); }
.wot-mini-remove .wot-icon svg { width: 12px; height: 12px; }

/* ── Landing page (public marketing) — `wot-lp-` prefix ───────────────────
 * Default route for unauthenticated visitors. Lives at #/landing. Rendered
 * inside <main id="wot-view"> like any other view; styles below are scoped
 * with .wot-lp-* so they can't bleed into the app shell. The footer
 * variant (.wot-lp-foot.is-shell) is also mounted under the app for
 * authenticated users via app.js — same chrome, lighter top spacing.
 * ───────────────────────────────────────────────────────────────────── */

.wot-lp-root {
  /* Padding cancellation is handled by the body[data-wot-route="landing"]
     .wot-view { padding: 0 } rule below — landing pages go edge-to-edge. */
  color: var(--wot-text-0);
  font-family: var(--wot-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wot-lp-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.wot-lp-container-narrow { max-width: 800px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.wot-lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s, color 0.15s, border-color 0.15s;
  will-change: transform;
  white-space: nowrap;
}
.wot-lp-btn-lg { padding: 14px 26px; font-size: 15px; }
.wot-lp-btn-block { width: 100%; justify-content: center; }
.wot-lp-btn-primary {
  color: #fff;
  background: var(--wot-grad);
  box-shadow: 0 8px 26px rgba(255, 31, 143, 0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.wot-lp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(255, 31, 143, 0.42), inset 0 1px 0 rgba(255,255,255,0.22);
}
.wot-lp-btn-ghost {
  color: var(--wot-text-0);
  background: transparent;
  border-color: var(--wot-border-strong);
}
.wot-lp-btn-ghost:hover { background: var(--wot-bg-2); border-color: rgba(255,255,255,0.22); }

/* ── Section / heads ──────────────────────────────────────────────────── */
.wot-lp-section { padding: 64px 0; position: relative; }
@media (min-width: 880px) { .wot-lp-section { padding: 96px 0; } }
.wot-lp-section-alt { background: var(--wot-bg-1); border-top: 1px solid var(--wot-border); border-bottom: 1px solid var(--wot-border); }

.wot-lp-section-head { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.wot-lp-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--wot-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.wot-lp-h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.18; margin: 0 0 14px;
}
.wot-lp-section-sub { color: var(--wot-text-1); font-size: 16px; line-height: 1.6; margin: 0; }
.wot-lp-section-sub strong { color: var(--wot-text-0); font-weight: 600; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.wot-lp-hero { padding-top: 72px; padding-bottom: 56px; text-align: center; position: relative; overflow: hidden; }
@media (min-width: 880px) { .wot-lp-hero { padding-top: 104px; padding-bottom: 72px; } }

.wot-lp-hero::before {
  content: '';
  position: absolute; inset: -10% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 107, 31, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 31, 143, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgba(212, 240, 74, 0.08) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}
.wot-lp-hero > * { position: relative; z-index: 1; }

.wot-lp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  background: var(--wot-bg-2); border: 1px solid var(--wot-border);
  color: var(--wot-text-1);
  margin-bottom: 26px;
}
.wot-lp-pill-alpha { color: #ffd9a8; background: rgba(255, 107, 31, 0.10); border-color: rgba(255, 107, 31, 0.32); }
.wot-lp-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wot-chop); box-shadow: 0 0 8px var(--wot-chop); animation: wot-lp-pulse 2.2s ease-in-out infinite; }
@keyframes wot-lp-pulse { 50% { opacity: 0.45; } }

.wot-lp-hero-title {
  font-size: clamp(34px, 5.8vw, 60px);
  font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.08; margin: 0 0 22px;
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.wot-lp-hero-grad {
  display: inline-block;
  background: linear-gradient(135deg, var(--wot-grad-start) 0%, var(--wot-grad-end) 60%, var(--wot-target) 110%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wot-lp-hero-sub {
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--wot-text-1); line-height: 1.6;
  max-width: 720px; margin: 0 auto 34px;
}
.wot-lp-hero-sub strong { color: var(--wot-text-0); font-weight: 600; }
.wot-lp-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }

.wot-lp-trust-strip {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid var(--wot-border);
  border-bottom: 1px solid var(--wot-border);
  margin: 0 auto; max-width: 880px;
}
.wot-lp-trust-label { font-size: 11px; color: var(--wot-text-3); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; margin-right: 4px; }
.wot-lp-trust-item { font-size: 12.5px; color: var(--wot-text-2); font-weight: 500; }
.wot-lp-trust-dot { color: var(--wot-text-3); }

/* ── Alpha disclosure card ────────────────────────────────────────────── */
.wot-lp-section-alpha { padding: 48px 0; }
.wot-lp-alpha-card {
  border: 1.5px solid rgba(255, 107, 31, 0.35);
  background:
    linear-gradient(180deg, rgba(255, 107, 31, 0.06) 0%, transparent 80%),
    var(--wot-bg-2);
  border-radius: var(--wot-r-lg);
  padding: 28px 24px;
  box-shadow: var(--wot-shadow-card);
}
@media (min-width: 880px) { .wot-lp-alpha-card { padding: 36px 40px; } }
.wot-lp-alpha-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.wot-lp-alpha-icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 107, 31, 0.14);
  color: var(--wot-grad-start);
  border: 1px solid rgba(255, 107, 31, 0.35);
  font-size: 22px;
}
.wot-lp-alpha-title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 8px; line-height: 1.2; }
.wot-lp-alpha-lede { color: var(--wot-text-1); font-size: 15.5px; margin: 0; line-height: 1.55; }
.wot-lp-alpha-lede strong { color: var(--wot-text-0); font-weight: 600; }

.wot-lp-alpha-list { padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.wot-lp-alpha-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  font-size: 14.5px; line-height: 1.55; color: var(--wot-text-1);
}
.wot-lp-alpha-list li strong { color: var(--wot-text-0); font-weight: 600; }
.wot-lp-alpha-bullet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 107, 31, 0.14); color: var(--wot-grad-start);
  font-size: 14px; font-weight: 800; line-height: 1;
}
.wot-lp-alpha-close {
  margin: 0; padding-top: 18px;
  border-top: 1px dashed var(--wot-border-strong);
  color: var(--wot-text-0); font-size: 14.5px; line-height: 1.6; font-weight: 500;
}

/* ── Generic card grid (How it's built) ──────────────────────────────── */
.wot-lp-grid { display: grid; gap: 18px; }
.wot-lp-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .wot-lp-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .wot-lp-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.wot-lp-card {
  padding: 26px 22px;
  border-radius: var(--wot-r-lg);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  transition: transform 0.25s ease, border-color 0.2s, box-shadow 0.2s;
}
.wot-lp-card:hover { transform: translateY(-3px); border-color: var(--wot-border-strong); box-shadow: var(--wot-shadow-card); }
.wot-lp-card-iconbox {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: #fff; font-size: 22px;
}
.wot-lp-iconbox-1 { background: linear-gradient(135deg, var(--wot-grad-start), var(--wot-grad-end)); }
.wot-lp-iconbox-2 { background: linear-gradient(135deg, var(--wot-grad-end), #9c3df0); }
.wot-lp-iconbox-3 { background: linear-gradient(135deg, var(--wot-bull), var(--wot-target)); color: #0a0a0a; }
.wot-lp-card-title { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--wot-text-0); }
.wot-lp-card-body { margin: 0; color: var(--wot-text-1); font-size: 14.5px; line-height: 1.6; }

/* ── Feature inventory ───────────────────────────────────────────────── */
.wot-lp-legend {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px;
  margin-top: 20px; padding: 14px 18px;
  border: 1px solid var(--wot-border); border-radius: var(--wot-r-md);
  font-size: 13px; color: var(--wot-text-1);
  background: var(--wot-bg-2);
}
.wot-lp-legend em { font-style: normal; color: var(--wot-text-2); margin-right: 8px; }
.wot-lp-state {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.wot-lp-state-live    { background: rgba(34, 197, 94, 0.14);  color: var(--wot-bull); }
.wot-lp-state-partial { background: rgba(245, 180, 0, 0.14); color: var(--wot-chop); }

.wot-lp-feat { padding: 22px; border-radius: var(--wot-r-md); background: var(--wot-bg-2); border: 1px solid var(--wot-border); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.wot-lp-feat:hover { transform: translateY(-2px); border-color: var(--wot-border-strong); box-shadow: var(--wot-shadow-card); }
.wot-lp-feat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; }
.wot-lp-feat-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255, 31, 143, 0.10);
  color: var(--wot-grad-end);
  font-size: 16px;
}
.wot-lp-feat-title { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--wot-text-0); }
.wot-lp-feat-body { margin: 0; color: var(--wot-text-1); font-size: 13.5px; line-height: 1.6; }

/* ── How-it-works steps ──────────────────────────────────────────────── */
.wot-lp-steps {
  padding: 0; margin: 0 0 36px;
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .wot-lp-steps { grid-template-columns: repeat(3, 1fr); } }
.wot-lp-steps li {
  position: relative;
  padding: 28px 22px 22px;
  border-radius: var(--wot-r-lg);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
}
.wot-lp-step-num {
  position: absolute; top: -16px; left: 22px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--wot-grad);
  color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 18px rgba(255, 31, 143, 0.38);
}
.wot-lp-step-title { margin: 4px 0 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--wot-text-0); }
.wot-lp-steps li p { margin: 0; color: var(--wot-text-1); font-size: 13.5px; line-height: 1.6; }
.wot-lp-center { display: flex; justify-content: center; }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.wot-lp-price-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  max-width: 820px; margin: 0 auto;
}
@media (min-width: 720px) { .wot-lp-price-grid { grid-template-columns: 1fr 1fr; } }

.wot-lp-price-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--wot-r-lg);
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wot-lp-price-card-best {
  background:
    linear-gradient(180deg, rgba(255, 107, 31, 0.10) 0%, transparent 60%),
    var(--wot-bg-2);
  border-color: rgba(255, 107, 31, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 31, 143, 0.16), 0 18px 44px -12px rgba(255, 31, 143, 0.32);
}
.wot-lp-price-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 9.5px; letter-spacing: 0.12em; font-weight: 800;
  color: #fff; background: var(--wot-grad);
  padding: 4px 10px; border-radius: 999px;
}
.wot-lp-price-head { display: flex; flex-direction: column; gap: 8px; }
.wot-lp-price-name { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wot-text-2); }
.wot-lp-price-amount { display: flex; align-items: baseline; gap: 6px; }
.wot-lp-price-num { font-size: clamp(40px, 6vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--wot-text-0); }
.wot-lp-price-card-best .wot-lp-price-num {
  background: var(--wot-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wot-lp-price-unit { color: var(--wot-text-2); font-size: 14px; font-weight: 500; }
.wot-lp-price-list { padding: 0; margin: 0; display: grid; gap: 10px; }
.wot-lp-price-list li {
  padding-left: 22px; position: relative;
  color: var(--wot-text-1); font-size: 13.5px; line-height: 1.5;
}
.wot-lp-price-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wot-grad);
}

.wot-lp-price-locks { display: grid; gap: 12px; padding-top: 30px; margin-top: 24px; border-top: 1px dashed var(--wot-border-strong); max-width: 820px; margin-left: auto; margin-right: auto; }
.wot-lp-lock {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-size: 13.5px; color: var(--wot-text-1); line-height: 1.55;
}
.wot-lp-lock strong { display: block; color: var(--wot-text-0); font-weight: 600; margin-bottom: 2px; }
.wot-lp-lock-mark { color: var(--wot-bull); font-weight: 800; }

/* ── FAQ accordion ───────────────────────────────────────────────────── */
.wot-lp-faq { display: grid; gap: 10px; }
.wot-lp-faq-item {
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-2);
  overflow: hidden;
  transition: border-color 0.2s;
}
.wot-lp-faq-item[open] { border-color: var(--wot-border-strong); }
.wot-lp-faq-item summary {
  cursor: pointer; list-style: none;
  padding: 16px 20px;
  font-size: 15px; font-weight: 600;
  color: var(--wot-text-0);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative;
  user-select: none;
}
.wot-lp-faq-item summary::-webkit-details-marker { display: none; }
.wot-lp-faq-item summary::after {
  content: '+';
  font-size: 22px; font-weight: 400; color: var(--wot-text-2);
  line-height: 1; transition: transform 0.2s;
}
.wot-lp-faq-item[open] summary::after { content: '−'; }
.wot-lp-faq-body { padding: 0 20px 18px; color: var(--wot-text-1); font-size: 14.5px; line-height: 1.65; }
.wot-lp-faq-body p { margin: 0 0 10px; }
.wot-lp-faq-body p:last-child { margin-bottom: 0; }
.wot-lp-faq-body em { color: var(--wot-text-0); font-style: italic; }
.wot-lp-faq-body strong { color: var(--wot-text-0); }

/* ── Final CTA ──────────────────────────────────────────────────────── */
.wot-lp-section-final {
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 31, 143, 0.16) 0%, transparent 70%),
    var(--wot-bg-0);
  padding: 88px 0;
}
.wot-lp-final-title { font-size: clamp(26px, 4.6vw, 42px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 14px; }
.wot-lp-final-sub { color: var(--wot-text-1); font-size: 16px; line-height: 1.6; max-width: 640px; margin: 0 auto 28px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.wot-lp-foot {
  padding: 36px 0 28px;
  border-top: 1px solid var(--wot-border);
  background: var(--wot-bg-1);
}
.wot-lp-foot.is-shell {
  /* Used inside the app shell for authed users — sits flush below the
     active view's padding, so the top border carries the visual seam. */
  padding: 28px 24px 24px;
  margin-top: 32px;
}
.wot-lp-foot-grid { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: space-between; }
@media (min-width: 720px) { .wot-lp-foot-grid { flex-direction: row; } }
.wot-lp-foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--wot-text-0); font-weight: 800; font-size: 14px; letter-spacing: 0.02em; }
.wot-lp-foot-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--wot-grad);
  box-shadow: 0 4px 12px rgba(255, 31, 143, 0.32);
}
.wot-lp-foot-name {
  background: var(--wot-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 0.05em;
}
.wot-lp-foot-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 107, 31, 0.12); color: #ffd9a8;
  border: 1px solid rgba(255, 107, 31, 0.30);
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
}
.wot-lp-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.wot-lp-foot-nav a { color: var(--wot-text-1); text-decoration: none; font-size: 12.5px; font-weight: 500; transition: color 0.15s; }
.wot-lp-foot-nav a:hover { color: var(--wot-text-0); }
.wot-lp-foot-fine {
  text-align: center; color: var(--wot-text-2); font-size: 11.5px; line-height: 1.65;
  margin: 22px auto 0; max-width: 920px;
  padding-top: 20px; border-top: 1px dashed var(--wot-border);
}
.wot-lp-foot-fine strong { color: var(--wot-text-1); font-weight: 600; }
.wot-lp-foot-fine a {
  color: var(--wot-text-1);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.30);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.wot-lp-foot-fine a:hover,
.wot-lp-foot-fine a:focus-visible { color: var(--wot-text-0); text-decoration-color: currentColor; outline: none; }

/* ── Reveal animation ────────────────────────────────────────────────────
 * Default state is VISIBLE — JS opts elements in by adding `.wot-lp-fade`
 * BEFORE the IntersectionObserver fires. If the observer never wires up
 * (script error, SW cache miss, old browser), content still renders.
 * Previously this defaulted to opacity:0 which produced a blank page on
 * any observer hiccup. */
.wot-lp-reveal { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
.wot-lp-reveal.wot-lp-fade { opacity: 0; transform: translateY(14px); }
.wot-lp-reveal.wot-lp-fade.wot-lp-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .wot-lp-reveal,
  .wot-lp-reveal.wot-lp-fade { opacity: 1; transform: none; transition: none; }
  .wot-lp-pill-dot { animation: none; }
}

/* When the landing page is mounted, hide the app's normal top nav so the
   marketing surface goes edge-to-edge. App still has a brand mark + Sign-in
   button via the topbar — see the `data-route="landing"` body class set
   by app.js. */
body[data-wot-route="landing"] .wot-shell-header .wot-nav,
body[data-wot-route="landing"] .wot-shell-header .wot-shell-meta { display: none; }
body[data-wot-route="landing"] .wot-shell-header { grid-template-columns: auto 1fr auto; }
body[data-wot-route="landing"] .wot-view { padding: 0; }

/* ── 10-Q Briefs ──────────────────────────────────────────────────────────
   Trader-focused quarterly-filing briefing service. List of cards (one
   per filing, watchlist-scoped) plus a detail modal. Sentiment + surprise
   pills use the bull/bear/chop tokens; ticker accent comes from
   wot_tickers.accent_color via --wot-tenq-accent.
*/
.wot-tenq { max-width: 1200px; margin: 0 auto; }

.wot-tenq-count {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-1);
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wot-text-2);
}

/* Sub-tabs on the list page — pivot between 10-Q, 10-K, and All. Sits
   between the page header and the filter bar; sticky too so it stays
   reachable as the user scrolls. */
.wot-tenq-formtabs {
  display: flex; gap: 6px;
  margin: 0 0 14px;
}
.wot-tenq-formtab {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  border-radius: var(--wot-r-pill);
  font-size: 12px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wot-text-2);
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-1);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.wot-tenq-formtab:hover {
  color: var(--wot-text-0);
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--wot-bg-2);
}
.wot-tenq-formtab.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--wot-grad, linear-gradient(135deg, var(--wot-grad-start, #FF6B1F), var(--wot-grad-end, #FF1F8F)));
  box-shadow: 0 2px 12px rgba(255, 31, 143, 0.25);
}

/* Form pill on individual cards — shows '10-K' / '10-Q' more
   prominently than the other meta chips so the form is obvious when
   the user is browsing the "All" tab with mixed forms. */
.wot-tenq-form-pill {
  background: var(--wot-bg-0);
  color: var(--wot-text-1);
  padding: 2px 8px;
  border-radius: var(--wot-r-pill);
  border: 1px solid var(--wot-border);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Search highlights — yellow underline so it's obvious but doesn't
   nuke contrast on dark theme. Subtle background tint with a darker
   border-bottom so the match registers even at a glance. */
mark.wot-tenq-hl {
  background: rgba(245, 180, 0, 0.30);
  color: #fff;
  padding: 0 2px;
  border-radius: 3px;
  border-bottom: 1px solid var(--wot-chop, #f5b400);
}

/* Filter bar */
.wot-tenq-filters {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 14px 16px;
  margin-bottom: 20px;
  /* Sticky so search + filter chips stay accessible while scrolling
     through hundreds of briefs. Backdrop blur keeps cards readable
     when they scroll under the bar. */
  position: sticky;
  top: 12px;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(17, 17, 20, 0.92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.wot-tenq-filter-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wot-tenq-search {
  flex: 1 1 320px; min-width: 240px;
  display: flex; align-items: center; gap: 8px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 8px 12px;
  transition: border-color 0.15s;
}
.wot-tenq-search:focus-within { border-color: var(--wot-grad-end); }
.wot-tenq-search .wot-icon { color: var(--wot-text-2); flex-shrink: 0; }
.wot-tenq-search input {
  flex: 1; background: transparent; border: 0; color: var(--wot-text-0);
  font-size: 13px; outline: none;
}
.wot-tenq-search input::placeholder { color: var(--wot-text-2); }

.wot-tenq-ticker-wrap .wot-ticker-picker { min-width: 240px; }
.wot-tenq-ticker-wrap .wot-ticker-picker-btn { padding: 8px 12px; }

.wot-tenq-filter-pills { padding-top: 4px; }
.wot-tenq-pillgroup {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 0;
}
.wot-tenq-pillgroup-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin-right: 6px;
}
.wot-tenq-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-2);
  border-radius: var(--wot-r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wot-text-1);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wot-tenq-chip:hover { background: var(--wot-bg-3, var(--wot-bg-2)); border-color: rgba(255,255,255,0.22); color: var(--wot-text-0); }
.wot-tenq-chip.is-active { background: var(--wot-bg-0); border-color: var(--wot-grad-end); color: var(--wot-text-0); }
.wot-tenq-chip.is-positive.is-active { border-color: var(--wot-bull); color: var(--wot-bull); background: rgba(34,197,94,0.08); }
.wot-tenq-chip.is-negative.is-active { border-color: var(--wot-bear); color: var(--wot-bear); background: rgba(239,68,68,0.08); }
.wot-tenq-chip.is-mixed.is-active    { border-color: var(--wot-chop); color: var(--wot-chop); background: rgba(245,180,0,0.08); }
.wot-tenq-chip.is-beat.is-active     { border-color: var(--wot-bull); color: var(--wot-bull); background: rgba(34,197,94,0.08); }
.wot-tenq-chip.is-miss.is-active     { border-color: var(--wot-bear); color: var(--wot-bear); background: rgba(239,68,68,0.08); }
.wot-tenq-chip.is-inline.is-active   { border-color: var(--wot-text-1); color: var(--wot-text-0); background: rgba(255,255,255,0.04); }

.wot-tenq-dates {
  display: inline-flex; align-items: center; gap: 14px;
  margin-left: auto;
  font-size: 11px; color: var(--wot-text-2);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
}
.wot-tenq-dates label { display: inline-flex; align-items: center; gap: 6px; }
.wot-tenq-dates input[type="date"] {
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 6px 8px;
  color: var(--wot-text-0);
  font-size: 12px;
  color-scheme: dark;
}
.wot-tenq-clear { white-space: nowrap; }

/* List */
.wot-tenq-list { display: grid; gap: 16px; grid-template-columns: 1fr; }
.wot-tenq-empty {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--wot-border-strong, var(--wot-border));
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-1);
  color: var(--wot-text-2);
}
.wot-tenq-empty h3 {
  font-size: 16px; font-weight: 700; color: var(--wot-text-1);
  margin-bottom: 6px;
}
.wot-tenq-empty p { font-size: 13px; line-height: 1.6; max-width: 540px; margin: 0 auto; }
.wot-tenq-empty a { color: var(--wot-grad-end); }
.wot-tenq-loading { opacity: 0.6; }

/* Card */
.wot-tenq-card {
  position: relative;
  display: grid; gap: 14px;
  background: linear-gradient(180deg, var(--wot-bg-2), var(--wot-bg-1) 32%);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 18px 20px 16px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s, background 0.15s;
  --wot-tenq-accent: #FF1F8F;
}
.wot-tenq-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.wot-tenq-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--wot-tenq-accent);
  border-radius: var(--wot-r-md) 0 0 var(--wot-r-md);
}
.wot-tenq-cardhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.wot-tenq-symbol { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.wot-tenq-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--wot-tenq-accent);
  color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: -0.01em;
  flex-shrink: 0;
}
.wot-tenq-symbol h3 {
  font-size: 16px; font-weight: 800; color: var(--wot-text-0);
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.wot-tenq-company {
  font-weight: 500; color: var(--wot-text-2);
  font-size: 13px;
}
.wot-tenq-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin-top: 4px;
}
.wot-tenq-fresh { color: var(--wot-grad-end); }

.wot-tenq-pills {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  flex-shrink: 0;
}
.wot-tenq-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-2);
  border-radius: var(--wot-r-pill);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wot-tenq-pill.is-positive { border-color: var(--wot-bull); color: var(--wot-bull); background: rgba(34,197,94,0.08); }
.wot-tenq-pill.is-negative { border-color: var(--wot-bear); color: var(--wot-bear); background: rgba(239,68,68,0.08); }
.wot-tenq-pill.is-mixed    { border-color: var(--wot-chop); color: var(--wot-chop); background: rgba(245,180,0,0.08); }
.wot-tenq-pill.is-beat     { border-color: var(--wot-bull); color: var(--wot-bull); background: rgba(34,197,94,0.08); }
.wot-tenq-pill.is-miss     { border-color: var(--wot-bear); color: var(--wot-bear); background: rgba(239,68,68,0.08); }
.wot-tenq-pill.is-inline   { color: var(--wot-text-1); }
.wot-tenq-pill-pending     {
  border-color: var(--wot-text-2); color: var(--wot-text-2);
  background: rgba(255,255,255,0.04);
  text-transform: lowercase; letter-spacing: 0.02em;
}

.wot-tenq-headline {
  font-size: 15px; line-height: 1.5;
  color: var(--wot-text-0);
  margin: 0;
}

/* Headline metrics row */
.wot-tenq-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.wot-tenq-metric {
  display: grid; gap: 4px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 10px 12px;
}
.wot-tenq-metric .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
}
.wot-tenq-metric .val {
  font-size: 16px; font-weight: 800; color: var(--wot-text-0);
  letter-spacing: -0.01em;
}
.wot-tenq-metric .deltas {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700;
}
.wot-tenq-metric.is-empty .val { color: var(--wot-text-2); }
.delta.is-up   { color: var(--wot-bull); }
.delta.is-down { color: var(--wot-bear); }
.delta.is-flat { color: var(--wot-text-2); }
.delta em {
  font-style: normal; color: var(--wot-text-2);
  letter-spacing: 0.06em; text-transform: uppercase; margin-left: 2px;
}

/* Takeaways teaser */
.wot-tenq-takeaways {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
}
.wot-tenq-takeaways li {
  position: relative;
  padding-left: 18px;
  font-size: 13px; line-height: 1.5;
  color: var(--wot-text-1);
}
.wot-tenq-takeaways li::before {
  content: '•';
  position: absolute; left: 4px; top: 0;
  color: var(--wot-tenq-accent);
  font-weight: 800;
}

.wot-tenq-angle {
  background: var(--wot-bg-0);
  border-left: 3px solid var(--wot-grad-end);
  border-radius: 0 var(--wot-r-sm) var(--wot-r-sm) 0;
  padding: 10px 14px;
}
.wot-tenq-angle strong {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-grad-end);
  margin-bottom: 4px;
}
.wot-tenq-angle p {
  font-size: 13px; line-height: 1.5; color: var(--wot-text-0);
  margin: 0;
}

.wot-tenq-cardfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--wot-border);
}
.wot-tenq-readmore {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0;
  color: var(--wot-grad-end);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.wot-tenq-readmore:hover { color: var(--wot-text-0); }
.wot-tenq-readmore .wot-icon { width: 14px; height: 14px; }
.wot-tenq-extlink {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wot-text-2);
  text-decoration: none;
}
.wot-tenq-extlink:hover { color: var(--wot-text-0); }
.wot-tenq-extlink .wot-icon { width: 12px; height: 12px; }

/* Detail modal */
.wot-tenq-detail { display: grid; gap: 18px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.wot-tenq-detail-loading { padding: 40px; text-align: center; color: var(--wot-text-2); }
.wot-tenq-detail-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wot-text-2);
}
.wot-tenq-detail-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.wot-tenq-detail-headline {
  font-size: 18px; font-weight: 700; color: var(--wot-text-0);
  line-height: 1.4; margin: 0;
}
.wot-tenq-detail-section {
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 14px 16px;
}
.wot-tenq-detail-section h4 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin: 0 0 10px;
}
.wot-tenq-detail-section ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.wot-tenq-detail-section li {
  position: relative;
  padding-left: 18px;
  font-size: 13px; line-height: 1.55;
  color: var(--wot-text-1);
}
.wot-tenq-detail-section li::before {
  content: '•';
  position: absolute; left: 4px; top: 0;
  color: var(--wot-text-2); font-weight: 800;
}
.wot-tenq-detail-takeaways  h4 { color: var(--wot-bull); }
.wot-tenq-detail-risks      h4 { color: var(--wot-bear); }
.wot-tenq-detail-surprises  h4 { color: var(--wot-chop); }
.wot-tenq-detail-angle      h4 { color: var(--wot-grad-end); }
.wot-tenq-detail-angle      p  { font-size: 14px; line-height: 1.55; color: var(--wot-text-0); margin: 0; }

.wot-tenq-detail-guidance dl {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 6px 16px;
  margin: 0;
}
.wot-tenq-detail-guidance dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wot-text-2);
  padding-top: 3px;
}
.wot-tenq-detail-guidance dd {
  margin: 0;
  font-size: 13px; line-height: 1.55; color: var(--wot-text-1);
}

.wot-tenq-detail-metrics table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.wot-tenq-detail-metrics th,
.wot-tenq-detail-metrics td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--wot-border);
}
.wot-tenq-detail-metrics th {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wot-text-2);
}
.wot-tenq-detail-metrics tr:last-child td { border-bottom: 0; }
.wot-tenq-detail-metrics td:nth-child(2) { font-weight: 700; color: var(--wot-text-0); }

.wot-tenq-detail-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--wot-border);
}
.wot-tenq-detail-foot .wot-tenq-fresh {
  font-size: 11px; color: var(--wot-text-2);
}

@media (max-width: 720px) {
  .wot-tenq-dates { margin-left: 0; }
  .wot-tenq-detail-guidance dl { grid-template-columns: 1fr; }
}

/* ── In-app SEC filing viewer (#/10q/:accession/document) ────────────────
   Full-bleed reader. Header bar at the top, iframe fills the rest of the
   viewport. The iframe is sandboxed via JS (no allow-scripts, no allow-
   same-origin); styles here just give the chrome around it.
*/
.wot-tenq-doc {
  display: flex; flex-direction: column;
  /* Use viewport height minus the app shell header height (which is
     ~64px in the current chrome). The iframe needs definite height. */
  height: calc(100vh - 64px);
  min-height: 500px;
  max-width: 1200px;
  margin: 0 auto;
}

.wot-tenq-doc-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--wot-border);
  flex-wrap: wrap;
}
.wot-tenq-doc-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wot-text-2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--wot-r-pill);
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-1);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.wot-tenq-doc-back:hover { color: var(--wot-text-0); border-color: rgba(255,255,255,0.22); background: var(--wot-bg-2); }
.wot-tenq-doc-back .wot-icon { width: 14px; height: 14px; }

.wot-tenq-doc-meta {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
  color: var(--wot-text-2);
  font-size: 12px;
}
.wot-tenq-doc-meta .wot-tenq-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 11px;
  flex-shrink: 0;
}
.wot-tenq-doc-meta-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.wot-tenq-doc-meta-text strong {
  color: var(--wot-text-0);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wot-tenq-doc-meta-text span {
  color: var(--wot-text-1);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.wot-tenq-doc-meta-text em {
  font-style: normal;
  color: var(--wot-text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wot-tenq-doc-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wot-tenq-doc-actions .wot-btn { white-space: nowrap; }

.wot-tenq-doc-stage {
  flex: 1; min-height: 0;
  margin-top: 16px;
  border-radius: var(--wot-r-md);
  overflow: hidden;
  /* Mid-tone dark background — the iframe content itself is restyled
     via worker-injected CSS (see handlers/tenq.js DARK_FILING_CSS) so
     SEC HTML reads as light text on a dark surface. */
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  position: relative;
}
.wot-tenq-doc-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--wot-text-2);
  font-size: 13px;
}
.wot-tenq-doc-frame {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  /* Match worker-injected --wot-bg-2 — prevents a white flash before
     the embedded <style> applies. */
  background: #16161b;
}

/* ── Full-page detail with Brief / Filing tabs ──────────────────────────
   The Brief tab scrolls naturally with the page; the Filing tab takes
   the rest of the viewport for the embedded iframe. Header bar (reusing
   .wot-tenq-doc-* chrome) sits above the tab strip; both tabs share the
   same chrome.
*/
.wot-tenq-detailpage {
  display: flex; flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}
.wot-tenq-detailpage .wot-tenq-loading {
  padding: 60px 24px;
  text-align: center;
  color: var(--wot-text-2);
  font-size: 13px;
}

.wot-tenq-tabs {
  display: flex; gap: 6px;
  padding: 8px 0 0;
  border-bottom: 1px solid var(--wot-border);
  margin: 14px 0 20px;
}
.wot-tenq-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: var(--wot-r-sm) var(--wot-r-sm) 0 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wot-text-2);
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  text-decoration: none;
  position: relative;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.wot-tenq-tab:hover { color: var(--wot-text-0); background: var(--wot-bg-2); }
.wot-tenq-tab .wot-icon { width: 14px; height: 14px; }
.wot-tenq-tab.is-active {
  color: var(--wot-text-0);
  border-color: var(--wot-border);
  background: var(--wot-bg-1);
}
.wot-tenq-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--wot-bg-1);
}

.wot-tenq-tabpanel.is-filing {
  /* Filing tab: iframe fills viewport space below header + tabs. */
  display: flex; flex-direction: column;
  height: calc(100vh - 240px);
  min-height: 480px;
  border-radius: var(--wot-r-md);
  overflow: hidden;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  position: relative;
}
.wot-tenq-tabpanel.is-filing .wot-tenq-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0;
}
.wot-tenq-tabpanel .wot-tenq-doc-frame {
  width: 100%; height: 100%;
  flex: 1;
  border: 0;
  display: block;
  background: #16161b;
}

@media (max-width: 720px) {
  .wot-tenq-doc { height: calc(100vh - 56px); }
  .wot-tenq-doc-meta-text span { max-width: 180px; }
}

/* ── Financials view (Yahoo-style Income / Balance / Cash Flow tables) ── */
.wot-fin {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wot-fin-meta {
  font-size: 12px;
  color: var(--wot-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wot-fin-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wot-fin-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.wot-fin-control-pills {
  gap: 16px;
}
.wot-fin-pillgroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: 999px;
}
.wot-fin-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--wot-text-1);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.wot-fin-chip:hover { color: var(--wot-text-0); }
.wot-fin-chip.is-active {
  background: var(--wot-grad);
  color: #fff;
  box-shadow: 0 1px 6px rgba(255, 31, 143, 0.35);
}
.wot-fin-scope {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 12px; color: var(--wot-text-1);
  border: 1px solid var(--wot-border); border-radius: 999px;
  background: rgba(255,255,255,0.02);
  cursor: pointer; user-select: none;
}
.wot-fin-scope:hover { border-color: rgba(255,255,255,0.22); }
.wot-fin-scope input { accent-color: var(--wot-grad-end); cursor: pointer; }

.wot-fin-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  max-width: 420px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: 10px;
  padding: 8px 12px;
}
.wot-fin-search input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--wot-text-0);
  font-size: 14px;
  outline: none;
}
.wot-fin-search input::placeholder { color: var(--wot-text-2); }
.wot-fin-ticker-wrap { min-width: 260px; }
.wot-fin-stage {
  min-height: 240px;
}
.wot-fin-tablewrap {
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  overflow-x: auto;
}
.wot-fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wot-fin-table thead th {
  position: sticky;
  top: 0;
  background: var(--wot-bg-2);
  border-bottom: 1px solid var(--wot-border);
  padding: 10px 14px;
  color: var(--wot-text-1);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  z-index: 1;
}
.wot-fin-table thead th.wot-fin-th-label {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
}
.wot-fin-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}
.wot-fin-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.wot-fin-table tbody tr:last-child td { border-bottom: 0; }
.wot-fin-td-label {
  color: var(--wot-text-0);
  font-weight: 500;
  position: sticky;
  left: 0;
  background: var(--wot-bg-1);
  z-index: 1;
  min-width: 220px;
}
.wot-fin-table tbody tr:hover .wot-fin-td-label {
  background: var(--wot-bg-2);
}
.wot-fin-td-num {
  color: var(--wot-text-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 110px;
}
.wot-fin-tablefoot {
  padding: 10px 14px;
  border-top: 1px solid var(--wot-border);
  background: var(--wot-bg-2);
  color: var(--wot-text-2);
  font-size: 12px;
}
.wot-fin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  background: var(--wot-bg-1);
  border: 1px dashed var(--wot-border);
  border-radius: var(--wot-r-md);
  color: var(--wot-text-2);
  gap: 8px;
}
.wot-fin-empty h3 {
  margin: 0;
  color: var(--wot-text-0);
  font-size: 16px;
  font-weight: 600;
}
.wot-fin-empty p {
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}
.wot-fin-loading {
  border-style: solid;
}

@media (max-width: 720px) {
  .wot-fin-td-label { min-width: 160px; }
  .wot-fin-td-num   { min-width: 90px; }
}

/* Financials — indented tree rows + bold totals */
.wot-fin-indent {
  display: inline-block;
  width: 18px;
}
.wot-fin-rowlabel {
  vertical-align: middle;
}
.wot-fin-row.is-total .wot-fin-rowlabel {
  font-weight: 700;
  color: var(--wot-text-0);
}
.wot-fin-row.is-total .wot-fin-td-num {
  font-weight: 700;
  color: var(--wot-text-0);
}
.wot-fin-row[data-depth="1"] .wot-fin-rowlabel { color: var(--wot-text-1); }
.wot-fin-row[data-depth="2"] .wot-fin-rowlabel { color: var(--wot-text-2); }
.wot-fin-row[data-depth="3"] .wot-fin-rowlabel { color: var(--wot-text-2); font-size: 12.5px; }

/* ─────────────────────────────────────────────────────────────────────
   Market-Cap Risk view (#/mktcap-risk)
   Damodaran-style breakeven revenue classifier. D1..D5 tiers shown as
   pills + cards. Visual language echoes .wot-tenq-* but uses its own
   prefix so the two views can evolve independently.
   ────────────────────────────────────────────────────────────────── */

.wot-mcr { display: grid; gap: 18px; }
.wot-mcr-meta {
  font-size: 12px; color: var(--wot-text-2); font-variant-numeric: tabular-nums;
}

/* Filters */
.wot-mcr-filters {
  display: grid; gap: 12px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 14px 16px;
}
.wot-mcr-filter-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wot-mcr-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 240px;
  padding: 8px 12px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
}
.wot-mcr-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--wot-text-0); font: inherit; font-size: 13.5px;
}
.wot-mcr-search .wot-icon { width: 16px; height: 16px; color: var(--wot-text-2); }
.wot-mcr-clear { white-space: nowrap; }

.wot-mcr-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.wot-mcr-tab {
  display: grid; gap: 4px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  color: var(--wot-text-1);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  font: inherit;
}
.wot-mcr-tab:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.wot-mcr-tab.is-active {
  border-color: var(--wot-grad-end);
  background: linear-gradient(135deg, rgba(255,107,31,0.10), rgba(255,31,143,0.10));
}
.wot-mcr-tab .t-tier {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wot-text-2);
}
.wot-mcr-tab .t-label { font-size: 14px; font-weight: 700; color: var(--wot-text-0); }
.wot-mcr-tab .t-coe   { font-size: 10px; color: var(--wot-text-2); letter-spacing: 0.04em; }
.wot-mcr-tab .t-count {
  justify-self: end; position: absolute; top: 8px; right: 10px;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px;
  background: var(--wot-bg-2);
  color: var(--wot-text-1);
  border-radius: 6px;
}
.wot-mcr-tab { position: relative; }
.wot-mcr-tab.is-active .t-count {
  background: var(--wot-grad);
  color: #fff;
}

/* Tier accent colors — used on tabs + tier pills + cards. */
.wot-mcr-tab.tier-d1 .t-tier  { color: #ef4444; }
.wot-mcr-tab.tier-d2 .t-tier  { color: #f59e0b; }
.wot-mcr-tab.tier-d3 .t-tier  { color: #c9c9d1; }
.wot-mcr-tab.tier-d4 .t-tier  { color: #38bdf8; }
.wot-mcr-tab.tier-d5 .t-tier  { color: #22c55e; }
.wot-mcr-tab.tier-d1.is-active { border-color: #ef4444; background: rgba(239,68,68,0.06); }
.wot-mcr-tab.tier-d2.is-active { border-color: #f59e0b; background: rgba(245,158,11,0.06); }
.wot-mcr-tab.tier-d3.is-active { border-color: #c9c9d1; background: rgba(255,255,255,0.04); }
.wot-mcr-tab.tier-d4.is-active { border-color: #38bdf8; background: rgba(56,189,248,0.06); }
.wot-mcr-tab.tier-d5.is-active { border-color: #22c55e; background: rgba(34,197,94,0.06); }

/* Explainer banner */
.wot-mcr-explainer {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,107,31,0.04), rgba(255,31,143,0.04));
  border: 1px solid var(--wot-border);
  border-left: 3px solid var(--wot-grad-end);
  border-radius: var(--wot-r-sm);
}
.wot-mcr-ex-icon .wot-icon {
  width: 18px; height: 18px;
  color: var(--wot-grad-end);
}
.wot-mcr-explainer p {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--wot-text-1);
}
.wot-mcr-explainer strong { color: var(--wot-text-0); font-weight: 700; }

/* List */
.wot-mcr-list { display: grid; gap: 16px; grid-template-columns: 1fr; }
.wot-mcr-empty {
  padding: 48px 24px; text-align: center;
  border: 1px dashed var(--wot-border);
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-1);
  color: var(--wot-text-2);
}
.wot-mcr-empty h3 {
  font-size: 16px; font-weight: 700; color: var(--wot-text-1); margin-bottom: 6px;
}
.wot-mcr-empty p {
  font-size: 13px; line-height: 1.6; max-width: 540px; margin: 0 auto;
}
.wot-mcr-loading { opacity: 0.6; }

/* Card */
.wot-mcr-card {
  position: relative;
  display: grid; gap: 14px;
  background: linear-gradient(180deg, var(--wot-bg-2), var(--wot-bg-1) 32%);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 18px 20px 16px 24px;
  transition: transform 0.12s ease, border-color 0.15s, background 0.15s;
  --wot-mcr-accent: #FF1F8F;
}
.wot-mcr-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.wot-mcr-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--wot-mcr-accent);
  border-radius: var(--wot-r-md) 0 0 var(--wot-r-md);
}

/* Card head: ticker + tier pill */
.wot-mcr-cardhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.wot-mcr-symbol { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.wot-mcr-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--wot-mcr-accent);
  color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: -0.01em;
  flex-shrink: 0;
}
.wot-mcr-symbol h3 {
  font-size: 16px; font-weight: 800; color: var(--wot-text-0);
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wot-mcr-company {
  font-weight: 500; color: var(--wot-text-2); font-size: 13px;
}
.wot-mcr-meta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--wot-text-2);
  margin-top: 4px;
}
.wot-mcr-src { font-style: normal; color: var(--wot-text-2); text-transform: uppercase; font-size: 9px; letter-spacing: 0.1em; }

.wot-mcr-tierpill {
  display: grid; gap: 2px; align-items: center; justify-items: end;
  padding: 8px 12px;
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-0);
  border-radius: var(--wot-r-sm);
  text-align: right;
  flex-shrink: 0;
}
.wot-mcr-tierpill strong {
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
.wot-mcr-tierpill span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
}
.wot-mcr-tierpill em {
  font-style: normal; font-size: 10px; color: var(--wot-text-2);
}
.wot-mcr-tierpill.tier-d1 { border-color: rgba(239,68,68,0.5);  background: rgba(239,68,68,0.08); }
.wot-mcr-tierpill.tier-d1 strong { color: #ef4444; }
.wot-mcr-tierpill.tier-d2 { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.08); }
.wot-mcr-tierpill.tier-d2 strong { color: #f59e0b; }
.wot-mcr-tierpill.tier-d3 { border-color: rgba(201,201,209,0.4); }
.wot-mcr-tierpill.tier-d3 strong { color: var(--wot-text-0); }
.wot-mcr-tierpill.tier-d4 { border-color: rgba(56,189,248,0.5); background: rgba(56,189,248,0.08); }
.wot-mcr-tierpill.tier-d4 strong { color: #38bdf8; }
.wot-mcr-tierpill.tier-d5 { border-color: rgba(34,197,94,0.5);  background: rgba(34,197,94,0.08); }
.wot-mcr-tierpill.tier-d5 strong { color: #22c55e; }

/* Breakdown */
.wot-mcr-breakdown { display: grid; gap: 14px; }

.wot-mcr-headline-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.wot-mcr-hm {
  display: grid; gap: 4px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 10px 12px;
}
.wot-mcr-hm .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wot-text-2);
}
.wot-mcr-hm .val {
  font-size: 18px; font-weight: 800; color: var(--wot-text-0);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}

/* Revenue-gap progress bar */
.wot-mcr-bar { display: grid; gap: 6px; }
.wot-mcr-bar-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--wot-text-2);
  text-transform: uppercase;
}
.wot-mcr-bar-label strong {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.wot-mcr-bar-label strong.is-good    { color: var(--wot-bull); }
.wot-mcr-bar-label strong.is-stretch { color: var(--wot-chop); }
.wot-mcr-bar-label strong.is-rich    { color: var(--wot-bear); }
.wot-mcr-bar-label strong.is-na      { color: var(--wot-text-2); }

.wot-mcr-bar-track {
  position: relative; height: 10px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: 999px;
  overflow: hidden;
}
.wot-mcr-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.wot-mcr-bar-fill.is-good    { background: linear-gradient(90deg, #16a34a, #22c55e); }
.wot-mcr-bar-fill.is-stretch { background: linear-gradient(90deg, #ca8a04, #f59e0b); }
.wot-mcr-bar-fill.is-rich    { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.wot-mcr-bar-fill.is-na      { background: var(--wot-text-2); opacity: 0.2; }

/* The "breakeven" tick mark — visualised at 1/1.5 = 66.6% of the track. */
.wot-mcr-bar-mark {
  position: absolute;
  top: -2px;
  left: 66.66%;
  width: 2px;
  height: 14px;
  background: rgba(255,255,255,0.5);
  transform: translateX(-1px);
}
.wot-mcr-bar-scale {
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wot-text-2);
}
.wot-mcr-bar-scale span:nth-child(2) {
  position: relative;
  left: calc(66.66% - 50%);
}

/* Inputs strip */
.wot-mcr-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  padding: 10px 12px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
}
.wot-mcr-inp { display: grid; gap: 2px; }
.wot-mcr-inp .lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
}
.wot-mcr-inp .val {
  font-size: 14px; font-weight: 700; color: var(--wot-text-0);
  font-variant-numeric: tabular-nums;
}
.wot-mcr-inp .val.is-up   { color: var(--wot-bull); }
.wot-mcr-inp .val.is-down { color: var(--wot-bear); }

.wot-mcr-reason {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  padding: 8px 12px;
  background: var(--wot-bg-0);
  border: 1px dashed var(--wot-border);
  border-radius: var(--wot-r-sm);
  font-size: 12px; line-height: 1.5;
  color: var(--wot-text-1);
}
.wot-mcr-reason .wot-icon {
  width: 14px; height: 14px;
  color: var(--wot-grad-end);
  flex-shrink: 0;
  margin-top: 2px;
}

.wot-mcr-cardfoot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--wot-border);
}
.wot-mcr-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--wot-grad-end);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none;
}
.wot-mcr-link:hover { color: var(--wot-text-0); }
.wot-mcr-link .wot-icon { width: 12px; height: 12px; }

/* "Only my watchlist" toggle on Market-Cap Risk header */
.wot-mcr-scope {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 12px; color: var(--wot-text-1); font-weight: 600;
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-0);
  border-radius: var(--wot-r-sm);
  cursor: pointer;
  user-select: none;
}
.wot-mcr-scope:hover { border-color: rgba(255,255,255,0.22); }
.wot-mcr-scope input {
  accent-color: var(--wot-grad-end);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
 * Valuation (#/valuation) — Damodaran FCFF Simple Ginzu wealth-advisor view
 * ══════════════════════════════════════════════════════════════════════ */

.wot-val { padding: 28px clamp(16px, 4vw, 40px) 64px; }

.wot-val-scope {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 12px; color: var(--wot-text-1);
  border: 1px solid var(--wot-border); border-radius: 999px;
  background: rgba(255,255,255,0.02);
  cursor: pointer; user-select: none;
}
.wot-val-scope:hover { border-color: rgba(255,255,255,0.22); }
.wot-val-scope input { accent-color: var(--wot-grad-end); cursor: pointer; }
.wot-val-meta { font-size: 12px; color: var(--wot-text-2); margin-left: 8px; }

.wot-val-filters {
  display: flex; flex-direction: column; gap: 12px;
  margin: 18px 0 14px;
}
.wot-val-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wot-val-search {
  flex: 1 1 280px; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--wot-border); border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.wot-val-search input {
  background: transparent; border: 0; color: var(--wot-text-0);
  font-size: 13px; outline: none; flex: 1 1 auto;
}
.wot-val-sort {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--wot-border); color: var(--wot-text-0);
  padding: 8px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
}
.wot-val-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wot-val-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-size: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--wot-border);
  color: var(--wot-text-1); cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.wot-val-tab:hover { background: rgba(255,255,255,0.06); }
.wot-val-tab.is-active { background: rgba(255, 31, 143, 0.16); border-color: rgba(255, 31, 143, 0.45); color: var(--wot-text-0); }
.wot-val-tab .v-count { font-size: 11px; color: var(--wot-text-2); font-variant-numeric: tabular-nums; }
.wot-val-tab.verdict-sig-under { color: #6ee7b7; }
.wot-val-tab.verdict-under     { color: #22c55e; }
.wot-val-tab.verdict-fair      { color: var(--wot-text-1); }
.wot-val-tab.verdict-over      { color: #f5b400; }
.wot-val-tab.verdict-sig-over  { color: #ef4444; }

.wot-val-explainer {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--wot-border); border-radius: 12px;
  margin: 12px 0 18px;
}
.wot-val-ex-icon { color: var(--wot-grad-end); flex-shrink: 0; margin-top: 2px; }
.wot-val-explainer p { margin: 0; font-size: 12.5px; color: var(--wot-text-1); line-height: 1.5; }
.wot-val-explainer strong { color: var(--wot-text-0); font-weight: 700; }

.wot-val-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 18px;
}

.wot-val-empty {
  grid-column: 1 / -1;
  padding: 36px 24px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--wot-border); border-radius: 14px;
  color: var(--wot-text-1);
}
.wot-val-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--wot-text-0); }
.wot-val-empty p  { margin: 0; font-size: 13px; color: var(--wot-text-2); }
.wot-val-loading  { color: var(--wot-text-2); }

/* ── Card ─────────────────────────────────────────────────────────────── */

.wot-val-card {
  --wot-val-accent: #FF1F8F;
  position: relative;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: 16px;
  padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .12s ease, transform .12s ease;
}
.wot-val-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }

.wot-val-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wot-val-accent);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
}

.wot-val-cardhead {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.wot-val-symbol { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.wot-val-mark {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px; font-size: 12px; font-weight: 700;
  color: #fff; letter-spacing: 0.5px;
}
.wot-val-symbol h3 {
  margin: 0; font-size: 16px; color: var(--wot-text-0);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.wot-val-symbol h3 a { color: inherit; text-decoration: none; }
.wot-val-symbol h3 a:hover { color: var(--wot-grad-end); }
.wot-val-company { font-size: 12.5px; font-weight: 400; color: var(--wot-text-2); }
.wot-val-meta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11px; color: var(--wot-text-2);
}
.wot-val-meta-row span { white-space: nowrap; }

.wot-val-verdictpill {
  flex-shrink: 0;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 6px 12px;
  border-radius: 10px;
  font-size: 11px;
  border: 1px solid;
  background: rgba(255,255,255,0.02);
  min-width: 76px; text-align: center;
}
.wot-val-verdictpill strong { font-size: 11.5px; }
.wot-val-verdictpill em { font-size: 11px; font-style: normal; color: var(--wot-text-1); }

.wot-val-card.verdict-sig-under .wot-val-verdictpill { border-color: rgba(110, 231, 183, 0.45); background: rgba(110, 231, 183, 0.08); color: #6ee7b7; }
.wot-val-card.verdict-under     .wot-val-verdictpill { border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.08); color: #22c55e; }
.wot-val-card.verdict-fair      .wot-val-verdictpill { border-color: var(--wot-border); color: var(--wot-text-1); }
.wot-val-card.verdict-over      .wot-val-verdictpill { border-color: rgba(245,180,0,0.45); background: rgba(245,180,0,0.08); color: #f5b400; }
.wot-val-card.verdict-sig-over  .wot-val-verdictpill { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.08); color: #ef4444; }

.wot-val-headline {
  display: flex; align-items: baseline; justify-content: center; gap: 16px;
  padding: 10px 0 4px;
}
.wot-val-h-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wot-val-h-block .lbl { font-size: 11px; color: var(--wot-text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.wot-val-h-block .val { font-size: 22px; font-weight: 700; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }
.wot-val-h-vs { font-size: 13px; color: var(--wot-text-2); margin: 0 2px; }

.wot-val-confidence {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--wot-text-2);
}
.wot-val-confidence .c-label { text-transform: uppercase; letter-spacing: 0.4px; }
.wot-val-confidence .c-dots { display: inline-flex; gap: 3px; }
.wot-val-confidence .c-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
}
.wot-val-confidence .c-dot.is-on { background: var(--wot-val-accent); }
.wot-val-confidence .c-bucket { color: var(--wot-text-1); font-weight: 600; }

.wot-val-narrative {
  margin: 0;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: var(--wot-text-1);
}

.wot-val-drivers h4,
.wot-val-range h4 {
  margin: 0 0 8px; font-size: 11px; color: var(--wot-text-2);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
}
.wot-val-driver {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: 10px; align-items: center;
  padding: 4px 0; font-size: 12px;
}
.wot-val-driver .d-label { color: var(--wot-text-1); }
.wot-val-driver .d-bar {
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.wot-val-driver .d-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.40));
  border-radius: 3px;
  transition: width .25s ease;
}
.wot-val-driver .d-fill.rating-excellent { background: #22c55e; }
.wot-val-driver .d-fill.rating-strong    { background: #6ee7b7; }
.wot-val-driver .d-fill.rating-inline    { background: rgba(255,255,255,0.32); }
.wot-val-driver .d-fill.rating-elevated  { background: #f5b400; }
.wot-val-driver .d-fill.rating-poor      { background: #ef4444; }
.wot-val-driver .d-rating {
  font-size: 11px; color: var(--wot-text-2); justify-self: end;
}
.wot-val-driver .d-rating.rating-excellent { color: #6ee7b7; }
.wot-val-driver .d-rating.rating-strong    { color: #22c55e; }
.wot-val-driver .d-rating.rating-elevated  { color: #f5b400; }
.wot-val-driver .d-rating.rating-poor      { color: #ef4444; }

.wot-val-range { margin-top: 4px; }
.wot-val-r-strip {
  position: relative;
  height: 36px;
  padding: 0 2px;
  background: linear-gradient(90deg, rgba(239,68,68,0.08), rgba(255,255,255,0.04), rgba(34,197,94,0.08));
  border-radius: 10px;
  font-size: 10px;
  color: var(--wot-text-1);
}
.wot-val-r-strip .r-end,
.wot-val-r-strip .r-mid {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 2px 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--wot-border);
  border-radius: 6px;
  white-space: nowrap;
}
.wot-val-r-strip .r-bear  { left: 4px; color: #fca5a5; }
.wot-val-r-strip .r-bull  { right: 4px; color: #86efac; }
.wot-val-r-strip .r-base  { transform: translate(-50%, -50%); color: var(--wot-text-0); font-weight: 700; }
.wot-val-r-strip .r-today {
  position: absolute; bottom: -2px;
  transform: translateX(-50%);
  font-size: 10px; color: var(--wot-current-line); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wot-val-r-strip .r-today::before {
  content: ''; display: block;
  width: 2px; height: 12px;
  background: var(--wot-current-line);
  margin: 0 auto 1px;
  border-radius: 1px;
}

.wot-val-cardfoot {
  display: flex; gap: 12px; padding-top: 10px;
  border-top: 1px solid var(--wot-border);
  font-size: 12px;
}
.wot-val-link {
  color: var(--wot-text-1);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.wot-val-link:hover { color: var(--wot-text-0); }

/* ══════════════════════════════════════════════════════════════════════
 * Valuation detail (#/valuation/:symbol)
 * ══════════════════════════════════════════════════════════════════════ */

.wot-val-detail { padding: 28px clamp(16px, 4vw, 40px) 64px; }
.wot-val-detail-body { display: flex; flex-direction: column; gap: 18px; }

.wot-vald-headline {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  padding: 22px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: 16px;
}
.vald-h-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vald-h-symbol { display: flex; gap: 14px; align-items: center; }
.vald-mark {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 14px; font-weight: 700;
  color: #fff; letter-spacing: 0.5px;
}
.vald-h-symbol h2 { margin: 0; font-size: 22px; color: var(--wot-text-0); }
.vald-h-symbol h2 span { font-weight: 400; font-size: 14px; color: var(--wot-text-2); margin-left: 8px; }
.vald-h-symbol p { margin: 0; font-size: 12px; color: var(--wot-text-2); }
.vald-narrative {
  margin: 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  font-size: 14px; line-height: 1.6; color: var(--wot-text-1);
}
.vald-h-right { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.vald-h-pair {
  display: flex; flex-direction: column; gap: 2px;
}
.vald-h-pair span { font-size: 11px; color: var(--wot-text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.vald-h-pair strong { font-size: 22px; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }
.vald-h-verdict {
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vald-h-verdict strong { display: block; font-size: 13px; }
.vald-h-verdict em { display: block; font-size: 13px; font-style: normal; margin-top: 2px; color: var(--wot-text-1); }
.vald-h-verdict.verdict-sig-under { border-color: rgba(110,231,183,0.45); background: rgba(110,231,183,0.08); color: #6ee7b7; }
.vald-h-verdict.verdict-under     { border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.08); color: #22c55e; }
.vald-h-verdict.verdict-fair      { border-color: var(--wot-border); color: var(--wot-text-1); }
.vald-h-verdict.verdict-over      { border-color: rgba(245,180,0,0.45); background: rgba(245,180,0,0.08); color: #f5b400; }
.vald-h-verdict.verdict-sig-over  { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.08); color: #ef4444; }

.wot-vald-section {
  padding: 20px;
  background: var(--wot-bg-1);
  border: 1px solid var(--wot-border);
  border-radius: 14px;
}
.wot-vald-section h3 {
  margin: 0 0 14px; font-size: 14px; color: var(--wot-text-0);
}
.wot-vald-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.wot-vald-kv {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}
.wot-vald-kv .lbl { font-size: 11px; color: var(--wot-text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.wot-vald-kv .val { font-size: 14px; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }

.wot-vald-tablewrap { overflow-x: auto; }
.wot-vald-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.wot-vald-table th,
.wot-vald-table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--wot-border);
}
.wot-vald-table th:first-child,
.wot-vald-table td:first-child { text-align: left; }
.wot-vald-table th {
  font-size: 11px; color: var(--wot-text-2);
  text-transform: uppercase; letter-spacing: 0.4px;
  font-weight: 600;
  position: sticky; top: 0;
  background: var(--wot-bg-1);
}
.wot-vald-table td { color: var(--wot-text-1); }

.wot-vald-warnings { margin: 0; padding-left: 18px; color: var(--wot-text-1); font-size: 13px; }
.wot-vald-warnings li { margin-bottom: 4px; }

.wot-vald-method p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--wot-text-1); }
.wot-vald-method strong { color: var(--wot-text-0); }


/* ─────────────────────────────────────────────────────────────────────
   Market-Cap Risk v2 — table list (#/mktcap-risk) + detail page
   (#/mktcap-risk/:symbol). Layered on top of the v1 .wot-mcr-* styles.
   ────────────────────────────────────────────────────────────────── */

/* List table */
.wot-mcr-table-wrap { display: grid; gap: 8px; }
.wot-mcr-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  background: var(--wot-bg-1);
}
.wot-mcr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wot-mcr-table thead th {
  position: sticky; top: 0;
  background: var(--wot-bg-2);
  color: var(--wot-text-2);
  font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 12px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--wot-border);
}
.wot-mcr-table thead th:hover { color: var(--wot-text-0); }
.wot-mcr-th-l { text-align: left; }
.wot-mcr-th-r { text-align: right; }
.wot-mcr-th-c { text-align: center; }
.wot-mcr-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--wot-border); }
.wot-mcr-row { cursor: pointer; transition: background 0.1s; }
.wot-mcr-row:hover { background: rgba(255,255,255,0.04); }
.wot-mcr-row:last-child td { border-bottom: 0; }
.wot-mcr-td-sym { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.wot-mcr-row-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  color: #fff; font-weight: 800; font-size: 10px;
  flex-shrink: 0;
}
.wot-mcr-row-sym { display: grid; line-height: 1.2; min-width: 0; }
.wot-mcr-row-sym strong { font-weight: 800; color: var(--wot-text-0); }
.wot-mcr-row-sym em { font-style: normal; font-size: 11px; color: var(--wot-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.wot-mcr-td-r { text-align: right; font-variant-numeric: tabular-nums; color: var(--wot-text-1); }
.wot-mcr-td-r.is-na { color: var(--wot-text-2); }
.wot-mcr-td-r.gap-ok       { color: var(--wot-bull); }
.wot-mcr-td-r.gap-stretch  { color: var(--wot-chop); }
.wot-mcr-td-r.gap-rich     { color: var(--wot-bear); }
.wot-mcr-td-c { text-align: center; }
.wot-mcr-tier-chip {
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--wot-border);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.wot-mcr-tier-chip.tier-d1 { color: #ef4444; border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.08); }
.wot-mcr-tier-chip.tier-d2 { color: #f59e0b; border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.08); }
.wot-mcr-tier-chip.tier-d3 { color: var(--wot-text-0); }
.wot-mcr-tier-chip.tier-d4 { color: #38bdf8; border-color: rgba(56,189,248,0.5); background: rgba(56,189,248,0.08); }
.wot-mcr-tier-chip.tier-d5 { color: #22c55e; border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08); }
.wot-mcr-td-verdict { font-size: 12px; }
.wot-mcr-verdict-emoji { margin-right: 6px; }
.wot-mcr-verdict-text { color: var(--wot-text-1); }
.wot-mcr-td-verdict.verdict-green .wot-mcr-verdict-text { color: var(--wot-bull); }
.wot-mcr-td-verdict.verdict-amber .wot-mcr-verdict-text { color: var(--wot-chop); }
.wot-mcr-td-verdict.verdict-red   .wot-mcr-verdict-text { color: var(--wot-bear); }
.wot-mcr-table-foot {
  padding: 8px 12px;
  font-size: 11px; color: var(--wot-text-2);
  text-align: center;
}

/* ─── Detail page (#/mktcap-risk/:symbol) ───────────────────────────── */
.wot-mcrd { display: grid; gap: 18px; }
.wot-mcrd-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--wot-text-2); text-decoration: none;
  font-size: 12px;
}
.wot-mcrd-back:hover { color: var(--wot-text-0); }
.wot-mcrd-back .wot-icon { width: 14px; height: 14px; }
.wot-mcrd-company {
  font-weight: 500; color: var(--wot-text-2);
  font-size: 14px; margin-left: 8px;
}

.wot-mcrd-card {
  position: relative;
  display: grid; gap: 18px;
  background: linear-gradient(180deg, var(--wot-bg-2), var(--wot-bg-1) 32%);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-md);
  padding: 22px 24px 20px 28px;
  --mcrd-accent: #FF1F8F;
}
.wot-mcrd-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--mcrd-accent);
  border-radius: var(--wot-r-md) 0 0 var(--wot-r-md);
}

.wot-mcrd-hdr {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.wot-mcrd-hdr-l { display: flex; gap: 14px; align-items: center; flex: 1; min-width: 0; }
.wot-mcrd-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  color: #fff; font-weight: 800; font-size: 13px;
}
.wot-mcrd-hdr h2 {
  font-size: 20px; font-weight: 800; color: var(--wot-text-0);
  margin: 0;
}
.wot-mcrd-hdr h2 em {
  font-style: normal; color: var(--wot-text-2); font-weight: 500;
  font-size: 14px; margin-left: 8px;
}
.wot-mcrd-hdr-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--wot-text-2);
  letter-spacing: 0.04em; margin-top: 4px;
}
.wot-mcrd-tier {
  display: grid; gap: 2px; justify-items: end;
  padding: 10px 14px;
  border: 1px solid var(--wot-border);
  background: var(--wot-bg-0);
  border-radius: var(--wot-r-sm);
}
.wot-mcrd-tier strong { font-size: 18px; font-weight: 800; }
.wot-mcrd-tier span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wot-text-2); }
.wot-mcrd-tier em { font-style: normal; font-size: 10px; color: var(--wot-text-2); }
.wot-mcrd-tier.tier-d1 { border-color: rgba(239,68,68,0.5);  background: rgba(239,68,68,0.08); }
.wot-mcrd-tier.tier-d1 strong { color: #ef4444; }
.wot-mcrd-tier.tier-d2 { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.08); }
.wot-mcrd-tier.tier-d2 strong { color: #f59e0b; }
.wot-mcrd-tier.tier-d3 strong { color: var(--wot-text-0); }
.wot-mcrd-tier.tier-d4 { border-color: rgba(56,189,248,0.5); background: rgba(56,189,248,0.08); }
.wot-mcrd-tier.tier-d4 strong { color: #38bdf8; }
.wot-mcrd-tier.tier-d5 { border-color: rgba(34,197,94,0.5);  background: rgba(34,197,94,0.08); }
.wot-mcrd-tier.tier-d5 strong { color: #22c55e; }

.wot-mcrd-summary, .wot-mcrd-breakeven, .wot-mcrd-verdict, .wot-mcrd-grids, .wot-mcrd-override {
  display: grid; gap: 12px;
}
.wot-mcrd-card h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wot-text-2);
  margin: 0; padding-top: 6px;
  border-top: 1px solid var(--wot-border);
}
.wot-mcrd-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.wot-mcrd-cell {
  display: grid; gap: 4px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 10px 12px;
}
.wot-mcrd-cell .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wot-text-2); }
.wot-mcrd-cell .val { font-size: 16px; font-weight: 800; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }
.wot-mcrd-cell .val.is-up   { color: var(--wot-bull); }
.wot-mcrd-cell .val.is-down { color: var(--wot-bear); }
.wot-mcrd-cell.big .val { font-size: 20px; }
.wot-mcrd-cell.big .val.gap-ok      { color: var(--wot-bull); }
.wot-mcrd-cell.big .val.gap-stretch { color: var(--wot-chop); }
.wot-mcrd-cell.big .val.gap-rich    { color: var(--wot-bear); }
.wot-mcrd-cell.big .val.is-na       { color: var(--wot-text-2); }

.wot-mcrd-reason {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0; padding: 8px 12px;
  background: var(--wot-bg-0);
  border: 1px dashed var(--wot-border);
  border-radius: var(--wot-r-sm);
  font-size: 12px; color: var(--wot-text-1);
}
.wot-mcrd-reason .wot-icon { width: 14px; height: 14px; color: var(--wot-grad-end); flex-shrink: 0; margin-top: 2px; }

.wot-mcrd-3p {
  display: grid; gap: 4px;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 12px 14px;
}
.wot-mcrd-3p .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wot-text-2); }
.wot-mcrd-3p .val { font-size: 18px; font-weight: 800; }
.wot-mcrd-3p em { font-style: normal; font-size: 10px; color: var(--wot-text-2); }
.wot-mcrd-3p.verdict-yes      { border-color: rgba(34,197,94,0.45);  }
.wot-mcrd-3p.verdict-yes .val { color: var(--wot-bull); }
.wot-mcrd-3p.verdict-no       { border-color: rgba(239,68,68,0.5);   }
.wot-mcrd-3p.verdict-no  .val { color: var(--wot-bear); }
.wot-mcrd-3p.verdict-unclear .val { color: var(--wot-chop); }

.wot-mcrd-verdict-line {
  margin: 0;
  padding: 10px 14px;
  background: var(--wot-bg-0);
  border-left: 3px solid var(--wot-grad-end);
  border-radius: 0 var(--wot-r-sm) var(--wot-r-sm) 0;
  font-size: 13px; line-height: 1.5; color: var(--wot-text-0);
}
.wot-mcrd-verdict.verdict-red    .wot-mcrd-verdict-line { border-left-color: var(--wot-bear); }
.wot-mcrd-verdict.verdict-amber  .wot-mcrd-verdict-line { border-left-color: var(--wot-chop); }
.wot-mcrd-verdict.verdict-green  .wot-mcrd-verdict-line { border-left-color: var(--wot-bull); }

/* Sensitivity grid */
.wot-mcrd-grid-wrap { display: grid; gap: 8px; }
.wot-mcrd-grid-sub { font-size: 12px; color: var(--wot-text-2); margin: 0; }
.wot-mcrd-grid-scroll {
  overflow-x: auto;
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  background: var(--wot-bg-0);
}
.wot-mcrd-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.wot-mcrd-grid thead th, .wot-mcrd-grid tbody th {
  background: var(--wot-bg-2);
  padding: 6px 8px;
  font-weight: 700; font-size: 10px; letter-spacing: 0.04em;
  color: var(--wot-text-2);
  text-align: center;
  border-bottom: 1px solid var(--wot-border);
  border-right: 1px solid var(--wot-border);
}
.wot-mcrd-grid-corner { background: var(--wot-bg-2); }
.wot-mcrd-grid-cell {
  padding: 6px 8px;
  text-align: center;
  color: var(--wot-text-0);
  font-weight: 600;
}
.wot-mcrd-grid-cell.is-highlight {
  outline: 2px solid var(--wot-grad-end);
  outline-offset: -2px;
  font-weight: 800;
}

/* Override form */
.wot-mcrd-override-form {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  background: var(--wot-bg-0);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  padding: 14px;
}
.wot-mcrd-override-form label {
  display: grid; gap: 4px;
  font-size: 11px; color: var(--wot-text-2);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.wot-mcrd-override-form input {
  width: 100px;
  padding: 6px 8px;
  background: var(--wot-bg-2);
  border: 1px solid var(--wot-border);
  border-radius: var(--wot-r-sm);
  color: var(--wot-text-0);
  font-variant-numeric: tabular-nums;
  font: inherit; font-size: 13px;
}
.wot-mcrd-override-form input:focus { outline: 1px solid var(--wot-grad-end); }
.wot-mcrd-override-form label em {
  font-style: normal; color: var(--wot-text-2); font-size: 11px;
  position: absolute; transform: translate(98px, 32px);
}
.wot-mcrd-override-status { font-size: 12px; color: var(--wot-text-2); margin-left: 8px; }
.wot-mcrd-override-status.is-ok  { color: var(--wot-bull); }
.wot-mcrd-override-status.is-err { color: var(--wot-bear); }

/* ── Markov tab ──────────────────────────────────────────────────────────
 * Probability lens over active trade objects. Hero is the SVG cone;
 * everything else (odds strip, edge block, confidence) reads off it.
 * Visual language matches the Valuation tab (verdict pills + dots) but
 * adds the cone as a distinct affordance.
 * ─────────────────────────────────────────────────────────────────────── */

.wot-mkv { display: flex; flex-direction: column; gap: 16px; }

.wot-mkv-meta { font-size: 12px; color: var(--wot-text-2); }
/* Ticker picker wrapper — reuses .wot-ticker-picker class system from
   styles/components.css so the visual matches charts / financials / tenq. */
.wot-mkv-ticker-wrap { flex: 1; min-width: 240px; }

.wot-mkv-filters {
  display: flex; flex-direction: column; gap: 10px;
}
.wot-mkv-filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wot-mkv-sort {
  background: var(--wot-bg-2); color: var(--wot-text-0);
  border: 1px solid var(--wot-border); border-radius: 10px;
  padding: 6px 8px; font: inherit; font-size: 13px;
}
.wot-mkv-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.wot-mkv-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wot-bg-2); border: 1px solid var(--wot-border);
  border-radius: 999px; padding: 5px 12px;
  color: var(--wot-text-1); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 120ms ease, border 120ms ease;
}
.wot-mkv-tab:hover { background: var(--wot-bg-3); }
.wot-mkv-tab.is-active {
  background: var(--wot-bg-0); border-color: var(--wot-grad-end);
  color: var(--wot-text-0);
  box-shadow: 0 0 0 1px var(--wot-grad-end) inset;
}
.wot-mkv-tab .v-count {
  background: rgba(255,255,255,0.06); color: var(--wot-text-1);
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700;
}
.wot-mkv-tab.verdict-take.is-active   { box-shadow: 0 0 0 1px var(--wot-bull) inset;  border-color: var(--wot-bull); }
.wot-mkv-tab.verdict-pass.is-active   { box-shadow: 0 0 0 1px var(--wot-chop) inset;  border-color: var(--wot-chop); }
.wot-mkv-tab.verdict-no-trade.is-active { box-shadow: 0 0 0 1px var(--wot-text-2) inset; border-color: var(--wot-text-2); }

.wot-mkv-explainer {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(255,107,31,0.06), rgba(255,31,143,0.04));
  border: 1px solid var(--wot-border); border-radius: 14px;
  padding: 12px 14px;
}
.wot-mkv-ex-icon { color: var(--wot-grad-end); flex-shrink: 0; padding-top: 1px; }
.wot-mkv-explainer p { margin: 0; font-size: 13px; color: var(--wot-text-1); line-height: 1.45; }
.wot-mkv-explainer strong { color: var(--wot-text-0); font-weight: 600; }

.wot-mkv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}
.wot-mkv-empty {
  grid-column: 1 / -1;
  background: var(--wot-bg-1); border: 1px dashed var(--wot-border);
  border-radius: 14px; padding: 28px;
  text-align: center; color: var(--wot-text-2);
}
.wot-mkv-empty h3 { color: var(--wot-text-0); margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.wot-mkv-empty p { margin: 0; font-size: 13px; line-height: 1.5; }
.wot-mkv-loading { font-style: italic; }

/* ── Card ─────────────────────────────────────────────────────────────── */

.wot-mkv-card {
  --wot-mkv-accent: #FF1F8F;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--wot-bg-1); border: 1px solid var(--wot-border);
  border-radius: 18px; padding: 14px 14px 12px;
  overflow: hidden;
  transition: border 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.wot-mkv-card:hover {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 2px 10px rgba(255,31,143,0.08);
}
.wot-mkv-card.is-detail-top {
  border-color: var(--wot-grad-end);
  box-shadow: 0 12px 40px rgba(255,31,143,0.15);
  margin-bottom: 16px;
}
.wot-mkv-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--wot-mkv-accent), transparent);
}

.wot-mkv-cardhead {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  align-items: start;
}
.wot-mkv-symbol { display: flex; gap: 10px; align-items: flex-start; }
.wot-mkv-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #000; font-size: 13px;
  flex-shrink: 0;
}
.wot-mkv-symbol h3 {
  margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 17px; font-weight: 700; color: var(--wot-text-0);
}
.wot-mkv-symbol h3 a { color: inherit; text-decoration: none; }
.wot-mkv-symbol h3 a:hover { color: var(--wot-grad-end); }
.wot-mkv-company {
  font-size: 12px; color: var(--wot-text-2); font-weight: 500;
}
.wot-mkv-meta-row {
  display: flex; gap: 8px; font-size: 11.5px; color: var(--wot-text-2);
  margin-top: 2px; flex-wrap: wrap;
}
.wot-mkv-meta-row span { white-space: nowrap; }

.wot-mkv-rhead {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  text-align: right;
}
.wot-mkv-strike {
  font-weight: 800; font-size: 16px;
  padding: 3px 8px; border-radius: 8px;
  background: rgba(255,255,255,0.04);
}
.wot-mkv-strike.is-call { color: var(--wot-bull); background: rgba(34,197,94,0.10); }
.wot-mkv-strike.is-put  { color: var(--wot-bear); background: rgba(239,68,68,0.10); }
.wot-mkv-strike.is-none { color: var(--wot-text-2); font-size: 12px; font-weight: 600; }
.wot-mkv-trigger-line { font-size: 11px; color: var(--wot-text-2); }
.wot-mkv-verdictpill {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center;
}
.wot-mkv-verdictpill.verdict-take     { background: rgba(34,197,94,0.18);  color: #6dff9a; }
.wot-mkv-verdictpill.verdict-pass     { background: rgba(245,180,0,0.18);  color: #ffd266; }
.wot-mkv-verdictpill.verdict-no-trade { background: rgba(160,160,170,0.18); color: var(--wot-text-1); }

/* ── Probability cone ─────────────────────────────────────────────────── */

.wot-mkv-coneholder {
  background: var(--wot-bg-2); border-radius: 12px; padding: 6px;
}
.wot-mkv-cone {
  display: block; width: 100%; height: auto;
  font-family: var(--wot-font);
}
/* Card-scale cone: ~220px tall. Labels need to be readable at this size. */
.wot-mkv-cone .cone-outer  { fill: rgba(255,31,143,0.10); stroke: rgba(255,31,143,0.22); stroke-width: 0.8; }
.wot-mkv-cone .cone-inner  { fill: rgba(255,107,31,0.16); stroke: rgba(255,107,31,0.32); stroke-width: 0.8; }
.wot-mkv-cone .cone-median { fill: none; stroke: var(--wot-grad-end); stroke-width: 1.6; }
.wot-mkv-cone .cone-current {
  stroke: var(--wot-current-line); stroke-width: 1.8; stroke-dasharray: 4 3;
  paint-order: stroke;
}
.wot-mkv-cone .cone-current-lbl {
  fill: var(--wot-current-line); font-size: 11px; font-weight: 700;
  paint-order: stroke;
  stroke: var(--wot-bg-2); stroke-width: 3;
}
.wot-mkv-cone .cone-target {
  stroke: var(--wot-target); stroke-width: 1.4; stroke-dasharray: 5 3;
}
.wot-mkv-cone .cone-target.leader { stroke-dasharray: 1 2; stroke-width: 1; }
.wot-mkv-cone .cone-target-lbl { fill: var(--wot-target); font-size: 11px; font-weight: 700; }
.wot-mkv-cone .cone-stop {
  stroke: var(--wot-stop); stroke-width: 1.4; stroke-dasharray: 5 3;
}
.wot-mkv-cone .cone-stop.leader { stroke-dasharray: 1 2; stroke-width: 1; }
.wot-mkv-cone .cone-stop-lbl { fill: var(--wot-stop); font-size: 11px; font-weight: 700; }
.wot-mkv-cone .cone-trigger {
  stroke: rgba(255,255,255,0.6); stroke-width: 1.2; stroke-dasharray: 2 4;
}
.wot-mkv-cone .cone-trigger.leader { stroke-dasharray: 1 2; stroke-width: 0.9; }
.wot-mkv-cone .cone-trigger-lbl { fill: var(--wot-text-0); font-size: 11px; font-weight: 600; }
.wot-mkv-cone .cone-strike {
  stroke: rgba(180,165,255,0.7); stroke-width: 1.2; stroke-dasharray: 2 3;
}
.wot-mkv-cone .cone-strike.leader { stroke-dasharray: 1 2; stroke-width: 0.9; }
.wot-mkv-cone .cone-strike-lbl { fill: #c8b8ff; font-size: 11px; font-weight: 600; }
.wot-mkv-cone .end-tick { stroke: rgba(255,255,255,0.22); stroke-width: 0.8; }
.wot-mkv-cone .cone-tick { fill: var(--wot-text-2); font-size: 10px; font-weight: 600; }
.wot-mkv-cone .cone-xlbl { fill: var(--wot-text-2); font-size: 10.5px; font-weight: 600; }

/* Drill-down: the big standalone cone gets more room (taller, larger
   text, a darker background panel to put the cone in focus). */
.wot-mkv-bigcone-section h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.wot-mkv-bigcone {
  background: var(--wot-bg-0); border: 1px solid var(--wot-border);
  border-radius: 14px; padding: 10px;
  margin-top: 10px;
}
.wot-mkv-bigcone .wot-mkv-cone {
  /* Detail-page cone is meaningfully larger. */
  max-height: 480px;
}
.wot-mkv-bigcone .wot-mkv-cone .cone-median { stroke-width: 2; }
.wot-mkv-bigcone .wot-mkv-cone .cone-current { stroke-width: 2.2; }
.wot-mkv-bigcone .wot-mkv-cone .cone-current-lbl { font-size: 14px; stroke: var(--wot-bg-0); stroke-width: 4; }
.wot-mkv-bigcone .wot-mkv-cone .cone-target,
.wot-mkv-bigcone .wot-mkv-cone .cone-stop { stroke-width: 1.8; }
.wot-mkv-bigcone .wot-mkv-cone .cone-target-lbl,
.wot-mkv-bigcone .wot-mkv-cone .cone-stop-lbl,
.wot-mkv-bigcone .wot-mkv-cone .cone-trigger-lbl,
.wot-mkv-bigcone .wot-mkv-cone .cone-strike-lbl { font-size: 14px; font-weight: 700; }
.wot-mkv-bigcone .wot-mkv-cone .cone-tick { font-size: 12px; }
.wot-mkv-bigcone .wot-mkv-cone .cone-xlbl { font-size: 13px; }

/* ── Odds strip ───────────────────────────────────────────────────────── */

.wot-mkv-odds {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  background: var(--wot-bg-0); border-radius: 12px; padding: 8px 6px;
  border: 1px solid var(--wot-border);
}
.wot-mkv-odds .o-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: var(--wot-text-2);
}
.wot-mkv-odds .o-cell .wot-icon { width: 14px; height: 14px; color: var(--wot-text-1); }
.wot-mkv-odds .o-lbl { letter-spacing: 0.05em; text-transform: uppercase; text-align: center; }
.wot-mkv-odds .o-val { font-size: 15px; font-weight: 800; color: var(--wot-text-0); font-variant-numeric: tabular-nums; }
.wot-mkv-odds .o-target .o-val { color: var(--wot-target); }
.wot-mkv-odds .o-target .wot-icon { color: var(--wot-target); }
.wot-mkv-odds .o-stop   .o-val { color: var(--wot-stop);   }
.wot-mkv-odds .o-stop   .wot-icon { color: var(--wot-stop); }

/* ── Edge & sizing block ──────────────────────────────────────────────── */

.wot-mkv-edge {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 0 4px;
}
.wot-mkv-edge .e-pair {
  display: flex; flex-direction: column; gap: 1px;
}
.wot-mkv-edge .e-lbl {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wot-text-2);
}
.wot-mkv-edge .e-val {
  font-size: 15px; font-weight: 800; color: var(--wot-text-0);
  font-variant-numeric: tabular-nums;
}
.wot-mkv-edge .e-val.is-positive { color: var(--wot-bull); }
.wot-mkv-edge .e-val.is-thin     { color: var(--wot-chop); }
.wot-mkv-edge .e-val.is-negative { color: var(--wot-bear); }
.wot-mkv-edge .e-meta {
  font-size: 10.5px; color: var(--wot-text-2);
}

.wot-mkv-exec {
  margin: 0;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; color: var(--wot-text-1); line-height: 1.4;
  background: rgba(255,255,255,0.03); border-left: 2px solid var(--wot-grad-end);
  padding: 8px 10px; border-radius: 0 8px 8px 0;
}
.wot-mkv-exec .wot-icon { color: var(--wot-grad-end); flex-shrink: 0; }

/* ── Card footer ─────────────────────────────────────────────────────── */

.wot-mkv-cardfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--wot-border); padding-top: 10px;
}
.wot-mkv-conf {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--wot-text-1);
}
.wot-mkv-conf .c-label { letter-spacing: 0.06em; text-transform: uppercase; color: var(--wot-text-2); }
.wot-mkv-conf .c-dots {
  display: inline-flex; gap: 3px;
}
.wot-mkv-conf .c-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: background 120ms ease;
}
.wot-mkv-conf .c-dot.is-on { background: var(--wot-grad-end); }
.wot-mkv-conf .c-bucket {
  font-weight: 700; font-size: 11px;
}
.wot-mkv-conf .c-bucket-high   { color: var(--wot-bull); }
.wot-mkv-conf .c-bucket-medium { color: var(--wot-chop); }
.wot-mkv-conf .c-bucket-low    { color: var(--wot-bear); }
.wot-mkv-drift, .wot-mkv-raw {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.wot-mkv-drift {
  background: rgba(245,180,0,0.16); color: var(--wot-chop);
  border: 1px solid rgba(245,180,0,0.3);
}
.wot-mkv-drift .wot-icon { width: 11px; height: 11px; }
.wot-mkv-raw {
  background: rgba(124,92,255,0.14); color: #b4a5ff;
  border: 1px solid rgba(124,92,255,0.28);
}
.wot-mkv-foot-links { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.wot-mkv-link {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--wot-text-2); font-size: 11.5px; text-decoration: none;
  transition: color 120ms ease;
}
.wot-mkv-link:hover { color: var(--wot-grad-end); }
.wot-mkv-link .wot-icon { width: 12px; height: 12px; }

/* ── Detail page ─────────────────────────────────────────────────────── */

.wot-mkv-detail-body { display: flex; flex-direction: column; gap: 16px; }
.wot-mkv-section {
  background: var(--wot-bg-1); border: 1px solid var(--wot-border);
  border-radius: 14px; padding: 16px 18px;
}
.wot-mkv-section h3 {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--wot-text-0);
  letter-spacing: 0.02em;
}
.wot-mkv-section h4 {
  margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--wot-text-1);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.wot-mkv-section p { margin: 0 0 8px; color: var(--wot-text-1); line-height: 1.55; font-size: 13.5px; }
.wot-mkv-section.wot-mkv-method p { color: var(--wot-text-2); font-size: 12.5px; }
.wot-mkv-section.wot-mkv-method strong { color: var(--wot-text-0); }
.wot-mkv-faint { color: var(--wot-text-2); font-size: 12px; }

.wot-mkv-reasons {
  margin: 0 0 10px; padding-left: 20px; color: var(--wot-text-1);
  font-size: 13px; line-height: 1.5;
}
.wot-mkv-reasons li { margin: 2px 0; }
.wot-mkv-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  margin: 0; font-size: 13px;
}
.wot-mkv-dl dt { color: var(--wot-text-2); }
.wot-mkv-dl dd { color: var(--wot-text-0); margin: 0; font-variant-numeric: tabular-nums; }
.wot-mkv-dl dd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; background: var(--wot-bg-3); padding: 1px 6px; border-radius: 4px;
}

.wot-mkv-edges { margin-top: 14px; }
.wot-mkv-edge-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.wot-mkv-edge-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 3px 8px;
  background: var(--wot-bg-2); border: 1px solid var(--wot-border);
  border-radius: 999px; color: var(--wot-text-1);
}

/* ── Transition matrix heatmap ───────────────────────────────────────── */

.wot-mkv-matrix-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.wot-mkv-matrix {
  background: var(--wot-bg-2); border: 1px solid var(--wot-border);
  border-radius: 12px; padding: 12px;
}
.wot-mkv-matrix header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.wot-mkv-matrix header h4 { margin: 0; font-size: 12px; text-transform: none; letter-spacing: 0; }
.wot-mkv-grid {
  display: grid;
  gap: 2px;
}
.wot-mkv-cell {
  --p: 0;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.85);
  background: rgba(255,31,143, calc(var(--p) * 0.85));
  border-radius: 3px;
  cursor: help;
}
.wot-mkv-cell.is-current-row {
  outline: 1px solid var(--wot-grad-end);
  outline-offset: -1px;
}
.wot-mkv-rt {
  font-size: 11px; color: var(--wot-text-2);
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid var(--wot-border);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .wot-mkv-list { grid-template-columns: 1fr; }
  .wot-mkv-odds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wot-mkv-edge { grid-template-columns: 1fr; }
  .wot-mkv-rhead { align-items: flex-start; text-align: left; }
  .wot-mkv-cardhead { grid-template-columns: 1fr; }
}