/* Plain, Apple-style: system font, grouped cards, system colors, one accent. */
:root {
  --bg: #ffffff;
  --side: #f5f5f7;
  --card: #f5f5f7;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --hairline: rgba(0, 0, 0, 0.1);
  --field: rgba(118, 118, 128, 0.12);
  --hover: rgba(0, 0, 0, 0.04);
  --selected: rgba(0, 113, 227, 0.1);
  --accent: #0071e3;
  --up: #1fa64a;
  --down: #e5372b;
  --neutral: #8e8e93;
  --on-color: #ffffff;
  --sheet: #ffffff;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 16px;
  --side-width: 360px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --side: #000000;
    --card: #1c1c1e;
    --fg: #f5f5f7;
    --muted: #98989d;
    --hairline: rgba(255, 255, 255, 0.12);
    --field: rgba(118, 118, 128, 0.24);
    --hover: rgba(255, 255, 255, 0.06);
    --selected: rgba(10, 132, 255, 0.18);
    --accent: #0a84ff;
    --up: #30d158;
    --down: #ff453a;
    --sheet: #2c2c2e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #000000;
    --side: #000000;
    --card: #1c1c1e;
    --fg: #f5f5f7;
    --muted: #98989d;
    --hairline: rgba(255, 255, 255, 0.12);
    --field: rgba(118, 118, 128, 0.24);
    --hover: rgba(255, 255, 255, 0.06);
    --selected: rgba(10, 132, 255, 0.18);
    --accent: #0a84ff;
    --up: #30d158;
    --down: #ff453a;
    --sheet: #2c2c2e;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); }
ul { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 600;
}
.btn-primary.small { padding: 8px 14px; border-radius: 10px; }
.btn-primary:disabled { opacity: 0.5; }
.pill-btn {
  border: 0;
  background: var(--field);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-btn:disabled { opacity: 0.5; }
.link-btn { border: 0; background: none; color: var(--accent); padding: 0; font-size: inherit; }
.icon-btn {
  border: 0; background: var(--field); color: var(--accent);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Login */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--side); }
.login-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.login-icon { border-radius: 14px; }
.login-card h1 { font-size: 28px; }
.login-card p { margin: 0; }
.login-card input {
  width: 100%;
  border: 0;
  background: var(--bg);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 17px;
  box-shadow: 0 0 0 1px var(--hairline);
}
.login-card .btn-primary { width: 100%; }
.error { color: var(--down); min-height: 1.4em; font-size: 14px; }

/* Layout */
.app {
  display: grid;
  grid-template-columns: var(--side-width) minmax(0, 1fr);
  height: 100%;
}
.sidebar {
  background: var(--side);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
  padding: calc(var(--safe-top) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.detail {
  overflow-y: auto;
  padding: calc(var(--safe-top) + 20px) 32px calc(env(safe-area-inset-bottom, 0px) + 40px);
}
#detail-body { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.detail-empty { height: 100%; display: grid; place-items: center; font-size: 17px; }

/* Sidebar */
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-inline: 4px; }
.side-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.side-head p { margin: 2px 0 0; font-size: 15px; font-weight: 500; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--field);
  border-radius: 11px;
  padding: 8px 10px;
  color: var(--muted);
}
.search svg { width: 17px; height: 17px; flex: none; }
.search input { border: 0; background: none; outline: none; width: 100%; font-size: 16px; color: var(--fg); min-width: 0; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

.results { background: var(--bg); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--hairline); }
.result {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; width: 100%;
  border: 0; background: none; text-align: left;
}
.result + .result { border-top: 1px solid var(--hairline); }
.result:hover { background: var(--hover); }
.result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.result-text b { font-weight: 600; }
.result-text span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-add { flex: none; color: var(--accent); font-size: 22px; line-height: 1; width: 28px; text-align: center; }
.results .empty { padding: 12px; color: var(--muted); font-size: 14px; }

.events { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.events-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.events li { font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.events li span:last-child { color: var(--muted); flex: none; font-size: 13px; }

.watchlist { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.row + .row::before { content: ""; position: absolute; top: 0; left: 6px; right: 6px; border-top: 1px solid var(--hairline); }
.row:hover { background: var(--hover); }
.row.selected { background: var(--selected); }
.row.selected::before, .row.selected + .row::before { display: none; }
.row-name { min-width: 0; display: flex; flex-direction: column; }
.row-name b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.row-name span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark { width: 64px; height: 30px; }
.row-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }
.row-price span:first-child { font-size: 16px; font-weight: 500; }
.chip {
  min-width: 76px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-color);
  background: var(--neutral);
  border-radius: 7px;
  padding: 2px 7px;
  border: 0;
}
.chip.up { background: var(--up); }
.chip.down { background: var(--down); }
.side-foot { font-size: 12px; margin-top: auto; padding: 8px 4px 0; display: flex; justify-content: space-between; gap: 12px; }

/* Detail */
.back-btn { display: none; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.title-text { min-width: 0; }
.title-text h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.title-text p { margin: 2px 0 0; overflow-wrap: anywhere; }
.price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.price { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.change { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.up-text { color: var(--up); }
.down-text { color: var(--down); }

.segmented {
  display: flex;
  background: var(--field);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.segmented button {
  flex: 1;
  border: 0;
  background: none;
  border-radius: 8px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.segmented button[aria-selected="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segmented button[aria-selected="true"] { background: #636366; }
}
:root[data-theme="dark"] .segmented button[aria-selected="true"] { background: #636366; }
.segmented.small { flex: none; width: 180px; }

.interval-row { display: flex; align-items: center; gap: 12px; }
.interval-row .segmented { flex: 1; }
.interval-label { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.chart-wrap { position: relative; }
.chart { height: 340px; width: 100%; }
.chart-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; }
.chart-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.toggle input { accent-color: var(--accent); width: 18px; height: 18px; }

.card { background: var(--card); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 28px; margin: 0; }
.stats dt { white-space: nowrap; }
.stats div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

.verdict:empty { display: none; }
.verdict { font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px; color: var(--on-color); background: var(--neutral); }
.verdict.up { background: var(--up); }
.verdict.down { background: var(--down); }
.signals li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hairline); }
.signals li:first-child { border-top: 0; padding-top: 0; }
.signal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--neutral); align-self: center; }
.signal-dot.bullish { background: var(--up); }
.signal-dot.bearish { background: var(--down); }
.signal-name { font-weight: 600; }
.signal-value { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.signal-text { grid-column: 2 / 4; color: var(--muted); font-size: 14px; }
.perf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.perf div { background: var(--bg); border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.perf span:first-child { font-size: 12px; color: var(--muted); font-weight: 600; }
.perf span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

#of-body { display: flex; flex-direction: column; gap: 12px; }
#of-body[hidden] { display: none; }
.setup-reason { margin: 0; font-size: 15px; }
.score { display: flex; flex-direction: column; gap: 6px; }
.score-track { position: relative; height: 8px; border-radius: 4px; background: var(--field); overflow: hidden; }
.score-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--neutral); }
.score-track i.up { background: var(--up); }
.score-track i.down { background: var(--down); }
.score-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--muted); opacity: 0.5; }
.score-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.score-scale b { color: var(--fg); font-size: 15px; }
.levels { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.levels th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; padding: 0 0 6px; }
.levels td { text-align: right; padding: 8px 0; border-top: 1px solid var(--hairline); }
.levels td:first-child, .levels th:first-child { text-align: left; font-weight: 500; }
.levels tr.sl td:first-child { color: var(--down); }
.levels tr.tp td:first-child { color: var(--up); }
.sizing { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; background: var(--bg); border-radius: 12px; padding: 12px; }
.sizing label { font-size: 14px; color: var(--muted); font-weight: 600; }
.risk-input { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.risk-input input { width: 72px; border: 0; background: var(--card); border-radius: 8px; padding: 6px 8px; box-shadow: 0 0 0 1px var(--hairline); }
.sizing p { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.breakdown summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 500; }
.breakdown ul { margin-top: 10px; }

.of-location { margin: 0; font-size: 15px; font-weight: 500; }
.of-location.mid { color: var(--muted); }
.of-state-text { margin: 0; font-size: 15px; color: var(--muted); }
.of-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.of-metrics div { background: var(--bg); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.of-metrics span:first-child { font-size: 12px; color: var(--muted); font-weight: 600; }
.of-metrics b { font-weight: 600; font-size: 15px; }
.of-metrics small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.of-charts { display: flex; flex-direction: column; gap: 6px; }
.mini { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.mini-label { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; flex-direction: column; }
.mini-label span:last-child { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }
.mini svg { width: 100%; height: 54px; display: block; }
.legend-dash { display: inline-block; width: 14px; border-top: 2px dashed var(--muted); vertical-align: middle; margin-right: 4px; }

.ai-body { font-size: 15px; display: flex; flex-direction: column; gap: 10px; }
.ai-body h4 { margin: 0; font-size: 15px; font-weight: 600; }
.ai-body p { margin: 0; }
.ai-body ul { padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 4px; }

.alert-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; }
.alert-form select, .alert-form input {
  border: 0; background: var(--bg); border-radius: 10px; padding: 8px 10px; min-width: 0;
  box-shadow: 0 0 0 1px var(--hairline);
}
.alerts li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 15px; }
.alerts li:first-child { border-top: 0; }
.alert-text { min-width: 0; display: flex; flex-direction: column; }
.alert-text span:last-child { font-size: 13px; color: var(--muted); }
.alert-actions { display: flex; gap: 14px; flex: none; font-size: 14px; }
.link-btn.danger { color: var(--down); }

.news li a { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.news li:first-child a { border-top: 0; padding-top: 0; }
.news li a:hover b { color: var(--accent); }
.news b { font-weight: 500; font-size: 15px; }
.news span { font-size: 13px; color: var(--muted); }
.disclaimer { text-align: center; margin: 4px 0 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%);
  background: color-mix(in srgb, var(--fg) 88%, transparent); color: var(--bg);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  max-width: calc(100% - 32px); text-align: center; z-index: 10;
}

.skeleton { color: transparent !important; background: var(--field); border-radius: 6px; }

/* Detail cards: one column on phones and narrow windows, two on MacBook-size screens. */
.cols { display: flex; flex-direction: column; gap: 18px; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 1180px) {
  #detail-body { max-width: 1240px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; }
  .chart { height: 420px; }
}

/* Guest (read-only) view */
body.guest .owner-only { display: none !important; }
.guest-badge { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--accent); }
.foot-actions { display: flex; gap: 14px; flex: none; }

/* Feedback sheet */
.sheet {
  border: 0; padding: 0; border-radius: 18px; width: min(520px, calc(100% - 32px));
  background: var(--sheet); color: var(--fg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
.sheet-body { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.sheet-body h3 { font-size: 20px; }
.sheet-body p { margin: 0; }
.sheet textarea {
  width: 100%; resize: vertical; border: 0; border-radius: 12px; padding: 12px; font: inherit;
  background: var(--field); box-shadow: 0 0 0 1px var(--hairline); color: var(--fg);
}
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; }
.feedback-inbox { border-top: 1px solid var(--hairline); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }
.feedback-inbox h4 { margin: 0; font-size: 15px; }
.feedback-inbox li { font-size: 14px; padding: 8px 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; white-space: pre-wrap; }
.feedback-inbox li span { font-size: 12px; color: var(--muted); }

.guide { width: min(620px, calc(100% - 32px)); }
.guide-list { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px 16px; max-height: 62vh; overflow-y: auto; }
.guide-list dt { font-weight: 600; font-size: 15px; }
.guide-list dd { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
kbd { font: inherit; font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--field); color: var(--fg); }
@media (max-width: 560px) {
  .guide-list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .guide-list dd { margin-bottom: 10px; }
}

/* Phone: one screen at a time, like the Stocks app. */
@media (max-width: 743px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { border-right: 0; }
  .detail { display: none; padding-inline: 16px; }
  body.show-detail .sidebar { display: none; }
  body.show-detail .detail { display: block; }
  .back-btn {
    display: inline-flex; align-items: center; gap: 2px;
    border: 0; background: none; color: var(--accent);
    font-size: 17px; padding: 0 0 8px; margin-left: -6px;
  }
  .back-btn svg { width: 22px; height: 22px; }
  .price { font-size: 34px; }
  .chart { height: 260px; }
  .perf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini { grid-template-columns: 76px minmax(0, 1fr); }
  .alert-form { grid-template-columns: minmax(0, 1fr) 96px; }
  .alert-form button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn.spinning svg { animation: none; }
}


/* ---------- Liquid Glass ----------
   Glass for the floating layer (bars, controls, sheets); content cards and the chart stay solid. */
:root {
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(0, 0, 0, 0.06);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --glass-filter: saturate(180%) blur(22px);
  --ambient-1: rgba(0, 113, 227, 0.13);
  --ambient-2: rgba(52, 199, 89, 0.10);
  --ambient-3: rgba(175, 82, 222, 0.08);
  --card: rgba(245, 245, 247, 0.92);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg: rgba(44, 44, 48, 0.52);
    --glass-strong: rgba(58, 58, 62, 0.72);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-edge: rgba(0, 0, 0, 0.4);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
    --ambient-1: rgba(10, 132, 255, 0.20);
    --ambient-2: rgba(48, 209, 88, 0.10);
    --ambient-3: rgba(191, 90, 242, 0.14);
    --card: rgba(28, 28, 30, 0.9);
  }
}
:root[data-theme="dark"] {
    --glass-bg: rgba(44, 44, 48, 0.52);
    --glass-strong: rgba(58, 58, 62, 0.72);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-edge: rgba(0, 0, 0, 0.4);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
    --ambient-1: rgba(10, 132, 255, 0.20);
    --ambient-2: rgba(48, 209, 88, 0.10);
    --ambient-3: rgba(191, 90, 242, 0.14);
    --card: rgba(28, 28, 30, 0.9);
  }

/* A soft colour wash behind everything, so the glass has something to refract. */
body { background: var(--bg); }
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 12% 8%, var(--ambient-1), transparent 70%),
    radial-gradient(35% 30% at 92% 12%, var(--ambient-3), transparent 70%),
    radial-gradient(45% 40% at 70% 95%, var(--ambient-2), transparent 70%);
}
.app, .detail { background: transparent; }

.glass, .search, .segmented, .pill-btn, .icon-btn, .sheet, .toast, .events {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

/* Sidebar: a glass panel on desktop; its header bar stays on top while the list scrolls. */
.sidebar { background: transparent; border-right: 1px solid var(--glass-border); padding-top: 0; }
@media (min-width: 744px) {
  .sidebar { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
  .sidebar .side-top { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.side-top {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -16px; padding: calc(var(--safe-top) + 16px) 16px 12px;
  display: flex; flex-direction: column; gap: 12px;
  border-radius: 0 0 22px 22px; border-top: 0;
}
.search { border-radius: 999px; padding: 9px 14px; color: var(--muted); }

/* Detail: sticky glass header; a compact price fades in once the big one scrolls away. */
.detail { padding-top: 0; }
.detail-head {
  position: sticky; top: var(--safe-top); z-index: 4;
  margin: 0 -14px; padding: 12px 14px; border-radius: 0 0 22px 22px; border-top: 0;
}
@media (min-width: 744px) { .detail-head { top: 10px; margin-top: 10px; border-radius: 22px; border-top: 1px solid var(--glass-border); } }
.head-price { margin-left: auto; font-weight: 600; font-size: 17px; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }
.head-price.show { opacity: 1; transform: none; }
.title-row { gap: 12px; }

/* Controls as glass capsules. */
.segmented { border-radius: 999px; padding: 3px; }
.segmented button { border-radius: 999px; }
.segmented button[aria-selected="true"] {
  background: var(--glass-strong); color: var(--fg);
  box-shadow: var(--glass-highlight), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.pill-btn { border-radius: 999px; }
.icon-btn { border-radius: 50%; }
.sheet { border-radius: 26px; background: var(--glass-strong); }
.sheet textarea { background: var(--glass-bg); }
.toast { color: var(--fg); background: var(--glass-strong); border-radius: 999px; }
.events { border-radius: 18px; }

/* Cards: solid and quiet, with a hairline so they sit on the wash. */
.card { border: 1px solid var(--glass-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.perf div, .of-metrics div, .sizing { background: var(--bg); }

/* Phones: glass bars run edge to edge; the list sits on the wash. */
@media (max-width: 743px) {
  .sidebar { border-right: 0; }
  .detail-head { margin: 0 -16px; padding: 10px 16px; }
}

/* No glass support, or the viewer asked for less transparency: solid surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: var(--side); --glass-strong: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--side); --glass-strong: var(--bg); }
  body::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .head-price { transition: none; } }

/* Watchlist / Favourites tabs and the star */
.list-tabs button { font-size: 13px; padding: 5px 0; }
.fav-btn {
  border: 0; background: none; padding: 0 4px; font-size: 26px; line-height: 1;
  color: var(--muted); cursor: pointer; flex: none;
}
.fav-btn.on { color: #ffb800; }
.list-empty { padding: 12px 6px; }

/* Messages from Claude */
.note-banner {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 16px; font-size: 14px; color: var(--fg); cursor: pointer;
  background: color-mix(in srgb, var(--accent) 14%, var(--glass-bg));
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.note-banner #note-banner-text { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-dot, .badge-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.badge-dot { display: inline-block; margin: 0 0 1px 5px; vertical-align: middle; }
.notes { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow-y: auto; }
.notes h4 { margin: 0; font-size: 15px; }
.notes li { font-size: 14px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); display: flex; flex-direction: column; gap: 4px; white-space: pre-wrap; }
.notes li + li { margin-top: 6px; }
.notes .note-meta { font-size: 12px; color: var(--muted); }


/* ---------- Redesign: flat bars, toolbar, settings, Plain / Detailed, iPad ---------- */

/* Plain mode hides explanations only; numbers, verdicts and levels always stay. */
:root[data-detail="plain"] .detail-only { display: none !important; }
:root[data-detail="detailed"] .plain-only { display: none !important; }

/* Top bars: flat, full width, hairline underneath; nothing gets clipped as the list scrolls. */
.side-top {
  margin: 0 -16px; border-radius: 0; border: 0; border-bottom: 1px solid var(--glass-border);
  padding: calc(var(--safe-top) + 14px) 16px 12px; gap: 10px;
}
.side-head { align-items: center; padding-inline: 2px; }
.side-head h1 { font-size: 28px; }
.side-head p { font-size: 13px; margin-top: 0; }

/* Toolbar: icon + label buttons. Phones: fixed glass tab bar. iPad / Mac: bottom of the sidebar. */
.toolbar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 6px; border-radius: 22px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.tool {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; color: var(--fg); padding: 7px 4px; border-radius: 16px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}
.tool svg { width: 22px; height: 22px; color: var(--accent); }
.tool:hover { background: var(--hover); }
.tool:active { transform: scale(0.97); }
.tool .badge-dot { position: absolute; top: 6px; left: calc(50% + 8px); margin: 0; }
@media (min-width: 744px) {
  .sidebar { padding-bottom: 12px; }
  .toolbar { position: sticky; bottom: 12px; margin-top: auto; z-index: 3; }
}

/* Settings sheet */
.setting { display: flex; flex-direction: column; gap: 8px; }
.setting > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.setting .segmented button { padding: 8px 0; }
.sheet-actions.spread { justify-content: space-between; }
.pill-btn.danger { color: var(--down); }

/* Compact one-line message banner */
.note-banner { padding: 9px 12px; align-items: center; border-radius: 14px; }
.note-banner .note-dot { margin-top: 0; }
.note-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.note-line #note-banner-text { color: var(--muted); display: inline; }

/* Star */
.fav-btn { font-size: 28px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.fav-btn:hover { background: var(--hover); }

/* Clean empty list with one-tap suggestions */
.list-empty-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 12px; text-align: center; }
.list-empty-box h3 { font-size: 19px; }
.list-empty-box p { margin: 0; color: var(--muted); font-size: 14px; max-width: 280px; }
.quick-add { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.quick-add button {
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--fg);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600;
}
.quick-add button::before { content: "+ "; color: var(--accent); }

/* Phones */
@media (max-width: 743px) {
  .toolbar {
    position: fixed; z-index: 6; left: 12px; right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  .sidebar, .detail { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
  .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
  body.show-detail .toolbar { display: none; }
  body.show-detail .detail { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }
  .detail-head { margin: 0 -16px; padding: calc(var(--safe-top) + 8px) 16px 10px; border-radius: 0; border: 0; border-bottom: 1px solid var(--glass-border); }
}

/* iPad (and small laptop windows): narrower sidebar, one column of cards until there's room for two. */
@media (min-width: 744px) and (max-width: 1179px) {
  :root { --side-width: 320px; }
  .detail { padding-inline: 20px; }
  .chart { height: 360px; }
}

/* Sticky bars: frosted enough that text underneath doesn't show through. */
.side-top, .detail-head { background: var(--glass-strong); }
.quick-add button { background: var(--field); border-color: transparent; }

/* Floating top bars: rounded, inset from the screen edges, with a small gap at the top. */
.side-top {
  position: sticky; top: calc(var(--safe-top) + 10px);
  margin: calc(var(--safe-top) + 10px) 0 4px;
  padding: 14px 16px 14px; border-radius: 26px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
@media (min-width: 744px) {
  .sidebar .side-top {
    background: var(--glass-strong); border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  }
}
@media (max-width: 743px) {
  .detail-head {
    top: calc(var(--safe-top) + 8px);
    margin: calc(var(--safe-top) + 8px) 0 0;
    padding: 10px 16px; border-radius: 24px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
  }
}

/* Sticky bars in dark mode: a bit more solid. */
:root { --bar: rgba(255, 255, 255, 0.8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar: rgba(30, 30, 33, 0.86); } }
:root[data-theme="dark"] { --bar: rgba(30, 30, 33, 0.86); }
.side-top, .detail-head, .sidebar .side-top { background: var(--bar); }

/* Sheet buttons: always a matching pair, same size. */
.sheet-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-btn {
  height: 46px; border-radius: 14px; border: 0; font-size: 16px; font-weight: 600;
  background: var(--field); color: var(--fg);
}
.sheet-btn.primary { background: var(--accent); color: #fff; }
.sheet-btn.danger { color: var(--down); }
.sheet-btn:disabled { opacity: 0.5; }

/* Comments: just the latest message from Claude, the text box, and the buttons. */
.notes ul { display: flex; flex-direction: column; gap: 6px; }
.notes li { padding: 10px 12px; }
.notes .link-btn { align-self: flex-start; font-size: 13px; }
.feedback-inbox { border-top: 1px solid var(--hairline); padding-top: 10px; }
.feedback-inbox summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 500; }
.feedback-inbox ul { margin-top: 8px; max-height: 30vh; overflow-y: auto; }

/* Chat with Claude (iMessage-style) */
.sheet.chat { width: min(560px, calc(100% - 24px)); height: min(720px, calc(100% - 48px)); padding: 0; }
.sheet.chat[open] { display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--hairline); }
.chat-head h3 { font-size: 18px; }
.chat-head p { margin: 2px 0 0; }
.chat-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--field); color: var(--muted); display: grid; place-items: center; flex: none; }
.chat-close svg { width: 16px; height: 16px; }
.chat-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.chat-empty { margin: auto; text-align: center; color: var(--muted); font-size: 14px; max-width: 280px; }
.bubble-row { display: flex; flex-direction: column; max-width: 82%; }
.bubble-row.me { align-self: flex-end; align-items: flex-end; }
.bubble-row.them { align-self: flex-start; align-items: flex-start; }
.bubble { padding: 9px 13px; border-radius: 20px; font-size: 15px; line-height: 1.38; white-space: pre-wrap; overflow-wrap: anywhere; }
.me .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.them .bubble { background: var(--field); color: var(--fg); border-bottom-left-radius: 6px; }
.bubble-meta { font-size: 11px; color: var(--muted); margin: 3px 8px 8px; }
.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); border-top: 1px solid var(--hairline); }
.chat-compose textarea {
  flex: 1; resize: none; max-height: 120px; border: 1px solid var(--glass-border); border-radius: 20px;
  padding: 9px 14px; font: inherit; font-size: 16px; line-height: 1.35; background: var(--field); color: var(--fg); box-shadow: none;
}
.chat-send { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; }
.chat-send svg { width: 20px; height: 20px; }
.chat-send:disabled { opacity: 0.4; }
@media (max-width: 743px) { .sheet.chat { height: calc(100% - 24px); margin-top: auto; margin-bottom: 0; border-radius: 26px 26px 0 0; width: 100%; max-width: 100%; } }

.chat-compose textarea:focus-visible { outline: none; border-color: var(--accent); }

/* Status-bar area: the colour wash fades out at the very top, so the status bar (same colour as the
   page background) and the page read as one seamless surface in light and dark mode. */
body::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--safe-top) + 6px), #000 calc(var(--safe-top) + 150px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--safe-top) + 6px), #000 calc(var(--safe-top) + 150px));
}

/* The home-screen app draws under the status bar (black-translucent): the page paints that strip.
   The status-bar text is always white there, so in light mode a soft shade keeps it readable. */
body::before {
  -webkit-mask-image: none; mask-image: none;
}
.status-shade { display: none; }
@media (display-mode: standalone) {
  .status-shade {
    display: block; position: fixed; inset: 0 0 auto 0; z-index: 20; pointer-events: none;
    height: calc(var(--safe-top) + 8px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status-shade { display: none; } }
  :root[data-theme="dark"] .status-shade { display: none; }
}

/* In a browser (Safari, in-app browsers) the page sits under the browser's own bar:
   fade the colour wash in softly from the top so there is no hard edge. */
@media not all and (display-mode: standalone) {
  body::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 70px, #000 220px);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 70px, #000 220px);
  }
}

/* The colour wash lives on the root background, which iOS paints across the WHOLE screen
   (under the status bar and the home indicator), instead of on a fixed layer it may cut short. */
body::before { display: none; }
html {
  min-height: 100%;
  background-color: var(--bg);
  background-image:
    radial-gradient(40% 35% at 12% 8%, var(--ambient-1), transparent 70%),
    radial-gradient(35% 30% at 92% 12%, var(--ambient-3), transparent 70%),
    radial-gradient(45% 40% at 70% 95%, var(--ambient-2), transparent 70%);
  background-repeat: no-repeat;
}
body { background: transparent; }
/* In a browser, the wash still fades in softly below the browser's bar. */
@media not all and (display-mode: standalone) {
  html {
    background-image:
      linear-gradient(to bottom, var(--bg) 0, transparent 200px),
      radial-gradient(40% 35% at 12% 8%, var(--ambient-1), transparent 70%),
      radial-gradient(35% 30% at 92% 12%, var(--ambient-3), transparent 70%),
      radial-gradient(45% 40% at 70% 95%, var(--ambient-2), transparent 70%);
  }
}
@media (prefers-reduced-transparency: reduce) { html { background-image: none; } }

/* The page itself never scrolls or bounces (that pulled the background away from the top);
   only the list and the detail pane scroll, and their bounce stays inside them. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.sidebar, .detail, .login { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.login { height: 100%; overflow-y: auto; }

/* Colour wash as one fixed layer that overshoots every edge (status bar and home indicator included). */
html { background-image: none; }
@media not all and (display-mode: standalone) { html { background-image: none; } }
.wash {
  position: fixed; z-index: -1; pointer-events: none;
  left: -10%; right: -10%;
  top: calc(-1 * var(--safe-top) - 80px);
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px) - 80px);
  min-height: calc(100lvh + 160px);
  background:
    radial-gradient(40% 32% at 14% 12%, var(--ambient-1), transparent 70%),
    radial-gradient(35% 28% at 90% 14%, var(--ambient-3), transparent 70%),
    radial-gradient(45% 36% at 70% 88%, var(--ambient-2), transparent 70%);
}
@media not all and (display-mode: standalone) {
  .wash { -webkit-mask-image: linear-gradient(to bottom, transparent 80px, #000 300px); mask-image: linear-gradient(to bottom, transparent 80px, #000 300px); }
}
@media (prefers-reduced-transparency: reduce) { .wash { display: none; } }

/* Toolbar lower, close to the home indicator like a system tab bar. */
@media (max-width: 743px) {
  .toolbar { bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 14px)); padding: 4px; }
  .sidebar, .detail { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }
}

/* Content scrolling into the gap above the floating bars fades out instead of being sliced off. */
.sidebar {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 12px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 12px));
}
.detail {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 10px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 10px));
}
@media (min-width: 744px) {
  /* iPad / Mac: the same soft edge under the toolbar at the bottom of the list. */
  .sidebar {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .detail {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
  }
}

/* ---------- iPad / Mac: the sidebar is a floating island ---------- */
@media (min-width: 744px) {
  .app { padding: 12px; gap: 12px; box-sizing: border-box; }
  .sidebar {
    border-radius: 30px; border: 1px solid var(--glass-border);
    background: var(--bar);
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-highlight), 0 18px 50px rgba(0, 0, 0, 0.18);
    padding: 0 14px; gap: 12px; overflow-y: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  /* Header and search: the top of the island (scrolling rows pass underneath, clipped by its edge). */
  .sidebar .side-top {
    position: sticky; top: 0; z-index: 4;
    margin: 0 -14px; padding: 20px 20px 14px;
    border-radius: 0; border: 0; border-bottom: 1px solid var(--glass-border);
    background: var(--bar); box-shadow: none;
    -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  }
  /* Toolbar: the bottom of the island. */
  .sidebar .toolbar {
    position: sticky; bottom: 0; z-index: 4;
    margin: auto -14px 0; padding: 8px 12px 12px;
    border-radius: 0; border: 0; border-top: 1px solid var(--glass-border);
    background: var(--bar); box-shadow: none;
  }
  /* Detail pane: its header floats at the very top of the pane, so nothing peeks above it. */
  .detail { padding-top: 0; -webkit-mask-image: none; mask-image: none; }
  .detail-head { top: 0; margin-top: 0; }
}

/* Island header and toolbar: nearly solid, so rows passing underneath don't show through. */
:root { --bar-solid: rgba(255, 255, 255, 0.97); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar-solid: rgba(30, 30, 33, 0.97); } }
:root[data-theme="dark"] { --bar-solid: rgba(30, 30, 33, 0.97); }
@media (min-width: 744px) {
  .sidebar .side-top, .sidebar .toolbar { background: var(--bar-solid); }
}

