@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #f3f4f1; --bg-raised: #fbfbfa; --ink: #1a201f; --ink-soft: #4c5654; --ink-faint: #7c8683;
  --line: #d9dcd6; --line-soft: #e7e9e4; --accent: #2b5b63; --accent-soft: #dde8e7;
  --green: #3f7d5c; --green-bg: #e3efe6; --yellow: #a8641f; --yellow-bg: #f3e6d5;
  --red: #a8443c; --red-bg: #f3dfdc; --blue: #35648f; --blue-bg: #e1e9f1;
  --code-bg: #eceeea; --shadow: 0 1px 2px rgba(20,24,22,.06), 0 4px 16px rgba(20,24,22,.05);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12181a; --bg-raised: #1a2022; --ink: #e9eae6; --ink-soft: #b5bbb6; --ink-faint: #808886;
    --line: #2c3234; --line-soft: #23282a; --accent: #7cbcc2; --accent-soft: #1d3335;
    --green: #7fc79c; --green-bg: #1c2f24; --yellow: #e0a55e; --yellow-bg: #33291a;
    --red: #e08a80; --red-bg: #351f1d; --blue: #86b1dd; --blue-bg: #1c2836;
    --code-bg: #20262a; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #12181a; --bg-raised: #1a2022; --ink: #e9eae6; --ink-soft: #b5bbb6; --ink-faint: #808886;
  --line: #2c3234; --line-soft: #23282a; --accent: #7cbcc2; --accent-soft: #1d3335;
  --green: #7fc79c; --green-bg: #1c2f24; --yellow: #e0a55e; --yellow-bg: #33291a;
  --red: #e08a80; --red-bg: #351f1d; --blue: #86b1dd; --blue-bg: #1c2836;
  --code-bg: #20262a; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans);
  font-size: 15px; line-height: 1.5; overscroll-behavior-y: none;
  /* Global safety net (mobile UX pass) - every individual wide-content
     element (scanner table, chart canvases) already scopes its own
     horizontal scroll via width:100%/overflow-x:auto on a wrapper; this
     is the last line of defense against the page itself ever gaining a
     horizontal scrollbar from an edge case none of those catch. */
  overflow-x: hidden;
}
code, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
button { font-family: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Splash ----------
   The ONLY default-visible screen on first paint - zero network
   dependency, so it renders instantly with no flash. Neither
   #login-screen nor #app is ever visible by default (see app.js's
   bootstrap: APP START -> checking session -> #splash hidden, then
   either #login-screen or #app shown, never both, never neither). */
#splash {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 200;
}
#splash.hidden { display: none; }
.spinner {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Login ---------- */
#login-screen {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: var(--bg); padding: 1.5rem; z-index: 100;
}
#login-screen.visible { display: flex; }
.login-card {
  width: 100%; max-width: 340px; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 14px; padding: 2rem 1.6rem; box-shadow: var(--shadow); text-align: center;
}
.login-card h1 { font-size: 1.3rem; margin: 0 0 0.3rem; }
.login-card p { color: var(--ink-faint); font-size: 0.88rem; margin: 0 0 1.4rem; }
.login-card input {
  width: 100%; padding: 0.8rem 0.9rem; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 1rem; margin-bottom: 0.8rem;
}
.login-card button {
  width: 100%; padding: 0.8rem; border-radius: 9px; border: none; background: var(--accent);
  color: var(--bg-raised); font-weight: 600; font-size: 0.98rem; cursor: pointer;
}
.login-card button:active { opacity: 0.85; }
.login-error { color: var(--red); font-size: 0.85rem; min-height: 1.2em; margin-top: 0.6rem; }

/* ---------- App shell ---------- */
#app { display: none; flex-direction: column; height: 100%; }
#app.visible { display: flex; }

