:root {
  --bg: #0f1115;
  --card: #171a21;
  --card-2: #1e222b;
  --line: #2a2f3a;
  --text: #e7eaf0;
  --muted: #939bab;
  --good: #35c77f;
  --ok: #d9a441;
  --bad: #e2604f;
  --accent: #5b8def;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* Author `display` rules beat the browser default for [hidden], so .gate's
   `display: grid` would keep the locked screen painted over the app. */
[hidden] { display: none !important; }

/* ---------- trading-floor backdrop ----------

   Three layers, each moving at its own rate:
     .bg       the chart grid, static, with major lines every fourth minor one
     .bg-glow  two colour blooms drifting on a long loop
     .bg-line  a sparkline panning slowly across, tiled seamlessly

   Everything is drawn from CSS gradients and one inline SVG, so there is no
   image to download and no extra request. Only transform and opacity are
   animated, which the compositor handles without repainting — the cost stays
   flat however many cards are on screen.

   It is fixed behind the app at z-index -1, and every animation stops under
   prefers-reduced-motion. The whole thing disappears under prefers-contrast.
*/
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    /* major gridlines, every fourth */
    repeating-linear-gradient(0deg, rgba(147, 155, 171, 0.10) 0 1px, transparent 1px 192px),
    repeating-linear-gradient(90deg, rgba(147, 155, 171, 0.10) 0 1px, transparent 1px 192px),
    /* minor gridlines */
    repeating-linear-gradient(0deg, rgba(147, 155, 171, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(147, 155, 171, 0.05) 0 1px, transparent 1px 48px);
}

/* Two blooms on a slow loop. Oversized and offset so their edges never enter
   the viewport as the transform moves them. */
.bg-glow {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(91, 141, 239, 0.30), transparent 68%),
    radial-gradient(34% 28% at 78% 72%, rgba(53, 199, 127, 0.20), transparent 68%);
  animation: bg-drift 48s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes bg-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* The sparkline. Twice the viewport wide so panning one tile never shows an
   edge, and the tile starts and ends at the same height so the loop is seamless. */
.bg-line {
  position: absolute;
  left: 0;
  right: -400px;
  bottom: 12%;
  height: 80px;
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80' viewBox='0 0 400 80'%3E%3Cpath d='M0,60 L25,48 L50,55 L75,38 L100,46 L125,28 L150,36 L175,22 L200,34 L225,18 L250,30 L275,42 L300,34 L325,48 L350,40 L375,54 L400,60' fill='none' stroke='%2335c77f' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 400px 80px;
  animation: bg-pan 42s linear infinite;
  will-change: transform;
}

/* A second, larger trace higher up, running the other way, so the two do not
   read as one repeating pattern. */
.bg-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 240px;
  height: 160px;
  opacity: 0.55;
  background-image: inherit;
  background-repeat: repeat-x;
  background-size: 800px 160px;
  animation: bg-pan-slow 96s linear infinite reverse;
}

@keyframes bg-pan      { to { transform: translate3d(-400px, 0, 0); } }
@keyframes bg-pan-slow { to { transform: translate3d(-800px, 0, 0); } }

/* Decoration must never cost someone their comfort or their reading. */
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .bg-line, .bg-line::after { animation: none; }
}
@media (prefers-contrast: more) {
  .bg { display: none; }
}

/* Cards stay fully opaque. A blur behind a card that is already solid is
   invisible, and backdrop-filter on twenty-odd cards costs real frames on a
   phone. The backdrop shows in the gaps between cards, which is where it
   belongs. */



h1 { font-size: 1.35rem; margin: 0; letter-spacing: -0.01em; }

