/* ==========================================================================
   views.css — stock / compare / watchlist / portfolio / ideas / alerts
   Design: white default + html[data-theme="dark"], Helvetica Neue uppercase
   micro-labels, mono values, amber section headers, flat 1px panels, 2px radius.
   Tokens come from base.css (--bg --panel --line --text --muted --faint --gold
   --green --red --amber). Fallbacks reference the v1 index.html names.
   ========================================================================== */

.vw { --vl: var(--line, var(--border, #e6e6e6)); --vp2: var(--panel2, #f6f6f6);
  padding: 12px 16px 48px; max-width: 1640px; margin: 0 auto; color: var(--text); }
html[data-theme="dark"] .vw { --vp2: var(--panel2, #1b1b1e); }

/* --- typography atoms ---------------------------------------------------- */
.v-lbl, .v-h, .v-th { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v-h { color: var(--gold); font-weight: 700; margin: 0 0 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; line-height: 1.2; }
.v-h small { color: var(--faint); font-weight: 400; letter-spacing: .04em; text-transform: none; }
.v-mono, .v-val, .v-num, .v-table td, .v-kv b, .v-big { font-family: "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; }
.v-val { font-size: 12.5px; color: var(--text); }
.v-big { font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.vw .up { color: var(--green); } .vw .down { color: var(--red); } .vw .flat { color: var(--muted); }
.vw .dim { color: var(--faint); }
.v-help { border-bottom: 1px dotted var(--faint); cursor: help; }
[data-tip] { cursor: help; }

/* --- layout -------------------------------------------------------------- */
.v-panel { background: var(--panel); border: 1px solid var(--vl); border-radius: 2px; padding: 10px 12px;
  min-width: 0; }
.v-grid { display: grid; gap: 12px; min-width: 0; }
.v-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-stack { display: flex; flex-direction: column; gap: 12px; }
.v-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.v-sp { flex: 1; }
.v-hr { border: 0; border-top: 1px solid var(--vl); margin: 10px 0; }

/* --- controls ------------------------------------------------------------ */
.v-btn { font: 600 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text); background: var(--panel); border: 1px solid var(--vl);
  border-radius: 2px; padding: 6px 9px; cursor: pointer; white-space: nowrap; display: inline-flex;
  align-items: center; gap: 5px; transition: border-color .12s, color .12s, background .12s; }
.v-btn:hover { border-color: var(--gold); color: var(--gold); }
.v-btn:disabled { opacity: .45; cursor: default; }
.v-btn.on { border-color: var(--gold); color: var(--gold); background: var(--vp2); }
.v-btn.pri { background: var(--text); color: var(--bg); border-color: var(--text); }
.v-btn.pri:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.v-btn.ok { border-color: var(--green); color: var(--green); }
.v-btn.ok:hover { background: var(--green); color: #fff; }
.v-btn.bad { border-color: var(--red); color: var(--red); }
.v-btn.bad:hover { background: var(--red); color: #fff; }
.v-btn.sm { padding: 3px 6px; font-size: 10px; }
.v-btn.icon { padding: 3px 6px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.v-tabs { display: inline-flex; border: 1px solid var(--vl); border-radius: 2px; overflow: hidden; max-width: 100%; }
.v-tabs button { font: 600 11px/1 "SF Mono", Menlo, Consolas, monospace; color: var(--muted); background: transparent;
  border: 0; border-right: 1px solid var(--vl); padding: 6px 9px; cursor: pointer; }
.v-tabs button:last-child { border-right: 0; }
.v-tabs button:hover { color: var(--text); background: var(--vp2); }
.v-tabs button.on { color: var(--gold); background: var(--vp2); font-weight: 700; }
.v-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 "SF Mono", Menlo, Consolas, monospace;
  border: 1px solid var(--vl); border-radius: 2px; padding: 4px 7px; color: var(--text); background: var(--panel);
  white-space: nowrap; }
.v-chip .k { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.v-chip.up { border-color: var(--green); } .v-chip.down { border-color: var(--red); }
.v-chip.gold { border-color: var(--gold); color: var(--gold); }
.v-chip.x { cursor: pointer; }
.v-chip .rm { color: var(--faint); cursor: pointer; margin-left: 2px; font-size: 12px; line-height: 1; }
.v-chip .rm:hover { color: var(--red); }
.v-badge { display: inline-block; font: 700 10px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 6px; border-radius: 2px; border: 1px solid var(--vl); color: var(--muted); }
.v-badge.long, .v-badge.bullish, .v-badge.high { color: var(--green); border-color: var(--green); }
.v-badge.short, .v-badge.bearish, .v-badge.low { color: var(--red); border-color: var(--red); }
.v-badge.neutral, .v-badge.medium { color: var(--gold); border-color: var(--gold); }
.v-badge.exploratory { color: var(--muted); border-color: var(--faint); border-style: dashed; }
.v-badge.solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.vw input, .vw select, .vw textarea { font: 12.5px/1.3 "SF Mono", Menlo, Consolas, monospace; color: var(--text);
  background: var(--bg); border: 1px solid var(--vl); border-radius: 2px; padding: 6px 8px; min-width: 0; }
.vw input:focus, .vw select:focus, .vw textarea:focus { outline: none; border-color: var(--gold); }
.vw input.inl { width: 100%; padding: 3px 5px; background: transparent; border-color: transparent; text-align: right; }
.vw input.inl:hover, .vw input.inl:focus { border-color: var(--vl); background: var(--bg); }
.v-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v-field .v-lbl { font-size: 10px; }
.v-field .help { font-size: 11px; color: var(--faint); line-height: 1.35; }

/* --- data displays ------------------------------------------------------- */
.v-kv { display: grid; grid-template-columns: 1fr auto; gap: 0; font-size: 12px; }
.v-kv > span { padding: 4px 0; border-bottom: 1px solid var(--vl); color: var(--muted); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.v-kv > b { padding: 4px 0 4px 10px; border-bottom: 1px solid var(--vl); text-align: right; font-weight: 500;
  white-space: nowrap; color: var(--text); font-size: 12.5px; }
.v-kv > span:nth-last-child(2), .v-kv > b:last-child { border-bottom: 0; }
.v-kv b small { color: var(--faint); font-size: 10.5px; margin-left: 4px; }

.v-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.v-table th { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--vl); white-space: nowrap;
  font-weight: 600; user-select: none; }
.v-table th:first-child, .v-table td:first-child { text-align: left; }
.v-table th.sortable { cursor: pointer; } .v-table th.sortable:hover { color: var(--text); }
.v-table th.sorted { color: var(--gold); }
.v-table td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--vl); white-space: nowrap;
  vertical-align: middle; }
.v-table tbody tr:hover td { background: var(--vp2); }
.v-table tr.click { cursor: pointer; }
.v-table td.best { background: color-mix(in srgb, var(--green) 10%, transparent); }
.v-table td.worst { background: color-mix(in srgb, var(--red) 10%, transparent); }
.v-table .sym { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: .02em; }
.v-table .sym small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.v-table .act { display: inline-flex; gap: 3px; }
.v-table tr.drag { opacity: .4; }
.v-table tr.over td { border-top: 2px solid var(--gold); }

/* bars */
.v-bar { position: relative; height: 6px; background: var(--vp2); border-radius: 1px; overflow: hidden; }
.v-bar > i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--gold); }
.v-bar > i.up { background: var(--green); } .v-bar > i.down { background: var(--red); }
.v-range { position: relative; height: 6px; background: linear-gradient(90deg, var(--red), var(--vp2) 50%, var(--green));
  opacity: .9; border-radius: 1px; margin: 6px 0 2px; }
.v-range > i { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text); margin-left: -1px; }
.v-range-lbl { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); }
.v-gauge { position: relative; height: 8px; border-radius: 1px; margin: 5px 0 2px;
  background: linear-gradient(90deg, var(--green) 0 30%, var(--vp2) 30% 70%, var(--red) 70%); opacity: .95; }
.v-gauge > i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--text); margin-left: -1px; }
.v-score { display: grid; grid-template-columns: 110px 90px 1fr; gap: 8px; align-items: center; padding: 5px 0;
  border-bottom: 1px solid var(--vl); font-size: 12px; }
.v-score:last-child { border-bottom: 0; }
.v-score .seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 8px; }
.v-score .seg i { background: var(--vp2); border-radius: 1px; }
.v-score .seg i.on.up { background: var(--green); } .v-score .seg i.on.down { background: var(--red); }
.v-score .ev { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.v-score .ev b { color: var(--text); font-weight: 600; display: block; font-size: 12px; }
.v-mini { display: grid; grid-template-columns: 60px 1fr 40px; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
.v-mini .tr { position: relative; height: 5px; background: var(--vp2); }
.v-mini .tr i { position: absolute; top: 0; bottom: 0; }
.v-mini .tr i.up { left: 50%; background: var(--green); } .v-mini .tr i.down { right: 50%; background: var(--red); }
.v-mini .tr::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--faint); }