/* Logo next to the app name */
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  box-shadow: 0 4px 14px rgba(43, 36, 116, 0.35), 0 0 0 1px var(--glass-border);
}
.login-icon { border-radius: 18px; box-shadow: 0 10px 30px rgba(43, 36, 116, 0.35); }

/* Desktop / iPad browsers have no tinted bar to blend with: show the full colour wash right to the top. */
@media (min-width: 744px) {
  .wash { -webkit-mask-image: none !important; mask-image: none !important; top: -80px; }
}

/* Rating the Trade Setup */
.rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.rate-q { font-size: 14px; font-weight: 600; }
.rate-btns { display: flex; gap: 6px; }
.rate-btns button {
  border: 1px solid var(--glass-border); background: var(--field); color: var(--fg);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; min-height: 36px;
}
.rate-btns button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
.rate .link-btn { margin-left: auto; font-size: 14px; }
.ratings-sheet { width: min(620px, calc(100% - 24px)); height: min(760px, calc(100% - 48px)); padding: 0; }
.ratings-sheet[open] { display: flex; flex-direction: column; }
.ratings-summary { padding: 12px 20px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--hairline); }
.ratings-list { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; }
.ratings-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 4px; border-bottom: 1px solid var(--hairline); }
.r-title { font-weight: 600; }
.r-sub { font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
.r-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--field); align-self: start; }
.r-badge.good { background: var(--up); color: #fff; }
.r-badge.bad { background: var(--down); color: #fff; }
.r-outcome { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.r-outcome button { border: 1px solid var(--glass-border); background: var(--field); color: var(--fg); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.r-outcome button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
@media (max-width: 743px) { .ratings-sheet { height: calc(100% - 24px); margin-top: auto; margin-bottom: 0; border-radius: 26px 26px 0 0; width: 100%; max-width: 100%; } }

/* Cards fade out softly at the bottom edge of the screen instead of being cut off. */
.detail {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 10px), #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 10px), #000 calc(100% - 72px), transparent 100%);
}
@media (min-width: 744px) {
  /* The floating header sits at the very top here, so only the bottom edge fades. */
  .detail {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 80px), transparent 100%);
  }
}
.detail, body.show-detail .detail { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important; }

/* iOS 26 home-screen apps with a see-through status bar get a web view one status-bar height too short
   (WebKit bug 301108): a dead strip at the bottom that no CSS can paint. The status bar is now opaque
   (style "default", coloured by theme-color = page background), so the page runs from below it to the
   real bottom edge. In the home-screen app the colour wash runs right up to the bar. */
.status-shade { display: none !important; }
/* The opaque status bar can't show the glow, so the glow fades in below it: no hard edge. */
@media (display-mode: standalone) { .wash { -webkit-mask-image: linear-gradient(to bottom, transparent 80px, #000 260px); mask-image: linear-gradient(to bottom, transparent 80px, #000 260px); } }

/* Top clearance. iOS 26 home-screen apps start below an opaque status bar (inset 0) but still blur the
   first ~38 pt under it ("glass edge"), so content keeps at least 40 px clear there. iOS only: the Mac
   web app has a title bar instead. */
:root { --safe-top: env(safe-area-inset-top, 0px); }
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) { :root { --safe-top: max(env(safe-area-inset-top, 0px), 8px); } }
}

/* Phone tab bar a little higher above the home indicator (8 px). */
@media (max-width: 743px) {
  .toolbar { bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) - 6px)); }
  .sidebar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
  .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); }
}

