/* DARKPOOL — dark theme, red and blue.
 *
 * Palette logic: blue carries structure (chrome, borders, headers, the
 * primary chart series) and red carries emphasis (the wordmark, alerts,
 * the secondary series, losses). Those two colours are what you see.
 *
 * Price direction is the one place a third colour appears. Red already means
 * "fell", so gains use a cyan-leaning green that cannot be confused with the
 * blue chrome. Direction is also never signalled by colour alone — every
 * change carries an explicit +/- sign, so the table reads correctly in
 * monochrome or with any form of colour blindness.
 */

:root {
  /* surfaces, darkest to lightest */
  --bg:          #060910;
  --bg-1:        #0b111c;
  --bg-2:        #101826;
  --bg-3:        #16202f;
  --border:      #1d2a3d;
  --border-hi:   #2b3e59;

  /* text */
  --text:        #c9d6e8;
  --text-dim:    #7d8da6;
  --text-faint:  #4d5c73;

  /* blue — structure */
  --blue:        #3d7dff;
  --blue-br:     #76a9ff;
  --blue-dim:    #1a3263;
  --blue-glow:   rgba(61, 125, 255, 0.14);

  /* red — emphasis */
  --red:         #ff3b55;
  --red-br:      #ff7488;
  --red-dim:     #4d111f;
  --red-glow:    rgba(255, 59, 85, 0.13);

  /* direction + state */
  --up:          #00d492;
  --up-glow:     rgba(0, 212, 146, 0.12);
  --down:        var(--red);
  --warn:        #ffb02e;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* A faint red/blue wash so the page is not flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--blue-glow), transparent 70%),
    radial-gradient(900px 460px at 94% 4%, var(--red-glow), transparent 72%);
}

.shell { position: relative; z-index: 1; }

a { color: var(--blue-br); text-decoration: none; }
a:hover { color: var(--red-br); }

/* ------------------------------------------------------------- top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  height: 46px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
/* The wordmark is the clearest statement of the palette: DARK in blue,
   POOL in red. */
.brand .dark { color: var(--blue-br); }
.brand .pool { color: var(--red); }
.brand .ver {
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-left: 6px;
}

