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

:root {
  --paper: #f4f1e9;
  --paper-deep: #e9e3d7;
  --ink: #102a2b;
  --muted: #687574;
  --line: rgba(16, 42, 43, .14);
  --teal: #087f75;
  --teal-dark: #075e59;
  --coral: #ed6b4f;
  --lime: #c6e86b;
  --red: #be4436;
  --shadow: 0 18px 50px rgba(30, 49, 45, .09);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgba(16, 42, 43, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 42, 43, .025) 1px, transparent 1px),
    var(--paper);
  background-size: 34px 34px;
  font-family: 'Manrope', sans-serif;
}

body.exchange-bybit {
  --paper: #f6f1e5;
  --paper-deep: #e9dfc9;
  --ink: #252419;
  --muted: #756f5f;
  --line: rgba(37, 36, 25, .15);
  --teal: #b76b00;
  --teal-dark: #7c4a00;
  --coral: #e98a19;
  --lime: #f2c94c;
  --red: #a63e2e;
}
body.exchange-bybit .ambient-one { background: radial-gradient(circle, rgba(242, 201, 76, .72), transparent 68%); }
body.exchange-bybit .ambient-two { background: radial-gradient(circle, rgba(233, 138, 25, .2), transparent 70%); }

button, input, select, textarea { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .45; }
.ambient-one { width: 480px; height: 480px; top: -210px; right: -120px; background: radial-gradient(circle, rgba(198, 232, 107, .7), transparent 68%); }
.ambient-two { width: 420px; height: 420px; bottom: -240px; left: -180px; background: radial-gradient(circle, rgba(8, 127, 117, .18), transparent 70%); }