/* iPad home-screen app: same opaque status bar as the iPhone, so the glow fades in below it there too
   (Mac stays as it is: no status bar). */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 744px) and (display-mode: standalone) {
    .wash { -webkit-mask-image: linear-gradient(to bottom, transparent 80px, #000 260px) !important; mask-image: linear-gradient(to bottom, transparent 80px, #000 260px) !important; }
  }
}

/* Evidence: what history says about this kind of setup */
.evidence { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--field); }
.evidence-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evidence-title { font-weight: 600; font-size: 15px; }
.evidence-main { font-size: 14px; }
.edge-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--hairline); color: var(--fg); }
.edge-badge.proven { background: var(--up); color: #fff; }
.edge-badge.negative { background: var(--down); color: #fff; }
.edge-badge.none, .edge-badge.untested { background: var(--field); box-shadow: inset 0 0 0 1px var(--hairline); }

/* Phone: island a little higher, and the soft top fade ends ABOVE the island so its edge and
   shadow are never clipped (only rows scrolling into the gap fade). */
@media (max-width: 743px) {
  .side-top { top: calc(var(--safe-top) + 6px); margin-top: calc(var(--safe-top) + 6px); }
  .detail-head { top: calc(var(--safe-top) + 6px); margin-top: calc(var(--safe-top) + 6px); }
  .sidebar {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 2px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 2px));
  }
  .detail {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 2px), #000 calc(100% - 72px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-top) + 2px), #000 calc(100% - 72px), transparent 100%);
  }
}