header.topbar {
  padding: calc(0.42rem + var(--safe-top)) 0.85rem 0.42rem; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 10; gap: 0.55rem; min-height: calc(44px + var(--safe-top));
}
header.topbar .brand { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.92rem; min-width: 0; white-space: nowrap; }
.conn-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink-faint); }
.conn-dot.live { background: var(--green); }
.conn-dot.down { background: var(--red); }
.conn-label { font-size: 0.68rem; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.02em; }
.conn-age { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); }
.conn-age:not(:empty)::before { content: "· "; }
header.topbar .meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); }
.top-status {
  min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.top-status::-webkit-scrollbar { display: none; }
.mini-pill {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0.14rem 0.38rem;
  border-radius: 6px; background: var(--line-soft); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; white-space: nowrap;
}
.top-clock { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; padding-left: 0.1rem; }

/* min-width:0 is load-bearing here, not decorative: #app is a column
   flex container, and a flex item's min-width defaults to `auto` -
   without this, `main` refuses to shrink below the intrinsic width of
   its widest unbreakable descendant (an unwrapped financial value deep
   inside a stat-tile), which widens `main` itself past the viewport
   instead of letting that value wrap/shrink where it actually lives.
   This is the flex-container half of the same min-width:auto trap
   .stat-tile's own min-width:0 fixes on the grid side. */
main { flex: 1; min-width: 0; overflow-y: auto; padding: 0.85rem 1rem calc(5.5rem + var(--safe-bottom)); }
.view { display: none; }
.view.active { display: block; }

/* Positions page header - the one page-level heading in the app (every
   other view goes straight into its tab bar; Positions gets one because
   its unified lifecycle tab bar is now the page's primary navigation,
   not a secondary filter, and needs a clear top-level label). */
.page-title { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0.1rem 0 0.75rem; }

/* ---------- Cards / stat tiles ---------- */
.card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem 1.1rem; margin-bottom: 0.9rem; box-shadow: var(--shadow);
}
.card h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint);
  font-family: var(--font-mono); margin: 0 0 0.7rem; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Mobile financial-value overflow fix. Root cause: a CSS grid item's
   min-width defaults to `auto`, meaning it refuses to shrink below its
   CONTENT's intrinsic width - an unbreakable monospace value like
   "$1,180,934.43" was forcing its own track (and therefore the whole
   card) wider than the viewport instead of wrapping, which is what
   actually produced the reported clipped/overflowing numbers. This is
   the real fix; the `overflow-x: hidden` on <body> was only ever a
   last-resort safety net for cases nothing here catches, never a
   substitute for tiles actually fitting. */
.stat-tile { min-width: 0; }
.stat-tile .label { font-size: 0.74rem; color: var(--ink-faint); margin-bottom: 0.15rem; overflow-wrap: break-word; }
.stat-tile .value {
  font-family: var(--font-mono); font-weight: 600; overflow-wrap: break-word; word-break: break-word;
  font-size: 1rem;
}
.stat-tile .value.pos { color: var(--green); } .stat-tile .value.neg { color: var(--red); }
.stat-tile .value.muted { color: var(--ink-faint); font-weight: 500; }

/* ACCOUNT card mobile layout: three large financial values (Equity,
   Cash, Buying Power) do not get squeezed into three equal narrow
   columns - Equity (the hero figure) takes the full row, Cash and
   Buying Power share the row below. Desktop/tablet (>=560px) has room
   for all three side by side and reverts to that. */
.stat-grid.cols-3.hero-first { grid-template-columns: repeat(2, 1fr); }
.stat-grid.cols-3.hero-first > .stat-tile:first-child { grid-column: 1 / -1; }
/* The hero figure (Equity) has a full row of its own now, with far more
   room than the half-width tiles below it - give it a bit more visual
   weight instead of applying the same narrow-column clamp everywhere. */
.stat-grid.cols-3.hero-first > .stat-tile:first-child .value { font-size: 1.25rem; }
@media (min-width: 560px) {
  .stat-grid.cols-3.hero-first { grid-template-columns: repeat(3, 1fr); }
  .stat-grid.cols-3.hero-first > .stat-tile:first-child { grid-column: auto; }
}

/* Other cols-3 grids (Today's Trades: 8 tiles, none of them a singular
   "hero" value) - collapse to 2 columns on phones so each financial
   value gets real width instead of three-per-row. */
@media (max-width: 480px) {
  .stat-grid.cols-3:not(.hero-first) { grid-template-columns: repeat(2, 1fr); }
}

.hero-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.hero-row .big { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; }
.hero-row .big.pos { color: var(--green); } .hero-row .big.neg { color: var(--red); }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

.pill { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 600; padding: 0.22rem 0.5rem; border-radius: 5px; white-space: nowrap; }
.pill.g { color: var(--green); background: var(--green-bg); } .pill.y { color: var(--yellow); background: var(--yellow-bg); }
.pill.r { color: var(--red); background: var(--red-bg); } .pill.b { color: var(--blue); background: var(--blue-bg); }
.pill.n { color: var(--ink-faint); background: var(--line-soft); }

/* ---------- Position cards ---------- */
.position-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.95rem 1.1rem; margin-bottom: 0.7rem; box-shadow: var(--shadow); }
.position-card summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.position-card summary::-webkit-details-marker { display: none; }
.position-card .sym-row { display: flex; align-items: center; gap: 0.55rem; }
.position-card .sym { font-weight: 700; font-size: 1.02rem; }
.position-card .pnl { font-family: var(--font-mono); font-weight: 600; text-align: right; }
.position-card .pnl .pct { font-size: 0.76rem; color: var(--ink-faint); display: block; }
.position-card .details { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem 1rem; font-size: 0.85rem; }
.position-card .details .k { color: var(--ink-faint); } .position-card .details .v { font-family: var(--font-mono); text-align: right; }
.empty-state { text-align: center; color: var(--ink-faint); padding: 2.5rem 1rem; font-size: 0.92rem; }
.empty-state.compact-empty { padding: 0.95rem 0.4rem; }