.nav { display: flex; gap: 2px; margin-left: 6px; }
.nav a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius);
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.nav a .code { font-weight: 700; letter-spacing: 0.08em; }
.nav a .name { font-size: 11px; color: var(--text-faint); }
.nav a:hover { background: var(--bg-3); color: var(--text); }
.nav a.active {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: #fff;
}
.nav a.active .name { color: var(--blue-br); }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* search / command box */
.cmd { display: flex; align-items: center; }
.cmd input {
  width: 190px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cmd input::placeholder { color: var(--text-faint); text-transform: none; }
.cmd input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.cmd button {
  padding: 6px 12px;
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--blue-br);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.cmd button:hover { background: var(--blue); color: #fff; }

/* status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--border-hi);
  color: var(--text-dim);
  white-space: nowrap;
}
.pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill.regular { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.pill.regular .dot { animation: pulse 2.4s ease-in-out infinite; }
.pill.pre, .pill.post { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill.closed { color: var(--text-faint); }
.pill.alert { color: var(--red); border-color: var(--red); background: var(--red-dim); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .pill.regular .dot { animation: none; }
}

/* ------------------------------------------------------------- layout */
.page { padding: 18px; max-width: 1760px; margin: 0 auto; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
.grid.main-side { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }

@media (max-width: 1180px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.sidebar, .grid.main-side, .grid.c3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .page { padding: 12px; }
  .grid.c2 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- panels */
.panel {
  background: linear-gradient(180deg, var(--bg-1), var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.panel > header h2 {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-br);
}
/* A red hairline under blue panel headers: the two accents meet here. */
.panel > header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-hi), transparent 85%);
}
.panel > header .meta {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.panel .body { padding: 13px; }
.panel .body.flush { padding: 0; }

/* -------------------------------------------------------- quote header */
.quote {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 26px;
  padding: 16px 18px;
  background:
    linear-gradient(90deg, var(--blue-glow), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.quote .ident .sym {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.1;
}
.quote .ident .name {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 2px;
}
.quote .ident .tags { margin-top: 6px; display: flex; gap: 6px; }
.quote .price { text-align: right; }
.quote .price .last {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.quote .price .chg { font-size: 13px; font-weight: 700; margin-top: 2px; }
.quote .band { min-width: 240px; }
.quote .band .row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

/* ---------------------------------------------------------- stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
         background: var(--border); border: 1px solid var(--border);
         border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { background: var(--bg-1); padding: 10px 13px; }
.tile .k {
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tile .v { font-size: 16px; font-weight: 700; margin-top: 3px; }

/* key/value lists */
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 5px 0; border-bottom: 1px dashed var(--border); }
.kv tr:last-child td { border-bottom: none; }
.kv .k { color: var(--text-dim); font-size: 11px; }
.kv .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl thead th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  padding: 8px 11px;
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-hi);
  white-space: nowrap;
}
.tbl thead th:first-child,
.tbl tbody td:first-child { text-align: left; }
.tbl thead th a { color: inherit; }
.tbl thead th a:hover { color: var(--blue-br); }
.tbl thead th.sorted { color: var(--blue-br); }
.tbl tbody td {
  padding: 7px 11px;
  text-align: right;
  border-bottom: 1px solid var(--bg-2);
  white-space: nowrap;
}
.tbl tbody tr:hover td { background: var(--bg-2); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .sym { font-weight: 700; letter-spacing: 0.05em; }
.tbl .sym a { color: var(--text); }
.tbl .sym a:hover { color: var(--blue-br); }
.tbl td.wide { width: 1%; }
.tbl tr.emph td { font-weight: 700; background: rgba(61, 125, 255, 0.045); }
.tbl tr.group td {
  background: var(--bg-2);
  color: var(--red-br);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.scroll-x { overflow-x: auto; }

/* ------------------------------------------------- direction + state */
.up    { color: var(--up); }
.down  { color: var(--down); }
.flat  { color: var(--text-dim); }
.warn  { color: var(--warn); }
.dim   { color: var(--text-faint); }
.accent { color: var(--red); }

/* ------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.chip:hover { border-color: var(--blue); color: var(--text); }
.chip.on {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: #fff;
}
.chip.red.on { background: var(--red-dim); border-color: var(--red); color: var(--red-br); }
.tag {
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tag.stale { color: var(--warn); border-color: var(--warn); }
.tag.suspect { color: var(--red); border-color: var(--red); }
/* forecast signals: the word itself carries the meaning, so these read
 * correctly without the colour too */
.tag.up   { color: var(--up);   border-color: var(--up); }
.tag.down { color: var(--down); border-color: var(--down); }

/* ------------------------------------------------------------- charts */
svg.chart-candles, svg.chart-line { width: 100%; display: block; height: auto; }
.chart-wrap { padding: 6px 4px 0; }

.gridline   { stroke: #16202f; stroke-width: 1; }
text.axis   { fill: var(--text-faint); font-size: 10px; font-family: var(--mono); }
text.empty  { fill: var(--text-faint); font-size: 12px; font-family: var(--mono); }

.wick.up    { stroke: var(--up); stroke-width: 1; }
.wick.down  { stroke: var(--down); stroke-width: 1; }
.body.up    { fill: var(--up); }
.body.down  { fill: var(--down); }
.vol.up     { fill: var(--up); opacity: 0.3; }
.vol.down   { fill: var(--down); opacity: 0.3; }

.line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.line-dot { fill: var(--blue-br); }
.area { fill: url(#blueFade); opacity: 0.5; }
.baseline { stroke: var(--border-hi); stroke-dasharray: 3 3; }

.overlay { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.overlay.ov1 { stroke: var(--red); }
.overlay.ov2 { stroke: var(--blue-br); }
.overlay.ref { stroke: var(--border-hi); stroke-dasharray: 3 4; }

.legend { display: flex; gap: 14px; padding: 4px 10px 10px; font-size: 10px;
          letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.legend i { display: inline-block; width: 16px; height: 2px; margin-right: 6px;
            vertical-align: middle; }
.legend .line i { background: var(--blue); }
.legend .ov1 i  { background: var(--red); }
.legend .ov2 i  { background: var(--blue-br); }

/* sparklines */
svg.spark { width: 110px; height: 28px; display: block; }
.spark-line { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.spark-area { opacity: 0.16; }
.spark.up   .spark-line { stroke: var(--up); }
.spark.up   .spark-area { fill: var(--up); }
.spark.down .spark-line { stroke: var(--down); }
.spark.down .spark-area { fill: var(--down); }

/* meters */
svg.meter { width: 100%; height: 26px; display: block; }
.meter-track { stroke: var(--bg-3); stroke-width: 4; stroke-linecap: round; }
.meter-fill  { stroke: url(#rbGrad); stroke-width: 4; stroke-linecap: round; }
.meter-dot   { fill: #fff; stroke: var(--red); stroke-width: 2; }

svg.wbar { width: 100%; height: 10px; display: block; }
.wbar-track { fill: var(--bg-3); }
.wbar-fill  { fill: var(--blue); }

/* forecast bars: projected change per symbol, diverging from a zero line.
 * Direction carries a sign in the value label as well as a colour, same
 * rule as the price tables. */
svg.fbar { width: 100%; height: auto; display: block; }
.fbar-zero  { stroke: var(--border-hi); stroke-width: 1; }
.fbar-rect.up   { fill: var(--up); }
.fbar-rect.down { fill: var(--down); }
.fbar-rect.flat { fill: var(--text-faint); }
/* hollow: the forecast hit the model's single-bar cap, so it is a limit
 * rather than a prediction and must not read as the strongest call shown */
.fbar-rect.capped { fill-opacity: 0.2; stroke-width: 1; stroke-dasharray: 2.5 2; }
.fbar-rect.capped.up   { stroke: var(--up); }
.fbar-rect.capped.down { stroke: var(--down); }
.fbar-label {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 10.5px;
}
.fbar-value {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--text);
}
.fbar-value.up   { fill: var(--up); }
.fbar-value.down { fill: var(--down); }
.fbar-value.na   { fill: var(--text-faint); }

/* donut: alternates blue and red family so allocation reads on-palette */
svg.donut { width: 100%; max-width: 160px; height: auto; display: block; margin: 0 auto; }
.arc { fill: none; transform: rotate(-90deg); transform-origin: center; }
.arc0 { stroke: var(--blue); }
.arc1 { stroke: var(--red); }
.arc2 { stroke: var(--blue-br); }
.arc3 { stroke: var(--red-br); }
.arc4 { stroke: #2a5bb5; }
.arc5 { stroke: #a3253a; }

/* --------------------------------------------------- correlation grid */
.corr { border-collapse: collapse; font-size: 11px; }
.corr th, .corr td {
  padding: 6px 9px;
  text-align: center;
  border: 1px solid var(--bg-2);
  font-variant-numeric: tabular-nums;
}
.corr th { color: var(--text-dim); font-size: 9px; letter-spacing: 0.1em;
           text-transform: uppercase; }
.corr td.diag { color: var(--text-faint); background: var(--bg-1); }
.corr td.hot  { color: #fff; background: rgba(255, 59, 85, 0.30); }
.corr td.warm { color: var(--warn); background: rgba(255, 176, 46, 0.13); }
.corr td.cool { color: var(--up); background: rgba(0, 212, 146, 0.12); }

/* ------------------------------------------------------------- forms */
form.inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
input[type=text], input[type=number], input[type=password], select {
  padding: 6px 9px;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
button.btn {
  padding: 6px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--blue);
  background: var(--blue-dim);
  color: var(--blue-br);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}
button.btn:hover { background: var(--blue); color: #fff; }
button.btn.danger { border-color: var(--red); background: var(--red-dim); color: var(--red-br); }
button.btn.danger:hover { background: var(--red); color: #fff; }
button.btn.ghost { background: transparent; border-color: var(--border-hi); color: var(--text-dim); }
button.btn.ghost:hover { border-color: var(--red); color: var(--red-br); background: transparent; }

/* ------------------------------------------------------------- misc */
.empty-state { padding: 46px 20px; text-align: center; color: var(--text-faint); }
.empty-state .big { font-size: 15px; color: var(--text-dim); margin-bottom: 8px;
                    letter-spacing: 0.1em; text-transform: uppercase; }
.prose { color: var(--text-dim); line-height: 1.65; font-size: 12px; max-width: 78ch; }
.footer { padding: 16px 18px 26px; color: var(--text-faint); font-size: 10px;
          letter-spacing: 0.09em; text-transform: uppercase; text-align: center; }
.footer .sep { color: var(--border-hi); margin: 0 8px; }

.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; margin-bottom: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--red);
  background: var(--red-dim);
  color: var(--red-br);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.banner.warn { border-color: var(--warn); background: rgba(255, 176, 46, 0.1);
               color: var(--warn); }

.error-page { padding: 90px 20px; text-align: center; }
.error-page .code { font-size: 64px; font-weight: 700; color: var(--red); line-height: 1; }
.error-page .msg { color: var(--text-dim); margin: 12px 0 22px; }

/* ------------------------------------------------- interactive charts */
.figure { position: relative; }

/* Crosshair. Hidden until the pointer is over the capture rect. */
.xhair { opacity: 0; transition: opacity .08s; }
svg.hovering .xhair { opacity: 1; }
.xhair-v {
  stroke: var(--red);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.xhair-dot { fill: var(--red); }
.xhair-capture { cursor: crosshair; }

/* OHLC readout above the chart. */
.readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  min-height: 32px;
}
.readout .r-date {
  font-weight: 700;
  color: var(--blue-br);
  letter-spacing: 0.06em;
  min-width: 92px;
}
.readout .r-pair i {
  font-style: normal;
  color: var(--text-faint);
  margin-right: 5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 9px;
}
.readout .r-pair b { font-weight: 700; }
.readout.up  .r-pair b { color: var(--up); }
.readout.down .r-pair b { color: var(--down); }
.readout .r-hint {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.readout.on .r-hint { visibility: hidden; }

/* --------------------------------------------------- performance strip */
.perf {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
@media (max-width: 1100px) { .perf { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .perf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.perf-cell {
  background: var(--bg-1);
  padding: 9px 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.perf-cell .k {
  display: block;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.perf-cell .v { display: block; font-size: 13px; font-weight: 700; margin-top: 3px; }
.perf-cell.up   { background: linear-gradient(180deg, var(--up-glow), transparent); }
.perf-cell.up   .v { color: var(--up); }
.perf-cell.down { background: linear-gradient(180deg, var(--red-glow), transparent); }
.perf-cell.down .v { color: var(--down); }
.perf-cell.na   .v { color: var(--text-faint); }

/* ------------------------------------------------------------- rating */
.rating .verdict { text-align: center; padding: 4px 0 14px; }
.rating .word {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
}
.rating .verdict.buy  .word { color: var(--up); }
.rating .verdict.sell .word { color: var(--down); }
.rating .verdict.hold .word { color: var(--warn); }

.gauge { margin: 12px auto 6px; max-width: 280px; }
.gauge-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  /* Sell -> Hold -> Buy reads red to blue to green, left to right. */
  background: linear-gradient(90deg, var(--red) 0%, var(--bg-3) 50%, var(--up) 100%);
}
.gauge-track span {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-hi);
}
.gauge-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rating .tally {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.votes { margin-top: 4px; }
.votes thead th { font-size: 9px; }
.votes td.vote {
  width: 1%;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  cursor: help;
}
.votes td.sig { text-align: left; color: var(--text); }
.votes tbody td { border-bottom: 1px solid var(--bg-2); }

.reasons {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}
.reasons li { margin-bottom: 2px; }

.disclaimer {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--red);
  background: var(--red-glow);
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.6;
}
.disclaimer strong { color: var(--red-br); }

/* ---- interactive chart: events, why panel, brush, measure ---- */
.readout .r-pair.r-opt[hidden] { display: none; }
.readout .r-pair b.up { color: var(--up); }
.readout .r-pair b.down { color: var(--down); }
.readout.pinned { outline: 1px solid var(--blue); outline-offset: -1px; }
.readout .r-pin { color: var(--blue-br); font-size: 10px; margin-left: 8px; }
.readout .r-measure { font-size: 11px; margin-left: 8px; padding: 1px 6px; border-radius: 3px;
  background: rgba(255,255,255,.05); }
.readout .r-measure.up { color: var(--up); } .readout .r-measure.down { color: var(--down); }
.readout.pinned .r-hint, .readout .r-measure:not([hidden]) ~ .r-hint { visibility: hidden; }
.chart-wrap { position: relative; }
.brush { position: absolute; pointer-events: none; background: rgba(90,140,255,.14);
  border-left: 1px solid var(--blue-br); border-right: 1px solid var(--blue-br); }
.brush.measure { background: rgba(255,80,80,.12); border-color: var(--red); }
svg g.ev circle { fill: #141c2a; stroke: var(--blue-br); stroke-width: 1; opacity: .85; }
svg g.ev text { fill: var(--blue-br); font-size: 7.5px; font-weight: 700; font-family: inherit; }
svg g.ev-earnings circle { stroke: var(--red); } svg g.ev-earnings text { fill: var(--red); }
svg g.ev-split circle { stroke: var(--up); } svg g.ev-split text { fill: var(--up); }
svg g.ev-dividend circle { stroke: var(--dim, #8a93a6); } svg g.ev-dividend text { fill: var(--dim, #8a93a6); }
svg g.ev.lit circle { opacity: 1; stroke-width: 2; fill: rgba(255,255,255,.08); }
.why { padding: 8px 12px 10px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.why-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.why-date { font-weight: 700; color: var(--blue-br); }
.why-title { color: var(--dim, #8a93a6); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.why-list { margin: 0; padding-left: 18px; }
.why-list li { margin: 2px 0; } .why-list li.strong { color: var(--red); } .why-list li.dim { color: var(--dim, #8a93a6); }
.why-events { margin-top: 6px; display: grid; gap: 3px; }
.why-events .tag { font-size: 9px; }
.tag.ev-earnings { border-color: var(--red); color: var(--red); } .tag.ev-split { border-color: var(--up); color: var(--up); }
.tag.ev-filing { border-color: var(--blue-br); color: var(--blue-br); }
.zoom-note { font-size: 11px; color: var(--blue-br); margin-left: 10px; }
.events-list { font-size: 12px; } .events-list td { padding: 3px 8px; }

/* ---- sortable tables ---- */
.tbl thead th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl thead th[data-sort]:hover { color: var(--blue-br); }
.tbl thead th[data-sort]::after { content: "\2195"; opacity: .35; margin-left: 5px; font-size: 10px; }
.tbl thead th.sorted.asc::after { content: "\2191"; opacity: 1; }
.tbl thead th.sorted.desc::after { content: "\2193"; opacity: 1; }

/* ----------------------------------------------------------- accounts */
/* Sign in/up links reuse the .pill chrome; the sign-out button has to look
   identical while being a real POST (a GET that ends a session is cacheable
   and prefetchable, which is how "sign out on hover" bugs happen). */
a.pill { text-decoration: none; }
a.pill:hover, .pill.linklike:hover { border-color: var(--blue); color: var(--blue-br); }
.pill.signup { color: var(--blue-br); border-color: color-mix(in srgb, var(--blue-br) 45%, transparent); }
form.signout { display: inline-flex; }
.pill.linklike { cursor: pointer; background: none; font: inherit; font-size: 11px; }

.auth-wrap { display: flex; justify-content: center; padding: 48px 0; }
.panel.auth { width: 360px; max-width: 100%; }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px;
                   font-size: 11px; color: var(--text-faint);
                   text-transform: uppercase; letter-spacing: .06em; }
.auth-form button { margin-top: 6px; }
.auth-switch { margin: 14px 0 2px; font-size: 12px; color: var(--text-faint); }
.auth-switch a { color: var(--blue-br); }

/* ------------------------------------------------------- small screens */
/* The topbar is the one element on every page, so it carries the layout's
   whole responsive burden: drop the nav labels first (the mnemonics ARE the
   product's vocabulary), then let the bar wrap and give the nav its own
   scrollable row. Content grids already collapse via the rules above. */
@media (max-width: 1340px) {
  .nav a .name { display: none; }
  .topbar { gap: 12px; }
  .cmd input { width: 130px; }
}
@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 46px;
    padding: 6px 10px;
    row-gap: 4px;
  }
  .brand .ver { display: none; }
  /* The nav takes the second row, full width, and scrolls sideways rather
     than wrapping to a third: one thumb-swipe reaches every screen. */
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .topbar-right { gap: 6px; }
  .cmd input { width: 84px; }
  .cmd input:focus { width: 130px; }
  .pill { padding: 3px 7px; }
  /* The market pill keeps its dot and state; the wordy detail is a title
     attribute already, so losing the label costs nothing on a phone. */
}
@media (max-width: 480px) {
  .page { padding: 10px; }
  .grid { gap: 10px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* On the narrowest phones even the right-hand cluster must be allowed to
     take a second line; the brand stays put and everything else flows. */
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .cmd input { width: 72px; }
  .cmd input:focus { width: 110px; }
}

/* ------------------------------------------------- feedback and admin */
.banner.ok { border-color: color-mix(in srgb, var(--up) 45%, transparent); color: var(--up); }
.auth-form textarea {
  padding: 8px 10px; background: var(--bg); border: 1px solid var(--border-hi);
  border-radius: var(--radius); color: var(--text); font-family: var(--mono);
  font-size: 12px; resize: vertical;
}
.auth-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.panel.feedback { width: 440px; }
.note-msg { white-space: pre-wrap; max-width: 420px; }
.nowrap { white-space: nowrap; }
h3.sub { margin: 14px 0 6px; font-size: 11px; letter-spacing: .08em;
         text-transform: uppercase; color: var(--text-faint); }
.errlist { margin: 0; padding-left: 18px; font-size: 12px; color: var(--red); }
.errlist li { margin: 2px 0; }
td .inline { display: inline-flex; }

/* ------------------------------------------------- typeahead (command box) */
.cmd-wrap { position: relative; }
.typeahead {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: 340px; max-width: 80vw;
  margin: 0; padding: 4px; list-style: none; z-index: 60;
  background: var(--bg-2); border: 1px solid var(--border-hi); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
.typeahead li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.typeahead li .sym { font-family: var(--mono); font-weight: 700; color: var(--blue-br); letter-spacing: .06em; }
.typeahead li .nm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typeahead li .ex { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.typeahead li.active, .typeahead li:hover { background: var(--blue-dim); }
.typeahead li.active .nm { color: #fff; }
.typeahead li.note { grid-template-columns: 1fr; color: var(--text-faint); cursor: default; font-size: 11px; }
.typeahead li.note:hover { background: none; }

/* ----------------------------------------------------- dropdown menus */
.menu-wrap { position: relative; display: inline-flex; }
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; z-index: 60;
  padding: 4px; background: var(--bg-2); border: 1px solid var(--border-hi); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55); font-size: 12px;
}
.menu.left { right: auto; left: 0; }
.menu .menu-head {
  padding: 6px 10px 5px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border); margin-bottom: 3px;
}
.menu .menu-sep { height: 1px; background: var(--border); margin: 3px 0; }
.menu a, .menu button, .menu form button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 10px; border: 0; border-radius: 4px; background: none; color: var(--text);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer; text-decoration: none;
}
.menu form { display: block; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--blue-dim); color: #fff; outline: none; }
.menu .hint { font-family: var(--mono); font-size: 10px; color: var(--text-faint); letter-spacing: .08em; }
.pill.user { cursor: pointer; background: none; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-br); border-color: color-mix(in srgb, var(--blue-br) 45%, transparent); }
.pill.user .dot { background: var(--up); }
.pill.user .caret { font-size: 9px; opacity: .7; }
.pill[aria-expanded="true"] { border-color: var(--blue); color: #fff; }

/* the "⋯" on the security header */
.quote .sym { display: flex; align-items: center; gap: 8px; }
.kebab {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-hi);
  background: var(--bg-2); color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer;
}
.kebab:hover, .kebab[aria-expanded="true"] { border-color: var(--blue); color: var(--blue-br); }
.actions .menu { left: 0; right: auto; top: calc(100% + 8px); }

/* --------------------------------------------------------- pop-ups */
dialog.modal {
  width: 380px; max-width: calc(100vw - 32px); padding: 0; border: 1px solid var(--border-hi);
  border-radius: 8px; background: var(--bg-1); color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
}
dialog.modal::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(2px); }
dialog.modal .modal-body { padding: 18px 20px 20px; }
dialog.modal h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-br); }
.modal-close { position: absolute; top: 6px; right: 8px; margin: 0; }
.modal-close button {
  border: 0; background: none; color: var(--text-faint); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.modal-close button:hover { color: var(--red); }
.modal-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.modal-tabs .tab {
  padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-dim);
  font: inherit; font-size: 12px; cursor: pointer; margin-bottom: -1px;
}
.modal-tabs .tab.active { color: #fff; border-bottom-color: var(--blue); }
.auth-error { margin-bottom: 10px; }
.auth-form.busy { opacity: .6; pointer-events: none; }
.trade-form .seg { display: flex; gap: 14px; font-size: 12px; color: var(--text); text-transform: none; }
.trade-form .seg label { flex-direction: row; align-items: center; gap: 6px; text-transform: none; color: var(--text); font-size: 12px; }
.auth-form input[type=number], .auth-form input[type=text], .auth-form input[type=password], .auth-form input[type=search] {
  padding: 7px 10px; background: var(--bg); border: 1px solid var(--border-hi); border-radius: var(--radius);
  color: var(--text); font-family: var(--mono); font-size: 12px;
}
.auth-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.keys kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--border-hi); border-bottom-width: 2px;
  border-radius: 4px; background: var(--bg); font-family: var(--mono); font-size: 11px; color: var(--blue-br);
}
.keys td.k { white-space: nowrap; }
p.small { font-size: 11px; }

/* search results page */
.search-again { display: flex; gap: 8px; margin-bottom: 12px; }
.search-again input {
  flex: 1; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border-hi); border-radius: var(--radius);
  color: var(--text); font-family: var(--mono); font-size: 13px;
}
.search-again input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.results a.sym { font-family: var(--mono); font-weight: 700; color: var(--blue-br); letter-spacing: .06em; }
.empty-note { color: var(--text-faint); font-size: 12px; }