:root {
  /* zysk black glass. White is the only accent; --up/--down only mean money moved. */
  --void: #030405;
  --glass: #0d0f13;
  --glass-raised: #15181e;
  --edge: rgba(255,255,255,.09);
  --edge-hi: rgba(255,255,255,.18);
  --ink: #f4f6f8;
  --ink-2: #a3a9b3;
  --ink-3: #737985; /* 4.7:1 on the page black (AA) */
  --signal: #ffffff;
  --on-signal: #050607;
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 38%, rgba(255,255,255,0)), var(--glass);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -24px rgba(0,0,0,.8);
  --up: #34d399;
  --down: #f87171;
  /* Older names, mapped onto the tokens above. */
  --bg: var(--void);
  --card: var(--glass);
  --card2: var(--glass-raised);
  --line: var(--edge);
  --text: var(--ink);
  --muted: var(--ink-2);
  --text-2: #c9ced6;
  --link: var(--ink);
  --accent: var(--signal);
  --chip: #1b1f26;
  --shadow: 0 18px 44px -12px rgba(0,0,0,.75);
  --accent-ink: var(--ink);
  --accent-soft: rgba(255,255,255,.08);
  --accent-line: var(--edge-hi);
  --warn: #f59e0b;
  --info: #60a5fa;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255,255,255,.55);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: rgba(255,255,255,.2); color: #fff; }