/* ---------- Scanner / activity rows ---------- */
.row-list { display: flex; flex-direction: column; }
.row-item { padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.87rem; }
.row-item:last-child { border-bottom: none; }
.row-item .top-line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; min-width: 0; }
.row-item .top-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.row-item .sym { font-weight: 600; font-family: var(--font-mono); }
.row-item .ts { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; }
.row-item .detail { color: var(--ink-soft); margin-top: 0.2rem; }
.row-item .msg { color: var(--ink-soft); }

/* ---------- Funnel ---------- */
.funnel-row { display: flex; align-items: center; gap: 0.3rem; overflow-x: auto; padding-bottom: 0.2rem; }
.funnel-step { flex: 0 0 auto; text-align: center; padding: 0.5rem 0.7rem; background: var(--code-bg);
  border-radius: 8px; min-width: 4.4rem; }
.funnel-step .n { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }
.funnel-step .l { font-size: 0.65rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.funnel-arrow { color: var(--ink-faint); flex: 0 0 auto; }

/* ---------- Bottom nav ---------- */
nav.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--bg-raised);
  border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom); z-index: 10;
}
nav.bottomnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  min-height: 58px; padding: 0.62rem 0 0.5rem; background: none; border: none; color: var(--ink-faint); font-size: 0.68rem;
  font-family: var(--font-sans); cursor: pointer;
}
nav.bottomnav button.active { color: var(--accent); }
nav.bottomnav button .icon { width: 1.3rem; height: 1.3rem; }

/* ---------- Offline banner ---------- */
#offline-banner { display: none; background: var(--yellow-bg); color: var(--yellow); font-size: 0.8rem;
  text-align: center; padding: 0.4rem; font-family: var(--font-mono); }
#offline-banner.visible { display: block; }

/* ---------- Segmented control (Positions tab: All/Scalping/Recovery) ---------- */
.segmented { display: flex; gap: 0.35rem; margin-bottom: 0.8rem; overflow-x: auto; }
.segmented button, .activity-tabs button {
  flex: 0 0 auto; min-height: 40px; padding: 0.45rem 0.85rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-raised); color: var(--ink-soft); font-size: 0.78rem; font-family: var(--font-sans);
  cursor: pointer; white-space: nowrap;
}
.segmented button.active, .activity-tabs button.active { background: var(--accent); color: var(--bg-raised); border-color: var(--accent); }