/* Live track record */
.evidence-link { align-self: flex-start; padding: 0; }
#track-body { display: flex; flex-direction: column; gap: 10px; }
.track-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.track-table td { padding: 6px; font-size: 14px; }
.track-sub { font-weight: 600; margin-top: 6px; }
.track-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.track-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 4px; border-bottom: 1px solid var(--hairline); }

/* Launch animation (about 2 s): tile pops in, the lens ring draws, the dot lights up, the chart line
   draws, the name sharpens in letter by letter, then everything fades into the app. */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg);
  animation: splash-out 0.42s ease 1.8s forwards;
}
.splash-glow {
  position: absolute; inset: 0; opacity: 0; animation: splash-fade 0.8s ease 0.05s forwards;
  background:
    radial-gradient(44% 30% at 50% 46%, rgba(108, 99, 255, 0.30), transparent 70%),
    radial-gradient(36% 26% at 80% 70%, rgba(255, 79, 216, 0.10), transparent 70%);
}
.splash-mark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translateY(-4vh); }
.splash-mark svg {
  width: 84px; height: 84px; border-radius: 19px; box-shadow: 0 14px 40px rgba(43, 36, 116, 0.45);
  opacity: 0; transform: scale(0.8); animation: splash-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.05s forwards;
}
.sp-blobs, .sp-lens { opacity: 0; animation: splash-fade 0.4s ease 0.35s forwards; }
.sp-ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: splash-draw 0.55s cubic-bezier(0.6, 0, 0.2, 1) 0.25s forwards; }
.sp-haze, .sp-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: splash-dot 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.7s forwards; }
.sp-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: splash-draw 0.5s ease-out 0.8s forwards; }
.splash-name { display: flex; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.splash-name span { opacity: 0; filter: blur(7px); animation: splash-letter 0.38s ease forwards; animation-delay: calc(0.85s + var(--i) * 36ms); }
@keyframes splash-fade { to { opacity: 1; } }
@keyframes splash-pop { to { opacity: 1; transform: none; } }
@keyframes splash-draw { to { stroke-dashoffset: 0; } }
@keyframes splash-dot { to { transform: scale(1); } }
@keyframes splash-letter { to { opacity: 1; filter: blur(0); } }
@keyframes splash-out { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash-name span { animation-duration: 0.01s !important; animation-delay: 0s !important; }
  .splash { animation: splash-out 0.3s ease 0.7s forwards; }
}

.evidence-how { font-size: 14px; color: var(--muted); }
.evidence-cluster { font-size: 14px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); }