/* ---------- password gate ---------- */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate-box { width: 100%; max-width: 340px; text-align: center; }
.gate-sub { color: var(--muted); font-size: 0.9rem; margin: 8px 0 20px; }
.gate-box input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}
.gate-box input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gate-box button {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.gate-box button:disabled { opacity: 0.6; cursor: default; }
.gate-error { color: var(--bad); font-size: 0.88rem; margin-top: 14px; }

/* ---------- layout ---------- */
main { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; }

.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stamp { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; }
.lock {
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 12px; font-size: 0.8rem; cursor: pointer;
}

.disclaimer {
  margin: 16px 0 0;
  padding: 11px 13px;
  background: var(--card);
  border-left: 3px solid var(--ok);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.errors {
  margin-top: 12px; padding: 11px 13px; border-radius: 8px;
  background: rgba(226, 96, 79, 0.1); border: 1px solid rgba(226, 96, 79, 0.3);
  color: var(--bad); font-size: 0.8rem;
}

/* ---------- tabs ---------- */
.tabs {
  display: flex; gap: 6px; margin: 20px 0 16px;
  background: var(--card); padding: 5px; border-radius: 11px;
}
.tab {
  flex: 1; padding: 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted);
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.tab.active { background: var(--card-2); color: var(--text); }

/* ---------- stock card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 11px;
}

.row { display: flex; align-items: center; gap: 12px; }

.badge {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.05rem;
  color: #0f1115;
}
.badge.high { background: var(--good); }
.badge.mid  { background: var(--ok); }
.badge.low  { background: var(--bad); }

.ident { flex: 1; min-width: 0; }
.ticker { font-weight: 700; font-size: 1.02rem; }
.company { color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.px { text-align: right; flex: none; }
.px-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.px-chg { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.up { color: var(--good); }
.down { color: var(--bad); }

.spark { display: block; width: 100%; height: 40px; margin: 12px 0 10px; }

.reason { font-size: 0.87rem; line-height: 1.5; margin: 0; }

.warn {
  margin-top: 9px; padding: 8px 10px;
  background: rgba(217, 164, 65, 0.1);
  border-radius: 7px;
  color: var(--ok); font-size: 0.78rem; line-height: 1.45;
}
.warn div + div { margin-top: 4px; }

.news { margin-top: 11px; border-top: 1px solid var(--line); padding-top: 10px; }
.headline { display: block; color: var(--text); text-decoration: none; font-size: 0.81rem; line-height: 1.45; margin-bottom: 8px; }
.headline:last-child { margin-bottom: 0; }
.headline:hover .h-title { text-decoration: underline; }
.h-meta { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.dot.positive { background: var(--good); }
.dot.negative { background: var(--bad); }
.dot.neutral  { background: var(--muted); }
.tag {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); background: var(--card-2);
  padding: 1px 6px; border-radius: 4px;
}
.no-news { color: var(--muted); font-size: 0.78rem; }

/* ---------- breakdown ---------- */
details { margin-top: 10px; }
summary {
  color: var(--muted); font-size: 0.78rem; cursor: pointer;
  list-style: none; user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸ "; }
details[open] summary::before { content: "▾ "; }

.bars { margin-top: 10px; display: grid; gap: 8px; }
.bar-row { font-size: 0.76rem; }
.bar-top { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 3px; }
.bar-track { height: 5px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.bar-note { color: var(--muted); margin-top: 4px; line-height: 1.4; }

.foot { margin-top: 28px; color: var(--muted); font-size: 0.72rem; line-height: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color 0.15s ease; }
}

/* ---------- header actions ---------- */
.head-actions { display: flex; gap: 6px; flex: none; }

/* ---------- scan bar ---------- */
.scanbar { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 13px; }
.scan-btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 9px;
  padding: 11px 17px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.scan-btn:disabled { opacity: 0.6; cursor: default; }
.scan-status { margin: 0; flex: 1; min-width: 150px; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.scan-status.ok { color: var(--good); }
.scan-status.err { color: var(--bad); }

/* ---------- github token setup ---------- */
.gh-setup {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 13px;
}
.gh-note { margin: 0 0 10px; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.gh-link { display: inline-block; margin-bottom: 11px; color: var(--accent); font-size: 0.8rem; text-decoration: none; }
.gh-link:hover { text-decoration: underline; }
.gh-setup input {
  width: 100%; margin-bottom: 8px; padding: 11px 13px; font-size: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.gh-setup input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gh-buttons { display: flex; gap: 8px; }
.gh-buttons button {
  flex: 1; padding: 11px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.gh-buttons .ghost { background: var(--card-2); color: var(--muted); }

/* ---------- entry levels ---------- */
.entry {
  margin-top: 11px; padding: 11px 12px;
  background: var(--card-2); border-radius: 9px;
}
.entry.none { background: transparent; border: 1px dashed var(--line); }
.entry-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-bottom: 9px;
}
.pill {
  text-transform: none; letter-spacing: 0; font-size: 0.7rem;
  padding: 2px 8px; border-radius: 20px;
}
.pill.in { background: rgba(53, 199, 127, 0.16); color: var(--good); }
.pill.wait { background: rgba(217, 164, 65, 0.16); color: var(--ok); }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.entry-grid > div { display: flex; flex-direction: column; gap: 2px; }
.entry-grid span { color: var(--muted); font-size: 0.7rem; }
.entry-grid strong { font-size: 0.88rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.entry-grid .bad-t { color: var(--bad); }
.entry-note { margin: 9px 0 0; color: var(--muted); font-size: 0.74rem; line-height: 1.45; }
.entry-grid .good-t { color: var(--good); }

/* ---------- risk + checklist ---------- */
.pill.hot { background: rgba(226, 96, 79, 0.16); color: var(--bad); }
.checks { margin-top: 9px; display: grid; gap: 6px; }
.check { display: flex; gap: 8px; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.check span { flex: none; width: 13px; font-weight: 700; }
.check.yes span { color: var(--good); }
.check.no span { color: var(--bad); }
.check.yes { color: var(--text); }
.short-row {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.short-row:last-of-type { border-bottom: 0; }
.short-row strong { font-size: 0.95rem; }
.short-row span { color: var(--muted); font-size: 0.78rem; }


/* ---------- portfolio positions ---------- */
.card.pos { padding: 15px 16px; }
.pos-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pos-id { min-width: 0; flex: 1; }
.pos-ticker { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.pos-name {
  color: var(--muted); font-size: 0.78rem; line-height: 1.35; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pos-money { text-align: right; flex: none; }
.pos-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pos-pl { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }

.pos-bar { height: 4px; background: var(--card-2); border-radius: 2px; overflow: hidden; margin-top: 13px; }
.pos-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.pos-share { color: var(--muted); font-size: 0.7rem; margin-top: 5px; }

.pos-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
}
.pos-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-facts span { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pos-facts strong { font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-tags { margin-top: 11px; display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- collapsible card detail ---------- */
details.more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 2px; }
details.more > summary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0 3px; font-size: 0.8rem; font-weight: 600; color: var(--accent);
}
details.more > summary::before { content: none; }
details.more > summary::after {
  content: "⌄"; font-size: 1rem; line-height: 1; transform: translateY(-2px);
}
details.more[open] > summary::after { content: "⌃"; transform: translateY(2px); }
details.more > summary:hover { text-decoration: underline; }
.more-shut, details.more[open] .more-open { display: none; }
details.more[open] .more-shut { display: inline; }
.more-body > *:first-child { margin-top: 4px; }

/* ---------- health check ---------- */
details.hc > summary { list-style: none; }
details.hc > summary::-webkit-details-marker { display: none; }
details.hc > summary::before { content: "▸ "; }
details.hc[open] > summary::before { content: "▾ "; }
.hc-body { margin-top: 4px; }
.hc-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.hc-item:last-of-type { border-bottom: 0; }
.hc-top { display: flex; gap: 10px; align-items: flex-start; }
.hc-icon {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700;
  background: var(--card-2); color: var(--muted); margin-top: 1px;
}
.hc-item.ok .hc-icon   { background: rgba(53,199,127,.16); color: var(--good); }
.hc-item.note .hc-icon { background: rgba(217,164,65,.16); color: var(--ok); }
.hc-item.flag .hc-icon { background: rgba(226,96,79,.16); color: var(--bad); }
.hc-label { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.hc-headline { font-size: 0.9rem; font-weight: 600; line-height: 1.35; margin-top: 2px; }
.hc-detail { margin: 7px 0 0 30px; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.hc-rows { margin: 9px 0 0 30px; display: grid; gap: 5px; }
.hc-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.78rem; }
.hc-rows span { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-rows strong { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }

/* ---------- last / next scan ---------- */
.stamp { display: grid; gap: 2px; }
.stamp-label {
  display: inline-block; min-width: 62px;
  color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.stamp-dim { color: var(--muted); }

/* ---------- track record strip ---------- */
.track {
  margin-top: 10px; padding: 11px 12px; border-radius: 9px;
  border-left: 3px solid var(--muted); background: var(--card-2);
}
.track.in   { border-left-color: var(--good); }
.track.wait { border-left-color: var(--ok); }
.track.hot  { border-left-color: var(--bad); }
.track-main { font-size: 0.84rem; line-height: 1.45; }
.track-main strong { font-size: 1rem; }
.track.in .track-main strong   { color: var(--good); }
.track.wait .track-main strong { color: var(--ok); }
.track.hot .track-main strong  { color: var(--bad); }
.track-sub { margin-top: 4px; color: var(--muted); font-size: 0.74rem; line-height: 1.4; }

/* ---------- per-card calculator ---------- */
.calc { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.calc-head {
  color: var(--muted); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 8px;
}
.calc-hint { color: var(--muted); font-size: 0.78rem; margin: 0 0 9px; line-height: 1.4; }
.calc-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.calc-currency { color: var(--muted); font-size: 1rem; }
.calc-price {
  width: 110px; padding: 9px 11px; font-size: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.calc-price:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-slider { flex: 1; min-width: 120px; accent-color: var(--accent); }
.calc-out { margin-top: 11px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.calc-grid > div { display: flex; flex-direction: column; gap: 2px; }
.calc-grid span { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.calc .good-t { color: var(--good); }
.calc .bad-t  { color: var(--bad); }
.calc-grid strong { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.calc-verdict {
  margin-top: 11px; padding: 10px 12px; border-radius: 8px;
  background: var(--card-2); border-left: 3px solid var(--muted);
  font-size: 0.84rem; line-height: 1.45;
}
.calc-verdict.in   { border-left-color: var(--good); }
.calc-verdict.wait { border-left-color: var(--ok); }
.calc-verdict.hot  { border-left-color: var(--bad); }
.calc-verdict > strong { font-size: 1.05rem; }
.calc-ev { margin-top: 4px; color: var(--muted); font-size: 0.78rem; }

/* ---------- worth-it score ---------- */
.worth {
  padding: 11px 13px; border-radius: 9px; background: var(--card-2);
  border-left: 3px solid var(--muted); margin-bottom: 11px;
}
.worth.w-good { border-left-color: var(--good); }
.worth.w-mid  { border-left-color: var(--ok); }
.worth.w-bad  { border-left-color: var(--bad); }
.worth-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.worth-label {
  color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.worth-num { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.worth-num small { font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-left: 1px; }
.w-good .worth-num { color: var(--good); }
.w-mid  .worth-num { color: var(--ok); }
.w-bad  .worth-num { color: var(--bad); }
.worth-bar {
  height: 6px; border-radius: 99px; background: var(--line);
  margin: 8px 0 7px; overflow: hidden;
}
.worth-bar i { display: block; height: 100%; border-radius: 99px; transition: width 0.12s linear; }
.w-good .worth-bar i { background: var(--good); }
.w-mid  .worth-bar i { background: var(--ok); }
.w-bad  .worth-bar i { background: var(--bad); }
.worth-say { font-size: 0.8rem; line-height: 1.45; color: var(--text); }

.order-note {
  color: var(--muted); font-size: 0.78rem; line-height: 1.45;
  margin: 0 0 12px; padding: 0 2px;
}

.calc-time {
  margin: 10px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--text);
}
.calc-time span {
  display: block; color: var(--muted); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}

.live-tag {
  margin-top: 3px; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ok); white-space: nowrap;
}
.live-tag.live { color: var(--good); }

/* ---------- exit plan on a holding ---------- */
.plan { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.plan-head {
  color: var(--muted); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 9px;
}
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-grid > div {
  padding: 9px 11px; border-radius: 8px; background: var(--card-2);
  border-left: 3px solid var(--muted);
}
.plan-stop { border-left-color: var(--bad) !important; }
.plan-target { border-left-color: var(--good) !important; }
.plan-grid span {
  display: block; color: var(--muted); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-grid strong {
  display: block; font-size: 1.05rem; margin: 2px 0 1px; font-variant-numeric: tabular-nums;
}
.plan-stop strong { color: var(--bad); }
.plan-target strong { color: var(--good); }
.plan-grid em { font-style: normal; color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
.pos-note { margin: 9px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

/* ---------- how a holding is tracking ---------- */
.meter {
  margin-top: 12px; padding: 11px 13px; border-radius: 9px;
  background: var(--card-2); border-left: 3px solid var(--muted);
}
.meter.m-good { border-left-color: var(--good); }
.meter.m-mid  { border-left-color: var(--ok); }
.meter.m-bad  { border-left-color: var(--bad); }
.meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meter-label {
  color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.meter-num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter-num small { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.m-good .meter-num { color: var(--good); }
.m-mid  .meter-num { color: var(--ok); }
.m-bad  .meter-num { color: var(--bad); }
.meter-bar { height: 6px; border-radius: 99px; background: var(--line); margin: 8px 0 7px; overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 99px; transition: width 0.15s linear; }
.m-good .meter-bar i { background: var(--good); }
.m-mid  .meter-bar i { background: var(--ok); }
.m-bad  .meter-bar i { background: var(--bad); }
.meter-say { font-size: 0.82rem; line-height: 1.45; }
.meter-sub { margin-top: 4px; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }

/* ---------- how good the fill was ---------- */
.rating {
  margin-top: 12px; padding: 11px 13px; border-radius: 9px;
  background: var(--card-2); border-left: 3px solid var(--muted);
}
.rating.r-good { border-left-color: var(--good); }
.rating.r-mid  { border-left-color: var(--ok); }
.rating.r-bad  { border-left-color: var(--bad); }
.r-good .meter-num { color: var(--good); }
.r-mid  .meter-num { color: var(--ok); }
.r-bad  .meter-num { color: var(--bad); }
.r-good .meter-bar i { background: var(--good); }
.r-mid  .meter-bar i { background: var(--ok); }
.r-bad  .meter-bar i { background: var(--bad); }
.rating-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px;
}
.rating-grid > div { display: flex; flex-direction: column; gap: 1px; }
.rating-grid span {
  color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.rating-grid strong { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.rating .good-t { color: var(--good); }
.rating .bad-t  { color: var(--bad); }

/* ---------- collapsed summary of a holding ---------- */
.pos-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.chip {
  padding: 4px 9px; border-radius: 99px; font-size: 0.7rem;
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.chip strong { font-variant-numeric: tabular-nums; margin-left: 2px; }
.chip.c-good { border-color: var(--good); }
.chip.c-good strong { color: var(--good); }
.chip.c-mid  { border-color: var(--ok); }
.chip.c-mid  strong { color: var(--ok); }
.chip.c-bad  { border-color: var(--bad); }
.chip.c-bad  strong { color: var(--bad); }
/* The first block inside an open holding already carries its own spacing. */
.pos .more-body > .rating:first-child { margin-top: 6px; }

/* ---------- the orders you have placed ---------- */
.orders { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ord {
  margin-top: 9px; padding: 10px 12px; border-radius: 8px;
  background: var(--card-2); border-left: 3px solid var(--muted);
}
.ord.o-good { border-left-color: var(--good); }
.ord.o-mid  { border-left-color: var(--ok); }
.ord.o-bad  { border-left-color: var(--bad); }
.ord-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ord-title {
  color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.ord-num { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ord-num small { font-size: 0.7rem; font-weight: 500; color: var(--muted); }
.o-good .ord-num { color: var(--good); }
.o-mid  .ord-num { color: var(--ok); }
.o-bad  .ord-num { color: var(--bad); }
.o-good .meter-bar i { background: var(--good); }
.o-mid  .meter-bar i { background: var(--ok); }
.o-bad  .meter-bar i { background: var(--bad); }
.ord-label { font-size: 0.82rem; line-height: 1.4; }
.ord-detail { margin-top: 2px; color: var(--muted); font-size: 0.74rem; line-height: 1.4; }
.fixes { margin-top: 12px; }
.fixes-head {
  color: var(--muted); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}
.fixes ul { margin: 0; padding-left: 18px; }
.fixes li { font-size: 0.8rem; line-height: 1.5; margin-bottom: 6px; }

.fixes-list { margin: 12px 0 0; padding-left: 18px; }
.fixes-list li { font-size: 0.86rem; line-height: 1.5; margin-bottom: 5px; }

/* A stated order rather than a scored one: no bar, no colour claim. */
.ord.o-plain { border-left-color: var(--line); }
.ord.o-plain .ord-detail { color: var(--text); font-size: 0.82rem; margin-top: 4px; }

/* ================= portfolio, redesigned ================= */

.acct { padding: 16px 16px 14px; border-radius: 12px; background: var(--card); margin-bottom: 14px; }
.acct-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.acct-label {
  flex-basis: 100%; color: var(--muted); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.acct-value { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.acct-pl { font-size: 0.9rem; font-weight: 600; }
.acct-pl.up { color: var(--good); }
.acct-pl.down { color: var(--bad); }
.acct-sub { margin-top: 5px; color: var(--muted); font-size: 0.78rem; }

/* --- where price sits between the two exits --- */
.exitbar { margin: 16px 0 4px; }
.exitbar-line {
  position: relative; height: 8px; border-radius: 99px;
  background: var(--line); margin-bottom: 10px;
}
.exitbar-done {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 99px; background: linear-gradient(90deg, var(--bad), var(--ok), var(--good));
  background-size: 400% 100%;
}
.exitbar-paid {
  position: absolute; top: -3px; width: 2px; height: 14px;
  background: var(--muted); transform: translateX(-1px);
}
.exitbar-now {
  position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--bg); transform: translateX(-8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.exitbar-ends { display: flex; justify-content: space-between; gap: 8px; }
.exitbar-end, .exitbar-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.exitbar-mid { text-align: center; }
.exitbar-end.right { text-align: right; }
.exitbar-ends strong { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.exitbar-ends span { color: var(--muted); font-size: 0.66rem; line-height: 1.3; }

/* --- one sentence on how it is going --- */
.status {
  margin-top: 14px; padding: 11px 13px; border-radius: 9px;
  background: var(--card-2); border-left: 3px solid var(--muted);
}
.status.s-good { border-left-color: var(--good); }
.status.s-mid  { border-left-color: var(--ok); }
.status.s-bad  { border-left-color: var(--bad); }
.status-head { font-size: 1rem; font-weight: 600; }
.s-good .status-head { color: var(--good); }
.s-mid  .status-head { color: var(--ok); }
.s-bad  .status-head { color: var(--bad); }
.status-why { margin-top: 4px; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

/* --- the only thing you might need to do --- */
.todo { margin-top: 12px; }
.todo-item {
  padding: 10px 12px; border-radius: 8px; margin-bottom: 7px;
  background: rgba(217, 164, 65, 0.1); border: 1px solid rgba(217, 164, 65, 0.35);
  font-size: 0.84rem; line-height: 1.45;
}
.todo.ok {
  padding: 9px 12px; border-radius: 8px; background: var(--card-2);
  color: var(--muted); font-size: 0.8rem;
}

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 6px 0 12px; }
.facts > div { display: flex; flex-direction: column; gap: 1px; }
.facts span {
  color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.facts strong { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.pos-share { margin-top: 8px; color: var(--muted); font-size: 0.74rem; }

.tag.scope-sector {
  background: rgba(217, 164, 65, 0.14); border-color: rgba(217, 164, 65, 0.4);
  color: var(--ok);
}