/* ---------- Activity filter bar ---------- */
.activity-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.2rem; margin-bottom: 0.6rem; }
.activity-filter-bar { margin-bottom: 0.8rem; }
.activity-filter-bar input {
  width: 100%; padding: 0.6rem 0.8rem; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-raised); color: var(--ink); font-size: 0.9rem;
}
.history-filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem;
}
.history-filter-bar input, .history-filter-bar select {
  flex: 1 1 auto; min-width: 8rem; padding: 0.6rem 0.7rem; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-raised); color: var(--ink); font-size: 0.85rem;
}
.history-filter-bar .load-more-btn { width: auto; flex: 0 0 auto; margin-top: 0; padding: 0.6rem 1rem; }
.history-filter-bar .label { font-size: 0.78rem; color: var(--ink-faint); }
.download-status { font-size: 0.78rem; color: var(--ink-faint); margin: -0.2rem 0 0.6rem; min-height: 1em; overflow-wrap: anywhere; }
.download-status.download-error { color: var(--red); }
#history-downloads-card { margin-top: 1rem; }
.downloads-table td, .downloads-table th { text-align: left; vertical-align: top; padding: 0.35rem 0.3rem; }
.downloads-table .dl-cell { width: auto; margin-top: 0; padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.downloads-table .label { font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.2rem; }
#positions-history-card { margin-top: 1rem; }
.row-item .category-tag {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-faint); background: var(--line-soft); padding: 0.1rem 0.35rem; border-radius: 4px; margin-right: 0.4rem;
}
.row-item.tappable { cursor: pointer; }
.load-more-btn {
  width: 100%; margin-top: 0.6rem; padding: 0.7rem; border-radius: 9px; border: 1px solid var(--line);
  background: none; color: var(--accent); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.hint { font-family: var(--font-sans); text-transform: none; letter-spacing: normal; font-size: 0.7rem; color: var(--ink-faint); }

/* ---------- Account / Risk ---------- */
.logout-btn {
  width: 100%; padding: 0.75rem; border-radius: 9px; border: 1px solid var(--line); background: none;
  color: var(--red); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.risk-card.warn { border-color: var(--yellow); }
.risk-card.danger { border-color: var(--red); }

/* ---------- Stock detail ---------- */
.stock-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.back-btn {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-raised); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.stock-symbol-block { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.stock-symbol-block .sym { font-weight: 700; font-size: 1.25rem; }
.stock-symbol-block .mono { font-family: var(--font-mono); font-size: 1rem; }
.range-selector { display: flex; gap: 0.35rem; margin-bottom: 0.7rem; }
.range-selector button {
  flex: 1; padding: 0.45rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer;
}
.range-selector button.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chart-canvas { width: 100%; height: 220px; display: block; margin-bottom: 0.8rem; touch-action: pan-y; }
.chart-empty { text-align: center; color: var(--ink-faint); padding: 3rem 1rem; font-size: 0.85rem; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ============ Reliability/cache upgrade ============ */

.conn-dot.stale { background: var(--yellow); }
.conn-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-faint); letter-spacing: 0.03em; }
.freshness-badge { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); }
.freshness-badge:not(:empty)::before { content: "· "; }

/* ============ Sortable scanner table ============ */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.scanner-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; white-space: nowrap; }
table.scanner-table th, table.scanner-table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.scanner-table th { color: var(--ink-faint); font-weight: 500; cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--bg-raised); }
table.scanner-table th.sorted { color: var(--accent); }
table.scanner-table tr.tappable { cursor: pointer; }
table.scanner-table tr.tappable:active { background: var(--line-soft); }
table.scanner-table tr.status-order_submitted td:first-child { border-left: 3px solid var(--green); }
table.scanner-table tr.status-accepted td:first-child { border-left: 3px solid var(--green); }
table.scanner-table tr.status-rejected td:first-child { border-left: 3px solid var(--red); }
table.scanner-table tr.status-pending td:first-child { border-left: 3px solid var(--line); }
table.scanner-table td.risk-decision-pass { color: var(--green); }
table.scanner-table td.risk-decision-reject { color: var(--red); font-weight: 600; }

.row-item .sub-line { color: var(--ink-faint); font-size: 0.78rem; margin-top: 0.15rem; }

/* ============ Pipeline visual ============ */

.pipeline-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
.pipeline-step { font-family: var(--font-mono); font-size: 0.68rem; padding: 0.3rem 0.55rem; border-radius: 999px; background: var(--line-soft); color: var(--ink-faint); }
.pipeline-step.done { background: var(--green-bg); color: var(--green); }
.pipeline-step.rejected { background: var(--red-bg); color: var(--red); }
.pipeline-arrow { color: var(--ink-faint); font-size: 0.75rem; }
.reject-banner { margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: 0.8rem; }

/* ============ Shared detail modal ============ */

.detail-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50; align-items: flex-end; justify-content: center; }
.detail-modal.visible { display: flex; }
.detail-modal-sheet {
  background: var(--bg-raised); width: 100%; max-width: 640px; max-height: 85vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; box-shadow: var(--shadow); padding: 1rem 1.1rem calc(1.1rem + var(--safe-bottom));
}
@media (min-width: 640px) {
  .detail-modal { align-items: center; }
  .detail-modal-sheet { border-radius: 16px; margin-bottom: 2rem; }
}
.detail-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.detail-modal-header .sym { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }
.detail-modal-body h2 { font-size: 0.85rem; margin: 0.6rem 0 0.4rem; color: var(--ink-soft); }

/* ============ Intraday graph (HOME) ============ */

.graph-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
.graph-controls .segmented, .graph-controls .range-selector { margin-bottom: 0; }
.graph-controls .range-selector { width: auto; }
.graph-controls .range-selector button { flex: 0 0 auto; padding: 0.4rem 0.6rem; }
.graph-wrap { position: relative; margin-top: 0.7rem; }
.graph-canvas { width: 100%; height: 140px; display: block; touch-action: none; }
.graph-tooltip {
  display: none; position: absolute; top: 4px; padding: 0.25rem 0.5rem; border-radius: 6px;
  background: var(--code-bg); color: var(--ink); font-family: var(--font-mono); font-size: 0.7rem;
  white-space: nowrap; pointer-events: none; box-shadow: var(--shadow);
}

.pos-pnl-value { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.pos-pnl-pct { font-size: 0.76rem; color: var(--ink-faint); white-space: nowrap; }
.pos-meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem;
  padding-top: 0.5rem; border-top: 1px solid var(--line-soft); font-size: 0.74rem; color: var(--ink-faint);
  flex-wrap: wrap;
}