.evidence-live { font-size: 13px; color: var(--muted); }
.edge-badge.failing { background: var(--down); color: #fff; }

.setup-warning { font-size: 14px; padding: 8px 10px; border-radius: 10px; color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }

/* Important events (economic calendar) */
.calendar { display: flex; flex-direction: column; gap: 8px; padding: 14px 4px 4px; }
.calendar h2 { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.calendar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.calendar li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.calendar li.past { opacity: 0.45; }
.cal-when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-what { font-weight: 600; }
.cal-extra { grid-column: 2; }
.setup-event { font-size: 14px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #ff9f0a 16%, transparent); }

.edge-badge.recent { background: var(--accent); color: #fff; }
.evidence-line { display: block; }
.evidence-warn { background: color-mix(in srgb, #ff9f0a 18%, transparent); }

/* Expected range (tested risk forecast) */
.outlook { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--field); }
.outlook-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.outlook-bar { position: relative; height: 10px; border-radius: 999px; background: var(--hairline); margin: 4px 0 2px; }
.outlook-bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
#outlook-most { background: color-mix(in srgb, var(--accent) 35%, transparent); }
#outlook-half { background: color-mix(in srgb, var(--accent) 75%, transparent); }
#outlook-now { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--fg); }

/* Four tools in the bar (Screen, Guide, Chat, Settings) */
.toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Screen: all tracked assets, tested setups first */
.screen-filter { margin: 10px 16px 0; align-self: flex-start; }
#screen-body { gap: 0; }
.screen-note { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #ff9f0a 16%, transparent); margin-bottom: 6px; }
.screen-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--hairline); background: none; color: inherit; text-align: left; width: 100%; font: inherit; cursor: pointer; }
.screen-row:hover { background: var(--hover); }
.screen-sym { font-weight: 600; }
.screen-sub { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.screen-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tag { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--field); white-space: nowrap; }
.tag.dip { background: var(--accent); color: #fff; }
.tag.warn { background: color-mix(in srgb, #ff9f0a 30%, transparent); }
.score-caption { margin-bottom: -4px; }

/* ---------- Brand colour: indigo / periwinkle from the logo instead of system blue ---------- */
:root { --accent: #4f46e5; --accent-fill: #4f46e5; --selected: rgba(79, 70, 229, 0.10); --brand-grad: linear-gradient(135deg, #6f68f2, #3d35b8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #9ba6ff; --accent-fill: #5b54e6; --selected: rgba(142, 155, 255, 0.18); }
}
:root[data-theme="dark"] { --accent: #9ba6ff; --accent-fill: #5b54e6; --selected: rgba(142, 155, 255, 0.18); }
/* Filled controls keep white text readable in both modes. */
.btn-primary, .sheet-btn.primary, .me .bubble, .chat-send, .rate-btns button[aria-pressed="true"],
.r-outcome button[aria-pressed="true"], .edge-badge.recent, .tag.dip { background: var(--accent-fill); }

/* ---------- Tab bar: a pill with a highlight that slides to the selected section ---------- */
.toolbar {  /* fixed (phone) or relative (iPad / Mac): either way the highlight is positioned inside it */
  isolation: isolate; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  padding: 5px; border-radius: 999px;
}
.toolbar::before {
  content: ""; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 0; width: var(--thumb-w, 0px);
  transform: translateX(var(--thumb-x, 0px)); border-radius: 999px; background: var(--brand-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 14px rgba(61, 53, 184, 0.35);
}
.toolbar.ready::before { transition: transform 0.42s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.42s cubic-bezier(0.3, 1.25, 0.5, 1); }
.tool { border-radius: 999px; padding: 7px 2px 6px; color: var(--muted); transition: color 0.25s; }
.tool svg { color: var(--accent); transition: color 0.25s; }
.tool:hover { background: none; color: var(--fg); }
.tool[aria-current="true"], .tool[aria-current="true"]:hover { color: #fff; }
.tool[aria-current="true"] svg { color: #fff; }
.tool .badge-dot { background: #ff5fd2; }
@media (prefers-reduced-motion: reduce) { .toolbar.ready::before { transition: none; } }

/* ---------- iPad / Mac: header and tab bar are curved islands inside the Stockfocal island (no straight lines) ---------- */
.side-scroll { display: contents; }
@media (min-width: 744px) {
  .sidebar { padding: 10px; gap: 8px; overflow: hidden; display: flex; flex-direction: column; }
  .sidebar .side-top {
    position: static; margin: 0; padding: 16px 16px 14px;
    border: 1px solid var(--glass-border); border-radius: 22px;
    background: var(--field); box-shadow: var(--glass-highlight);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .side-scroll {
    display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 4px;
    overscroll-behavior-y: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .sidebar .toolbar {
    position: relative; bottom: auto; margin: 0; padding: 5px;
    border: 1px solid var(--glass-border); border-radius: 999px;
    background: var(--field); box-shadow: var(--glass-highlight);
  }
}

/* ---------- Sheets open next to the tab bar, never over it, so you can switch sections directly ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
dialog.sheet[open] { position: fixed; inset: 0; margin: auto; z-index: 50; max-height: calc(100% - 32px); overflow: auto; }
@media (min-width: 744px) {
  /* iPad / Mac: the sheet and its dimming cover only the detail side; the Stockfocal island stays usable. */
  .sheet-backdrop { left: calc(var(--side-width) + 18px); border-radius: 30px 0 0 30px; }
  dialog.sheet[open] { left: calc(var(--side-width) + 24px); right: 12px; }
}
@media (max-width: 743px) {
  /* Phone: sheets end above the tab bar, which stays on top and tappable (also from a detail page). */
  dialog.sheet[open], .sheet.chat[open], .ratings-sheet[open] {
    inset: auto 0 calc(max(14px, env(safe-area-inset-bottom, 0px) - 6px) + 70px) 0; margin: 0 auto;
    width: calc(100% - 16px); max-width: 100%; border-radius: 26px;
    max-height: calc(100% - var(--safe-top) - max(14px, env(safe-area-inset-bottom, 0px) - 6px) - 86px);
  }
  .sheet.chat[open], .ratings-sheet[open] { height: calc(100% - var(--safe-top) - max(14px, env(safe-area-inset-bottom, 0px) - 6px) - 86px); }
  body.sheet-open .toolbar, body.sheet-open.show-detail .toolbar { display: grid; z-index: 60; }
  .chat-compose { padding-bottom: 12px; }
}