/* perf strip */
.v-perf { display: flex; gap: 6px; flex-wrap: wrap; }
.v-perf .v-chip { flex-direction: column; align-items: flex-start; gap: 3px; padding: 5px 8px; min-width: 62px; }
.v-perf .v-chip b { font-size: 12.5px; }

/* lists */
.v-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.45; }
.v-list li { padding: 3px 0 3px 12px; position: relative; }
.v-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--faint); }
.v-list.bull li::before { background: var(--green); } .v-list.bear li::before { background: var(--red); }
.v-list.warn li::before { background: var(--gold); }
.v-p { font-size: 13px; line-height: 1.5; margin: 0; }
.v-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v-clamp.open { -webkit-line-clamp: unset; display: block; }
.v-more { font-size: 11px; color: var(--gold); cursor: pointer; background: none; border: 0; padding: 2px 0;
  font-family: inherit; }
details.v-det > summary { cursor: pointer; list-style: none; }
details.v-det > summary::-webkit-details-marker { display: none; }
details.v-det > summary .v-h { margin: 0; } details.v-det > summary .v-h::after { content: "+"; color: var(--faint); }
details.v-det[open] > summary .v-h::after { content: "−"; }
details.v-det > summary + * { margin-top: 8px; }

/* states */
.v-err { border: 1px solid var(--red); border-radius: 2px; padding: 10px 12px; font-size: 12.5px; display: flex;
  gap: 10px; align-items: center; flex-wrap: wrap; color: var(--text); background: color-mix(in srgb, var(--red) 6%, transparent); }