/* ============ Performance-by-stage rows ============ */

.stage-row { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); gap: 0.5rem; flex-wrap: wrap; }
.stage-row:last-child { border-bottom: none; }
.stage-name { font-weight: 600; font-size: 0.85rem; }
.stage-stats { display: flex; gap: 0.7rem; font-size: 0.78rem; color: var(--ink-faint); flex-wrap: wrap; }

/* ============ Lifecycle visualization (position detail) ============ */

.lifecycle-track { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 0.4rem; }
.lifecycle-step {
  font-family: var(--font-mono); font-size: 0.7rem; padding: 0.35rem 0.6rem; border-radius: 999px;
  background: var(--line-soft); color: var(--ink-faint); white-space: nowrap;
}
.lifecycle-step.past { background: var(--accent-soft); color: var(--accent); opacity: 0.7; }
.lifecycle-step.current { background: var(--accent); color: var(--bg-raised); font-weight: 700; }
.lifecycle-connector { width: 1rem; height: 1px; background: var(--line); flex: 0 0 auto; }
.lifecycle-zone-badge {
  display: inline-block; margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem;
  padding: 0.25rem 0.55rem; border-radius: 6px; background: var(--yellow-bg); color: var(--yellow);
}

/* ============ Mobile operations console ============ */

.scanner-screen { display: none; }
.scanner-screen.active { display: block; }

.candidate-stack { display: grid; gap: 0.65rem; }
.candidate-card {
  width: 100%; text-align: left; display: block; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-raised); color: var(--ink); padding: 0.85rem; cursor: pointer;
}
.candidate-card.status-rejected { border-left: 3px solid var(--red); }
.candidate-card.status-order_submitted, .candidate-card.status-accepted { border-left: 3px solid var(--green); }
.candidate-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.65rem;
}
.candidate-head .sym { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; }
.candidate-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem;
}
.candidate-metrics span {
  min-width: 0; padding: 0.55rem; border-radius: 8px; background: var(--code-bg);
}
.candidate-metrics b {
  display: block; font-family: var(--font-mono); font-size: 0.9rem; overflow-wrap: anywhere;
}
.candidate-metrics small {
  display: block; color: var(--ink-faint); font-size: 0.67rem; margin-top: 0.1rem;
}
.candidate-foot { color: var(--ink-faint); font-size: 0.78rem; margin-top: 0.65rem; overflow-wrap: anywhere; }

.position-card summary {
  display: block; min-width: 0;
}
.pos-card-head {
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.75rem;
}
.pos-card-head > div {
  display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;
}
.pos-card-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.75rem;
}
.pos-card-grid div {
  min-width: 0; background: var(--code-bg); border-radius: 8px; padding: 0.55rem;
}
.pos-card-grid .label {
  display: block; color: var(--ink-faint); font-size: 0.68rem; margin-bottom: 0.12rem;
}
.pos-card-grid b {
  display: block; font-family: var(--font-mono); font-size: 0.86rem; overflow-wrap: anywhere;
}
.position-card .position-sparkline {
  width: 100%; height: 44px; margin: 0.1rem 0 0.55rem;
}
.pos-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  color: var(--ink-faint); font-size: 0.74rem; padding-top: 0.55rem; border-top: 1px solid var(--line-soft);
}
.position-history {
  margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line-soft);
}
.position-history h2 { margin-bottom: 0.35rem; }