html { color-scheme: dark; scrollbar-color: #2c333d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #262c35; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #333b46; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
table.data, .hero-num, .px, .idx .p, .legend, .stats, .ai-stat-box .val,
.chg, .up, .down, .badge, .mini span:last-child, .ai-card-perf { font-variant-numeric: tabular-nums; }
.ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.ico-lg { width: 18px; height: 18px; }
.sec-head { display: flex; align-items: center; gap: 10px; }
.sec-head .ico { color: var(--muted); }
.sec-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html, body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; max-width: 100%; }
body {
  font: 14px/1.45 "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  background: rgba(10,11,14,.72);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.05em;
  line-height: 1;
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; color: var(--text); }
/* The mark is /brand/mark.svg (see public/brand/README.md). */
.gmark { display: block; width: 26px; height: 26px; flex-shrink: 0; }
.search { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; }
.search-ico { position: absolute; left: 14px; pointer-events: none; }
.search input {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 11px 16px 11px 42px;
  color: var(--text);
  font: 14px "Geist", system-ui, sans-serif;
}
.search input:focus { outline: 2px solid rgba(255,255,255,.14); border-color: var(--edge-hi); }
.suggest {
  position: absolute; top: 110%; left: 0; right: 0;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 14px; overflow: auto; max-height: 340px;
  box-shadow: var(--shadow); z-index: 30;
}
.suggest a { display: block; padding: 10px 14px; color: var(--text); border-bottom: 1px solid var(--line); }
.suggest a:hover { background: var(--chip); text-decoration: none; }
.tx-sym { position: relative; }
.tx-search { max-width: none; }
.tx-search input { border-radius: 12px; }
.tx-sym .suggest { top: calc(100% + 4px); }
.tx-sym .suggest a { display: flex; align-items: center; gap: 10px; }
.tx-s-id, .tx-chip-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tx-s-id b, .tx-chip-id b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-s-id span, .tx-chip-id span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tx-chip { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; border: 1px solid var(--edge-hi); border-radius: 12px; background: rgba(255,255,255,.04); }
.tx-chip .tx-chip-id { flex: 1; }
.tx-sym-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); }
.tx-sym-hint.bad { color: var(--warn); }
.live-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--edge);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 11px;
  font: 600 12px/1 "Geist", system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  flex-shrink: 0;
  margin-left: auto;
}
.live-btn:hover {
  background: rgba(255,255,255,.09);
  border-color: var(--edge-hi);
}
.live-btn.paused {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.live-btn.paused:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.55);
  animation: pulseLive 2s infinite;
  display: inline-block;
  flex-shrink: 0;
}
.pulse-dot.paused {
  background: var(--ink-3);
  box-shadow: none;
  animation: none;
}
.pulse-dot.updating {
  background: var(--ink-2);
  box-shadow: 0 0 0 0 rgba(255,255,255,.4);
  animation: pulseLive 0.8s infinite;
}
@keyframes pulseLive {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@keyframes flashGreen {
  0% { background-color: rgba(52, 211, 153, 0.24); }
  100% { background-color: transparent; }
}
@keyframes flashRed {
  0% { background-color: rgba(248, 113, 113, 0.24); }
  100% { background-color: transparent; }
}
.flash-up {
  animation: flashGreen 1.2s ease-out !important;
}
.flash-down {
  animation: flashRed 1.2s ease-out !important;
}
.topnav { display: flex; gap: 2px; align-items: center; }
.topnav a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-weight: 500; padding: 7px 10px; border-radius: 9px;
  transition: color .15s ease, background-color .15s ease;
}
.topnav a:hover { color: var(--text); background: rgba(255,255,255,.05); text-decoration: none; }
.topnav a.active { color: var(--text); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.topnav a .ico { color: inherit; opacity: .85; }
.topnav a.ai-link.active, .topnav a.ai-link:hover { color: var(--accent-ink); }
.topnav .nav-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.shell { display: flex; min-height: calc(100vh - 58px); width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
.sidebar {
  width: 220px; flex-shrink: 0; padding: 18px 12px 32px;
  border-right: 1px solid var(--line); background: rgba(255,255,255,.012);
}
.sidebar h3 {
  margin: 18px 10px 8px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.sidebar h3:first-child { margin-top: 2px; }
.sidebar .item, .sidebar .mini {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-radius: 10px; color: var(--text);
}
.sidebar .item:hover, .sidebar .mini:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.sidebar .item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.sidebar .item .lbl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sidebar .item .ico { color: var(--muted); }
.sidebar .item.active .ico { color: var(--accent-ink); }
.sidebar .mini { font-size: 13px; padding: 7px 10px; }
.sidebar .mini span:first-child { color: var(--text-2); }
.chg.up, .up { color: var(--up); }
.chg.down, .down { color: var(--down); }
.main { flex: 1; padding: 22px 26px 56px; min-width: 0; max-width: 100%; overflow-x: hidden; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .9fr); gap: 16px; align-items: start; }
.grid-2 > * { min-width: 0; max-width: 100%; }
.card, .chart-box { min-width: 0; max-width: 100%; }
.card {
  background: var(--glass-bg); border: 1px solid var(--line); box-shadow: var(--glass-shadow);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 16px;
}
.card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
h1 { font-size: 28px; margin: 0 0 4px; font-weight: 600; letter-spacing: -.035em; }
.hero-num { font-size: 38px; font-weight: 600; letter-spacing: -.045em; line-height: 1.1; }
.meta { color: var(--muted); margin: 0 0 14px; font-size: 13px; }
.pill-row, .ranges, .inline, .form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill, .ranges button {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
  font: 13px/1 "Geist", system-ui, sans-serif;
}
.pill.active, .ranges button.active {
  background: var(--ink); color: var(--on-signal); border-color: transparent; font-weight: 600;
}
.pill:hover:not(.active), .ranges button:hover:not(.active) { color: var(--text); }
.btn {
  background: var(--signal); color: var(--on-signal); border: 0; border-radius: 999px;
  padding: 8px 14px; font: 600 13px/1 "Geist", system-ui, sans-serif; cursor: pointer;
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: filter .15s ease, background-color .15s ease, border-color .15s ease; }
.btn:hover { filter: brightness(.9); }
.btn.ghost:hover, .btn.outline:hover, .btn.danger:hover { filter: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn.ghost:hover { border-color: var(--edge-hi); background: rgba(255,255,255,.05); }
.btn.danger { background: transparent; color: #fca5a5; border: 1px solid #5b2323; }
.btn.danger:hover { background: #2a1414; border-color: #7f2d2d; }
.btn.ghost {
  background: transparent; color: var(--text); border: 1px solid var(--line);
}
.btn.outline {
  background: transparent; color: var(--ink); border: 1px solid var(--edge-hi);
}
.btn.outline:hover { background: rgba(255,255,255,.06); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.indices { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.idx {
  background: var(--glass-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--glass-shadow);
  padding: 12px 14px; min-width: 140px; color: var(--text);
}
.idx:hover { text-decoration: none; border-color: var(--edge-hi); }
.idx .n { font-size: 12px; color: var(--muted); }
.idx .p { font-size: 18px; font-weight: 600; margin: 3px 0; letter-spacing: -.02em; }
.quote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.quote-head .px { font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600;
}
.badge.up { background: rgba(52,211,153,.12); color: var(--up); }
.badge.down { background: rgba(248,113,113,.12); color: var(--down); }
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px;
}
.stats div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.stats span { color: var(--muted); }
.chart-box { position: relative; user-select: none; }
canvas.chart { width: 100%; height: 280px; display: block; cursor: crosshair; touch-action: pan-y; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 110px; max-width: 180px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--glass-raised); border: 1px solid var(--edge-hi);
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  font-size: 12px; line-height: 1.35; color: var(--text);
}
.chart-tip .t { color: var(--muted); margin-bottom: 2px; }
.chart-tip .p { font-weight: 700; font-size: 13px; }
.chart-tip .d { margin-top: 4px; font-weight: 600; }
.chart-tip .m { margin-top: 4px; font-weight: 600; }
.chart-tip .d.up, .chart-delta.up strong { color: var(--up); }
.chart-tip .d.down, .chart-delta.down strong { color: var(--down); }
.chart-delta {
  position: absolute; top: 44px; left: 14px; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(13, 15, 19, 0.9); border: 1px solid var(--edge-hi);
  font-size: 12px; color: var(--muted);
}
.chart-delta strong { color: var(--text); font-size: 13px; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td {
  padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--line);
}
table.data th { color: var(--muted); font-weight: 500; background: transparent; }
table.data td.left, table.data th.left { text-align: left; }
table.data tr:hover td { background: rgba(255,255,255,.03); }
table.data tr.totals td { font-weight: 600; background: rgba(255,255,255,.04); border-bottom: 0; }
.row-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-title a, .row-title .nm { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
table.data th { font-size: 12px; white-space: nowrap; }
table.data tbody tr { transition: background-color .12s ease; }
/* Company logo tile (see logo() in app.js). Initials on a symbol-tinted glass tile
   paint first; the logo image covers them once loaded. */
.av {
  --h: 220;
  position: relative; overflow: hidden; isolation: isolate;
  width: 28px; height: 28px; border-radius: 8px;
  background: hsl(var(--h) 14% 15%); color: hsl(var(--h) 26% 78%);
  box-shadow: inset 0 0 0 1px var(--edge); display: grid; place-items: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; flex-shrink: 0;
}
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s cubic-bezier(.16,1,.3,1); }
.av.has-logo { background: var(--glass-raised); }
.av.has-logo img { opacity: 1; }
.av.has-logo .av-i { visibility: hidden; }
.av.clear img { padding: 12%; }
.av.plate { background: #e9ecf0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.av.xs { width: 18px; height: 18px; border-radius: 5px; font-size: 7.5px; }
.av.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 8.5px; }
.av.md { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
.av.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 14px; }
.news a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.news .src { color: var(--muted); font-size: 12px; }
input, select, textarea {
  font: 14px "Geist", system-ui, sans-serif; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; background: var(--card2); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.muted { color: var(--muted); }
.flash { color: #fca5a5; }
.desc { max-width: 760px; color: #d0d5dd; }
.note {
  background: rgba(255,255,255,.03); border: 1px solid var(--edge);
  padding: 9px 12px; border-radius: 10px; margin: 0 0 14px; color: var(--text-2); font-size: 12.5px;
}
.seg {
  display: flex; gap: 4px; background: var(--chip); padding: 4px; border-radius: 12px; flex-wrap: wrap;
}
.seg button {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  border-radius: 9px; padding: 8px 12px; cursor: pointer;
  font: 500 13px "Geist", system-ui, sans-serif;
}
.seg button.active {
  background: rgba(255,255,255,.12); color: var(--ink); border-color: var(--edge); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.seg button:hover:not(.active) { color: var(--text); }
.lock {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); color: var(--ink-2); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.donut-wrap { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.donut { width: 176px; height: 176px; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut-center {
  position: absolute; inset: 30px; background: var(--card); border-radius: 50%;
  display: grid; place-content: center; text-align: center; font-size: 11px; color: var(--muted); gap: 2px;
}
.donut-center b { color: var(--text); font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.legend { font-size: 12.5px; color: var(--muted); display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; width: 100%; }
.legend > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.legend .sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legend .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.legend b { color: var(--text); font-weight: 600; margin-left: auto; }
.cash-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.modal-root {
  position: fixed; inset: 0; background: rgba(0,0,0,.66);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal-root[hidden] { display: none !important; }
.modal {
  width: min(560px, 100%); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 38%, rgba(255,255,255,0)), var(--glass-raised);
  border: 1px solid var(--edge-hi); border-radius: 18px; padding: 18px 18px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px -20px rgba(0,0,0,.9);
}
.modal h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bottomnav { display: none; }
.table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  display: block;
}
.table-scroll table.data {
  width: max-content;
  min-width: 100%;
}
#q-clock, .meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1200px) {
  .grid-2 { grid-template-columns: 1fr; }
  .main { padding: 18px 16px 48px; }
  .topnav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .search { max-width: 360px; min-width: 0; }
  .auth-user { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
  .shell { display: block; width: 100%; max-width: 100%; overflow-x: hidden; }
  .sidebar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar h3 { display: none; }
  .sidebar .item, .sidebar .mini {
    flex: 0 0 auto; white-space: nowrap; background: var(--chip);
    border: 1px solid var(--line); padding: 8px 12px;
  }
  .modal-grid { grid-template-columns: 1fr; }
  .main { max-width: 100%; min-width: 0; overflow-x: hidden; }
  .card, .chart-box, .grid-2 { max-width: 100%; min-width: 0; }
}

@media (max-width: 720px) {
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .top {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .wordmark { font-size: 19px; }
  .wordmark .gmark { width: 24px; height: 24px; }
  .live-btn { order: 2; margin-left: auto; }
  .search { order: 3; flex: 1 1 100%; max-width: none; min-width: 0; }
  /* Top nav collapses to just the log-out control; the bottom bar handles navigation. */
  .topnav { order: 2; margin-left: 4px; }
  .topnav a, .topnav .nav-sep, .auth-user { display: none; }
  .topnav #guest-login { display: inline-block; }
  .topnav .user-menu .more-list a { display: block; } /* Credits, Privacy, Terms stay in the menu */
  .logout-btn { margin-left: 0; }
  .bottomnav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    background: rgba(10,11,14,.78);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
  }
  .bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 48px; padding: 6px 2px;
    color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap;
    text-decoration: none; border-radius: 10px;
  }
  .bottomnav a:hover, .bottomnav a:active { text-decoration: none; color: var(--text); }
  .bottomnav a.active { color: var(--ink); background: rgba(255,255,255,.06); }
  .bottomnav a .ico { width: 20px; height: 20px; }

  .shell {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    min-height: calc(100dvh - 58px);
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  .sidebar {
    width: 100vw;
    max-width: 100vw;
  }
  .main {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 14px 12px calc(24px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  .grid-2, .quote-grid, .card, .chart-box, .quote-head {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  h1 { font-size: 22px; }
  .hero-num { font-size: 28px; }
  .quote-head .px { font-size: 28px; }
  .card { padding: 14px; border-radius: 14px; margin-bottom: 12px; }
  canvas.chart { width: 100% !important; max-width: 100%; height: 220px; }

  .indices {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  .idx { min-width: 132px; flex: 0 0 auto; }

  .toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ranges {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .ranges::-webkit-scrollbar { display: none; }
  .ranges button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; }
  .pill, .btn, .seg button { min-height: 40px; padding: 8px 12px; }

  .quote-head { gap: 10px; }
  .quote-head .inline { width: 100%; min-width: 0; }
  .quote-head .inline .btn, .quote-head select { flex: 1 1 auto; min-width: 0; }

  .grid-2 > * { min-width: 0 !important; max-width: 100%; }
  .card, .chart-box {
    min-width: 0 !important;
    max-width: 100%;
  }
  .toolbar, .ranges, .table-scroll, .indices {
    min-width: 0 !important;
  }
  .table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table.data {
    display: table;
    width: max-content;
    max-width: none;
    min-width: 100%;
  }

  .stats { grid-template-columns: 1fr; gap: 0; }
  .modal-root {
    align-items: end; padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal {
    width: 100%; border-radius: 18px 18px 0 0;
    max-height: min(92dvh, 100%); overflow: auto;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  }
  .chart-delta { max-width: calc(100% - 24px); font-size: 11px; }
  .chart-tip { max-width: min(180px, 70vw); }
  .donut-wrap { flex-direction: column; align-items: flex-start; }
  input, select, textarea, .search input { font-size: 16px; }
}

@media (max-width: 400px) {
  .hero-num { font-size: 24px; }
  .quote-head .px { font-size: 24px; }
  canvas.chart { height: 200px; }
}

/* Auth / login */
.auth-body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.auth-wrap { width: 100%; max-width: 400px; }
.auth-card {
  background: var(--glass-bg);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
  border-radius: 20px;
  padding: 28px 24px 24px;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.auth-brand .gmark { width: 34px; height: 34px; }
.auth-wordmark {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}
.auth-tabs {
  display: flex;
  gap: 6px;
  background: var(--chip);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 12px;
  font: 600 13px/1 "Geist", system-ui, sans-serif;
  cursor: pointer;
}
.auth-tab.active {
  background: rgba(255,255,255,.12);
  color: var(--ink);
}
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 8px;
}
.auth-input {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font: 14px "Geist", system-ui, sans-serif;
}
.auth-input:focus { outline: 2px solid rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.auth-error {
  margin: 10px 0 0;
  color: #fca5a5;
  background: #3a1515;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.auth-submit {
  width: 100%;
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 14px;
  min-height: 44px;
}
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-user {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin-right: 8px;
  align-self: center;
}
.logout-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font: 500 12px/1 "Geist", system-ui, sans-serif;
  cursor: pointer;
  margin-left: 4px;
}
.logout-btn:hover { color: var(--text); border-color: var(--edge-hi); }
/* Guest mode: the header button is a white "Sign in" (app.js setupGuestChrome). */
.logout-btn.signin { background: var(--signal); color: var(--on-signal); border-color: transparent; font-weight: 600; }
.logout-btn.signin:hover { filter: brightness(.9); color: var(--on-signal); }
.auth-guest { width: 100%; margin-top: 10px; padding: 12px 16px; font-size: 14px; min-height: 44px; }
@media (max-width: 860px) {
  .logout-btn { margin-left: auto; }
  .auth-card { padding: 22px 16px 18px; }
}

/* AI scorecard */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--edge);
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-badge.purple {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}
/* Money direction only: a mover that went up or down. */
.ai-badge.green {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--up);
}
.ai-badge.orange {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}
.ai-badge.red {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--down);
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}
.timeline-item:hover {
  border-color: var(--edge-hi);
}
.timeline-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  background: var(--glass-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  text-align: center;
  flex-shrink: 0;
}
.timeline-date .m { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.timeline-date .d { font-size: 18px; font-weight: 700; color: var(--text); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.timeline-title { font-weight: 600; font-size: 14px; color: var(--text); }
.timeline-desc { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.ai-takeaways {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.ai-takeaway-item {
  display: flex;
  gap: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.ai-takeaway-item .ai-takeaway-num { background: var(--accent-soft); color: var(--accent-ink); }
.ai-takeaway-item.warning .ai-takeaway-num { background: #3a2a0d; color: #fcd34d; }
.ai-takeaway-item.info .ai-takeaway-num { background: var(--accent-soft); color: var(--ink); }
.ai-takeaway-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Ask AI Copilot & Interactive Artifacts */
.ai-chat-card {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 250px);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.ai-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  flex-wrap: wrap;
  gap: 10px;
}
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100dvh - 300px);
  min-height: 280px;
}
.ai-msg {
  display: flex;
  gap: 10px;
  max-width: 90%;
  animation: fadeIn 0.2s ease-out;
}
.ai-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ai-msg.assistant {
  align-self: flex-start;
  max-width: 96%;
}
.ai-msg-bubble {
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
}
.ai-msg.user .ai-msg-bubble {
  background: rgba(255,255,255,.1);
  border: 1px solid var(--edge-hi);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.ai-msg.assistant .ai-msg-bubble {
  background: var(--glass-raised);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  width: 100%;
}
.ai-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--glass-raised);
  border: 1px solid var(--line);
}
.ai-msg.user .ai-msg-avatar {
  background: rgba(255,255,255,.1);
  border-color: var(--edge-hi);
}
.ai-chat-artifact {
  margin: 14px 0 6px;
  background: #08090c;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.ai-artifact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ai-artifact-title {
  font-weight: 600;
  font-size: 13px;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-artifact-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  border: 1px solid var(--line);
}
.ai-chart-canvas-wrap {
  width: 100%;
  height: 260px;
  position: relative;
}
.ai-chat-suggestions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255,255,255,.015);
}
.ai-chat-chip {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ai-chat-chip:disabled { opacity: .5; cursor: not-allowed; }
.ai-chat-chip:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: var(--edge-hi);
}
.ai-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--line);
  align-items: center;
}
.ai-chat-input {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--text);
  font: 14px "Geist", system-ui, sans-serif;
  outline: none;
}
.ai-chat-input:focus {
  border-color: rgba(255,255,255,.3);
}
.ai-chat-send {
  background: var(--signal);
  color: var(--on-signal);
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ai-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}
.ai-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-2);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

.ai-spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Live AI Intelligence Desk styles
   ========================================================================== */
.live-hero {
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.live-radar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-block;
  position: relative;
}
/* Its pulse grows past the dot: room for it next to text. */
.live-radar-dot.pad { flex-shrink: 0; margin: 0 8px 0 6px; }
/* Only pulses while a scan is actually running. */
.live-radar-dot.scanning::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  animation: radarPulse 1.6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes radarPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.live-scan-btn {
  background: var(--signal);
  border: 1px solid var(--signal);
  color: var(--on-signal);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color .15s ease;
}
.live-scan-btn:hover { background: #e2e5e9; border-color: #e2e5e9; }
.live-scan-btn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.live-movers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.live-mover-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s ease;
}
.live-mover-card:hover {
  border-color: var(--edge-hi);
  background: rgba(255,255,255,.04);
}

.live-gameplan-box {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 14px;
}
.live-gameplan-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  line-height: 1.5;
  color: #e2e8f0;
}
.live-gameplan-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.live-gameplan-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.live-catalysts-table {
  width: 100%;
  border-collapse: collapse;
}
.live-catalysts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.live-catalysts-table tr:last-child td {
  border-bottom: none;
}
.live-impact-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Impact is a strength scale, so it stays monochrome: brighter = bigger. */
.live-impact-badge.high {
  background: var(--ink);
  color: var(--on-signal);
  border: 1px solid var(--ink);
}
.live-impact-badge.medium {
  background: rgba(255,255,255,.1);
  color: var(--ink);
  border: 1px solid var(--edge-hi);
}
.live-impact-badge.low {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--edge);
}



/* ==========================================================================
   Refinement layer: tabs, states, small shared pieces
   ========================================================================== */
.tabs {
  display: flex; gap: 2px; margin: 4px 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 10px 12px 11px; color: var(--muted); font-weight: 500; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab .ico { width: 14px; height: 14px; }
.tab.active .ico { color: var(--accent-ink); }

.icon-btn { padding: 6px; width: 32px; height: 32px; }
.muted.sub, table.data .sub { font-size: 12px; margin-top: 1px; }
.chip-status {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
  font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
.chip-status .ico { width: 13px; height: 13px; }
.inline-error {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: #2a1414; border: 1px solid #5b2323; color: #fca5a5;
}
.state-card { padding: 22px 22px 20px; }
.ai-msg-avatar .ico { width: 16px; height: 16px; color: var(--accent-ink); }
.ai-msg.user .ai-msg-avatar .ico { color: var(--ink); }
.live-scan-icon { display: inline-flex; }
.live-scan-icon .ico { width: 14px; height: 14px; }
.auth-sub { text-align: center; color: var(--muted); font-size: 13px; margin: -12px 0 20px; }
.auth-tabs[hidden] + .auth-form .auth-label:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1200px) {
  .topnav a { padding: 7px 8px; }
  .topnav .nav-sep { margin: 0 3px; }
}
@media (max-width: 720px) {
  .toolbar .actions { justify-content: flex-start; }
  .tabs { margin-bottom: 12px; }
  .legend { grid-template-columns: 1fr 1fr; }
  .donut-wrap { align-items: center; }
  .row-title a, .row-title .nm { max-width: 150px; }
  .live-hero { padding: 16px; }
}

/* Inputs already draw their own focus state; don't stack the global ring on top. */
input:focus-visible, select:focus-visible, textarea:focus-visible, .search input:focus-visible { box-shadow: none; }

/* Phones: positions become a two-column list (holding | value + P/L) instead of a sideways-scrolling table. */
@media (max-width: 720px) {
  #positions-table { width: 100% !important; min-width: 0 !important; display: block; }
  #positions-table thead { display: none; }
  #positions-table tbody { display: block; }
  #positions-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    padding: 11px 2px; border-bottom: 1px solid var(--line);
  }
  #positions-table td { border: 0; padding: 0; display: none; }
  #positions-table td:nth-child(1) { display: block; grid-row: 1 / span 2; align-self: center; min-width: 0; }
  #positions-table td.pm1 { display: block; grid-column: 2; font-weight: 600; }
  #positions-table td.pm2 { display: block; grid-column: 2; font-size: 12.5px; }
  #positions-table td.pm1 .sub, #positions-table td.pm2 .sub { display: inline; margin-left: 4px; }
  #positions-table.pos-today td.pm1 { grid-row: 1; font-size: 14px; }
  #positions-table.pos-today td.pm2 { grid-row: 2; font-weight: 500; }
  #positions-table .row-title a { max-width: 100%; }
  #positions-table tr.totals { background: rgba(255,255,255,.04); border-radius: 10px; padding: 11px 10px; margin-top: 6px; border: 0; }
  #positions-table tr.totals td:nth-child(1) { grid-row: 1 / span 2; align-self: center; }
  #positions-table tr:hover td { background: transparent; }
}
.indices { margin-bottom: 16px; }
.news a { transition: color .12s ease; }
.news a:hover { text-decoration: none; color: #fff; }
.news .src { margin-left: 6px; white-space: nowrap; }

/* Feed ------------------------------------------------------------------ */
.feed-head h1 { margin: 0; }
.feed-head .meta { margin: 4px 0 8px; }
.feed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.feed-seg { flex-wrap: nowrap; }
.feed-seg button { padding: 6px 12px; }
.feed-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-left: auto; font-variant-numeric: tabular-nums; }
.feed-status .ico { width: 14px; height: 14px; }
.feed-list { padding: 6px 18px 10px; }
.feed-day {
  font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em;
  padding: 16px 0 6px; border-bottom: 1px solid var(--line);
}
.feed-day:first-child { padding-top: 8px; }
.feed-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.feed-item:last-child { border-bottom: 0; }
.feed-item.has-thumb { grid-template-columns: 48px minmax(0, 1fr) 120px; }
.feed-thumb { display: block; width: 120px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--chip); align-self: start; }
.feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-time { color: var(--muted); font-size: 12px; padding-top: 3px; font-variant-numeric: tabular-nums; }
.feed-main { min-width: 0; }
.feed-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.feed-sym {
  font: 600 11.5px/1 "Geist", system-ui, sans-serif; color: var(--ink); background: rgba(255,255,255,.05);
  border: 1px solid var(--edge); border-radius: 6px; padding: 4px 7px; cursor: pointer;
}
.feed-sym:hover { border-color: var(--edge-hi); color: #fff; }
.feed-watch { font-size: 11px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 2px 6px; }
.feed-sent { font-size: 11.5px; font-weight: 600; }
.feed-sent.positive { color: var(--up); }
.feed-sent.negative { color: var(--down); }
.feed-title { color: var(--text); font-size: 14.5px; font-weight: 500; line-height: 1.4; display: block; text-wrap: pretty; }
.feed-title:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.feed-src { color: var(--muted); font-size: 12px; margin-top: 2px; }
.feed-ai { margin: 6px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; max-width: 72ch; }
.feed-foot { font-size: 12px; max-width: 80ch; line-height: 1.5; }
@media (max-width: 720px) {
  .feed-list { padding: 4px 12px 8px; }
  .feed-item { grid-template-columns: 1fr; gap: 2px; }
  .feed-time { padding: 0; }
  .feed-status { margin-left: 0; width: 100%; }
  .feed-bar select { flex: 1 1 auto; }
}
.feed-more { display: flex; margin: 12px auto 6px; }

/* Accounting core ---------------------------------------------------------- */
.save-pill {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  border-radius: 999px; padding: 5px 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--muted);
  font: 600 12px/1 "Geist", system-ui, sans-serif; white-space: nowrap;
}
.save-pill.inline:not([hidden]) + .live-btn { margin-left: 8px; }
.save-pill.inline:not([hidden]) { margin-left: auto; }
/* Offline / conflict / error carry text and buttons: they float as a toast so the
   header (search box, Live, Log out) never reflows. */
.save-pill.toast {
  position: fixed; z-index: 45; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 9px 14px; box-shadow: var(--shadow);
}
.save-pill .ico { width: 13px; height: 13px; }
.save-pill[data-state="saved"] { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.save-pill[data-state="offline"], .save-pill[data-state="conflict"], .save-pill[data-state="error"] { color: #fcd34d; border-color: #5c4413; background: #231b0b; }
.save-pill button {
  background: transparent; border: 0; color: var(--text); cursor: pointer; padding: 0 0 0 4px;
  font: 600 12px/1 "Geist", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 2px;
}
.save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: savePulse 1s ease-in-out infinite; }
@keyframes savePulse { 50% { opacity: .3; } }
.save-msg { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.skel { background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 100%); background-size: 200% 100%; animation: skel 1.3s linear infinite; border-radius: 8px; }
.skel-hero { height: 40px; width: 240px; max-width: 70%; }
.skel-line { height: 16px; width: 60%; margin: 8px 0; }
.skel-chart { height: 280px; margin-top: 18px; }
.skel-donut { height: 190px; width: 190px; border-radius: 50%; margin: 6px auto; }
.skel-inline { display: inline-block; height: 13px; width: 72px; vertical-align: -2px; }
@keyframes skel { to { background-position: -200% 0; } }

.chip-status.warn { background: #231b0b; color: #fcd34d; border-color: #5c4413; margin-left: 6px; vertical-align: 1px; cursor: help; }
.inline-warn {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  background: #1f1a0e; border: 1px solid #4d3a12; color: #fde68a; font-size: 13px;
}
.inline-warn .ico { color: var(--warn); margin-top: 1px; }

.breakdown { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 8px; }
.breakdown .bd-cell {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; min-width: 0;
  border-radius: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.breakdown .bd-cell:hover { background: rgba(255,255,255,.04); text-decoration: none; }
.breakdown .bd-cell b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.breakdown .bd-cell b.chg:not(.up):not(.down) { color: var(--text); }
.breakdown .bd-note { flex-basis: 100%; grid-column: 1 / -1; margin: 6px 12px 0; }

.name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mismatch-ico { display: inline-flex; color: var(--warn); flex-shrink: 0; }
.mismatch-ico:hover { color: #fcd34d; text-decoration: none; }
.mismatch-ico .ico { width: 14px; height: 14px; }
td .mismatch-ico { margin-right: 5px; vertical-align: -2px; }
.stale-tag { color: var(--warn); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
table.data tr.tx-flagged td { background: #1d1709; }

.closed-positions { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.closed-positions summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; cursor: pointer;
  color: var(--text-2); font-weight: 600; font-size: 13.5px; list-style: none;
}
.closed-positions summary::-webkit-details-marker { display: none; }
.closed-positions summary .ico { transition: transform .15s ease; color: var(--muted); }
.closed-positions[open] summary .ico { transform: rotate(90deg); }
.filter-bar { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
  .save-pill.inline { order: 2; padding: 5px 9px; }
  .save-pill.toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .save-pill button { padding-left: 2px; }
  .breakdown { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Simplify pass ------------------------------------------------------------ */
.icon-toggle {
  display: inline-grid; place-items: center; width: 32px; height: 30px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer;
}
.icon-toggle:hover { color: var(--text); background: rgba(255,255,255,.06); }
.icon-toggle.on { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }

.more-menu { position: relative; }
.more-menu summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 12px;
  background: var(--glass-raised); border: 1px solid var(--edge-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow);
}
.more-list button {
  text-align: left; background: transparent; border: 0; color: var(--text); cursor: pointer;
  font: 500 13.5px/1.2 "Geist", system-ui, sans-serif; padding: 9px 10px; border-radius: 8px;
}
.more-list button:hover, .more-list button:focus-visible { background: var(--chip); }
.more-list button.danger { color: #fca5a5; }
.more-ccy { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; color: var(--muted); font-size: 13px; }

.toast {
  position: fixed; z-index: 46; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 10px 14px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 13.5px; color: var(--text);
}
.toast button {
  background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--accent-ink);
  font: 600 13.5px/1 "Geist", system-ui, sans-serif;
}
.linkish {
  background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--link);
  font: inherit;
}
.linkish:hover { text-decoration: underline; }
.tx-acts { white-space: nowrap; }
.tx-acts .linkish + .linkish { margin-left: 12px; }

.ai-empty { max-width: 560px; }
.ai-empty p { line-height: 1.55; }
.ai-lines { list-style: none; margin: 0; padding: 0; }
.ai-lines li { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.ai-lines li:first-child { border-top: 0; }
.ai-lines .sym { flex: 0 0 84px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.ai-card-next { font-size: 12.5px; color: var(--text-2); }
.ai-card-next span { color: var(--accent-ink); font-weight: 600; margin-right: 4px; }
.ai-takeaways { margin-top: 0; }

@media (max-width: 720px) {
  .icon-toggle { order: 2; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Recent symbols are for the desktop sidebar. */
  .sidebar .mini, .sidebar.single { display: none; }
  body:not([data-nav="portfolios"]):not([data-nav="watchlists"]) .sidebar { display: none; }
}

/* Value/invested and performance charts (features/performance.js) */
.chart-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.chart-legend[hidden] { display: none; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 14px; height: 0; border-top: 2px solid var(--ink); }
.chart-legend .sw.dash { border-top: 1.5px dashed var(--muted); }
.chart-legend .sw.bench { border-top-color: var(--info); }
.perf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.perf-kpi {
  position: relative; background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; cursor: help;
}
.perf-kpi .lbl { font-size: 12px; color: var(--muted); }
.perf-kpi .val { font-size: 20px; font-weight: 600; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.perf-kpi .val.chg:not(.up):not(.down) { color: var(--text); }
.perf-kpi .explain {
  display: none; position: absolute; z-index: 6; left: 0; top: calc(100% + 6px); width: max(100%, 220px);
  padding: 8px 10px; border-radius: 10px; background: var(--glass-raised); border: 1px solid var(--edge-hi);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 12px; line-height: 1.4; color: var(--text-2);
}
.perf-kpi:hover .explain, .perf-kpi:focus .explain { display: block; }
.perf-kpi:nth-child(3n) .explain { left: auto; right: 0; }
@media (max-width: 720px) {
  .perf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .perf-kpi { padding: 8px 9px; }
  .perf-kpi .val { font-size: 16px; }
  .perf-kpi:nth-child(3n) .explain { left: auto; right: 0; }
}

/* Your position card on a quote page (features/quote-position.js) */
.qpos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qpos-head h2 { margin: 0; }
.qpos-head .muted { font-size: 12.5px; }
.qpos-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 6px; }
.qpos-hero span { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 2px; }
.qpos-hero b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qpos-hero small { margin-left: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qpos-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qpos-stats b { font-variant-numeric: tabular-nums; }
.qpos-next { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.qpos-next .ico { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
@media (max-width: 720px) {
  .qpos-hero b { font-size: 17px; }
  .qpos-hero small { display: block; margin: 2px 0 0; }
  .qpos-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}
.tx-edit { cursor: pointer; }
.tx-edit:hover td { background: var(--chip); }
.tx-acts .icon-btn { border-color: transparent; background: transparent; color: var(--muted); padding: 3px 5px; }
.tx-acts .icon-btn:hover { color: #fca5a5; }
.brief-pulse { font-size: 13.5px; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; cursor: pointer; }
.brief-pulse.open { display: block; }

/* Feed > Insiders */
.feed-check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; cursor: pointer; }
.feed-check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.ins-name { font-weight: 500; white-space: nowrap; }
.ins-type { font-weight: 600; font-size: 12.5px; }
.ins-type.buy { color: var(--up); }
.ins-type.sell { color: var(--down); }
.ins-type.routine { color: var(--muted); font-weight: 500; }
.ins-plan { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }

/* Ask: live research steps while Gemini works */
.ai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ai-steps li { position: relative; padding-left: 20px; color: var(--ink-2, #a3a9b3); }
.ai-steps li::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3, #737985);
}
.ai-steps li.done::before { background: var(--ink-2, #a3a9b3); }
.ai-steps li.now { color: var(--ink, #f4f6f8); }
.ai-steps li.now::before { background: #fff; animation: stepPulse 1.2s ease-in-out infinite; }
@keyframes stepPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.ai-steps-time { margin-top: 8px; font-size: 11.5px; color: var(--ink-3, #737985); font-variant-numeric: tabular-nums; }
.ai-partial { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--edge, rgba(255,255,255,.09)); }
@media (prefers-reduced-motion: reduce) { .ai-steps li.now::before { animation: none; } }


/* ---------------------------------------------------------------------------
   Lively pass: logos, photo news, sparklines, movers. Colour comes from content
   (photos, logos, green/red moves), never from new accents.
   --------------------------------------------------------------------------- */
:root { --ease-out: cubic-bezier(.16,1,.3,1); }
.mini-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ct-sym, .dv-sym { display: inline-flex; align-items: center; gap: 8px; }
.qpos-head h2 { display: inline-flex; align-items: center; gap: 9px; }

/* Lift for clickable cards */
.idx, .mover, .nc, .tmove { transition: transform .22s var(--ease-out), border-color .16s ease, background-color .16s ease; }
@media (hover: hover) {
  a.idx:hover, .mover:hover, .nc:hover, .tmove:hover { transform: translateY(-2px); border-color: var(--edge-hi); }
}
@media (prefers-reduced-motion: reduce) {
  a.idx:hover, .mover:hover, .nc:hover, .tmove:hover { transform: none; }
  .skel { animation: none; }
}

/* Index tiles: one row on desktop, each with an intraday line */
.indices { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; margin: 4px 0 22px; }
.idx { min-width: 0; padding: 11px 11px 9px; display: flex; flex-direction: column; }
.idx .p { font-size: 16px; }
.idx .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx .c { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.spark { display: block; width: 100%; height: 26px; margin-top: 8px; overflow: visible; }
.spark path { fill: none; stroke: var(--ink-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark.up path { stroke: var(--up); }
.spark.down path { stroke: var(--down); }
.spark path.spark-base { stroke: rgba(255,255,255,.16); stroke-width: 1; stroke-dasharray: 2 3; }
.skel-tile { pointer-events: none; }
.skel-tile .skel + .skel { margin-top: 8px; }

/* Section rhythm on Markets */
.mkt-sec { margin-top: 26px; }
.mkt-sec > h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }

/* Biggest movers: a sideways-scrolling row */
.movers { display: grid; grid-auto-flow: column; grid-auto-columns: 164px; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.mover {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--glass-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--glass-shadow);
  padding: 12px; color: var(--text);
}
.mover:hover { text-decoration: none; }
.mover-top { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 10px; }
.mover-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mover-id b { font-size: 13px; font-weight: 600; }
.mover-id span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover-pct { font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mover-px { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mover.skel-tile .skel-av { margin-bottom: 10px; }

/* News cards */
.nc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nc {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--glass-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--glass-shadow); overflow: hidden;
}
.nc.lead { grid-column: span 2; grid-row: span 2; }
/* The lead's photo takes whatever height the two card rows beside it give. */
.nc.lead .nc-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
.nc-img {
  position: relative; aspect-ratio: 16 / 9; background: var(--glass-raised); overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
}
.nc-img::before { content: attr(data-src); color: var(--ink-3); font-size: 12px; font-weight: 500; padding: 0 12px; text-align: center; }
.nc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .nc:hover .nc-img img { transform: scale(1.03); } }
.nc-body { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px 13px; flex: 1; min-width: 0; }
.nc-title {
  color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.38; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty;
}
.nc-title::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 14px; }
.nc-title:hover { text-decoration: none; }
.nc-title:focus-visible { box-shadow: none; }
.nc-title:focus-visible::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.nc.lead .nc-title { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; -webkit-line-clamp: 4; }
.nc.lead .nc-body { padding: 16px 18px 18px; gap: 8px; }
.nc-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: auto; }
.nc-meta span + span::before { content: "·"; margin-right: 6px; color: var(--ink-3); }
.nc-chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.tchip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px; border-radius: 7px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text-2);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tchip b { font-weight: 600; }
.tchip:hover { text-decoration: none; border-color: var(--edge-hi); color: #fff; }
.skel-card { pointer-events: none; }
.skel-card .nc-img { border-radius: 0; }
.skel-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.skel-av { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: block; }
.skel-thumb { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; display: block; }

@media (max-width: 1200px) {
  .nc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nc.lead { grid-column: span 3; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .nc.lead .nc-img { min-height: 240px; }
}
@media (max-width: 720px) {
  .nc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nc.lead { grid-column: auto; display: flex; }
  .nc.lead .nc-img { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .nc.lead .nc-title { font-size: 18px; }
  /* Phones: the rest become rows, photo left, like a news app */
  .nc:not(.lead) { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .nc:not(.lead) .nc-img { aspect-ratio: auto; width: 104px; height: auto; min-height: 104px; }
  .nc:not(.lead) .nc-img::before { font-size: 10.5px; }
  .nc:not(.lead) .nc-body { padding: 10px 12px; gap: 5px; }
  .nc:not(.lead) .nc-title { font-size: 13.5px; }
  .indices { display: flex; margin-bottom: 18px; }
  .idx { min-width: 128px; flex: 0 0 auto; }
  .movers { grid-auto-columns: 148px; }
  .mkt-sec { margin-top: 20px; }
}

/* Quote page: related news with small photos */
#qnews .qn { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); }
#qnews .qn:last-child { border-bottom: 0; }
#qnews .qn:hover { text-decoration: none; }
#qnews .qn:hover .qn-title { color: #fff; }
.qn-img.nc-img { width: 64px; height: 64px; aspect-ratio: 1 / 1; border-radius: 10px; }
.qn-img.nc-img::before { font-size: 9px; padding: 0 4px; line-height: 1.2; }
.qn-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qn-title { font-size: 13.5px; font-weight: 500; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qn-meta { font-size: 12px; color: var(--muted); }

/* Feed > News (holdings): logo, headline first, meta small */
.feed-item { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .feed-item.has-thumb { grid-template-columns: 36px minmax(0, 1fr) 84px; }
  .feed-thumb { width: 84px; height: 60px; border-radius: 8px; }
.feed-logo { display: block; padding-top: 2px; }
.feed-logo:hover { text-decoration: none; }
.feed-title { font-size: 15px; line-height: 1.38; letter-spacing: -.005em; }
.feed-tags { margin: 6px 0 0; gap: 6px 8px; }
.feed-sym { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.feed-sym b { font-weight: 600; }
.feed-sym.on { border-color: var(--edge-hi); color: #fff; }
.feed-tags .feed-src { margin: 0; font-size: 12px; }
.feed-ai { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 720px) {
  .feed-item { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .feed-item .av.md { width: 32px; height: 32px; }
}

/* Portfolio: today. The hero leads with today's move; the Today card maps the
   holdings (tiles = value, colour = today's %) beside the biggest movers. */
.hero-figs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 40px; }
.hero-fig { min-width: 0; }
.hero-today-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.hero-today-amt { font-size: 30px; }
.hero-today-pct { font-size: 15px; letter-spacing: -.01em; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); align-self: center; }
.hero-today-num.up .hero-today-pct { background: rgba(52,211,153,.13); }
.hero-today-num.down .hero-today-pct { background: rgba(248,113,113,.13); }
.hero-today-ctx { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(52,211,153,.16); flex-shrink: 0; }
.hero-pl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); font-size: 13px; }
.hero-pl .meta { margin: 0; }
#pl-hero { font-weight: 600; }

.today-card { padding-top: 14px; }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-head h2 { margin: 0; }
.tc-tools { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.tc-head .hm-legend-bar { width: 88px; height: 6px; }
.today-card { container-type: inline-size; }
.tc-body > div { min-width: 0; }
.hm-map.tc-map { min-height: 0; }
.hm-map.tc-map .hm-tile { border-radius: 3px; }
.tc-note { font-size: 11.5px; margin-top: 6px; }
.tc-note:empty { display: none; }
.tc-h3 { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.tc-group + .tc-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--edge); }
.tc-mv {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 6px; margin: 0 -6px; border-radius: 10px; color: var(--text);
}
.tc-mv:hover { text-decoration: none; background: rgba(255,255,255,.04); }
.tc-mv-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tc-mv-id b { font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tc-mv-id span { font-size: 11.5px; color: var(--ink-3); }
.tc-mv-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-mv-num b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tc-mv-num span { font-size: 12px; opacity: .85; }
.tc-empty { margin: 0; font-size: 13px; }
/* Side by side once the card is wide enough; stacked (map first) on a phone. */
.tc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 560px) {
  .tc-body { grid-template-columns: minmax(0, 1.3fr) minmax(210px, 1fr); gap: 18px; align-items: start; }
}

/* Positions: Today | All time */
.pos-toolbar { flex-wrap: wrap; gap: 10px; }
.pos-mode { flex-wrap: nowrap; padding: 3px; border-radius: 10px; }
.pos-mode button { padding: 6px 12px; font-size: 12.5px; min-height: 0; }
#positions-table.pos-today td.pm1 { font-weight: 600; }

/* Accounts: login modes, verify/reset, legal pages */
.auth-info { margin: 0 0 12px; color: var(--text-2); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.auth-hint { margin: 4px 0 0; color: var(--ink-3); font-size: 12px; }
.auth-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--text-2); cursor: pointer; }
.auth-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #fff; flex-shrink: 0; }
.auth-check a, .auth-foot a, .auth-links a { color: var(--ink); }
.auth-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; }
.auth-links .linkish:only-child { margin: 0 auto; }
.auth-pitch { text-align: center; color: var(--text-2); font-size: 14px; line-height: 1.45; margin: -8px 0 18px; text-wrap: balance; }
.auth-tabs .auth-tab { padding: 11px 12px; font-size: 14px; }
.auth-tabs .auth-tab.active { background: var(--signal); color: var(--on-signal); }
.auth-new { margin-top: 8px; padding: 12px; border: 1px solid var(--edge-hi); border-radius: 12px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 8px; align-items: stretch; font-size: 13px; color: var(--text-2); }
.auth-new .btn { min-height: 42px; }
.auth-foot { text-align: center; margin: 16px 0 0; font-size: 12px; color: var(--ink-3); }
.auth-foot a { color: var(--ink-2); text-decoration: none; }
.auth-foot a:hover { color: var(--ink); }
.auth-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; text-align: center; margin: 0 0 16px; }
.auth-state .auth-sub { margin: 0 0 18px; }
a.btn.auth-submit { text-decoration: none; box-sizing: border-box; }
.legal-body { align-items: flex-start; }
.legal { width: 100%; max-width: 680px; margin: 0 auto; padding: 8px 0 40px; line-height: 1.6; color: var(--text-2); font-size: 14.5px; }
.legal-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 20px; letter-spacing: -.04em; margin-bottom: 24px; }
.legal h1 { color: var(--ink); font-size: 28px; letter-spacing: -.03em; margin: 0 0 4px; }
.legal h2 { color: var(--ink); font-size: 16px; margin: 26px 0 6px; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 6px 0; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); }
.legal-date { color: var(--ink-3); font-size: 12.5px; margin: 0 0 18px; }
.legal-foot { margin-top: 32px; font-size: 13px; }

/* Header user menu (replaces the Log out button) */
.user-menu .more-list { min-width: 200px; }
.user-menu summary.user-btn { width: 32px; height: 30px; padding: 0; border-radius: 999px; font: 600 13px/1 "Geist", system-ui, sans-serif; color: var(--ink); text-transform: uppercase; }
.user-menu .more-list .menu-who { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu .more-list a { color: var(--text); text-decoration: none; font: 500 13.5px/1.2 "Geist", system-ui, sans-serif; padding: 9px 10px; border-radius: 8px; }
.user-menu .more-list a:hover, .user-menu .more-list a:focus-visible { background: var(--chip); }

/* Unverified-email banner */
.verify-banner { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 9px 16px; background: var(--glass-raised); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.verify-banner .linkish { font-size: 13px; }
.verify-banner .vb-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; padding: 2px; }
.verify-banner .vb-x:hover { color: var(--ink); }

/* AI engine line + disclaimer */
.ai-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.ai-status b { color: var(--text-2); font-weight: 500; }
.ai-status .ai-lite-on { flex-basis: 100%; color: var(--text-2); }
.ai-footnote { margin: 14px 0 0; font-size: 12px; color: var(--ink-3); }

/* Settings sheet */
.settings-sheet { width: min(620px, 100%); max-height: min(88dvh, 900px); overflow: auto; }
.set-sec { border-top: 1px solid var(--line); padding: 16px 0 4px; }
.set-sec:first-of-type { border-top: 0; padding-top: 4px; }
.set-sec h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0; font-size: 13.5px; }
.set-row .muted { font-size: 13px; }
.set-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.set-form .full { grid-column: 1 / -1; }
.set-form label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.set-form input, .set-form select { width: 100%; box-sizing: border-box; }
.set-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.set-msg { font-size: 13px; margin: 6px 0; }
.set-msg.ok { color: var(--up); }
.set-msg.err { color: #fca5a5; }
.set-small { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 8px 0 0; }
.set-key { font-size: 13.5px; color: var(--text); background: var(--chip); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; overflow-wrap: anywhere; }
.set-key .mono { font-family: "Geist Mono", ui-monospace, monospace; }
.set-toggle { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); margin: 8px 0; cursor: pointer; }
.set-toggle input { accent-color: #fff; width: 16px; height: 16px; }
.opt-price { color: var(--ink-3); }
@media (max-width: 720px) {
  .set-form { grid-template-columns: 1fr; }
  .verify-banner { justify-content: flex-start; padding: 8px 12px; }
}

/* Credits (features/topup.js): balance, USDC top-up buttons, the Solana Pay QR. */
.cr-bal-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cr-reach { font-size: 13px; font-variant-numeric: tabular-nums; }
.cr-balance > .cr-plain:first-of-type { margin-top: 6px; }
.cr-lock { margin: 12px 0 0; }
.ai-status a { color: var(--text-2); }
.ai-cta { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.ai-cta .ico { width: 14px; height: 14px; }
.cr-wrap { max-width: 760px; }
.cr-balance .lbl { font-size: 12px; margin-bottom: 4px; }
.cr-unit { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.cr-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 12px; }
.cr-amounts .btn { min-height: 40px; padding: 10px 16px; font-variant-numeric: tabular-nums; }
.cr-plain { font-size: 12.5px; margin: 0; }
.cr-plain strong { color: var(--text-2); font-weight: 600; }
.cr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cr-head .cr-status { margin-bottom: 4px; }
.cr-pay > .cr-amt { margin-bottom: 18px; }
.cr-way { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cr-wallets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cr-wbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.cr-wbtn img { border-radius: 5px; }
.cr-nowallet { margin-top: 12px; }
.cr-nowallet .cr-actions { margin-top: 8px; }
.cr-nowallet a:not(.btn) { color: var(--text); }
.cr-h { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.cr-pay-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cr-pay-grid .btn { margin-top: 10px; text-decoration: none; }
.cr-qr { width: 180px; height: 180px; border-radius: 12px; background: #fff; display: block; }
.cr-manual { padding-top: 20px; }
.cr-field { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 8px 0; }
.cr-field code { font: 12.5px/1.4 "Geist Mono", ui-monospace, monospace; color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
.cr-field .cr-exact { font-size: 17px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.cr-warn { margin: 14px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.cr-warn strong { color: var(--text); }
.cr-pay.done .cr-qr { opacity: .25; }
.cr-status { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.cr-status[data-s="pending"]::before, .cr-status[data-s="confirming"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
  margin-right: 8px; vertical-align: 1px; animation: cr-pulse 1.4s ease-in-out infinite;
}
@keyframes cr-pulse { 50% { opacity: .25; } }
.cr-amt { font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cr-addr { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; min-width: 0; }
.cr-addr code { font: 12.5px/1.4 "Geist Mono", ui-monospace, monospace; color: var(--text-2); overflow-wrap: anywhere; min-width: 0; }
.cr-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cr-actions .btn { min-height: 40px; padding: 10px 18px; text-decoration: none; }
#cr-left { font-variant-numeric: tabular-nums; font-size: 13px; }
.cr-hint { margin: 12px 0 0; }
#cr-note { margin: 8px 0 0; color: var(--text-2); }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cr-list li:first-child { border-top: 0; padding-top: 0; }
.cr-list a { color: var(--muted); }
@media (max-width: 720px) {
  .cr-pay-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cr-pay-info { width: 100%; }
  .cr-qr { width: min(220px, 64vw); height: auto; aspect-ratio: 1; }
  .cr-pay-grid .cr-pay-info { text-align: center; }
  .cr-field { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-field > span { grid-column: 1 / -1; }
  .cr-amounts .btn { flex: 1 1 0; }
  .cr-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .cr-status::before { animation: none !important; } }

/* Ask answer cards: headline, tight bullets, a small glass chart, source chips, muted footer.
   White is the accent; green/red only on money moves (the chart change). */
.ai-msg.answer { max-width: min(640px, 100%); width: 100%; }
.za-card {
  flex: 1; min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 42%, rgba(255,255,255,0)), var(--glass-raised);
  border: 1px solid var(--edge); border-radius: 18px; border-top-left-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  padding: 14px 16px 12px;
  display: grid; gap: 12px;
}
.za-research { font-size: 11.5px; color: var(--ink-3); }
.za-research summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.za-research summary::-webkit-details-marker { display: none; }
.za-research summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.za-research[open] summary::before { transform: rotate(45deg); }
.za-research summary:hover { color: var(--ink-2); }
.za-research .ai-steps { margin-top: 8px; font-size: 12px; gap: 4px; }
.za-body { display: grid; gap: 8px; }
.za-head { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.za-head strong { font-weight: 600; }
.za-label { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.za-p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.za-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.za-list li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.za-list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.za-list strong, .za-p strong { color: var(--ink); font-weight: 600; }
.za-chart {
  margin: 0; padding: 12px 12px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%), #08090c;
  border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  min-width: 0;
}
.za-chart-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.za-chart-title { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.za-chart-meta { display: inline-flex; gap: 8px; align-items: baseline; font-size: 12px; font-variant-numeric: tabular-nums; }
.za-range { color: var(--ink-3); font-size: 11px; letter-spacing: .04em; }
.za-chg, .za-legend b { color: var(--ink-2); font-weight: 600; }
.za-chg.up, .za-legend b.up { color: var(--up); }
.za-chg.down, .za-legend b.down { color: var(--down); }
.za-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-2); margin: -2px 0 8px; font-variant-numeric: tabular-nums; }
.za-legend span { display: inline-flex; align-items: center; gap: 6px; }
.za-legend i { width: 10px; height: 2px; border-radius: 2px; display: inline-block; }
.za-canvas { position: relative; height: 150px; }
.za-canvas canvas { width: 100%; height: 100%; display: block; }
.za-alloc { --card: #08090c; }
.za-alloc .donut-wrap { flex-direction: row; align-items: center; gap: 18px; }
.za-alloc .donut { width: 112px; height: 112px; }
.za-alloc .donut-center { inset: 20px; font-size: 10px; }
.za-alloc .donut-center b { font-size: 15px; }
.za-alloc .legend { grid-template-columns: 1fr 1fr; gap: 5px 16px; font-size: 12px; }
.za-bar-rows { display: grid; gap: 8px; }
.za-bar { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.za-bar-l { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.za-bar-track { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.za-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.55), #fff); }
.za-bar-base { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: rgba(255,255,255,.16); }
.za-bar-fill.range { background: #fff; }
.za-bar-v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.za-bar-src { margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.za-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.za-src {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 10px 4px 7px; border-radius: 999px; font-size: 11.5px; color: var(--ink-2);
  background: rgba(255,255,255,.04); border: 1px solid var(--edge); text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.za-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.za-src img { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.za-src:hover { color: var(--ink); border-color: var(--edge-hi); background: rgba(255,255,255,.07); text-decoration: none; }
.za-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.za-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--edge); color: var(--ink-2);
  border-radius: 999px; padding: 5px 11px; font: 500 12px "Geist", system-ui, sans-serif; cursor: pointer;
}
.za-more .ico { width: 12px; height: 12px; }
.za-more:hover { color: var(--ink); border-color: var(--edge-hi); background: rgba(255,255,255,.05); }
.za-lite { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--ink-3); }
.za-lite-tag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); border: 1px solid var(--edge-hi); border-radius: 999px; padding: 1px 7px; }
.za-lite a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.za-lite a:hover { color: var(--ink); }
.za-tag { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); border: 1px solid var(--edge-hi); border-radius: 999px; padding: 0 6px; margin-right: 4px; vertical-align: 1px; }
.ai-partial.za-body .za-head { font-size: 15.5px; }
@media (max-width: 720px) {
  .ai-msg.answer .ai-msg-avatar { display: none; }
  .ai-msg.answer { max-width: 100%; }
  .za-card { padding: 13px 13px 11px; border-top-left-radius: 18px; }
  .za-head { font-size: 16px; }
  .za-canvas { height: 140px; }
  .za-more { margin-left: 0; }
  .za-alloc .donut-wrap { gap: 14px; }
  .za-alloc .donut { width: 92px; height: 92px; }
  .za-alloc .donut-center { inset: 16px; }
  .za-alloc .donut-center span { display: none; }
  .za-alloc .legend { grid-template-columns: 1fr; gap: 4px; }
  .za-bar { grid-template-columns: minmax(64px, 36%) 1fr auto; gap: 8px; }
}

/* Plan (features/plan.js): current plan + meters, three plan cards, fine print, the
   Solana Pay step (the .cr-* rules above), the admin table. White accent; no colour
   except the "sold out" line, which is plain muted text. */
.pl-wrap { max-width: 980px; display: grid; gap: 16px; }
.pl-state .lbl { font-size: 12px; margin-bottom: 2px; }
.pl-state-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pl-state-name { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.pl-state-end { font-size: 13px; font-variant-numeric: tabular-nums; }
.pl-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 14px; }
.pl-meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.pl-meter-top b { color: var(--ink); font-weight: 600; }
.pl-meter-top b .muted { font-weight: 400; }
.pl-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,.6), #fff); }
.pl-line { font-size: 12.5px; margin: 12px 0 0; }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pl-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--line); box-shadow: var(--glass-shadow);
}
.pl-card.current { border-color: var(--edge-hi); box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(255,255,255,.06); }
.pl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-card h2 { margin: 0; font-size: 15px; }
.pl-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--ink); border: 1px solid var(--edge-hi); white-space: nowrap; }
.pl-price b { font-size: 32px; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pl-price span { color: var(--ink-2); font-size: 13px; }
.pl-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.pl-feats li { position: relative; padding-left: 16px; }
.pl-feats li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.pl-spots { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: auto; }
.pl-spots.out { color: var(--ink-3); }
.pl-cur { font-size: 12px; color: var(--ink); font-weight: 600; }
.pl-card:not(:has(.pl-spots)) .pl-cur { margin-top: auto; }
.pl-buy { min-height: 42px; width: 100%; }
.pl-buy:disabled { opacity: 1; cursor: not-allowed; background: transparent; color: var(--ink-3); border: 1px solid var(--edge); box-shadow: none; }
.pl-note { font-size: 12px; margin: 0; }
.pl-fine { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); margin: 0; max-width: 760px; }
.pl-fine a { color: var(--ink-3); text-decoration: underline; }
.pl-paused { margin: 0 0 14px; }
.pl-for { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.pl-admin h2 { margin-top: 0; }
.pl-admin table { font-size: 12.5px; }
.pl-admin th:first-child, .pl-admin td:first-child { text-align: left; }
.pl-admin .sub { margin: 10px 0 0; }
@media (max-width: 860px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-meters { grid-template-columns: minmax(0, 1fr); }
  .pl-card { padding: 16px; }
  /* Phones: the paid plans first; Free (already described above) goes last and compact. */
  .pl-free { order: 3; }
  .pl-free .pl-feats li:nth-child(n+2) { display: none; }
}
.legal li.legal-small { font-size: 12.5px; color: var(--ink-3); }

/* General AI (guests, no holdings): link buttons, the Sign up button in an answer, the feed's market section. */
a.btn:hover { text-decoration: none; }
a.btn.ghost { color: var(--text); }
a.btn:not(.ghost):not(.outline) { color: var(--on-signal); }
.ai-signup { margin: 8px 0 0; }
.ai-msg-bubble .ai-signup { display: inline-flex; }
.feed-market-h { margin: 26px 0 10px; }
a.pl-buy { box-sizing: border-box; }

/* Guests: Portfolio / Watchlist sign-up state with a few example rows. */
.guest-signup { max-width: 560px; }
.guest-signup p { line-height: 1.55; }
.guest-example { position: relative; margin: 14px 0 16px; padding: 8px 12px; border: 1px dashed var(--edge-hi); border-radius: 12px; }
.guest-example-tag { position: absolute; top: -9px; left: 12px; padding: 0 6px; background: var(--glass-raised, #15171b); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; border-radius: 4px; }
.guest-example-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.guest-example-row + .guest-example-row { border-top: 1px solid var(--edge); }
.guest-example-id { display: flex; flex-direction: column; min-width: 0; }
.guest-example-id span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-example-row .up { color: var(--up, #34d399); }
.guest-example-row .down { color: var(--down, #f87171); }

/* ==========================================================================
   Heatmaps (public/features/heatmap.js)
   ========================================================================== */
.hm-compose { padding: 14px 14px 12px; }
.hm-form {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.035); border: 1px solid var(--edge); border-radius: 999px;
  padding: 4px 4px 4px 14px; transition: border-color .15s ease, background-color .15s ease;
}
.hm-form:focus-within { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.05); }
.hm-form-ico { display: inline-flex; color: var(--ink-2); }
.hm-form input {
  flex: 1; min-width: 0; background: transparent; border: 0; padding: 9px 2px; font-size: 15px; color: var(--text);
}
.hm-form input:focus, .hm-form input:focus-visible { outline: none; box-shadow: none; }
.hm-form .btn { padding: 10px 16px; flex-shrink: 0; }
.hm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.hm-chip {
  background: rgba(255,255,255,.035); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 999px; padding: 6px 11px; font: 12.5px/1.2 "Geist", system-ui, sans-serif; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease; white-space: nowrap;
}
.hm-chip:hover:not(:disabled) { color: var(--text); border-color: var(--edge-hi); background: rgba(255,255,255,.07); }
.hm-chip:disabled { opacity: .5; cursor: default; }
.hm-compose-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 10px; font-size: 12px; min-height: 16px; }
.hm-compose-foot:has(#hm-quota:empty):has(#hm-compose-msg:empty) { display: none; }
#hm-compose-msg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-err { color: #fca5a5; }
.hm-cta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.hm-presets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding: 1px; }
.hm-presets::-webkit-scrollbar { display: none; }
.hm-preset {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2);
  font-size: 13px; font-weight: 500; background: transparent; white-space: nowrap;
}
.hm-preset:hover { color: var(--text); text-decoration: none; border-color: var(--edge-hi); }
.hm-preset.active { background: var(--ink); color: var(--on-signal); border-color: transparent; font-weight: 600; }
.hm-preset .ico { width: 13px; height: 13px; }
.hm-preset-ai { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.hm-card { padding: 14px 14px 12px; }
.hm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.hm-titles { min-width: 0; }
.hm-titles h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
.hm-sub { font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.hm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-metrics { gap: 2px; background: rgba(255,255,255,.04); border: 1px solid var(--edge); border-radius: 999px; padding: 2px; }
.hm-metrics button { padding: 6px 11px; font-size: 12.5px; }
.hm-actions { display: flex; gap: 6px; }
.hm-actions .btn { gap: 5px; }
.hm-actions .ico { width: 14px; height: 14px; }
.hm-map-wrap { position: relative; }
.hm-map {
  position: relative; width: 100%; min-height: 200px; overflow: hidden;
  border-radius: 10px; background: #08090b; contain: layout paint;
}
.hm-tile {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; color: #fff; text-align: center; border-radius: 2px; line-height: 1.08;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); transition: filter .12s ease, box-shadow .12s ease;
}
.hm-tile:hover { text-decoration: none; filter: brightness(1.14); }
.hm-tile.sel { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); z-index: 2; filter: brightness(1.1); }
.hm-tile:focus-visible { box-shadow: inset 0 0 0 2px #fff; border-radius: 2px; z-index: 2; }
.hm-sym { font-weight: 650; letter-spacing: -.01em; max-width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hm-pct { font-weight: 500; opacity: .92; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: .15em; }
.hm-group {
  position: absolute; z-index: 1; padding: 2px 5px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
  line-height: 13px; pointer-events: none;
}
.hm-skel { position: absolute; inset: 0; border-radius: 10px; }
.hm-working {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-2); font-size: 13px;
}
.hm-working .ico { animation: hm-pulse 1.4s ease-in-out infinite; }
@keyframes hm-pulse { 50% { opacity: .35; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .hm-working .ico { animation: none; } }
.hm-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
.hm-map .err-card { margin: 16px; }
.hm-tip {
  position: absolute; z-index: 5; width: 232px; pointer-events: none;
  background: rgba(17,19,24,.94); border: 1px solid var(--edge-hi); border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.85); padding: 10px 12px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 12.5px;
}
.hm-tip-head { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; min-width: 0; }
.hm-tip-head > div { display: flex; flex-direction: column; min-width: 0; }
.hm-tip-head b { font-size: 13.5px; }
.hm-tip-head span { color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tip-head .av { flex-shrink: 0; }
.hm-tip-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px solid var(--edge); font-variant-numeric: tabular-nums; }
.hm-tip-row span { color: var(--ink-2); }
.hm-tip-hint { margin-top: 6px; color: var(--ink-3); font-size: 11.5px; text-align: center; }
.hm-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }
.hm-legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hm-legend-bar { display: block; width: 150px; height: 8px; border-radius: 999px; }
.hm-note { font-size: 11.5px; }
.hm-saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.hm-saved-item {
  display: flex; align-items: center; gap: 4px;
  background: var(--glass-bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px 4px 4px 12px;
}
.hm-saved-item.active { border-color: var(--edge-hi); }
.hm-saved-item a { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 6px 0; color: var(--text); }
.hm-saved-item a:hover { text-decoration: none; }
.hm-saved-item a b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-saved-item a span { font-size: 12px; }
.hm-del { background: transparent; border: 0; color: var(--ink-3); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hm-del:hover { color: var(--text); background: rgba(255,255,255,.06); }
@media (max-width: 720px) {
  .hm-compose, .hm-card { padding: 12px 10px 10px; border-radius: 14px; }
  .hm-form input { font-size: 16px; } /* no zoom on focus (iOS) */
  .hm-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -10px; padding-right: 10px; }
  .hm-chips::-webkit-scrollbar { display: none; }
  .hm-head { margin-bottom: 10px; }
  .hm-tools { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .hm-metrics { flex-wrap: nowrap !important; }
  .hm-metrics button { min-height: 32px !important; padding: 6px 10px !important; }
  .hm-actions .btn { min-height: 34px; padding: 6px 10px; }
  .hm-actions .btn span { display: none; }
  .hm-map { border-radius: 8px; }
  .hm-legend-bar { width: 110px; }
}

/* --- Import with AI (features/ai-import.js) -------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn.ai-btn {
  background: linear-gradient(135deg, rgba(96, 165, 250, .15), rgba(167, 139, 250, .12));
  color: var(--ink);
  border: 1px solid rgba(147, 197, 253, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.btn.ai-btn:hover {
  filter: none;
  background: linear-gradient(135deg, rgba(96, 165, 250, .24), rgba(167, 139, 250, .18));
  border-color: rgba(147, 197, 253, .55);
}
.ai-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: rgba(96, 165, 250, .22); color: #bfdbfe; border: 1px solid rgba(147, 197, 253, .32);
  line-height: 1.1;
}
.tx-ai-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 12px;
  background: rgba(96, 165, 250, .06); border: 1px solid rgba(147, 197, 253, .22);
}
.tx-ai-bar-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.tx-ai-bar-lbl .ico { width: 15px; height: 15px; color: #93c5fd; }
.tx-ai-bar-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.aimp { max-height: min(92dvh, 900px); overflow: auto; }
.aimp.drag { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 30px 80px -20px rgba(0,0,0,.9); }
.aimp-modes { margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; }
.aimp-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.aimp-lead { margin: 0 0 10px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.aimp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.aimp-chips span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; color: var(--text-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--edge);
}
.aimp-chips .ico { width: 13px; height: 13px; color: var(--up); }
.aimp-smart { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 0 0 14px; }
.aimp-smart-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(96, 165, 250, .09), rgba(167, 139, 250, .06));
  border: 1px solid rgba(147, 197, 253, .28); text-align: left; color: var(--text); font: inherit;
}
.aimp-smart-btn { cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.aimp-smart-btn:hover {
  border-color: rgba(147, 197, 253, .52);
  background: linear-gradient(135deg, rgba(96, 165, 250, .16), rgba(167, 139, 250, .12));
}
.aimp-smart-item > .ico { width: 20px; height: 20px; color: #93c5fd; flex: 0 0 auto; margin-top: 2px; }
.aimp-smart-item div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aimp-smart-item b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.aimp-smart-item span { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.aimp-text { width: 100%; min-height: 180px; resize: vertical; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.aimp.busy .aimp-text { opacity: .6; }
.aimp-count { font-size: 11.5px; text-align: right; min-height: 0; margin-top: 4px; }
.aimp-count.bad { color: var(--down); font-weight: 500; }
.aimp-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.aimp-shots[hidden] { display: none; }
.aimp-shot { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge-hi); background: var(--card2); }
.aimp-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.aimp-shot-x {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.72); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.aimp-shot-x .ico { width: 14px; height: 14px; }
.aimp-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 168px; margin-top: 4px; padding: 24px 16px; border-radius: 14px;
  border: 1px dashed var(--edge-hi); background: rgba(255,255,255,.025);
  text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.aimp-dropzone:hover, .aimp.drag .aimp-dropzone { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.05); }
.aimp-dropzone.compact { min-height: 0; flex-direction: row; padding: 12px 14px; margin-top: 10px; gap: 10px; }
.aimp-dropzone.disabled { opacity: .45; pointer-events: none; }
.aimp-dz-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--ink); }
.aimp-dropzone.compact .aimp-dz-ico { width: 28px; height: 28px; border-radius: 8px; }
.aimp-dz-title { font-size: 14px; font-weight: 600; color: var(--text); }
.aimp-addrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.aimp-add { cursor: pointer; }
.aimp-add.disabled { opacity: .45; pointer-events: none; }
.aimp-hint { font-size: 12px; }
.aimp-warn { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.aimp-warn .ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--warn); margin-top: 1px; }
.aimp-err { margin: 10px 0 0; color: #fca5a5; font-size: 13px; line-height: 1.45; }
.aimp-err a { text-decoration: underline; }
.aimp-progress { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--edge); font-size: 13.5px; }
.aimp-progress[hidden] { display: none; }
.aimp-progress .muted { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.aimp-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--ink); animation: aimp-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes aimp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aimp-spin { animation-duration: 2.4s; } }
.aimp-actions { align-items: center; flex-wrap: wrap; }
.aimp-status { margin-right: auto; font-size: 12px; }
.aimp-status.bad { color: #fca5a5; }

/* Review */
.modal.aimp-review { width: min(1120px, 100%); }
.aimp-sub { margin: 4px 0 0; font-size: 12.5px; }
.aimp-notes { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.aimp-table-wrap { margin-top: 12px; overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; }
.aimp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aimp-table th { font: 500 11.5px "Geist", system-ui, sans-serif; color: var(--muted); text-align: right; padding: 9px 6px; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.aimp-table th.left, .aimp-table td.left { text-align: left; }
.aimp-table td { padding: 6px; border-bottom: 1px solid var(--edge); vertical-align: middle; text-align: right; }
.aimp-table tr:last-child td { border-bottom: 0; }
.aimp-table input, .aimp-table select { padding: 6px 7px; font-size: 13px; border-radius: 8px; background: transparent; border-color: transparent; width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.aimp-table input:hover, .aimp-table select:hover { border-color: var(--edge); }
.aimp-table input:focus, .aimp-table select:focus { background: var(--card2); border-color: rgba(255,255,255,.3); }
.aimp-table input:disabled { opacity: .35; }
.aimp-table input[type="date"] { width: 132px; text-align: left; }
.aimp-table select { width: 98px; text-align: left; }
.aimp-table [data-f="shares"] { width: 84px; }
.aimp-table [data-f="price"] { width: 96px; }
.aimp-table [data-f="fee"] { width: 64px; }
.aimp-table input.ccy { width: 52px; text-transform: uppercase; text-align: left; }
.aimp-table .c-chk { width: 34px; text-align: center; padding-left: 10px; }
.aimp-table .c-chk input { width: 16px; height: 16px; padding: 0; accent-color: #fff; }
.aimp-table .c-flags { min-width: 150px; max-width: 190px; }
.aimp-table .aimp-flag { white-space: normal; line-height: 1.25; }
.aimp-table tr.off td:not(.c-chk) { opacity: .45; }
.aimp-table tr.st-red td:first-child { box-shadow: inset 3px 0 0 var(--down); }
.aimp-table tr.st-amber td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.aimp-stock {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 160px; max-width: 220px; padding: 5px 7px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-align: left; font: inherit;
}
.aimp-stock:hover { border-color: var(--edge-hi); background: rgba(255,255,255,.04); }
.aimp-stock .av { width: 26px; height: 26px; flex: 0 0 auto; }
.aimp-stock-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.aimp-stock-id b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aimp-stock-id b.bad { color: #fca5a5; }
.aimp-stock-id span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aimp-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.aimp-flag { font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.aimp-flag.red { background: rgba(248,113,113,.14); color: #fca5a5; border: 1px solid rgba(248,113,113,.3); }
.aimp-flag.amber { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.28); }
.aimp-snip { margin-top: 4px; font: 11px/1.35 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.aimp-tax { margin-top: 3px; font-size: 11.5px; }
.aimp-cards { display: none; list-style: none; margin: 12px 0 0; padding: 0; }
.aimp-foot { position: sticky; bottom: -16px; margin: 14px -18px -16px; padding: 12px 18px 16px; background: var(--glass-raised); border-top: 1px solid var(--edge); box-shadow: 0 -12px 24px -12px rgba(0,0,0,.6); }
.aimp-foot .modal-actions { margin-top: 10px; }
.aimp-foot .aimp-err { margin-top: 8px; }
.aimp-totals { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aimp-totals b { color: var(--text); font-weight: 600; }
.aimp-totals:empty { display: none; }

/* Edit sheet (over the review) */
.modal-root.aimp-edit-root { z-index: 60; background: rgba(0,0,0,.5); }
.aimp-edit .tx-chip.bad { border-color: rgba(248,113,113,.5); }
.aimp-src { margin: -4px 0 12px; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.aimp-src code { font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2); }
.aimp-types button { padding: 7px 10px; }
.aimp-inc { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; }
.aimp-inc input { accent-color: #fff; width: 16px; height: 16px; }
.aimp-nohit { padding: 10px 14px; font-size: 13px; }
.field[hidden] { display: none; }

/* The empty portfolio */
.aimp-empty { margin-bottom: 14px; }
.aimp-empty h2 { margin: 0 0 6px; }
.aimp-empty p { margin: 0 0 14px; max-width: 560px; line-height: 1.5; font-size: 13.5px; }
.aimp-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  .aimp-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .aimp-actions .aimp-status { flex: 1 0 100%; order: -1; margin: 0 0 4px; }
  .aimp-actions .btn { flex: 1; }
  .aimp-table-wrap { display: none; }
  .aimp-cards { display: flex; flex-direction: column; gap: 8px; }
  .aimp-card { display: flex; align-items: stretch; border: 1px solid var(--edge); border-radius: 14px; background: rgba(255,255,255,.025); overflow: hidden; }
  .aimp-card.st-red { border-left: 3px solid var(--down); }
  .aimp-card.st-amber { border-left: 3px solid var(--warn); }
  .aimp-card.off .aimp-card-body { opacity: .5; }
  .aimp-card-chk { display: grid; place-items: center; padding: 0 4px 0 12px; }
  .aimp-card-chk input { width: 20px; height: 20px; accent-color: #fff; }
  .aimp-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; background: transparent; border: 0; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
  .aimp-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .aimp-card-top .av { width: 28px; height: 28px; flex: 0 0 auto; }
  .aimp-card-top .aimp-stock-id { flex: 1; }
  .aimp-card-type { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--text-2); }
  .aimp-card-mid { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .aimp-card-mid b { color: var(--text); font-weight: 600; }
  .aimp-card-fee { font-size: 12px; }
  .aimp-card .aimp-flags:empty { display: none; }
  .aimp-foot { bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 14px -14px calc(-16px - env(safe-area-inset-bottom)); padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }
  .aimp-foot .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-top: 8px; }
  .aimp-foot #aimp-import { grid-column: 1 / -1; order: -1; padding: 13px; font-size: 14px; }
  .aimp-foot #aimp-back, .aimp-foot #aimp-cancel { padding: 9px; border-color: transparent; color: var(--muted); }
  .aimp-totals { font-size: 11.5px; gap: 2px 12px; }
  .aimp-types { flex-wrap: wrap; }
  .aimp-edit .modal-grid { grid-template-columns: 1fr 1fr; }
  .aimp-edit .modal-grid .full { grid-column: 1 / -1; }
}

/* The home page's intro (rendered by routes/landing.mjs into #main, shown again on the guest
   Markets view). Compact, so the app still opens on Markets. Its index strip only shows
   before app.js runs; the live index tiles replace it. */
.guest-intro { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass-bg); }
.guest-intro h1 { font-size: 24px; margin: 0 0 6px; }
.guest-intro p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; max-width: 760px; }
.guest-intro .guest-intro-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13.5px; }
.guest-intro .guest-intro-links a { color: var(--muted); }
.guest-intro .guest-intro-links a:first-child { color: var(--text); }
.guest-intro .lp-strip { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-variant-numeric: tabular-nums; }
.guest-intro .lp-strip li { display: flex; gap: 6px; }
.guest-intro .lp-ix { color: var(--muted); }
h2.markets-h { font-size: 22px; margin: 0 0 4px; font-weight: 600; letter-spacing: -.03em; }
/* Plain links under the guest sidebar (About, Stock heatmaps, Privacy, Terms): not nav items. */
.sidebar .side-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 22px 10px 0; font-size: 12px; }
.sidebar .side-links a { color: var(--muted); }
@media (max-width: 980px) { .sidebar .side-links { display: none; } }
@media (max-width: 720px) {
  .guest-intro { padding: 12px 14px; margin-bottom: 14px; }
  .guest-intro h1 { font-size: 20px; }
  .guest-intro p { font-size: 13.5px; }
}
/* Phones: the h1, one line and the sign-up link, so market data starts above the fold. The
   rest stays in the HTML for crawlers. */
.guest-intro .gi-short { display: none; }
@media (max-width: 640px) {
  .guest-intro .gi-long { display: none; }
  .guest-intro .gi-short { display: block; }
  .guest-intro .guest-intro-links { margin-top: 6px; }
  .guest-intro .guest-intro-links a:not(:first-child) { display: none; }
}

/* Quote page: chart, then key stats, then the rest. Two columns on wide screens (stats on
   the right), one on phones, where the key numbers come right after the chart. */
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .9fr); grid-template-rows: auto 1fr; gap: 0 16px; margin-top: 16px; align-items: start; }
.quote-grid > * { min-width: 0; }
.qg-chart { grid-column: 1; grid-row: 1; }
.qg-side { grid-column: 2; grid-row: 1 / span 2; }
.qg-rest { grid-column: 1; grid-row: 2; }
@media (max-width: 1200px) {
  .quote-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .qg-chart, .qg-side, .qg-rest { grid-column: 1; grid-row: auto; }
}
@media (max-width: 720px) {
  .key-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
}
.desc.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }
#q-desc-more { margin-top: 6px; }
.boot-busy { margin: 0 0 12px; }

/* --- Share with AI modal (features/ai-share.js) --- */
.aishare-modal { width: min(640px, 95vw); max-height: 90vh; overflow-y: auto; }
.aishare-modal .modal-head h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 17px; }
.aishare-body { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.aishare-lead { margin: 0 0 10px; font-size: 14px; color: var(--text); line-height: 1.45; }
.aishare-box { background: rgba(229, 184, 75, 0.04); border: 1px solid rgba(229, 184, 75, 0.25); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.aishare-box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aishare-box-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.aishare-box-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.aishare-prompt { margin: 0; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font: 12px/1.5 var(--mono); color: var(--text); white-space: pre-wrap; word-break: break-all; }
.aishare-split { display: flex; flex-direction: column; gap: 10px; }
.aishare-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.aishare-label { font-size: 12px; font-weight: 600; color: var(--text); }
.aishare-url-row, .aishare-code-row, .aishare-custom-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aishare-input { flex: 1; min-width: 180px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; color: var(--text); font-size: 12.5px; }
.aishare-code { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 6px; background: rgba(229, 184, 75, 0.12); border: 1px solid rgba(229, 184, 75, 0.35); color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; }
.aishare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.aishare-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.aishare-field select { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; color: var(--text); font-size: 13px; }
.aishare-checks { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text); }
.aishare-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.aishare-cta { display: flex; justify-content: flex-end; margin-top: 4px; }
.aishare-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.aishare-stats { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.aishare-foot-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aishare-alert { padding: 9px 12px; border-radius: 6px; background: rgba(240, 106, 106, 0.12); border: 1px solid rgba(240, 106, 106, 0.35); color: var(--danger); font-size: 12.5px; }
.aishare-msg { font-size: 12.5px; min-height: 16px; }
.aishare-msg.err { color: var(--danger); }
.aishare-msg.ok { color: var(--muted); }


/* Markets → Tools (public/features/tools.js) */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tool-card { display: block; text-decoration: none; color: inherit; }
.tool-card h2 { margin: 0 0 6px; font-size: 17px; }
.tool-card p { margin: 0; font-size: 14px; }
.tool-card:hover { border-color: var(--edge-hi, rgba(255,255,255,.18)); }
.tool-head { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
.tool-head h2 { margin: 0; font-size: 20px; }
.scr-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scr-filters select { min-height: 38px; }
.scr-trap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.scr-hint { font-size: 12.5px; margin: 8px 2px 14px; }
.scr-count { font-size: 13px; margin: 0 2px 8px; }
.scr-table td { vertical-align: middle; }
.scr-co { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.scr-co > span { display: flex; flex-direction: column; min-width: 0; }
.scr-co b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.scr-yield { color: var(--up, #34d399); }
.scr-pager { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.scr-src { font-size: 12px; margin-top: 10px; }
#scr-out.loading { opacity: .55; pointer-events: none; }
@media (max-width: 700px) {
  .scr-filters select { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .scr-table .scr-wide { display: none; }
  .scr-co b { max-width: 170px; }
}

/* Quote page → Dividends card (public/features/stock-dividends.js) */
.sd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sd-top h2 { margin: 0; }
.sd-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); }
.sd-tabs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.sd-tabs button.active { background: rgba(255,255,255,.12); color: var(--ink, #f4f6f8); }
.sd-stats { margin-bottom: 14px; }
.sd-h { font-size: 14px; font-weight: 600; margin: 6px 0 8px; }
.sd-svg { width: 100%; height: auto; display: block; }
.sd-svg text { fill: var(--muted); font-size: 11px; }
.sd-yr { cursor: pointer; outline: none; }
.sd-hit { fill: transparent; }
.sd-bar { fill: var(--up, #34d399); opacity: .45; transition: opacity .12s ease; }
.sd-yr.part .sd-bar { opacity: .25; }
.sd-yr:hover .sd-bar, .sd-yr:focus-visible .sd-bar { opacity: .75; }
.sd-yr.on .sd-bar { opacity: 1; }
.sd-yr.on text { fill: var(--ink, #f4f6f8); font-weight: 600; }
.sd-detail { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); }
.sd-dh { font-size: 15px; margin-bottom: 8px; }
.sd-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sd-cells div { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.sd-cells span { font-size: 12px; color: var(--muted); }
.sd-pays { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.sd-pays b { color: var(--ink, #f4f6f8); font-weight: 500; }
.sd-line { fill: none; stroke: var(--up, #34d399); stroke-width: 2; }
.sd-dot { fill: var(--up, #34d399); }
.sd-grid { stroke: rgba(255,255,255,.07); }
.sd-note, .sd-src { font-size: 12px; margin: 8px 0 0; }
.sd-yrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.sd-yrs div { background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.sd-yrs span { font-size: 12px; color: var(--muted); }
.sd-table td, .sd-table th { white-space: nowrap; }
#sd-all { margin-top: 10px; }
#sd-allyears { margin-top: 10px; }
@media (max-width: 700px) { .sd-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sd-tabs { width: 100%; } .sd-tabs button { flex: 1; padding: 6px 4px; } .sd-table .sd-wide { display: none; } .sd-table td, .sd-table th { padding-left: 6px; padding-right: 6px; } }
.scr-cc { position: relative; }
.scr-cc-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; min-width: 180px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel, #0d0f13); color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.scr-cc-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 260px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: #111318; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.scr-cc-pop input { width: 100%; margin-bottom: 6px; }
.scr-cc-pop ul { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.scr-cc-pop li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.scr-cc-pop li.hl, .scr-cc-pop li:hover { background: rgba(255,255,255,.07); }
.scr-cc-pop li[aria-selected="true"] { font-weight: 600; }
.scr-cc-pop li.none { cursor: default; }
@media (max-width: 700px) { .scr-cc { flex: 1 1 100%; } .scr-cc-btn { width: 100%; } .scr-cc-pop { width: 100%; } }

/* Quote chart: Simple | TradingView (public/features/tradingview.js) */
.chart-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); margin-right: 8px; }
.chart-mode button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.chart-mode button.active { background: rgba(255,255,255,.12); color: var(--ink, #f4f6f8); }
.chart-box.tv-on #ranges, .chart-box.tv-on #cmp { display: none !important; }
/* Kept laid out (it redraws on live prices and needs a size), just out of sight. */
.chart-box { position: relative; }
.chart-box.tv-on canvas.chart { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.tv-frame { display: block; width: 100%; height: 480px; border: 0; border-radius: 10px; margin-top: 8px; background: #0d0f13; }
@media (max-width: 700px) { .tv-frame { height: 400px; } }
/* Quote head: pre-market price under the regular price */
.q-pre { margin-top: 4px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.q-pre b { font-weight: 600; }
/* Quote page: Ask about this stock (under Key stats; not on phones) */
.qask { padding: 16px 18px; }
.qask-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.qask-head svg { width: 16px; height: 16px; color: var(--ink-2); }
.qask-head h2 { margin: 0; font-size: 15px; flex: 1; }
.qask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.qask-msgs { position: relative; max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: 0 -4px 10px; padding: 0 4px; }
.qask-q { align-self: flex-end; max-width: 85%; background: rgba(255,255,255,.07); border-radius: 12px 12px 4px 12px; padding: 7px 11px; font-size: 13px; }
.qask .za-card { font-size: 13px; padding: 12px; }
.qask-err { font-size: 13px; color: var(--ink-2); }
.qask-live { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.qask-live .ai-typing-dot { width: 4px; height: 4px; }
.qask-form { display: flex; gap: 6px; }
.qask-form input { flex: 1; min-width: 0; }
.qask-form .btn { padding: 0 12px; }
.qask-fab, .qask-close { display: none; }
@media (max-width: 720px) {
  /* Phones: a floating button above the bottom bar; the chat opens full screen. */
  .qask-fab {
    display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 41;
    right: 14px; bottom: calc(76px + env(safe-area-inset-bottom));
    padding: 11px 16px; border-radius: 999px; border: 1px solid var(--edge-hi);
    background: #f4f6f8; color: #0a0b0e; font-weight: 600; font-size: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
  }
  .qask-fab svg { width: 16px; height: 16px; }
  .qask-wrap:not(.open) .qask { display: none; }
  .qask-wrap.open .qask-fab { display: none; }
  .qask-wrap.open .qask {
    position: fixed; inset: 0; z-index: 55; margin: 0; border-radius: 0; border: 0;
    display: flex; flex-direction: column; background: var(--bg, #0a0b0e);
    padding: max(14px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  }
  .qask-wrap.open .qask-msgs { flex: 1; max-height: none; }
  .qask-wrap.open .qask-chips { flex: 1; align-content: flex-start; }
  .qask-wrap.open .qask-form input { font-size: 16px; } /* no iOS zoom on focus */
  .qask-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 14px; }
  html.qask-lock, html.qask-lock body { overflow: hidden; }
}