.v-err::before { content: "!"; font-weight: 700; color: var(--red); border: 1px solid var(--red); width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; font-size: 11px; }
.v-note { font-size: 12px; color: var(--muted); border-left: 2px solid var(--gold); padding: 4px 10px; line-height: 1.4; }
.v-empty { text-align: center; color: var(--muted); padding: 28px 12px; font-size: 13px; display: flex; flex-direction: column;
  gap: 10px; align-items: center; }
.v-foot { font-size: 11px; color: var(--faint); margin-top: 14px; line-height: 1.4; }
.v-stale { font-size: 10px; color: var(--faint); letter-spacing: .04em; }
.v-skel { background: linear-gradient(90deg, var(--vp2) 25%, var(--panel) 50%, var(--vp2) 75%); background-size: 200% 100%;
  animation: vsk 1.2s infinite; border-radius: 2px; height: 12px; margin: 6px 0; }
@keyframes vsk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- stock view ---------------------------------------------------------- */
.st-head { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: start; margin-bottom: 12px; }
.st-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-title h1 { font: 800 22px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; margin: 0; }
.st-title .nm { font-size: 13px; color: var(--muted); }
.st-sub { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.st-price .chg { font-size: 14px; font-weight: 600; }
.st-price .mkt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.st-price .mkt::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px;
  background: currentColor; vertical-align: 1px; }