.control-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem;
}
.exposure-choice-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.75rem;
}
.exposure-choice.active {
  color: var(--green); background: var(--green-bg); border-color: var(--green);
}
.position-stepper {
  display: grid; grid-template-columns: 1fr 42px 56px 42px; align-items: center; gap: 0.45rem;
  margin-bottom: 0.75rem;
}
.stepper-label { color: var(--ink-faint); font-size: 0.78rem; font-weight: 700; }
.stepper-value { font-family: var(--font-mono); font-weight: 700; text-align: center; }
.capital-summary-grid { margin-top: 0.7rem; }
.allocation-warning { margin-top: 0.55rem; color: var(--yellow); }
.control-strip { margin-top: 0.9rem; }
.log-view {
  margin-top: 0.7rem; max-height: 260px; overflow-y: auto; overflow-x: auto; white-space: pre;
  font-family: var(--font-mono); font-size: 0.72rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.6rem;
}
.control-btn {
  min-height: 46px; width: 100%; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-weight: 700; cursor: pointer; padding: 0.55rem 0.6rem;
  overflow-wrap: anywhere;
}
.control-btn:disabled { opacity: 0.55; cursor: wait; }
.control-btn.warn { color: var(--yellow); background: var(--yellow-bg); border-color: var(--yellow); }
.control-btn.danger { color: var(--red); background: var(--red-bg); border-color: var(--red); }
.control-btn.wide { grid-column: 1 / -1; }
.control-btn.compact { min-height: 38px; padding: 0.4rem 0.65rem; font-size: 0.75rem; }
.danger-zone { border-color: var(--red); }
.compact-card { padding: 0.9rem; margin-bottom: 0.72rem; }
.control-status-line {
  min-height: 0; margin-bottom: 0.6rem; font-size: 0.84rem; font-weight: 600; color: var(--ink-faint);
}
.control-status-line:not(:empty) {
  min-height: 38px; display: flex; align-items: center; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-raised);
}
.control-status-line.ok { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.control-status-line.error { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.control-status-line.pending { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-bg); }
.model-control-stack { display: grid; gap: 0.65rem; }
.model-control-card {
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 0.75rem; background: var(--bg);
}
.model-control-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.7rem;
}
.model-control-head h3 {
  margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.2;
}
.model-control-head .control-btn { flex: 0 0 108px; }
.model-status-line { margin-top: 0.45rem; overflow-wrap: anywhere; }

/* ---------- Training Progress Widget (Mobile-First) ---------- */
.training-progress-widget {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--bg-raised);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.training-progress-widget.running {
  border-color: var(--blue);
  background: var(--blue-bg);
}
.training-progress-widget.completed {
  border-color: var(--green);
  background: var(--green-bg);
}
.training-progress-widget.failed {
  border-color: var(--red);
  background: var(--red-bg);
}

.training-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.training-stage-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.training-pct-badge {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.training-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.training-status-badge.running {
  background: var(--blue);
  color: #ffffff;
}
.training-status-badge.running::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: pulse-dot 1.2s infinite ease-in-out;
}
.training-status-badge.completed {
  background: var(--green);
  color: #ffffff;
}
.training-status-badge.failed {
  background: var(--red);
  color: #ffffff;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.training-bar-wrap {
  width: 100%;
  height: 9px;
  background: var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.training-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  transition: width 0.35s ease;
  position: relative;
}
.training-progress-widget.completed .training-bar-fill {
  background: var(--green);
}
.training-progress-widget.failed .training-bar-fill {
  background: var(--red);
}

.training-progress-widget.running .training-bar-fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: bar-shimmer 1.8s infinite;
}
@keyframes bar-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.training-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--ink-soft);
  gap: 0.5rem;
  flex-wrap: wrap;
}
.training-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.training-timing {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  white-space: nowrap;
}

/* Stage pipeline indicator */
.training-pipeline-steps {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.training-pipeline-step {
  flex: 1;
  min-width: 58px;
  padding: 0.25rem 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--ink-faint);
  white-space: nowrap;
  transition: all 0.2s ease;
}
.training-pipeline-step.done {
  border-color: var(--green);
  color: var(--green);
  font-weight: 500;
}
.training-pipeline-step.active {
  border-color: var(--blue);
  background: var(--bg-raised);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--blue);
}

.training-error-alert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  background: var(--red-bg);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 0.78rem;
  margin-top: 0.35rem;
}
.training-error-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.training-error-msg {
  font-weight: 500;
  line-height: 1.3;
}
.training-fallback-note {
  font-size: 0.71rem;
  opacity: 0.85;
}
.training-retry-action-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.training-retry-action-btn:hover {
  opacity: 0.9;
}

/* Retrain modal and options */
.retrain-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;
}
.retrain-modal-intro {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-secondary);
}
.retrain-option-card {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.retrain-option-card.warn {
  border-color: rgba(220, 100, 30, 0.4);
  background: rgba(220, 100, 30, 0.05);
}
.retrain-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.retrain-option-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.retrain-option-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.retrain-option-tag.normal {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green);
}
.retrain-option-tag.no-cache {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber);
}
.retrain-option-desc {
  font-size: 0.85rem;
  color: var(--ink-secondary);
  line-height: 1.35;
}
.retrain-mode-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.retrain-mode-pill.normal {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue);
}
.retrain-mode-pill.no-cache {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber);
}
.training-indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.indicator-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.indicator-item .lbl {
  font-size: 0.68rem;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.indicator-item .val {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.indicator-item .val.highlight {
  color: var(--green);
  font-family: var(--font-mono);
}
.indicator-item .val.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-current-proc {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--ink-secondary);
}
.proc-icon {
  font-size: 0.85rem;
}
.proc-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 720px) {
  main { max-width: 1120px; width: 100%; margin: 0 auto; }
  .candidate-metrics, .pos-card-grid, .control-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .model-control-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  header.topbar { padding-left: 0.7rem; padding-right: 0.7rem; align-items: center; gap: 0.35rem; }
  header.topbar .brand span:last-child { max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
  main { padding-left: 0.75rem; padding-right: 0.75rem; }
  .card, .position-card { padding: 0.9rem; }
  .mini-pill { font-size: 0.58rem; padding-left: 0.3rem; padding-right: 0.3rem; }
  .top-clock { display: none; }
  .model-control-head .control-btn { flex-basis: 96px; }
}

/* =====================================================================
   Pipeline Flow & Live Funnel Chain (Phase 3)
   ===================================================================== */
.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.pipeline-flow-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
}