.topbar {
  width: min(1440px, calc(100% - 48px));
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 13px; }
.brand strong { display: block; font-size: 14px; letter-spacing: .13em; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.brand-mark { width: 38px; height: 38px; padding: 8px; border: 1px solid var(--ink); border-radius: 50%; display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; }
.brand-mark span { width: 4px; border-radius: 3px; background: var(--teal); }
.brand-mark span:nth-child(1) { height: 9px; }
.brand-mark span:nth-child(2) { height: 18px; background: var(--coral); }
.brand-mark span:nth-child(3) { height: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.exchange-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.38); }
.exchange-switch a { padding: 6px 10px; border-radius: 999px; color: var(--muted); text-decoration: none; font: 500 9px 'IBM Plex Mono', monospace; letter-spacing: .08em; }
.exchange-switch a.active { color: #fff; background: var(--ink); }
.page-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.38); }
.page-switch a { padding: 8px 11px; border-radius: 9px; color: var(--muted); text-decoration: none; font: 500 9px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.page-switch a.active { color: #fff; background: var(--ink); }
.environment-badge, .subtle-badge {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--teal-dark);
  background: rgba(255,255,255,.38);
  font: 500 10px 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
}
.strategy-version-badge {
  padding: 7px 11px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  color: var(--ink);
  background: var(--lime);
  box-shadow: 3px 3px 0 var(--ink);
  font: 500 9px 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}
.button, .icon-button {
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.button:hover, .icon-button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.button { min-height: 42px; padding: 0 18px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.button-primary { color: #fff; background: var(--teal); box-shadow: 0 8px 22px rgba(8, 127, 117, .18); }
.button-primary:hover { background: var(--teal-dark); }
.button-ghost { background: transparent; border: 1px solid var(--line); }
.button-danger { color: var(--red); background: rgba(175, 55, 43, .06); border: 1px solid rgba(175, 55, 43, .25); }
.button-wide { width: 100%; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.4); border: 1px solid var(--line); font-size: 20px; }

.page-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto 72px; }
.hero-panel { min-height: 235px; display: flex; align-items: center; justify-content: space-between; padding: 38px 3vw 30px; }
.eyebrow { margin: 0 0 12px; color: var(--teal); font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(42px, 5vw, 74px); line-height: .98; letter-spacing: -.055em; font-weight: 500; }
h1 em { color: var(--teal); font-style: normal; }
h2 { margin-bottom: 0; font-size: 21px; letter-spacing: -.025em; }
.scanner-orbit { width: 174px; height: 174px; border: 1px solid var(--line); border-radius: 50%; position: relative; display: grid; place-items: center; text-align: center; background: rgba(255,255,255,.3); }
.scanner-orbit::before { content: ''; position: absolute; inset: 13px; border: 1px dashed rgba(8,127,117,.3); border-radius: 50%; animation: spin 16s linear infinite; }
.scanner-orbit.active::after { content: ''; position: absolute; inset: 28px; border-radius: 50%; background: rgba(198,232,107,.25); animation: pulse 1.5s ease infinite; }
.scanner-orbit div { z-index: 1; }
.scanner-orbit small, .scanner-orbit time { display: block; color: var(--muted); font: 10px 'IBM Plex Mono', monospace; }
.scanner-orbit strong { display: block; margin: 6px 0; font-size: 15px; }
.orbit-dot { position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { min-height: 128px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.42); }
.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; margin: 7px 0 5px; font-size: 32px; letter-spacing: -.045em; }
.accent-card { color: #f9f7ef; background: var(--ink); }
.accent-card span, .accent-card small { color: rgba(255,255,255,.58); }

.liquidity-panel { margin-top: 14px; background: linear-gradient(120deg, rgba(255,255,255,.7), rgba(198,232,107,.12)); }
.liquidity-panel-header { min-height: 86px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.liquidity-panel-header .eyebrow { margin-bottom: 5px; }
.liquidity-state { padding: 7px 10px; border-radius: 7px; color: var(--teal-dark); background: rgba(8,127,117,.1); font: 500 8px 'IBM Plex Mono', monospace; letter-spacing: .08em; }
.liquidity-state.complete { color: #315113; background: rgba(198,232,107,.48); }
.liquidity-state.stale { color: #7c3b31; background: rgba(237,107,79,.18); }
.liquidity-overview { padding: 19px 24px; display: grid; grid-template-columns: minmax(120px, 1.25fr) repeat(4, minmax(115px, 1fr)); gap: 12px; align-items: center; }
.liquidity-overview > div:not(.liquidity-meter) { min-height: 68px; padding: 12px 14px; border-left: 1px solid var(--line); }
.liquidity-overview span, .liquidity-overview small { display: block; color: var(--muted); font: 8px 'IBM Plex Mono', monospace; text-transform: uppercase; }
.liquidity-overview strong { display: block; margin-top: 6px; font-size: 21px; }
.liquidity-overview small { margin-top: 4px; text-transform: none; }
.liquidity-meter { height: 16px; padding: 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-deep); }
.liquidity-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--lime)); transition: width .45s ease; }
.liquidity-exclusions { border-top: 1px solid var(--line); }
.liquidity-exclusions summary { padding: 15px 24px; cursor: pointer; color: var(--teal-dark); font: 500 9px 'IBM Plex Mono', monospace; list-style-position: inside; }
.liquidity-exclusions summary b { display: inline-flex; min-width: 25px; margin-left: 6px; padding: 3px 6px; justify-content: center; border-radius: 999px; color: var(--ink); background: var(--lime); }
.liquidity-exclusions-toolbar { padding: 13px 24px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,.28); }
.liquidity-exclusions-toolbar input { max-width: 330px; }
.liquidity-exclusions-toolbar small { color: var(--muted); font-size: 9px; }
.liquidity-excluded-list { max-height: 330px; overflow: auto; border-top: 1px solid var(--line); }
.liquidity-excluded-row { padding: 11px 24px; display: grid; grid-template-columns: minmax(150px, 1fr) 140px 120px; gap: 16px; align-items: center; border-top: 1px solid rgba(16,42,43,.07); }
.liquidity-excluded-row:first-child { border-top: 0; }
.liquidity-excluded-row strong { font-size: 11px; }
.liquidity-excluded-row span { text-align: right; font: 500 10px 'IBM Plex Mono', monospace; }
.liquidity-excluded-row small { color: var(--muted); font-size: 9px; text-align: right; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .75fr); gap: 14px; margin-top: 14px; }
.lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.validation-panel { margin-top: 14px; }
.validation-content { padding: 24px; }
.validation-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.validation-stat { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.45); }
.validation-stat span { display: block; color: var(--muted); font: 9px 'IBM Plex Mono', monospace; text-transform: uppercase; }
.validation-stat strong { display: block; margin-top: 6px; font-size: 22px; }
.validation-symbols { display: grid; gap: 8px; margin-top: 16px; }
.validation-row { display: grid; grid-template-columns: 1fr repeat(4, minmax(70px, auto)); gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 11px; }
.validation-row strong { font-size: 12px; }
.validation-row span { color: var(--muted); text-align: right; }
.validation-note { margin: 16px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(252,250,245,.78); box-shadow: var(--shadow); overflow: hidden; }
.panel-header { min-height: 92px; padding: 23px 25px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-header .eyebrow { margin-bottom: 6px; }
.legend { color: var(--muted); font: 10px 'IBM Plex Mono', monospace; }
.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--coral); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 14px 20px; color: var(--muted); text-align: left; font: 500 9px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
td { padding: 17px 20px; border-top: 1px solid rgba(16,42,43,.08); font-size: 12px; white-space: nowrap; }
tbody tr { cursor: pointer; transition: background .15s ease; }
tbody tr:hover, tbody tr.selected { background: rgba(198,232,107,.16); }
.symbol-cell strong { display: block; font-size: 13px; }
.symbol-cell small { color: var(--muted); font: 9px 'IBM Plex Mono', monospace; }
.symbol-link { color: inherit; text-decoration-color: rgba(8,127,117,.35); text-underline-offset: 3px; }
.symbol-link:hover { color: var(--teal); text-decoration-color: var(--teal); }
.score-cell { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.mini-score { width: 38px; height: 5px; border-radius: 8px; overflow: hidden; background: var(--paper-deep); }
.mini-score i { display: block; height: 100%; background: var(--teal); }
.status-pill { display: inline-flex; padding: 6px 9px; border-radius: 999px; font: 500 9px 'IBM Plex Mono', monospace; text-transform: uppercase; }
.status-candidate { color: #315113; background: rgba(198,232,107,.45); }
.status-rejected { color: #7c3b31; background: rgba(237,107,79,.15); }
.empty-state { padding: 32px !important; color: var(--muted); text-align: center; }

.detail-panel { min-height: 520px; }
.empty-detail { min-height: 520px; padding: 35px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, transparent, rgba(8,127,117,.06)); }
.empty-detail p:last-child { max-width: 340px; margin-top: 12px; color: var(--muted); line-height: 1.6; }
.detail-head { padding: 25px; display: flex; justify-content: space-between; align-items: flex-start; }
.detail-symbol { font-size: 27px; letter-spacing: -.04em; }
.hero-score { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; border: 7px solid var(--lime); font-size: 19px; font-weight: 700; background: #fff; }
.chart-shell { margin: 0 25px; height: 168px; border-radius: 16px; overflow: hidden; background: var(--ink); }
.chart-shell svg { width: 100%; height: 100%; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 20px 25px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.metric { padding: 14px; background: #faf8f2; }
.metric span { display: block; color: var(--muted); font: 9px 'IBM Plex Mono', monospace; }
.metric strong { display: block; margin-top: 5px; font-size: 14px; }
.decision-block { margin: 0 25px 25px; }
.decision-block h3 { margin: 18px 0 9px; font-size: 12px; }
.reason-list { display: grid; gap: 7px; }
.reason { padding: 9px 11px; border-left: 3px solid var(--teal); background: rgba(8,127,117,.06); font-size: 11px; line-height: 1.45; }
.reason.veto { border-color: var(--coral); background: rgba(237,107,79,.07); }
.detail-actions { display: flex; gap: 9px; margin-top: 20px; }
.detail-caption { margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.bot-list, .event-list { max-height: 360px; overflow: auto; }
.bot-row, .event-row { padding: 17px 24px; display: grid; align-items: center; gap: 12px; border-top: 1px solid rgba(16,42,43,.08); }
.bot-row { grid-template-columns: 1fr auto auto; }
.bot-row strong, .event-row strong { display: block; font-size: 12px; }
.bot-row small, .event-row small { color: var(--muted); font: 9px 'IBM Plex Mono', monospace; }
.bot-actions { display: flex; align-items: center; gap: 6px; }
.bot-actions .button { min-height: 34px; padding: 0 10px; font-size: 10px; }
.bot-version-pill { display: inline-flex; margin-left: 6px; padding: 2px 5px; border-radius: 4px; color: var(--ink); background: var(--lime); font: 500 7px 'IBM Plex Mono', monospace; vertical-align: 2px; }
.event-row { grid-template-columns: 8px 1fr auto; }
.event-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.event-dot.error { background: var(--red); }
.event-dot.warning { background: var(--coral); }

.settings-dialog { width: min(860px, calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 24px; color: var(--ink); background: #f9f7f1; box-shadow: 0 30px 100px rgba(8,30,29,.28); }
.settings-dialog::backdrop { background: rgba(7,31,31,.58); backdrop-filter: blur(5px); }
.settings-form { padding: 27px; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-intro { max-width: 620px; margin: 13px 0 24px; color: var(--muted); font-size: 12px; }
fieldset { margin: 0 0 17px; padding: 19px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; border: 1px solid var(--line); border-radius: 16px; }
legend { padding: 0 8px; color: var(--teal); font: 500 10px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field > span { font-size: 11px; font-weight: 700; }
.field small { color: var(--muted); font-size: 9px; }
.settings-policy-card { padding: 11px 12px; border: 1px solid rgba(8,127,117,.18); border-radius: 11px; background: linear-gradient(125deg, rgba(8,127,117,.07), rgba(198,232,107,.13)); }
.settings-policy-card strong { font-size: 13px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,117,.09); }
textarea { resize: vertical; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 390px; padding: 14px 17px; border-radius: 13px; color: #fff; background: var(--ink); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; font-size: 12px; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }
.alert { padding: 12px 14px; border-radius: 11px; font-size: 12px; }
.alert-error { color: #7c2e24; background: rgba(237,107,79,.13); border: 1px solid rgba(190,68,54,.2); }
.muted { color: var(--muted); }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.calculator-page-shell { margin-bottom: 60px; }
.calculator-hero { min-height: 310px; padding: 52px 3vw 38px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.calculator-lead { max-width: 620px; margin: 24px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.calculator-pair-card { width: min(350px, 34vw); padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(198,232,107,.46), rgba(255,255,255,.42)); box-shadow: var(--shadow); }
.calculator-pair-card > span, .calculator-pair-card > small { display: block; color: var(--muted); font: 9px 'IBM Plex Mono', monospace; letter-spacing: .08em; }
.calculator-pair-card > strong { display: block; margin: 10px 0 6px; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.04em; }
.calculator-pair-card .status-pill { margin-top: 18px; font-style: normal; }
.calculator-layout { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(0, 1.5fr); gap: 14px; }
.calculator-input-panel { align-self: start; }
.calculator-form { padding: 24px; }
.calculator-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 13px; margin-bottom: 20px; }
.calculator-start-field { padding: 13px; border: 1px solid rgba(8,127,117,.2); border-radius: 13px; background: rgba(8,127,117,.05); }
.calculator-start-field > span { color: var(--teal-dark); }
.calculator-target-field { padding: 13px; border: 1px solid rgba(237,107,79,.2); border-radius: 13px; background: rgba(237,107,79,.045); }
.calculator-target-field > span { color: #8a3d30; }
.calculator-history-field { padding: 13px; border: 1px solid rgba(8,127,117,.2); border-radius: 13px; background: rgba(8,127,117,.045); }
.calculator-history-field > span { color: var(--teal-dark); }
.grid-level-field.auto-controlled input { color: var(--teal-dark); background: rgba(198,232,107,.18); cursor: not-allowed; }
.calculator-auto-toggle { position: relative; min-height: 67px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.48); cursor: pointer; }
.calculator-auto-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.calculator-auto-toggle > i { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 999px; background: var(--paper-deep); transition: .2s ease; }
.calculator-auto-toggle > i::after { content: ''; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(16,42,43,.2); transition: .2s ease; }
.calculator-auto-toggle input:checked + i { background: var(--teal); }
.calculator-auto-toggle input:checked + i::after { transform: translateX(18px); }
.calculator-auto-toggle input:focus-visible + i { box-shadow: 0 0 0 3px rgba(8,127,117,.16); }
.calculator-auto-toggle strong, .calculator-auto-toggle small { display: block; }
.calculator-auto-toggle strong { font-size: 11px; }
.calculator-auto-toggle small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.calculator-form-note { margin: 12px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.calculator-result-panel { min-height: 680px; }
.calculator-results { padding: 24px; }
.calculator-loading { min-height: 500px; display: grid; place-items: center; align-content: center; gap: 16px; color: var(--muted); font-size: 11px; }
.calculator-loading span { width: 45px; height: 45px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
.calculator-loading p { margin: 0; }
.calculator-verdict { min-height: 138px; padding: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; border-radius: 18px; color: #f9f7ef; background: var(--ink); }
.calculator-verdict.profitable { color: var(--ink); background: linear-gradient(130deg, var(--lime), #dff4a6); }
.calculator-verdict.unprofitable { background: linear-gradient(130deg, #7f342b, var(--red)); }
.calculator-verdict .eyebrow { margin-bottom: 7px; color: inherit; opacity: .68; }
.calculator-verdict h3 { margin: 0; font-size: 18px; }
.calculator-verdict > strong { grid-row: span 2; font-size: clamp(22px, 3vw, 38px); letter-spacing: -.045em; }
.calculator-verdict > small { color: inherit; opacity: .68; font-size: 9px; }
.history-card { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.48); }
.history-card.history-liquidated { border-color: rgba(190,68,54,.5); box-shadow: inset 0 0 0 1px rgba(190,68,54,.08); }
.history-header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.history-header .eyebrow { margin-bottom: 5px; }
.history-header h3 { margin: 0; font-size: 15px; }
.history-period { color: var(--ink); text-align: right; font: 500 9px 'IBM Plex Mono', monospace; }
.history-period small { display: block; margin-top: 5px; color: var(--muted); }
.history-hero { min-height: 135px; padding: 20px; display: grid; grid-template-columns: 1.5fr .5fr; align-items: center; gap: 16px; color: #f9f7ef; background: var(--ink); }
.history-hero span, .history-hero small { display: block; color: rgba(255,255,255,.58); font: 9px 'IBM Plex Mono', monospace; }
.history-hero > div > strong { display: block; margin: 7px 0 5px; font-size: clamp(24px, 3.2vw, 40px); letter-spacing: -.045em; }
.history-cycle-total { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.16); }
.history-cycle-total > strong { color: var(--lime); }
.history-kpis { padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.history-kpis > div { min-height: 96px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.54); }
.history-kpis span, .history-kpis small { display: block; color: var(--muted); font-size: 9px; }
.history-kpis strong { display: block; margin: 8px 0 5px; font-size: 17px; }
.history-tape { margin: 0 10px 10px; padding: 15px; border-radius: 14px; background: rgba(16,42,43,.045); }
.history-tape-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-tape-title span { font-size: 10px; font-weight: 700; }
.history-tape-title small { color: var(--muted); font-size: 8px; }
.history-hours { height: 102px; margin-top: 12px; display: flex; align-items: flex-end; gap: 3px; }
.history-hour { height: 100%; min-width: 5px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.history-hour strong { min-height: 15px; color: var(--muted); font: 8px 'IBM Plex Mono', monospace; }
.history-hour i { width: 100%; max-width: 18px; min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--teal); }
.history-hour i.negative { background: var(--coral); }
.history-hour span { min-height: 12px; margin-top: 5px; color: var(--muted); font: 7px 'IBM Plex Mono', monospace; }
.history-risk { margin: 0 10px 10px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 14px; border-radius: 12px; font-size: 9px; }
.history-risk.contained { color: var(--teal-dark); background: rgba(8,127,117,.08); }
.history-risk.breached { color: #7c2e24; background: rgba(237,107,79,.11); }
.history-risk.liquidated { color: #fff; background: linear-gradient(120deg, #7f342b, var(--red)); }
.history-risk.liquidated span { color: rgba(255,255,255,.7); }
.history-risk span { color: var(--muted); text-align: right; }
.history-note { padding: 0 16px 15px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.target-recommendation-card { position: relative; margin-top: 12px; overflow: hidden; border: 1px solid rgba(198,232,107,.28); border-radius: 20px; color: #f7f5ed; background: linear-gradient(140deg, #102a2b 0%, #173738 58%, #102a2b 100%); box-shadow: 0 18px 45px rgba(16,42,43,.13); }
.target-recommendation-card::before { content: ''; position: absolute; width: 260px; height: 260px; right: -130px; top: -155px; border: 1px solid rgba(198,232,107,.22); border-radius: 50%; box-shadow: 0 0 0 38px rgba(198,232,107,.025), 0 0 0 76px rgba(198,232,107,.018); pointer-events: none; }
.target-recommendation-card.not-actionable { border-color: rgba(237,107,79,.4); }
.target-recommendation-header { position: relative; padding: 19px 21px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.11); }
.target-recommendation-header .eyebrow { margin-bottom: 5px; color: var(--lime); }
.target-recommendation-header h3 { margin: 0; font-size: 16px; }
.target-recommendation-header > span { color: rgba(255,255,255,.56); font: 9px 'IBM Plex Mono', monospace; }
.target-recommendation-hero { position: relative; padding: 12px; display: grid; grid-template-columns: 1.25fr 1fr .72fr; gap: 8px; }
.target-recommendation-hero > div { min-height: 114px; padding: 17px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.045); }
.target-recommendation-hero span, .target-recommendation-hero small { display: block; color: rgba(255,255,255,.52); font: 8px 'IBM Plex Mono', monospace; }
.target-recommendation-hero strong { display: block; margin: 10px 0 7px; color: var(--lime); font-size: clamp(21px, 2.4vw, 32px); letter-spacing: -.035em; }
.target-recommendation-hero > div:nth-child(2) strong { color: #fff; }
.target-recommendation-hero > div:nth-child(3) strong { color: var(--coral); }
.target-recommendation-metrics { padding: 0 12px 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.target-recommendation-metrics > div { min-height: 88px; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.07); }
.target-recommendation-metrics span, .target-recommendation-metrics small { display: block; color: rgba(255,255,255,.5); font-size: 8px; }
.target-recommendation-metrics strong { display: block; margin: 7px 0 4px; color: #fff; font-size: 14px; }
.target-recommendation-metrics .positive-value { color: var(--lime); }
.target-recommendation-metrics .negative-value { color: var(--coral); }
.target-type-comparison { padding: 0 12px 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.target-type-option { padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(0,0,0,.1); }
.target-type-option.winner { border-color: rgba(198,232,107,.36); background: rgba(198,232,107,.07); }
.target-type-option span { color: rgba(255,255,255,.65); font-size: 9px; }
.target-type-option strong { color: var(--lime); font-size: 13px; }
.target-type-option small { grid-column: 1 / -1; color: rgba(255,255,255,.43); font-size: 8px; }
.target-recommendation-warnings { margin: 0 12px 12px; padding: 10px 13px; border-radius: 11px; color: #ffd5ca; background: rgba(237,107,79,.12); }
.target-recommendation-warnings p { margin: 3px 0; font-size: 8px; line-height: 1.45; }
.target-recommendation-footer { position: relative; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.target-recommendation-footer > small { color: rgba(255,255,255,.47); font-size: 8px; line-height: 1.45; }
.target-apply-button { min-height: 40px; flex: 0 0 auto; color: var(--ink); border-color: var(--lime); background: var(--lime); }
.target-no-launch { color: var(--coral); font-size: 10px; text-align: right; }
.target-recommendation-unavailable { min-height: 130px; padding: 21px; display: grid; align-content: center; grid-template-columns: minmax(240px, .8fr) 1.2fr; gap: 18px; border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.4); box-shadow: none; }
.target-recommendation-unavailable::before { display: none; }
.target-recommendation-unavailable h3 { margin: 0; font-size: 15px; }
.target-recommendation-unavailable p { margin: 0; align-self: center; color: var(--muted); font-size: 10px; line-height: 1.6; }
.history-unavailable { min-height: 150px; padding: 22px; display: grid; align-content: center; grid-template-columns: minmax(220px, .8fr) 1.2fr; gap: 18px; background: rgba(237,107,79,.06); }
.history-unavailable h3 { margin: 0; font-size: 15px; }
.history-unavailable p { margin: 0; align-self: center; color: var(--muted); font-size: 10px; line-height: 1.6; }
.history-unavailable > small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.contract-model-card { margin-top: 12px; overflow: hidden; border: 1px solid rgba(8,127,117,.24); border-radius: 18px; background: linear-gradient(145deg, rgba(8,127,117,.07), rgba(255,255,255,.48)); }
.contract-model-card > header { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.contract-model-card header .eyebrow { margin-bottom: 5px; }
.contract-model-card header h3 { margin: 0; font-size: 15px; }
.contract-model-card header > span { color: var(--muted); font: 9px 'IBM Plex Mono', monospace; }
.contract-model-grid { padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contract-model-grid > div { min-height: 100px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.58); }
.contract-model-grid span, .contract-model-grid small { display: block; color: var(--muted); font-size: 9px; }
.contract-model-grid strong { display: block; margin: 8px 0 5px; font-size: 17px; }
.contract-warning { margin: 0 10px 10px; padding: 10px 12px; border-radius: 10px; color: #7c2e24; background: rgba(237,107,79,.11); font-size: 9px; }
.cycle-direction { display: inline-flex; padding: 4px 7px; border-radius: 999px; font: 500 8px 'IBM Plex Mono', monospace; }
.cycle-long { color: var(--teal-dark); background: rgba(8,127,117,.11); }
.cycle-short { color: #8a3d30; background: rgba(237,107,79,.14); }
.grid-map-card { margin-top: 12px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.35); }
.grid-map-header { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.grid-map-header .eyebrow { margin-bottom: 5px; }
.grid-map-header h3 { margin: 0; font-size: 15px; }
.grid-map-counts { display: flex; gap: 7px; }
.grid-map-counts span { padding: 6px 9px; border-radius: 999px; font: 500 9px 'IBM Plex Mono', monospace; }
.grid-map-counts .sell-count { color: #8a3d30; background: rgba(237,107,79,.14); }
.grid-map-counts .buy-count { color: var(--teal-dark); background: rgba(8,127,117,.11); }
.grid-line-plan { padding: 14px; display: grid; grid-template-columns: 1.15fr .8fr .8fr 1.35fr; gap: 8px; background: rgba(255,255,255,.36); }
.grid-line-plan > div { min-height: 96px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.56); }
.grid-line-plan span, .grid-line-plan small { display: block; color: var(--muted); font: 9px 'IBM Plex Mono', monospace; }
.grid-line-plan strong { display: block; margin: 7px 0 5px; font-size: 23px; line-height: 1; }
.grid-line-total { color: #f9f7ef; background: var(--ink) !important; }
.grid-line-total span, .grid-line-total small { color: rgba(255,255,255,.58); }
.grid-line-direction.sell strong { color: var(--coral); }
.grid-line-direction.buy strong { color: var(--teal); }
.grid-line-limit strong { font-size: 13px; line-height: 1.25; }
.grid-line-limit.within-limit { border-color: rgba(8,127,117,.25); }
.grid-line-limit.over-limit { border-color: rgba(190,68,54,.3); background: rgba(237,107,79,.08); }
.grid-line-limit.over-limit strong { color: var(--red); }
.grid-line-note { margin: 0; padding: 0 18px 14px; color: var(--muted); font-size: 9px; line-height: 1.5; background: rgba(255,255,255,.36); }
.grid-map-scroll { padding: 12px; overflow-x: auto; background: var(--ink); }
.grid-map-svg { display: block; width: 100%; min-width: 680px; height: auto; }
.grid-map-svg text { font: 500 10px 'IBM Plex Mono', monospace; }
.grid-map-footer { padding: 12px 16px; display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 9px; }
.grid-map-footer strong { margin-left: 4px; color: var(--ink); }
.calculator-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
.calculator-stat { min-height: 105px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.48); }
.calculator-stat span, .calculator-stat small { display: block; color: var(--muted); font-size: 9px; }
.calculator-stat strong { display: block; margin: 8px 0 5px; font-size: 16px; }
.calculator-economics-line { margin: 12px 0; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; border-radius: 13px; color: var(--muted); background: rgba(8,127,117,.06); font-size: 10px; }
.calculator-economics-line strong { margin-left: 5px; color: var(--ink); }
.calculator-table-wrap { max-height: 440px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.calculator-table { min-width: 820px; }
.calculator-table thead { position: sticky; top: 0; z-index: 1; background: #f9f7f1; }
.calculator-table tbody tr { cursor: default; }
.calculator-table tbody tr.order-unplaceable { background: rgba(237,107,79,.08); }
.calculator-table tbody tr.order-unplaceable td { color: #8a3d30; }
.calculator-table td, .calculator-table th { padding: 11px 13px; }
.positive-value { color: var(--teal-dark); font-weight: 700; }
.negative-value { color: var(--red); font-weight: 700; }
.calculator-assumptions { margin-top: 18px; padding: 18px; border-left: 3px solid var(--coral); background: rgba(237,107,79,.06); }
.calculator-assumptions h3 { margin: 0 0 9px; font-size: 12px; }
.calculator-assumptions p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.calculator-error { min-height: 500px; display: grid; place-items: center; align-content: center; text-align: center; }
.calculator-error strong { color: var(--red); }
.calculator-error p { max-width: 440px; margin: 10px 0 0; color: var(--muted); font-size: 11px; }

.statistics-page-shell { margin-bottom: 72px; }
.statistics-hero { min-height: 340px; padding: 55px 3vw 42px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.statistics-hero > div:first-child { max-width: 820px; }
.statistics-lead { max-width: 690px; margin: 25px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.statistics-period-card { width: 260px; flex: 0 0 260px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(242,201,76,.48), rgba(255,255,255,.55)); box-shadow: var(--shadow); }
.statistics-period-card > span, .statistics-period-card > small, .statistics-period-card > time { display: block; color: var(--muted); font: 9px 'IBM Plex Mono', monospace; }
.statistics-period-card select { margin: 12px 0 20px; background: rgba(255,255,255,.72); }
.statistics-period-card strong { display: block; font-size: 48px; line-height: 1; letter-spacing: -.055em; }
.statistics-period-card > small { margin-top: 7px; }
.statistics-period-card > time { margin-top: 22px; padding-top: 13px; border-top: 1px solid var(--line); }
.statistics-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.statistics-kpi { min-height: 145px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.46); }
.statistics-kpi > span, .statistics-kpi > small { display: block; color: var(--muted); font-size: 9px; line-height: 1.45; }
.statistics-kpi > span { font: 500 9px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.statistics-kpi > strong { display: block; margin: 11px 0 7px; font-size: clamp(23px, 2.1vw, 34px); line-height: 1; letter-spacing: -.045em; }
.statistics-kpi.money-card { color: #fff; background: var(--ink); }
.statistics-kpi.money-card > span, .statistics-kpi.money-card > small { color: rgba(255,255,255,.55); }
.statistics-kpi.money-card .positive-value { color: var(--lime); }
.statistics-kpi.money-card .negative-value { color: #ff9a7f; }
.statistics-kpi.net-card { background: linear-gradient(145deg, rgba(242,201,76,.5), rgba(255,255,255,.45)); }
.statistics-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 14px; margin-top: 14px; }
.stop-reasons-list { min-height: 305px; padding: 10px 24px 24px; }
.stop-reason-row { padding: 15px 0; border-bottom: 1px solid rgba(37,36,25,.08); }
.stop-reason-row:last-child { border-bottom: 0; }
.stop-reason-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.stop-reason-head strong { font-size: 11px; }
.stop-reason-head b { font-size: 15px; }
.reason-category { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 999px; font: 500 7px 'IBM Plex Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.reason-category.category-risk { color: #822c21; background: rgba(190,68,54,.14); }
.reason-category.category-regime { color: #7c4a00; background: rgba(233,138,25,.17); }
.reason-category.category-exchange { color: #fff; background: var(--ink); }
.reason-category.category-manual { color: #075e59; background: rgba(8,127,117,.13); }
.reason-category.category-system { color: #345368; background: rgba(73,124,157,.14); }
.reason-category.category-unknown, .reason-category.category-other { color: var(--muted); background: var(--paper-deep); }
.reason-bar-track { height: 7px; margin: 10px 0 7px; overflow: hidden; border-radius: 999px; background: var(--paper-deep); }
.reason-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--muted); }
.reason-bar-track i.category-risk { background: var(--red); }
.reason-bar-track i.category-regime { background: var(--coral); }
.reason-bar-track i.category-exchange { background: var(--ink); }
.reason-bar-track i.category-manual { background: var(--teal); }
.reason-bar-track i.category-system { background: #497c9d; }
.stop-reason-row > small { color: var(--muted); font: 8px 'IBM Plex Mono', monospace; }
.state-overview { min-height: 305px; padding: 28px 25px; }
.state-strip { height: 18px; display: flex; overflow: hidden; border-radius: 999px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--line); }
.state-strip i { display: block; min-width: 2px; height: 100%; }
.state-running { background: #92b53b; }
.state-starting { background: #e8b537; }
.state-draining { background: var(--coral); }
.state-stopping { background: var(--red); }
.state-manual_intervention { background: #8b3f77; }
.state-stopped { background: #858174; }
.state-list { margin-top: 25px; display: grid; gap: 4px; }
.state-list-row { min-height: 38px; display: grid; grid-template-columns: 9px 1fr auto 48px; align-items: center; gap: 10px; border-bottom: 1px solid rgba(37,36,25,.07); }
.state-list-row > i { width: 8px; height: 8px; border-radius: 50%; }
.state-list-row span { font-size: 10px; }
.state-list-row strong { font-size: 13px; }
.state-list-row small { color: var(--muted); text-align: right; font: 8px 'IBM Plex Mono', monospace; }
.statistics-history-panel { margin-top: 14px; }
.statistics-history-header { min-height: 112px; padding: 22px 25px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.statistics-history-header .eyebrow { margin-bottom: 6px; }
.statistics-toolbar { display: grid; grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(135px, 1fr)); gap: 8px; }
.statistics-toolbar label > span { display: block; margin-bottom: 5px; color: var(--muted); font: 8px 'IBM Plex Mono', monospace; text-transform: uppercase; }
.statistics-toolbar input, .statistics-toolbar select { min-height: 39px; padding: 8px 10px; font-size: 10px; }
.statistics-table-meta { min-height: 43px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 9px 'IBM Plex Mono', monospace; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.28); }
.statistics-table-wrap { max-height: 720px; overflow: auto; }
.statistics-table { min-width: 1320px; }
.statistics-table thead { position: sticky; top: 0; z-index: 2; background: #f6f1e5; box-shadow: 0 1px 0 var(--line); }
.statistics-table tbody tr { cursor: default; }
.statistics-table td { vertical-align: top; white-space: normal; }
.statistics-table td:nth-child(1) { width: 170px; }
.statistics-table td:nth-child(7) { width: 300px; }
.statistics-bot-cell strong, .statistics-bot-cell small, .statistics-bot-cell em { display: block; }
.statistics-bot-cell strong { font-size: 13px; }
.statistics-bot-cell small { margin-top: 4px; color: var(--muted); font: 8px 'IBM Plex Mono', monospace; }
.statistics-bot-cell em { width: fit-content; margin-top: 8px; padding: 3px 6px; border-radius: 5px; color: var(--teal-dark); background: rgba(233,138,25,.1); font: normal 7px 'IBM Plex Mono', monospace; }
.statistics-bot-cell em.cohort-badge, .statistics-bot-cell em.version-badge { margin-top: 4px; color: #fff; background: var(--teal-dark); }
.statistics-bot-cell em.version-badge { color: var(--ink); background: var(--lime); box-shadow: 2px 2px 0 var(--ink); }
.bot-state-pill { display: inline-flex; padding: 6px 8px; border-radius: 999px; color: #fff; font: 500 8px 'IBM Plex Mono', monospace; text-transform: uppercase; }
.bot-state-pill.state-running { color: #2f4312; background: rgba(146,181,59,.32); }
.bot-state-pill.state-starting { color: #664700; background: rgba(232,181,55,.3); }
.bot-state-pill.state-draining { background: var(--coral); }
.bot-state-pill.state-stopping { background: var(--red); }
.bot-state-pill.state-manual_intervention { background: #8b3f77; }
.bot-state-pill.state-stopped { background: #858174; }
.table-subline { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.statistics-cycles-cell { min-width: 225px; }
.open-line-stat { display: block; width: fit-content; margin-top: 7px; padding: 4px 7px; border-radius: 6px; font: 8px 'IBM Plex Mono', monospace; }
.open-line-stat b { margin-right: 3px; font-weight: 600; }
.open-line-buy { color: #075e59; background: rgba(8,127,117,.11); }
.open-line-sell { color: #8a3d30; background: rgba(237,107,79,.12); }
.open-line-empty { color: var(--muted); background: var(--paper-deep); }
.table-stop-reason { min-width: 250px; display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; align-items: center; }
.table-stop-reason strong { font-size: 10px; }
.table-stop-reason code { grid-column: 1 / -1; width: fit-content; padding: 3px 5px; border-radius: 4px; color: var(--muted); background: var(--paper-deep); font: 8px 'IBM Plex Mono', monospace; }
.table-stop-reason small { grid-column: 1 / -1; max-width: 285px; overflow: hidden; color: var(--red); font-size: 8px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.reason-none { color: var(--muted); }
.statistics-footnote { margin: 0; padding: 15px 24px; color: var(--muted); font-size: 9px; line-height: 1.55; border-top: 1px solid var(--line); }

.version-page-shell { margin-bottom: 76px; }
.version-hero { min-height: 390px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; gap: 16px; padding: 34px 0 18px; }
.version-hero-copy { position: relative; min-height: 338px; padding: 55px 4vw; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(125deg, rgba(255,255,255,.66), rgba(217,239,139,.42)); box-shadow: var(--shadow); }
.version-hero-copy::after { content: 'V1  /  V2  /  V3  /  V4'; position: absolute; right: -22px; bottom: 15px; color: rgba(16,42,43,.075); font: 700 clamp(42px, 6.5vw, 94px) 'IBM Plex Mono', monospace; letter-spacing: -.09em; white-space: nowrap; transform: rotate(-4deg); }
.version-hero-copy h1 { position: relative; z-index: 1; max-width: 850px; }
.version-hero-copy > p:last-child { position: relative; z-index: 1; max-width: 710px; margin: 25px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.version-period-card { position: relative; padding: 30px; overflow: hidden; border-radius: 26px; color: #fff; background: var(--ink); box-shadow: var(--shadow); }
.version-period-card::after { content: ''; position: absolute; width: 180px; height: 180px; right: -85px; bottom: -85px; border: 1px solid rgba(217,239,139,.34); border-radius: 50%; box-shadow: 0 0 0 34px rgba(217,239,139,.06), 0 0 0 68px rgba(217,239,139,.035); }
.version-period-card > span, .version-period-card time { position: relative; z-index: 1; display: block; color: rgba(255,255,255,.5); font: 9px 'IBM Plex Mono', monospace; }
.version-period-card select { position: relative; z-index: 1; margin-top: 13px; color: var(--ink); background: var(--lime); border-color: transparent; }
.version-period-count { position: relative; z-index: 1; margin-top: 65px; }
.version-period-count strong { display: block; font-size: 64px; line-height: .9; letter-spacing: -.07em; }
.version-period-count small { display: block; margin-top: 10px; color: rgba(255,255,255,.55); font-size: 9px; }
.version-period-card time { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 27px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.13); }
.version-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.version-kpi-grid article { min-height: 132px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.48); }
.version-kpi-grid article > span, .version-kpi-grid article > small { display: block; color: var(--muted); font-size: 8px; line-height: 1.45; }
.version-kpi-grid article > span { font: 500 8px 'IBM Plex Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.version-kpi-grid article > strong { display: block; margin: 13px 0 8px; font-size: clamp(20px, 2vw, 31px); line-height: 1; letter-spacing: -.045em; }
.version-kpi-grid .version-kpi-observed { color: #fff; background: linear-gradient(145deg, var(--teal-dark), var(--ink)); }
.version-kpi-grid .version-kpi-observed > span, .version-kpi-grid .version-kpi-observed > small { color: rgba(255,255,255,.56); }
.version-kpi-grid .version-kpi-observed .positive-value { color: var(--lime); }
.version-kpi-grid .version-kpi-observed .negative-value { color: #ff9a7f; }
.version-release-section { margin-top: 34px; }
.version-section-header { min-height: 96px; padding: 21px 25px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.version-section-header .eyebrow { margin-bottom: 6px; }
.version-section-header > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; text-align: right; }
.version-section-header > small { color: var(--muted); font: 8px 'IBM Plex Mono', monospace; }
.version-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.version-scorecard { position: relative; min-height: 405px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.52); box-shadow: 0 16px 45px rgba(37,36,25,.07); }
.version-scorecard::before { content: ''; position: absolute; width: 8px; top: 0; bottom: 0; left: 0; background: var(--coral); }
.version-scorecard.is-current { background: linear-gradient(140deg, rgba(217,239,139,.58), rgba(255,255,255,.62)); border-color: rgba(16,42,43,.32); }
.version-scorecard.is-current::before { background: var(--teal); }
.version-scorecard.no-data { opacity: .68; filter: saturate(.65); }
.version-scorecard > header { min-height: 92px; padding: 20px 22px 18px 29px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.version-score-label { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font: 700 15px 'IBM Plex Mono', monospace; box-shadow: 4px 4px 0 var(--lime); }
.version-scorecard > header div strong, .version-scorecard > header div small { display: block; }
.version-scorecard > header div strong { font-size: 14px; }
.version-scorecard > header div small { margin-top: 5px; color: var(--muted); font: 8px 'IBM Plex Mono', monospace; }
.version-scorecard > header em { padding: 5px 7px; border-radius: 5px; color: #fff; background: var(--teal-dark); font: normal 7px 'IBM Plex Mono', monospace; letter-spacing: .06em; }
.version-score-main { padding: 24px 28px 20px; }
.version-score-main > span, .version-score-main > small { display: block; color: var(--muted); font-size: 9px; }
.version-score-main > strong { display: block; margin: 8px 0 7px; font-size: clamp(27px, 3vw, 42px); line-height: 1; letter-spacing: -.055em; }
.version-score-metrics { padding: 0 28px 21px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.version-score-metrics > div { min-height: 79px; padding: 11px; border: 1px solid rgba(37,36,25,.09); border-radius: 11px; background: rgba(255,255,255,.36); }
.version-score-metrics span, .version-score-metrics small { display: block; color: var(--muted); font-size: 7px; }
.version-score-metrics strong { display: block; margin: 7px 0 5px; font-size: 15px; }
.version-outcome-track { height: 6px; margin: 0 28px; display: flex; overflow: hidden; border-radius: 999px; background: var(--paper-deep); }
.version-outcome-track i { display: block; height: 100%; }
.version-outcome-track .wins { background: var(--teal); }
.version-outcome-track .losses { background: var(--red); }
.version-scorecard > footer { padding: 17px 28px 23px; display: flex; flex-wrap: wrap; gap: 5px; }
.version-scorecard > footer span { padding: 4px 6px; border-radius: 5px; color: var(--muted); background: rgba(16,42,43,.055); font: 7px 'IBM Plex Mono', monospace; }
.version-comparison-panel { margin-top: 14px; }
.version-quality-panel { margin-top: 14px; }
.version-quality-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding: 18px 24px 24px; }
.quality-tier-card { min-height: 190px; padding: 17px; border: 1px solid rgba(16,42,43,.18); border-radius: 15px; background: linear-gradient(145deg, rgba(217,239,139,.34), rgba(255,255,255,.56)); }
.quality-tier-card.no-data { opacity: .58; background: rgba(255,255,255,.38); }
.quality-tier-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quality-tier-card header span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-dark); font: 700 12px 'IBM Plex Mono', monospace; }
.quality-tier-card header small, .quality-tier-card footer span { color: var(--muted); font: 7px 'IBM Plex Mono', monospace; }
.quality-tier-card > strong { display: block; margin: 20px 0 12px; font-size: 17px; }
.quality-tier-card > div { display: flex; flex-wrap: wrap; gap: 5px; }
.quality-tier-card > div span { padding: 4px 6px; border-radius: 5px; background: rgba(16,42,43,.06); font-size: 7px; }
.quality-tier-card footer { display: grid; gap: 5px; margin-top: 17px; padding-top: 12px; border-top: 1px solid rgba(37,36,25,.09); }
.version-cycle-band-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 24px; padding: 18px 0 10px; border-top: 1px solid var(--line); }
.version-cycle-band-head strong { font-size: 11px; }
.version-cycle-band-head small { color: var(--muted); font: 8px 'IBM Plex Mono', monospace; text-align: right; }
.version-cycle-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 24px 24px; }
.cycle-band-card { min-height: 125px; padding: 16px; border-left: 4px solid var(--teal); border-radius: 10px; background: rgba(16,42,43,.045); }
.cycle-band-card.no-data { opacity: .55; border-left-color: var(--line-strong); }
.cycle-band-card > span, .cycle-band-card > small, .cycle-band-card footer { display: block; color: var(--muted); font-size: 8px; }
.cycle-band-card > strong { display: block; margin: 13px 0 8px; font-size: 17px; }
.cycle-band-card footer { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; }
.version-live-mark { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 8px 'IBM Plex Mono', monospace; }
.version-live-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(8,127,117,.1); animation: pulse 1.8s ease infinite; }
.version-table-wrap { max-height: 640px; overflow: auto; }
.version-table { min-width: 1270px; }
.version-table thead { position: sticky; top: 0; z-index: 2; background: #f6f1e5; box-shadow: 0 1px 0 var(--line); }
.version-table tbody tr { cursor: default; }
.version-table td { min-width: 140px; vertical-align: top; white-space: normal; }
.version-table td:first-child { min-width: 250px; }
.version-table td:last-child { min-width: 190px; }
.version-table td > strong, .version-table td > small { display: block; }
.version-table td > strong { font-size: 10px; }
.version-table td > small { margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.version-table-label { float: left; margin-right: 10px; padding: 6px 8px; border-radius: 7px; color: #fff; background: var(--ink); font: 700 9px 'IBM Plex Mono', monospace; }
.version-table .current-version-row { background: rgba(217,239,139,.16); }
.version-table .empty-version-row { opacity: .55; }
.version-insight-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 14px; margin-top: 14px; }
.version-calibration, .version-stop-reasons { min-height: 280px; padding: 12px 24px 24px; }
.calibration-row { min-height: 115px; display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid rgba(37,36,25,.08); }
.calibration-row:last-child { border-bottom: 0; }
.calibration-row > div { min-width: 0; padding: 10px; }
.calibration-row span, .calibration-row small { display: block; color: var(--muted); font-size: 8px; line-height: 1.4; }
.calibration-row strong { display: block; margin-top: 7px; font-size: 13px; }
.calibration-version span { width: fit-content; padding: 4px 6px; border-radius: 5px; color: #fff; background: var(--teal-dark); font: 700 8px 'IBM Plex Mono', monospace; }
.calibration-version strong { font-size: 11px; }
.calibration-gap { border-left: 2px solid var(--coral); background: rgba(237,107,79,.045); }
.calibration-gap small { margin-top: 6px; }
.version-stop-reasons { display: grid; align-content: start; gap: 8px; }
.version-stop-reasons > section { padding: 14px 0; border-bottom: 1px solid rgba(37,36,25,.08); }
.version-stop-reasons > section:last-child { border-bottom: 0; }
.version-stop-reasons section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.version-stop-reasons section > header span { padding: 4px 6px; border-radius: 5px; color: #fff; background: var(--ink); font: 700 8px 'IBM Plex Mono', monospace; }
.version-stop-reasons section > header small { color: var(--muted); font-size: 8px; }
.version-stop-row { min-height: 27px; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(70px, .8fr) 24px; align-items: center; gap: 8px; }
.version-stop-row > span { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.version-stop-row > i { height: 5px; overflow: hidden; border-radius: 999px; background: var(--paper-deep); }
.version-stop-row > i b { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.version-stop-row > strong { font-size: 9px; text-align: right; }
.version-no-stops { margin: 0; color: var(--muted); font-size: 8px; }
.version-timeline-panel { margin-top: 14px; }
.version-timeline { position: relative; padding: 30px 28px 35px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; }
.version-timeline::before { content: ''; position: absolute; top: 61px; right: 7%; left: 7%; height: 1px; background: var(--line-strong); }
.version-timeline > article { position: relative; min-width: 0; padding: 0 15px; }
.version-timeline-marker { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.version-timeline-marker span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); background: var(--paper); font: 700 10px 'IBM Plex Mono', monospace; }
.version-timeline article.is-current .version-timeline-marker span { color: #fff; background: var(--teal-dark); border-color: var(--teal-dark); box-shadow: 0 0 0 6px rgba(217,239,139,.75); }
.version-timeline-marker i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.version-timeline-content { padding-top: 21px; }
.version-timeline-content time { color: var(--muted); font: 8px 'IBM Plex Mono', monospace; }
.version-timeline-content h3 { min-height: 34px; margin: 8px 0 11px; font-size: 12px; line-height: 1.35; }
.version-timeline-content ul { margin: 0; padding-left: 14px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.version-timeline-content li + li { margin-top: 5px; }
.version-timeline-content > small { display: block; margin-top: 15px; padding-top: 10px; color: var(--teal-dark); font: 8px 'IBM Plex Mono', monospace; border-top: 1px solid rgba(37,36,25,.08); }

.login-page { display: grid; place-items: center; padding: 24px; background: var(--ink); }
.login-shell { width: min(1040px, 100%); min-height: 620px; display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; border-radius: 28px; background: var(--paper); box-shadow: 0 35px 90px rgba(0,0,0,.3); }
.login-story { position: relative; padding: 58px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: linear-gradient(150deg, #d9ef8b, var(--lime)); }
.login-story::after { content: ''; position: absolute; width: 410px; height: 410px; right: -170px; bottom: -190px; border: 1px solid rgba(16,42,43,.25); border-radius: 50%; box-shadow: 0 0 0 55px rgba(16,42,43,.04), 0 0 0 110px rgba(16,42,43,.03); }
.login-story .brand-mark { margin-bottom: 80px; }
.login-story h1 { font-size: clamp(42px, 5vw, 66px); }
.login-story > p:not(.eyebrow) { max-width: 470px; margin-top: 28px; line-height: 1.65; font-size: 14px; }
.story-meter { display: flex; gap: 6px; margin-top: 55px; align-items: end; }
.story-meter span { width: 34px; background: var(--ink); opacity: .7; }
.story-meter span:nth-child(1) { height: 5px; }.story-meter span:nth-child(2) { height: 13px; }.story-meter span:nth-child(3) { height: 8px; }.story-meter span:nth-child(4) { height: 21px; background: var(--coral); }.story-meter span:nth-child(5) { height: 11px; }
.login-card { padding: 55px 48px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.login-card h2 { font-size: 28px; }
.login-card .muted { margin: 8px 0 0; font-size: 12px; line-height: 1.6; }
.stack-form { display: grid; gap: 16px; }
.stack-form label span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; }
.security-note { margin: 0; color: var(--muted); font-size: 9px; text-align: center; }

.reveal { animation: reveal .55s ease both; }
.reveal-delay { animation-delay: .08s; }
.reveal-delay-two { animation-delay: .16s; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .5; } }

@media (max-width: 1020px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .workspace-grid, .lower-grid { grid-template-columns: 1fr; }
  .validation-summary { grid-template-columns: repeat(2, 1fr); }
  .detail-panel, .empty-detail { min-height: 420px; }
  .login-shell { grid-template-columns: 1fr 1fr; }
  .login-story, .login-card { padding: 40px; }
  .calculator-layout { grid-template-columns: 1fr; }
  .calculator-input-panel { align-self: stretch; }
  .calculator-form-grid { grid-template-columns: repeat(4, 1fr); }
  .grid-line-plan { grid-template-columns: 1fr 1fr; }
  .target-recommendation-metrics { grid-template-columns: 1fr 1fr; }
  .statistics-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .statistics-analysis-grid { grid-template-columns: 1fr; }
  .statistics-history-header { align-items: flex-start; flex-direction: column; }
  .statistics-toolbar { width: 100%; }
  .liquidity-overview { grid-template-columns: repeat(2, 1fr); }
  .liquidity-meter { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .topbar, .page-shell { width: min(100% - 24px, 1440px); }
  .topbar { height: 74px; }
  .brand small, .environment-badge, #settings-open { display: none; }
  .top-actions { gap: 6px; }
  .exchange-switch a { padding: 6px 8px; }
  .button { min-height: 39px; padding: 0 13px; }
  .hero-panel { min-height: 260px; padding: 28px 5px; }
  .scanner-orbit { width: 120px; height: 120px; flex: 0 0 120px; }
  h1 { font-size: clamp(35px, 10vw, 52px); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 112px; padding: 17px; }
  .stat-card strong { font-size: 25px; }
  .bot-row { grid-template-columns: 1fr auto; }
  .bot-actions { grid-column: 1 / -1; justify-content: flex-end; }
  th, td { padding: 14px; }
  fieldset { grid-template-columns: 1fr 1fr; }
  .target-recommendation-header, .target-recommendation-footer { align-items: flex-start; flex-direction: column; }
  .target-recommendation-hero, .target-type-comparison { grid-template-columns: 1fr; }
  .target-recommendation-metrics { grid-template-columns: 1fr 1fr; }
  .target-apply-button { width: 100%; }
  .target-recommendation-unavailable { grid-template-columns: 1fr; }
  .login-page { padding: 0; }
  .login-shell { min-height: 100vh; grid-template-columns: 1fr; border-radius: 0; }
  .login-story { min-height: 330px; padding: 32px; }
  .login-story .brand-mark { margin-bottom: 35px; }
  .login-story > p:not(.eyebrow), .story-meter { display: none; }
  .login-card { padding: 38px 28px; }
  .calculator-hero { min-height: 330px; padding: 34px 5px; align-items: flex-end; }
  .calculator-pair-card { width: 42vw; padding: 18px; }
  .calculator-form-grid { grid-template-columns: 1fr 1fr; }
  .calculator-summary-grid { grid-template-columns: 1fr 1fr; }
  .history-kpis { grid-template-columns: 1fr 1fr; }
  .contract-model-grid { grid-template-columns: 1fr 1fr; }
  .calculator-verdict { grid-template-columns: 1fr; }
  .calculator-verdict > strong { grid-row: auto; }
  .grid-map-footer { flex-wrap: wrap; }
  .statistics-nav-link { display: none; }
  .page-switch a { padding: 7px 8px; font-size: 8px; }
  .statistics-hero { min-height: 0; padding: 36px 5px; align-items: flex-end; }
  .statistics-hero h1 { font-size: clamp(34px, 9vw, 50px); }
  .statistics-period-card { width: 220px; flex-basis: 220px; padding: 18px; }
  .statistics-kpi-grid { grid-template-columns: 1fr 1fr; }
  .statistics-toolbar { grid-template-columns: 1fr 1fr; }
  .statistics-toolbar label:first-child { grid-column: 1 / -1; }
  .liquidity-exclusions-toolbar { align-items: flex-start; flex-direction: column; }
  .liquidity-exclusions-toolbar input { max-width: none; }
}
@media (max-width: 470px) {
  .topbar .brand-mark { display: none; }
  .hero-panel { align-items: flex-end; }
  .scanner-orbit { width: 94px; height: 94px; flex-basis: 94px; }
  .scanner-orbit::before, .orbit-dot, .scanner-orbit small { display: none; }
  .stat-grid { gap: 8px; }
  .workspace-grid, .lower-grid { gap: 8px; margin-top: 8px; }
  .validation-row { grid-template-columns: 1fr 1fr; }
  .validation-row span { text-align: left; }
  .panel-header { padding: 20px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); margin: 15px 18px; }
  .detail-head, .decision-block { margin-left: 0; margin-right: 0; padding-left: 18px; padding-right: 18px; }
  .chart-shell { margin: 0 18px; }
  fieldset { grid-template-columns: 1fr; padding: 14px; }
  .settings-form { padding: 19px; }
  .calculator-hero { display: block; min-height: 0; }
  .calculator-pair-card { width: 100%; margin-top: 28px; }
  .calculator-form-grid, .calculator-summary-grid { grid-template-columns: 1fr; }
  .history-header, .history-risk { align-items: flex-start; flex-direction: column; }
  .history-period, .history-risk span { text-align: left; }
  .history-hero { grid-template-columns: 1fr; }
  .history-cycle-total { padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
  .history-kpis { grid-template-columns: 1fr; }
  .contract-model-grid { grid-template-columns: 1fr; }
  .history-unavailable { grid-template-columns: 1fr; }
  .history-unavailable > small { grid-column: auto; }
  .calculator-results, .calculator-form { padding: 18px; }
  .grid-map-header { align-items: flex-start; }
  .grid-map-counts { flex-direction: column; }
  .grid-line-plan { grid-template-columns: 1fr; }
  .statistics-hero { display: block; }
  .statistics-period-card { width: 100%; margin-top: 26px; }
  .statistics-kpi-grid { gap: 8px; }
  .statistics-kpi { min-height: 130px; padding: 16px; }
  .statistics-toolbar { grid-template-columns: 1fr; }
  .statistics-toolbar label:first-child { grid-column: auto; }
  .statistics-history-header { padding: 20px; }
  .statistics-table-meta { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; }
  .liquidity-panel-header { align-items: flex-start; gap: 12px; }
  .liquidity-overview { grid-template-columns: 1fr 1fr; padding: 16px; }
  .liquidity-overview > div:not(.liquidity-meter) { padding: 10px; }
  .liquidity-excluded-row { grid-template-columns: 1fr auto; padding: 11px 16px; }
  .liquidity-excluded-row small { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 1020px) {
  .version-hero { grid-template-columns: minmax(0, 1fr) 280px; }
  .version-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .version-insight-grid { grid-template-columns: 1fr; }
  .version-quality-tiers { grid-template-columns: repeat(3, 1fr); }
  .version-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .version-timeline::before { display: none; }
}

@media (max-width: 720px) {
  .version-hero { grid-template-columns: 1fr; padding-top: 20px; }
  .version-hero-copy { min-height: 320px; padding: 38px 28px; }
  .version-period-card { min-height: 240px; }
  .version-period-count { margin-top: 38px; }
  .version-card-grid { grid-template-columns: 1fr; }
  .version-quality-tiers { grid-template-columns: 1fr 1fr; }
  .version-cycle-bands { grid-template-columns: 1fr; }
  .version-cycle-band-head { align-items: flex-start; flex-direction: column; }
  .version-cycle-band-head small { text-align: left; }
  .version-score-metrics { grid-template-columns: repeat(2, 1fr); }
  .version-section-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .version-section-header > p { text-align: left; }
  .calibration-row { grid-template-columns: repeat(2, 1fr); }
  .calibration-version { grid-column: 1 / -1; }
  .version-timeline { grid-template-columns: 1fr; }
}

@media (max-width: 470px) {
  .version-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .version-quality-tiers { grid-template-columns: 1fr; padding: 14px; }
  .version-kpi-grid article { min-height: 124px; padding: 16px; }
  .version-hero-copy { min-height: 350px; padding: 32px 22px; }
  .version-hero-copy::after { bottom: 22px; font-size: 42px; }
  .version-period-card { padding: 23px; }
  .version-period-card time { right: 23px; left: 23px; }
  .version-scorecard > header { grid-template-columns: auto 1fr; padding-left: 24px; }
  .version-scorecard > header em { grid-column: 1 / -1; }
  .version-score-main, .version-score-metrics { padding-right: 20px; padding-left: 20px; }
  .version-outcome-track { margin-right: 20px; margin-left: 20px; }
  .version-scorecard > footer { padding-right: 20px; padding-left: 20px; }
  .calibration-row { grid-template-columns: 1fr; }
  .calibration-version { grid-column: auto; }
  .version-timeline { padding-right: 16px; padding-left: 16px; }
}