.st-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.st-chartbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.st-ind { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.st-chart { position: relative; height: 480px; min-height: 260px; width: 100%; }
.st-chart.short { height: auto; min-height: 0; }
.st-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.st-levels .lv { border: 1px solid var(--vl); border-radius: 2px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.st-levels .lv b { font-size: 13px; }
.st-levels .lv small { font-size: 10.5px; color: var(--muted); }
.st-cols { margin-top: 12px; }
.st-earn small { color: var(--muted); }
.an-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.an-conv { font-size: 11px; color: var(--muted); }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.an-corr { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* idea card (shared stock + ideas) */
.idea { border: 1px solid var(--vl); border-radius: 2px; padding: 10px 12px; background: var(--panel); display: flex;
  flex-direction: column; gap: 8px; min-width: 0; }
.idea.long { border-left: 3px solid var(--green); } .idea.short { border-left: 3px solid var(--red); }
.idea .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.idea .top .sym { font: 800 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.idea .top .nm { color: var(--muted); font-size: 12px; }
.idea .ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.idea .ladder .rung { border: 1px solid var(--vl); border-radius: 2px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.idea .ladder .rung.t { border-color: var(--green); } .idea .ladder .rung.s { border-color: var(--red); }
.idea .ladder .rung.e { border-color: var(--gold); }
.idea .ladder .rung b { font-size: 14px; }
.idea .ladder .rung small { font-size: 10.5px; color: var(--muted); line-height: 1.3; white-space: normal; }
.idea .rr { display: flex; align-items: baseline; gap: 8px; }
.idea .rr b { font-size: 26px; line-height: 1; }
.idea .rr.good b { color: var(--green); } .idea .rr.poor b { color: var(--red); }
.idea .meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.idea .meta b { color: var(--text); font-weight: 600; }
.idea .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.idea .refine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px dashed var(--vl); padding-top: 8px; }
.idea .refine .full { grid-column: 1 / -1; }
.idea .prog { position: relative; height: 8px; background: var(--vp2); border-radius: 1px; margin: 12px 0 4px; }
.idea .prog > i { position: absolute; top: 0; bottom: 0; }
.idea .prog .fill { background: var(--green); opacity: .6; }
.idea .prog .fill.neg { background: var(--red); }
.idea .prog .mk { width: 2px; top: -4px; bottom: -4px; }
.idea .prog .mk.stop { background: var(--red); } .idea .prog .mk.entry { background: var(--gold); }
.idea .prog .mk.target { background: var(--green); } .idea .prog .mk.now { background: var(--text); width: 3px; }
.idea .prog .mk span { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 9px;
  color: var(--faint); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.idea .prog .mk.now span { top: -16px; color: var(--text); font-family: "SF Mono", Menlo, Consolas, monospace; }
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.score-bar { display: inline-flex; align-items: center; gap: 6px; }
.score-bar .v-bar { width: 60px; }

/* --- compare view -------------------------------------------------------- */
.cp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cp-chips .v-chip i { width: 8px; height: 8px; border-radius: 1px; display: inline-block; }
.cp-chart { height: 340px; width: 100%; position: relative; }
.cp-corr { display: grid; gap: 2px; font-size: 11.5px; }
.cp-corr .c { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 1px;
  font-family: "SF Mono", Menlo, Consolas, monospace; }
.cp-corr .hd { color: var(--muted); font-size: 10.5px; height: 24px; letter-spacing: .04em; overflow: hidden; }
.cp-corr .hd.l { justify-content: flex-end; padding-right: 6px; height: 40px; }
.cp-legend { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--faint); margin-top: 8px; }
.cp-legend i { flex: 1; height: 8px; background: linear-gradient(90deg, var(--red), var(--vp2) 50%, var(--green)); }

/* --- watchlist ----------------------------------------------------------- */
.wl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wl-tabs { display: inline-flex; gap: 0; border: 1px solid var(--vl); border-radius: 2px; overflow: auto; max-width: 100%; }
.wl-tabs button { font: 600 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 0; border-right: 1px solid var(--vl); padding: 7px 11px; cursor: pointer;
  white-space: nowrap; }
.wl-tabs button.on { color: var(--gold); background: var(--vp2); }
.wl-tabs button:last-child { border-right: 0; }
.wl-spark { width: 90px; height: 24px; display: block; }
.wl-move { display: inline-flex; flex-direction: column; gap: 0; }
.wl-move button { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 9px; line-height: 1; padding: 1px 3px; }
.wl-move button:hover { color: var(--gold); }
.v-table tr[draggable] td:first-child { cursor: grab; }

/* --- portfolio ----------------------------------------------------------- */
.pf-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pf-totals .v-panel { display: flex; flex-direction: column; gap: 6px; }
.pf-totals .v-big { font-size: 22px; }
.pf-totals .sub { font-size: 11.5px; }
.pf-donut { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; }
.pf-donut canvas { width: 180px; height: 180px; display: block; }
.pf-leg { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; max-height: 200px; overflow: auto; }
.pf-leg div { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.pf-leg i { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.pf-leg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-heat { display: grid; gap: 2px; }
.pf-heat .c { display: flex; align-items: center; justify-content: center; height: 34px; font-size: 11px;
  font-family: "SF Mono", Menlo, Consolas, monospace; border-radius: 1px; }
.pf-heat .hd { color: var(--muted); font-size: 10px; letter-spacing: .04em; height: 22px; overflow: hidden; }
.pf-heat .hd.l { justify-content: flex-end; padding-right: 6px; height: 34px; }
.pf-dd { height: 220px; width: 100%; position: relative; }
.pf-risk { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-weight { display: inline-block; width: 60px; vertical-align: middle; margin-right: 6px; }
.pf-cash { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-cash input { width: 140px; text-align: right; }

/* --- ideas --------------------------------------------------------------- */
.id-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.id-score { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.id-score .v-panel { display: flex; flex-direction: column; gap: 4px; }
.id-score .v-big { font-size: 20px; }

/* --- alerts -------------------------------------------------------------- */
.al-form { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr 1.4fr auto; gap: 10px; align-items: end; }
.al-form .v-field.full { grid-column: 1 / -1; }
.al-sym { display: flex; gap: 6px; align-items: center; }
.al-sym .v-chip { flex: 1; justify-content: space-between; }
.al-cond { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; text-align: left !important; }
.al-dist { font-size: 11px; color: var(--muted); }
.v-switch { position: relative; width: 30px; height: 16px; border-radius: 8px; background: var(--faint); border: 0; cursor: pointer;
  padding: 0; transition: background .15s; }
.v-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transition: left .15s; }
.v-switch.on { background: var(--green); } .v-switch.on::after { left: 16px; }

/* --- inline symbol picker (fallback when the shell palette has no pick mode) --- */
.overlay.pk { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.45); display: flex; align-items: flex-start;
  justify-content: center; padding: 10vh 16px 16px; }
.pk-box { width: min(560px, 100%); background: var(--panel, #fff); border: 1px solid var(--line, var(--border, #e6e6e6));
  border-top: 2px solid var(--gold); border-radius: 2px; box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,.2)); color: var(--text);
  max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.pk-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0; }
.pk-input { padding: 8px 12px; }
.pk-input input { width: 100%; font: 14px/1.3 "SF Mono", Menlo, Consolas, monospace; color: var(--text); background: var(--bg);
  border: 1px solid var(--line, var(--border, #e6e6e6)); border-radius: 2px; padding: 8px 10px; }
.pk-input input:focus { outline: none; border-color: var(--gold); }
.pk-list { overflow: auto; border-top: 1px solid var(--line, var(--border, #e6e6e6)); }
.pk-row { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line, var(--border, #e6e6e6)); font-size: 12.5px; }
.pk-row b { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; }
.pk-row .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row.sel, .pk-row:hover { background: var(--panel2, #f6f6f6); }
.pk-row.sel b { color: var(--gold); }
.pk-note { padding: 12px; color: var(--muted); font-size: 12px; }
.pk-foot { padding: 6px 12px; font-size: 10.5px; color: var(--faint); letter-spacing: .04em; border-top: 1px solid var(--line, var(--border, #e6e6e6)); }
@media (max-width: 640px) { .overlay.pk { padding: 0; align-items: stretch; } .pk-box { max-height: none; border-top-width: 3px; } .pk-row { grid-template-columns: 60px 1fr; } .pk-row .v-badge, .pk-row small { display: none; } }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .v-grid.c3 { grid-template-columns: 1fr 1fr; }
  .v-grid.c3 > :last-child { grid-column: 1 / -1; }
  .al-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .vw { padding: 10px 12px 40px; }
  .v-grid.c3, .v-grid.c2, .an-two, .pf-donut, .al-form, .id-score, .idea .refine { grid-template-columns: 1fr; }
  .v-grid.c3 > :last-child { grid-column: auto; }
  .st-head { grid-template-columns: 1fr; }
  .st-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* exchange · sector on one line */
  .st-sub .dim { display: none; }                                                 /* industry/country: desktop only */
  .st-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .st-actions > * { justify-content: center; }
  .st-chart { height: 340px; }
  .cp-chart { height: 260px; }
  .v-big { font-size: 24px; }
  .v-score { grid-template-columns: 90px 70px 1fr; }
  .idea-grid { grid-template-columns: 1fr; }
  .idea .ladder { grid-template-columns: 1fr 1fr 1fr; }
  .pf-donut canvas { margin: 0 auto; }
  /* tables → stacked label:value rows */
  .v-table.v-resp thead { display: none; }
  .v-table.v-resp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; padding: 8px 2px;
    border-bottom: 1px solid var(--vl); }
  .v-table.v-resp td { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; border: 0;
    text-align: right; white-space: normal; }
  .v-table.v-resp td::before { content: attr(data-l); color: var(--faint); font: 600 10px/1.4 "Helvetica Neue", Helvetica, sans-serif;
    text-transform: uppercase; letter-spacing: .06em; text-align: left; }
  .v-table.v-resp td:first-child, .v-table.v-resp td.full { grid-column: 1 / -1; }
  .v-table.v-resp td.nol::before { content: none; }
  .v-table.v-resp tbody tr:hover td { background: transparent; }
  .v-table.v-resp tr.click { cursor: pointer; }
  .wl-spark { width: 100%; }
}