.pipeline-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.4rem 0.6rem;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  min-width: 100px;
}

.pipeline-flow-step .step-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
}

.pipeline-flow-step .step-sub {
  font-size: 0.7rem;
  color: var(--accent, #38bdf8);
  font-family: var(--font-mono);
  margin-top: 2px;
  white-space: nowrap;
}

.pipeline-flow-step.trade-step {
  border-color: var(--green, #22c55e);
  background: rgba(34, 197, 94, 0.08);
}

.pipeline-flow-step.trade-step .step-sub {
  color: var(--green, #22c55e);
}

.pipeline-flow-arrow {
  color: var(--ink-secondary, #94a3b8);
  font-size: 1.1rem;
  font-weight: bold;
}

.funnel-chain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}

.funnel-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line-soft);
  min-width: 90px;
}

.funnel-node.highlight {
  border-color: var(--green, #22c55e);
  background: rgba(34, 197, 94, 0.1);
}

.funnel-node.highlight .funnel-val {
  color: var(--green, #22c55e);
}

.funnel-val {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink);
}

.funnel-lbl {
  font-size: 0.68rem;
  color: var(--ink-secondary, #94a3b8);
  margin-top: 2px;
  white-space: nowrap;
}

.funnel-sep {
  color: var(--ink-secondary, #94a3b8);
  font-weight: bold;
}

.top-k-presets button.active {
  border-color: var(--accent, #38bdf8);
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent, #38bdf8);
}


/* ---- Three-system additions (system-scope.js / views-platform.js) ---- */
.system-bar { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.55rem 1rem 0.1rem; background: var(--bg); }
.system-bar button { flex: 0 0 auto; min-height: 36px; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-raised); color: var(--ink-soft); font-size: 0.8rem; font-family: var(--font-sans); cursor: pointer; white-space: nowrap; }
.system-bar button.active { background: var(--accent); color: var(--bg-raised); border-color: var(--accent); font-weight: 600; }
.sys-badge { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.35rem; border-radius: 5px; font-family: var(--font-mono);
  font-size: 0.64rem; font-weight: 600; vertical-align: middle; color: var(--blue); background: var(--blue-bg); }
.sys-badge.sys-hgb { color: var(--yellow); background: var(--yellow-bg); }
.sys-badge.sys-automated_scalping { color: var(--green); background: var(--green-bg); }
.system-tile { text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; background: var(--bg-raised);
  color: var(--ink); cursor: pointer; font-family: var(--font-sans); display: flex; flex-direction: column; gap: 0.3rem; }
.system-tile:hover { border-color: var(--accent); }
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.6rem; }
.stage-chip { border: 1px solid var(--line-soft); border-radius: 8px; padding: 0.4rem 0.5rem; min-width: 0; }
.stage-chip.warn { border-color: var(--yellow); } .stage-chip.fail { border-color: var(--red); }
.stage-summary { font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.25rem; overflow-wrap: anywhere; }
.platform-sub { font-size: 0.78rem; margin: 0.8rem 0 0.4rem; color: var(--ink-soft); }
.actions-row { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
@media (max-width: 640px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ Model page: training / model management ============ */
.stat-tile.cols-span-3 { grid-column: 1 / -1; }
.stat-tile.cols-span-2 { grid-column: span 2; }
.stat-tile .value.small-value { font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; }
.stat-tile .value .sub-line { font-weight: 400; }

.train-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.8rem; }
.train-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.train-field .label { font-size: 0.74rem; color: var(--ink-faint); }
.train-field .value { font-weight: 600; font-size: 0.95rem; }
.train-field input[type="month"] {
  font: inherit; font-family: var(--font-mono); font-size: 0.92rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.6rem; min-height: 42px; width: 100%;
}
.train-btn { margin-top: 0.9rem; background: var(--accent); color: var(--bg-raised); border-color: var(--accent); }
.train-btn:disabled { background: var(--line-soft); color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }

.month-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.month-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.35rem 0;
  border-radius: 5px; font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.15; min-width: 0;
}
.month-cell small { font-size: 0.55rem; opacity: 0.75; }
.month-cell.in-window { background: var(--accent); color: var(--bg-raised); }
.month-cell.in-data { background: var(--accent-soft); color: var(--accent); }
.month-cell.trade { background: var(--green-bg); color: var(--green); border: 1px dashed var(--green); }
.month-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.45rem; font-size: 0.7rem; color: var(--ink-faint); }
.month-legend .lg { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.3rem; vertical-align: -0.1rem; }
.month-legend .lg.in-window { background: var(--accent); }
.month-legend .lg.in-data { background: var(--accent-soft); border: 1px solid var(--accent); }
.month-legend .lg.trade { background: var(--green-bg); border: 1px dashed var(--green); }
.chain-list { margin-top: 0.4rem; }

.live-card { border-color: var(--accent); }
.progress-headline { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.4rem; }
.big-pct { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stage-now { font-weight: 600; color: var(--ink-soft); }
.progress-wrap { margin: 0.4rem 0 0.7rem; }
.progress-bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.6s ease; }
.progress-fill.live { background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; animation: progress-sheen 1.8s linear infinite; }
@keyframes progress-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .progress-fill.live { animation: none; } }
.progress-caption { font-size: 0.74rem; color: var(--ink-faint); margin-top: 0.3rem; }
.step-track { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.pipeline-step.active { background: var(--accent); color: var(--bg-raised); font-weight: 700; }
.pipeline-step.failed { background: var(--red-bg); color: var(--red); font-weight: 700; }
.pipeline-step.cancelled { background: var(--line-soft); color: var(--ink-faint); text-decoration: line-through; }

.chain-track { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.3rem; }
.chain-track .pipeline-arrow { align-self: center; }
.chain-node { flex: 1 1 7rem; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.55rem; background: var(--bg); }
.chain-node .chain-name { font-weight: 600; font-size: 0.8rem; }
.chain-node.done { border-color: var(--green); background: var(--green-bg); }
.chain-node.done .chain-name { color: var(--green); }
.chain-node.active { border-color: var(--accent); background: var(--accent-soft); }
.chain-node.active .chain-name { color: var(--accent); }
.chain-node .sub-line { overflow-wrap: anywhere; }
.unit-blocks { margin-top: 0.6rem; display: grid; gap: 0.6rem; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 0.3rem; margin-top: 0.3rem; }
.unit-chip { border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.4rem; font-size: 0.72rem; display: grid; gap: 0.1rem; background: var(--bg); }
.unit-chip.g { border-color: var(--green); background: var(--green-bg); }
.unit-chip.b { border-color: var(--accent); background: var(--accent-soft); }
.unit-chip.r { border-color: var(--red); background: var(--red-bg); }

.metric-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.metric-chip { display: inline-flex; gap: 0.35rem; align-items: baseline; font-size: 0.72rem; padding: 0.25rem 0.55rem;
  border-radius: 6px; background: var(--code-bg); color: var(--ink-soft); }
.metric-chip b { font-family: var(--font-mono); color: var(--ink); }

.switch { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.2rem 0.6rem 0.2rem 0.25rem; background: var(--line-soft); cursor: pointer; font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 700; color: var(--ink-faint); min-height: 32px; }
.switch .knob { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--bg-raised); box-shadow: var(--shadow); transition: transform 0.2s ease; }
.switch.on { background: var(--green-bg); border-color: var(--green); color: var(--green); flex-direction: row-reverse; padding: 0.2rem 0.25rem 0.2rem 0.6rem; }

@media (max-width: 520px) {
  .train-form { grid-template-columns: 1fr; }
  .month-cell { font-size: 0.55rem; }
  .month-cell small { display: none; }
  .big-pct { font-size: 1.6rem; }
}
.card .sub-line { color: var(--ink-faint); font-size: 0.78rem; margin-top: 0.15rem; }
.card .sub-line.allocation-warning { color: var(--yellow); margin-top: 0.6rem; }
.pipeline-step .step-time { font-weight: 400; opacity: 0.8; margin-left: 0.15rem; }
.timing-table { display: grid; gap: 0.3rem; }
.timing-row { display: grid; grid-template-columns: 9rem 1fr 4.5rem; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.timing-row b { font-family: var(--font-mono); text-align: right; }
.timing-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.timing-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.timing-row.active .timing-bar i { background: var(--yellow); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; margin-top: 0.4rem; }
.mini-table th, .mini-table td { text-align: left; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line-soft); }
.mini-table th { color: var(--ink-faint); font-weight: 600; }
.mini-table td { font-family: var(--font-mono); }