:root {
  --ink: #111b2d;
  --ink-2: #1b2940;
  --paper: #f4f2ec;
  --paper-2: #fbfaf7;
  --line: #dfe1de;
  --muted: #7a8491;
  --muted-dark: #a6b0bf;
  --mint: #a8e7cf;
  --mint-deep: #318c6f;
  --coral: #ff806e;
  --yellow: #ffd477;
  --blue: #759dff;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Avenir Next', Inter, var(--sans);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; transform: none !important; }
.hidden { display: none !important; }

.auth-screen { min-height: 100vh; display: grid; place-items: center; overflow: hidden; position: relative; background: var(--ink); color: #fff; }
.login-card { width: min(430px, calc(100vw - 42px)); position: relative; z-index: 2; padding: 42px 42px 34px; border: 1px solid rgba(255,255,255,.14); background: rgba(20, 32, 53, .82); box-shadow: 0 30px 100px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.brand-lockup { display: flex; align-items: center; gap: 10px; font: 600 14px var(--display); letter-spacing: .16em; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--ink); font: 700 16px var(--display); letter-spacing: 0; }
.eyebrow { color: var(--muted); font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.login-card .eyebrow { margin-top: 54px; color: var(--mint); }
.login-card h1 { margin: 16px 0 14px; font: 600 clamp(38px, 7vw, 54px)/1.02 var(--display); letter-spacing: -.06em; }
.login-card h1 em { color: var(--mint); font-style: normal; }
.login-copy { max-width: 330px; margin: 0 0 34px; color: var(--muted-dark); font-size: 14px; line-height: 1.8; }
.login-form { display: grid; gap: 16px; }
.login-form label { display: grid; gap: 8px; color: #dce4ee; font: 500 11px var(--mono); letter-spacing: .06em; }
.login-form input { width: 100%; border: 1px solid rgba(255,255,255,.16); outline: 0; padding: 13px 14px; background: rgba(255,255,255,.06); color: #fff; font: 14px var(--sans); transition: .2s border, .2s background; }
.login-form input:focus { border-color: var(--mint); background: rgba(168,231,207,.08); }
.login-form input::placeholder { color: #778499; }
.primary-button { border: 0; padding: 14px 16px; background: var(--mint); color: var(--ink); text-align: left; font-weight: 700; transition: transform .2s, background .2s; }
.primary-button span { float: right; font-size: 18px; }
.primary-button:hover { background: #c8f5e3; transform: translateY(-2px); }
.form-error { min-height: 18px; margin: 0; color: var(--coral); font-size: 12px; }
.login-footnote { margin-top: 35px; color: #7f8da2; font: 10px var(--mono); letter-spacing: .06em; }
.status-dot, .pulse-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(168,231,207,.1); }
.auth-side-note { position: absolute; right: 40px; bottom: 32px; color: #607087; font: 10px var(--mono); letter-spacing: .12em; }
.auth-orbit { position: absolute; border: 1px solid rgba(168,231,207,.12); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 70vw; height: 70vw; left: -32vw; top: -22vw; }
.orbit-two { width: 45vw; height: 45vw; right: -16vw; bottom: -16vw; border-color: rgba(255,128,110,.14); }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 242px; flex: 0 0 242px; display: flex; flex-direction: column; padding: 28px 18px 18px; background: var(--ink); color: #fff; }
.sidebar-brand { padding: 0 12px; }
.system-label { margin: 30px 12px 0; color: #8190a3; font: 10px var(--mono); letter-spacing: .08em; }
.system-label .status-dot { width: 6px; height: 6px; margin-right: 7px; }
.main-nav { display: grid; gap: 4px; margin-top: 52px; }
.nav-item { display: flex; align-items: center; gap: 17px; border: 0; padding: 14px 12px; background: transparent; color: #91a0b3; text-align: left; font-size: 14px; transition: .2s color, .2s background; }
.nav-number { width: 21px; color: #5f6d80; font: 10px var(--mono); }
.nav-item:hover, .nav-item.active { background: #1b2a43; color: #fff; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--mint); }
.nav-item.active .nav-number { color: var(--mint); }
.sidebar-bottom { margin-top: auto; }
.read-only-card { display: flex; gap: 10px; align-items: center; margin: 0 4px 20px; padding: 13px 11px; background: #18273e; }
.lock-symbol { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #4d617b; border-radius: 50%; color: var(--mint); }
.read-only-card strong, .read-only-card small { display: block; }
.read-only-card strong { color: #d8e0ea; font-size: 11px; }
.read-only-card small { margin-top: 4px; color: #76869b; font-size: 10px; }
.logout-button { width: 100%; border: 1px solid #35455d; padding: 11px 12px; background: transparent; color: #9aa8ba; text-align: left; font-size: 12px; }
.logout-button span { float: right; font-size: 17px; }
.logout-button:hover { border-color: var(--coral); color: #fff; }

.main-content { min-width: 0; flex: 1; padding: 33px clamp(24px, 4vw, 64px) 28px; }
.topbar, .page-intro, .panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.topbar { align-items: center; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.topbar h2, .page-intro h3, .panel-heading h3 { margin: 7px 0 0; font-family: var(--display); letter-spacing: -.045em; }
.topbar h2 { font-size: 27px; }
.topbar-actions { display: flex; align-items: center; gap: 22px; }
.refresh-meta { color: var(--muted); font: 10px var(--mono); }
.pulse-dot { background: var(--mint-deep); box-shadow: 0 0 0 4px rgba(49,140,111,.12); }
.user-chip { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.user-chip span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 600 12px var(--display); }
.page { display: none; padding-top: 30px; }
.page.active-page { display: block; }
.hero-strip { display: flex; min-height: 198px; align-items: center; justify-content: space-between; overflow: hidden; margin-bottom: 22px; padding: 32px 38px; position: relative; background: var(--ink-2); color: #fff; }
.hero-strip::after { content: ''; position: absolute; width: 420px; height: 420px; right: 10%; top: -160px; border: 1px solid rgba(168,231,207,.14); border-radius: 50%; }
.accent-eyebrow { color: var(--mint); }
.hero-strip h3 { position: relative; z-index: 1; margin: 12px 0 9px; font: 500 clamp(25px, 3vw, 35px)/1.12 var(--display); letter-spacing: -.05em; }
.hero-strip h3 span { color: var(--mint); }
.hero-strip p { position: relative; z-index: 1; margin: 0; color: #98a7b9; font: 10px var(--mono); letter-spacing: .05em; }
.hero-orbit { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-right: 4%; color: #d8e6f3; font: 11px var(--mono); }
.hero-orbit span { padding: 8px 10px; border: 1px solid #52708c; }
.hero-orbit b { color: var(--mint); font-size: 16px; font-weight: 400; }
.hero-orbit i { color: #6e8098; font-style: normal; font-size: 17px; }
.hero-orbit strong { color: var(--yellow); font: 500 20px var(--display); }
.metric-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 22px; }
.metric-card { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid var(--line); background: var(--paper-2); }
.metric-card-dark { border-color: var(--ink); background: var(--ink); color: #fff; }
.metric-card-accent { border-color: #c9e9dc; background: #e4f6ef; }
.metric-label { color: var(--muted); font: 10px var(--mono); letter-spacing: .05em; }
.metric-card-dark .metric-label { color: #99a9bc; }
.metric-card strong { margin-top: 18px; font: 600 30px var(--display); letter-spacing: -.06em; }
.metric-card small { color: var(--muted); font-size: 10px; }
.metric-card-dark small { color: #8c9bb0; }
.metric-card-accent strong { color: var(--mint-deep); }
.content-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.two-thirds { grid-template-columns: minmax(0, 1.95fr) minmax(270px, 1fr); }
.three-equal { grid-template-columns: repeat(3, 1fr); }
.panel, .mini-panel { border: 1px solid var(--line); background: var(--paper-2); }
.panel { padding: 20px 21px 10px; }
.panel-heading { align-items: flex-start; padding-bottom: 18px; }
.panel-heading h3 { font-size: 19px; }
.text-button, .outline-button { border: 0; background: transparent; color: var(--mint-deep); font: 11px var(--mono); }
.text-button:hover { color: var(--ink); }
.panel-unit, .data-note { color: var(--muted); font: 10px var(--mono); letter-spacing: .05em; }
.table-wrap { width: 100%; overflow-x: auto; }
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 4px; color: var(--muted); font: 10px var(--mono); }
.table-pagination-actions { display: flex; gap: 6px; }
.table-pagination button { border: 1px solid var(--line); padding: 7px 9px; background: #fff; color: var(--ink-2); font: 10px var(--mono); }
.table-pagination button:hover:not(:disabled) { border-color: var(--mint-deep); color: var(--mint-deep); }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 0 9px 12px; color: var(--muted); text-align: left; font: 10px var(--mono); font-weight: 400; letter-spacing: .05em; }
td { padding: 13px 9px; border-top: 1px solid #ebebe7; color: var(--ink-2); font-size: 12px; }
td.market-name { min-width: 260px; max-width: 620px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.market-link { color: inherit; text-decoration: underline; text-decoration-color: #b8c9c2; text-underline-offset: 3px; }
.market-link:hover { color: var(--mint-deep); text-decoration-color: currentColor; }
tbody tr:hover { background: #f3f5f1; }
.mono { font-family: var(--mono); font-size: 11px; }
.green { color: var(--mint-deep); }
.orange { color: #c26a2f; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; font: 10px var(--mono); }
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-open { background: #e1f6ed; color: var(--mint-deep); }
.pill-updated { background: #fff2d4; color: #b87920; }
.pill-closed { background: #eceeec; color: #7e8987; }
.pill-filled { background: #e1f6ed; color: var(--mint-deep); }
.pill-partial_filled, .pill-partial { background: #fff2d4; color: #b87920; }
.pill-cancelled, .pill-failed { background: #ffe7e2; color: #b84f40; }
.pill-theory { background: #e9f0ff; color: #496ca8; }
.pill-pending { background: #fff2d4; color: #9a731d; }
.pill-no_fill { background: #ffe7e2; color: #b84f40; }
.pill-not_executable { background: #ffe7e2; color: #b84f40; }
.pill-buy_up { background: #e1f6ed; color: var(--mint-deep); }
.pill-buy_down { background: #ffe7e2; color: #b84f40; }
.pill-hold { background: #eceeec; color: #7e8987; }
.hedge-tag { display: inline-block; margin-left: 6px; padding: 3px 5px; background: #fff2d4; color: #a66a13; font: 8px var(--mono); }
.empty-cell { padding: 28px 9px; color: var(--muted); text-align: center; font-size: 12px; }
.bar-list { display: grid; gap: 17px; padding: 7px 0 12px; }
.bar-row { display: grid; gap: 7px; }
.bar-meta { display: flex; justify-content: space-between; color: var(--ink-2); font: 11px var(--mono); }
.bar-track { height: 6px; overflow: hidden; background: #e5e8e4; }
.bar-fill { height: 100%; min-width: 3px; background: var(--coral); }
.bar-row:nth-child(2n) .bar-fill { background: var(--blue); }
.bar-row:nth-child(3n) .bar-fill { background: var(--yellow); }
.mini-panel { min-height: 114px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; }
.mini-panel strong { margin-top: 10px; font: 500 24px var(--display); letter-spacing: -.05em; }
.mini-panel > span:last-child { color: var(--muted); font-size: 11px; }
.page-intro { align-items: center; margin-bottom: 22px; }
.page-intro h3 { font-size: 30px; }
.strategy-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.strategy-control { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 10px; border: 1px solid var(--line); background: var(--paper-2); }
.strategy-control-label { color: var(--muted); font: 10px var(--mono); white-space: nowrap; }
.strategy-control-label b { color: var(--ink-2); font-weight: 600; }
.strategy-control[data-control-state="RUNNING"] .strategy-control-label b { color: var(--mint-deep); }
.strategy-control[data-control-state="PAUSED"] .strategy-control-label b { color: #b87920; }
.strategy-control[data-control-state="STOPPED"] .strategy-control-label b { color: #b84f40; }
.strategy-control-buttons { display: flex; gap: 4px; }
.strategy-control-button { border: 1px solid var(--line); padding: 7px 9px; background: #fff; color: var(--ink-2); font: 10px var(--mono); cursor: pointer; }
.strategy-control-button:hover:not(:disabled) { border-color: var(--mint-deep); color: var(--mint-deep); }
.strategy-control-button.is-current { border-color: currentColor; background: #edf8f3; color: var(--mint-deep); }
.strategy-control-button[data-strategy-action="PAUSED"].is-current { background: #fff6e4; color: #b87920; }
.strategy-control-button[data-strategy-action="STOPPED"].is-current { background: #fff0ed; color: #b84f40; }
.strategy-control-button:disabled { cursor: default; opacity: .92; }
.compacted-summary-panel { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.compacted-summary-panel .table-wrap { max-height: 420px; }
.outline-button { border: 1px solid var(--line); padding: 10px 12px; color: var(--ink-2); }
.outline-button:hover { border-color: var(--mint-deep); color: var(--mint-deep); }
.crypto-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 25px 28px; background: var(--ink-2); color: #fff; }
.crypto-strip h3 { margin: 10px 0 7px; font: 500 24px var(--display); letter-spacing: -.04em; }
.crypto-strip h3 i { color: var(--mint); font-style: normal; }
.crypto-strip p { margin: 0; color: #98a7b9; font-size: 11px; }
.feed-status { display: grid; justify-items: end; gap: 8px; color: #91a0b3; font: 10px var(--mono); }
.feed-status b { color: var(--mint); font-weight: 500; }
.feed-status small { color: #91a0b3; font: 10px var(--mono); }
.crypto-metrics { grid-template-columns: repeat(5, 1fr); }
.leader-metrics { grid-template-columns: repeat(6, 1fr); }
.model-metrics { grid-template-columns: repeat(5, 1fr); }
.leader-analysis-metrics { grid-template-columns: repeat(6, 1fr); margin: 0; }
.ledger-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 10px; }
.ledger-card { padding: 16px; border: 1px solid var(--line); background: #fff; }
.ledger-card-accent { border-color: #c9e9dc; background: #f0faf5; }
.ledger-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.ledger-card-heading strong { font: 600 19px var(--display); letter-spacing: -.04em; }
.ledger-card-heading span { color: var(--muted); font: 10px var(--mono); }
.ledger-card-grid-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-top: 14px; }
.ledger-card-grid-inner div { display: grid; gap: 6px; }
.ledger-card-grid-inner small { color: var(--muted); font: 10px var(--mono); }
.ledger-card-grid-inner b { font: 600 17px var(--display); }
.ledger-order-section + .ledger-order-section { margin-top: 22px; }
.ledger-order-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 5px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.ledger-order-heading strong { font: 600 18px var(--display); letter-spacing: -.04em; }
.ledger-order-heading span { color: var(--muted); font: 10px var(--mono); }
.analysis-note { margin-top: 13px; padding: 11px 13px; border-left: 3px solid var(--mint-deep); background: #f0f7f3; line-height: 1.65; }
.table-note { display: block; max-width: 270px; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 400; white-space: normal; line-height: 1.4; }
.glossary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-bottom: 10px; }
.glossary-card { min-height: 118px; padding: 14px; border: 1px solid var(--line); background: #fff; }
.glossary-card > div { display: flex; align-items: baseline; gap: 8px; }
.glossary-card strong { color: var(--ink); font: 600 18px var(--display); letter-spacing: -.03em; }
.glossary-card span { color: var(--mint-deep); font-size: 11px; font-weight: 700; }
.glossary-card p { margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.leader-strip { margin-bottom: 16px; }
.crypto-table-panel { padding-top: 20px; margin-bottom: 18px; }
.crypto-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.market-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 17px 0; }
.market-toolbar input, .market-toolbar select { min-height: 38px; border: 1px solid var(--line); padding: 8px 10px; outline: 0; background: #fff; color: var(--ink-2); font-size: 11px; }
.market-toolbar input { min-width: min(320px, 100%); flex: 1; }
.compact-toolbar { padding: 0 0 12px; }
.market-toolbar input:focus, .market-toolbar select:focus { border-color: var(--mint-deep); }
.market-toolbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 10px var(--mono); }
.market-toolbar label input { min-width: auto; min-height: auto; accent-color: var(--mint-deep); }
.full-panel { padding: 0 21px 12px; }
.replay-form-panel { padding: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
.form-grid label { display: grid; gap: 7px; color: var(--muted); font: 10px var(--mono); position: relative; }
.form-grid input, .form-grid select { width: 100%; border: 1px solid var(--line); padding: 11px 10px; outline: 0; background: #fff; color: var(--ink); font: 12px var(--sans); }
.form-grid input:focus, .form-grid select:focus { border-color: var(--mint-deep); }
.input-unit { position: absolute; right: 10px; bottom: 11px; color: var(--muted); font-size: 9px; }
.replay-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.check-option { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 11px; }
.check-option input { width: 15px; height: 15px; accent-color: var(--mint-deep); }
.replay-actions { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.compact-button { display: inline-block; min-width: 160px; padding: 11px 14px; }
.control-group { display: flex; flex-wrap: wrap; gap: 6px; }
.control-group button { border: 1px solid var(--line); padding: 9px 11px; background: #fff; color: var(--ink-2); font: 10px var(--mono); }
.control-group button:hover:not(:disabled) { border-color: var(--mint-deep); color: var(--mint-deep); }
.control-group .danger-control:hover:not(:disabled) { border-color: var(--coral); color: #b84f40; }
.speed-chip { margin-left: auto; min-width: 54px; padding: 8px 9px; background: var(--ink); color: var(--mint); text-align: center; font: 11px var(--mono); }
.replay-progress { height: 3px; overflow: hidden; margin-top: 18px; background: #e5e8e4; }
.replay-progress span { display: block; width: 0; height: 100%; background: var(--mint-deep); transition: width .25s ease; }
.replay-metrics { grid-template-columns: repeat(4, 1fr); margin-top: 20px; }
.paper-overview-grid { grid-template-columns: repeat(4, 1fr); }
.config-list, .strategy-stats, .report-list { display: grid; gap: 0; }
.config-list > div, .strategy-row, .report-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px solid #ebebe7; }
.config-list > div:last-child, .strategy-row:last-child, .report-row:last-child { border-bottom: 0; }
.config-list span, .strategy-row small, .report-row small { display: block; color: var(--muted); font: 10px var(--mono); }
.config-list strong, .strategy-row strong, .report-row strong { display: block; margin-top: 5px; font-size: 12px; }
.strategy-row b, .report-row b { font: 500 17px var(--display); }
.strategy-row b { color: var(--mint-deep); }
.equity-panel { padding-bottom: 18px; }
.equity-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px; }
.equity-toolbar .control-group button { min-width: 50px; }
.equity-current-group { display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; flex-wrap: wrap; text-align: right; }
.equity-current { color: var(--ink); font: 600 24px var(--display); letter-spacing: -.04em; }
.equity-position { color: var(--mint-deep); font: 500 11px var(--mono); white-space: nowrap; }
.equity-chart-wrap { min-height: 300px; position: relative; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, #fbfcfa 0%, #f5f8f5 100%); }
.equity-chart { display: block; width: 100%; height: auto; min-height: 260px; overflow: visible; touch-action: none; }
.equity-grid-line, .equity-grid-vertical { stroke: #e4e9e4; stroke-width: 1; }
.equity-grid-vertical { opacity: .72; }
.equity-zero-line { stroke: #b7c1ba; stroke-width: 1; stroke-dasharray: 5 5; }
.equity-axis-title { fill: #68756e; font: 600 10px var(--mono); letter-spacing: .04em; }
.equity-axis-label { fill: #8b9690; font: 10px var(--mono); }
.equity-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.equity-position-line { fill: none; stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.equity-position-axis-label { fill: var(--mint-deep); }
.equity-crosshair { pointer-events: none; }
.equity-crosshair-x, .equity-crosshair-y, .equity-crosshair-position-y { fill: none; stroke-width: 1; stroke-dasharray: 4 4; }
.equity-crosshair-x { stroke: #77847d; opacity: .78; }
.equity-crosshair-y { stroke: #4c6fff; opacity: .82; }
.equity-crosshair-position-y { stroke: var(--mint-deep); opacity: .82; }
.equity-crosshair-marker { stroke: #fff; stroke-width: 2; }
.equity-crosshair-position-marker { stroke-dasharray: 2 2; }
.equity-crosshair-label { fill: #52615a; font: 600 10px var(--mono); }
.equity-crosshair-pnl-label { fill: #4c6fff; }
.equity-crosshair-position-label { fill: var(--mint-deep); }
.equity-area { opacity: .1; stroke: none; }
.equity-hover-zone { fill: transparent; cursor: crosshair; }
.equity-empty { fill: #9aa4a0; font: 12px var(--mono); }
.equity-tooltip { position: absolute; z-index: 2; display: grid; gap: 5px; min-width: 180px; padding: 9px 11px; border: 1px solid #d8e1da; background: rgba(16, 26, 43, .96); color: #fff; font: 10px var(--mono); opacity: 0; pointer-events: none; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease; }
.equity-tooltip.visible { opacity: 1; transform: translateY(0); }
.equity-tooltip strong { color: var(--mint); font-weight: 500; }
.equity-tooltip span { display: flex; align-items: center; gap: 6px; color: #dbe5ed; }
.equity-tooltip .equity-tooltip-position { color: #b6e9d2; }
.equity-tooltip i, .equity-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.equity-legend { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 11px; color: var(--muted); font: 10px var(--mono); }
.equity-legend span { display: inline-flex; align-items: center; gap: 7px; }
.equity-legend-position { color: var(--mint-deep); }
.equity-legend .equity-legend-dashed { width: 18px; height: 0; border-top: 2px dashed currentColor; border-radius: 0; background: transparent !important; }
.equity-legend strong { color: var(--ink-2); font-weight: 500; }
.latency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 10px; }
.latency-card { padding: 15px; border: 1px solid var(--line); background: #fff; }
.latency-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.latency-card span { color: var(--ink-2); font: 11px var(--mono); }
.latency-card strong { font: 600 17px var(--display); }
.latency-card small { display: block; margin-top: 10px; color: var(--muted); font: 9px var(--mono); }
.latency-track { height: 5px; margin-top: 14px; overflow: hidden; background: #e7e9e5; }
.latency-track i { display: block; height: 100%; background: var(--mint-deep); }
.latency-track i.negative { background: var(--coral); }
.latency-status-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.latency-status-grid > div { padding: 11px 12px; border: 1px solid var(--line); background: #f8faf8; }
.latency-status-grid span { display: block; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.latency-status-grid strong { display: block; margin-top: 6px; color: var(--ink); font: 600 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latency-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; margin-bottom: 12px; color: #eef4ff; background: linear-gradient(120deg, #141f38 0%, #243d72 100%); }
.latency-hero h3 { margin: 6px 0; font: 600 26px var(--display); letter-spacing: .02em; }
.latency-hero p { max-width: 560px; margin: 0; color: #b7c8e4; font-size: 12px; }
.latency-hero-values { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 18px; min-width: 380px; }
.latency-hero-values small { display: block; color: #a7b8d6; font: 10px var(--mono); }
.latency-hero-values strong { display: block; margin-top: 5px; color: #fff; font: 600 20px var(--mono); }
.latency-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.latency-breakdown { padding: 4px 0 6px; }
.latency-breakdown-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font: 10px var(--mono); }
.latency-breakdown-meta strong { color: var(--ink-2); font-weight: 500; }
.latency-breakdown-meta b { margin-left: auto; color: var(--ink); font: 600 16px var(--mono); }
.latency-breakdown-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 14px; }
.latency-breakdown-step { min-height: 58px; padding: 10px; border-top: 3px solid var(--mint-deep); background: #f4f7f4; }
.latency-breakdown-step span { display: block; color: var(--muted); font: 9px var(--mono); }
.latency-breakdown-step strong { display: block; margin-top: 8px; color: var(--ink); font: 600 14px var(--mono); }
.latency-chart-wrap { min-height: 300px; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, #fbfcfa 0%, #f4f8f7 100%); }
.latency-trend-chart { display: block; width: 100%; height: auto; min-height: 300px; }
.latency-grid-line { stroke: #dfe8e3; stroke-width: 1; }
.latency-axis-label { fill: #899590; font: 10px var(--mono); }
.latency-chart-empty { fill: #97a39d; font: 12px var(--mono); }
.latency-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 11px; color: var(--muted); font: 10px var(--mono); }
.latency-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.latency-chart-legend i { display: inline-block; width: 18px; height: 3px; }
.compact-select { margin-left: 5px; padding: 3px 6px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: 10px var(--mono); }
.latency-histogram { padding-top: 2px; }
.latency-hist-row { display: grid; grid-template-columns: 80px 1fr 42px; align-items: center; gap: 9px; margin: 9px 0; color: var(--muted); font: 10px var(--mono); }
.latency-hist-row i { display: block; height: 8px; overflow: hidden; background: #e4ebe6; }
.latency-hist-row i b { display: block; height: 100%; min-width: 2px; background: var(--mint-deep); }
.latency-hist-row strong { color: var(--ink); text-align: right; font-weight: 500; }
.trace-expand { padding: 0; border: 0; color: var(--blue); background: transparent; cursor: pointer; font: 600 10px var(--mono); }
.trace-detail-row td { padding: 0 !important; background: #f5f8f5; }
.trace-detail-content { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 14px; color: var(--muted); font: 10px var(--mono); }
.trace-detail-content pre { width: 100%; margin: 0; padding: 10px; overflow: auto; color: var(--ink-2); background: #edf2ee; }
.alert-list { display: grid; gap: 7px; }
.latency-alert { display: grid; grid-template-columns: 72px 190px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-left: 3px solid var(--coral); background: #fff7f3; color: var(--ink-2); font: 10px var(--mono); }
.latency-alert.severity-critical { border-left-color: #d63f4b; background: #fff0f1; }
.latency-alert.severity-warning { border-left-color: #d08a31; }
.latency-alert small { color: var(--muted); }
.latency-alert time { color: var(--muted); }
.system-page-actions { display: flex; align-items: center; gap: 16px; }
.system-strip { background: linear-gradient(120deg, #13243b 0%, #1d334e 100%); }
.system-metrics { grid-template-columns: repeat(6, 1fr); }
.system-chart-panel { padding-bottom: 16px; }
.system-chart-wrap { min-height: 320px; position: relative; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(180deg, #fbfcfa 0%, #f5f8f5 100%); }
.system-resource-chart { display: block; width: 100%; height: auto; min-height: 300px; }
.system-grid-line, .system-grid-vertical { stroke: #e4e9e4; stroke-width: 1; }
.system-grid-vertical { opacity: .72; }
.system-axis-label { fill: #8b9690; font: 10px var(--mono); }
.system-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.system-line-cpu { stroke: #4c6fff; }
.system-line-memory { stroke: var(--mint-deep); }
.system-line-disk { stroke: #d08a31; stroke-dasharray: 7 5; }
.system-empty { fill: #9aa4a0; font: 12px var(--mono); }
.system-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 11px; color: var(--muted); font: 10px var(--mono); }
.system-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.system-chart-legend i { display: inline-block; width: 18px; height: 3px; }
.system-legend-cpu { background: #4c6fff; }
.system-legend-memory { background: var(--mint-deep); }
.system-legend-disk { height: 0 !important; border-top: 2px dashed #d08a31; }
.system-detail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.system-detail-grid > div { min-width: 0; padding: 14px; background: #f4f6f3; }
.system-detail-grid span { display: block; color: var(--muted); font: 10px var(--mono); }
.system-detail-grid strong { display: block; margin-top: 8px; color: var(--ink-2); font: 500 14px var(--mono); overflow-wrap: anywhere; }
.cyber-button { position: relative; border: 1px solid #4cffe1; padding: 9px 13px; background: #07111f; color: #74ffe6; box-shadow: 0 0 14px rgba(76,255,225,.14), inset 0 0 12px rgba(76,255,225,.05); font: 600 10px var(--mono); letter-spacing: .04em; cursor: pointer; }
.cyber-button::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid #ff4fd8; border-bottom: 2px solid #ff4fd8; }
.cyber-button:hover { background: #0c1d31; color: #fff; box-shadow: 0 0 22px rgba(76,255,225,.3), inset 0 0 12px rgba(76,255,225,.1); }
.cyber-button-compact { padding: 7px 10px; font-size: 9px; }
.system-live-board { position: relative; overflow: hidden; margin-top: 18px; border: 1px solid #263d5c; background: #070d19; color: #d9e5f2; box-shadow: 0 0 0 1px rgba(77,255,224,.04), 0 18px 50px rgba(13,20,45,.12); }
.system-live-board::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .15; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(93,255,224,.05) 4px); }
.system-live-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid #203752; }
.system-live-heading h3 { margin: 7px 0 3px; color: #f3fbff; font: 500 22px var(--display); letter-spacing: -.04em; }
.system-live-heading p { margin: 0; color: #708ba6; font: 10px var(--mono); }
.system-neon-eyebrow { color: #4cffe1; text-shadow: 0 0 9px rgba(76,255,225,.35); }
.system-live-clock { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.system-live-clock > strong { color: #ffdc70; font: 500 19px var(--mono); letter-spacing: .06em; text-shadow: 0 0 12px rgba(255,220,112,.35); }
.system-live-indicator { color: #74ffe6; font: 9px var(--mono); letter-spacing: .08em; }
.system-live-indicator i, .system-footer-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #4cffe1; box-shadow: 0 0 10px #4cffe1; animation: cyber-pulse 1.2s infinite; }
.system-live-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(330px, 1.25fr) minmax(260px, 1fr) minmax(280px, 1fr); gap: 10px; padding: 10px; }
.system-strategy-console, .system-flow-console, .system-order-console { min-width: 0; border: 1px solid #1d3552; background: rgba(8, 17, 32, .9); }
.system-console-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border-bottom: 1px solid #1d3552; color: #74ffe6; font: 10px var(--mono); letter-spacing: .07em; }
.system-console-title small { overflow: hidden; color: #6d87a3; font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.system-strategy-board { display: grid; gap: 5px; padding: 7px; }
.system-strategy-row { display: grid; grid-template-columns: minmax(125px, 1.4fr) 62px repeat(3, 55px) minmax(65px, .8fr); align-items: center; gap: 7px; min-height: 55px; padding: 7px 8px; border-left: 2px solid #34516d; background: rgba(22, 39, 63, .64); }
.system-strategy-row.strategy-state-running { border-left-color: #4cffe1; box-shadow: inset 0 0 20px rgba(76,255,225,.03); }
.system-strategy-row.strategy-state-paused { border-left-color: #ffcf61; }
.system-strategy-row.strategy-state-stopped { opacity: .55; }
.system-strategy-identity { display: flex; align-items: center; gap: 7px; min-width: 0; }
.system-strategy-led { width: 5px; height: 25px; background: #4cffe1; box-shadow: 0 0 9px rgba(76,255,225,.65); }
.strategy-state-paused .system-strategy-led { background: #ffcf61; box-shadow: 0 0 9px rgba(255,207,97,.55); }
.strategy-state-stopped .system-strategy-led { background: #71839a; box-shadow: none; }
.system-strategy-identity strong, .system-strategy-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-strategy-identity strong { color: #effaff; font: 600 11px var(--sans); }
.system-strategy-identity small { margin-top: 3px; color: #6f89a2; font: 8px var(--mono); }
.system-strategy-state { color: #74ffe6; font: 8px var(--mono); }
.strategy-state-paused .system-strategy-state { color: #ffcf61; }
.strategy-state-stopped .system-strategy-state { color: #7c8ba0; }
.system-strategy-stat small, .system-strategy-pnl small { display: block; color: #69829e; font: 7px var(--mono); }
.system-strategy-stat b { display: block; margin-top: 4px; color: #dcecff; font: 10px var(--mono); }
.system-strategy-pnl { padding: 5px 6px; border: 1px solid rgba(76,255,225,.28); background: rgba(76,255,225,.06); color: #74ffe6; font: 700 15px var(--mono); text-align: right; text-shadow: 0 0 10px rgba(76,255,225,.28); }
.system-strategy-pnl small { margin-top: 3px; font-size: 7px; font-weight: 400; text-shadow: none; }
.system-pnl-negative { border-color: rgba(255,113,141,.35); background: rgba(255,113,141,.07); text-shadow: 0 0 10px rgba(255,113,141,.28); }
.system-pnl-negative { color: #ff718d; }
.system-flow-canvas { position: relative; min-height: 226px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(76,255,225,.12), transparent 25%), #081321; }
.system-flow-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(76,255,225,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(76,255,225,.11) 1px, transparent 1px); background-size: 28px 28px; transform: perspective(240px) rotateX(55deg) scale(1.6) translateY(28px); transform-origin: center bottom; }
.system-flow-scanline { position: absolute; z-index: 1; left: 0; right: 0; height: 2px; background: rgba(255,79,216,.45); box-shadow: 0 0 12px #ff4fd8; animation: cyber-scan 3.4s linear infinite; }
.system-flow-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 70px; height: 70px; transform: translate(-50%, -50%); border: 1px solid #4cffe1; border-radius: 50%; background: rgba(6, 20, 33, .95); box-shadow: 0 0 14px rgba(76,255,225,.5), inset 0 0 18px rgba(76,255,225,.15); color: #fff; font: 600 17px var(--display); }
.system-flow-core::before, .system-flow-core::after { content: ''; position: absolute; border: 1px solid rgba(255,79,216,.5); border-radius: 50%; }
.system-flow-core::before { inset: -8px; animation: cyber-spin 6s linear infinite; }
.system-flow-core::after { inset: -17px; border-style: dashed; animation: cyber-spin 9s linear reverse infinite; }
.system-flow-core b { margin-top: -15px; color: #74ffe6; font: 7px var(--mono); letter-spacing: .1em; }
.system-flow-node { position: absolute; z-index: 2; bottom: 12px; left: calc(8% + var(--node-index) * 21%); width: 19%; min-width: 48px; padding: 7px 4px; border: 1px solid #294665; background: rgba(12, 29, 49, .92); color: #b8cce0; text-align: center; box-shadow: 0 0 10px rgba(22,113,139,.12); transform: translateX(-50%); }
.system-flow-node::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 72px; background: linear-gradient(to top, #315576, transparent); }
.system-flow-node span, .system-flow-node b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-flow-node span { color: #74ffe6; font: 8px var(--mono); }
.system-flow-node b { margin-top: 5px; color: #f0f7ff; font: 9px var(--mono); }
.system-flow-node.strategy-state-paused { border-color: #8a6b2e; }
.system-flow-node.strategy-state-stopped { opacity: .5; }
.system-flow-particles { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.system-flow-particle { position: absolute; top: 50%; left: 50%; padding: 3px 5px; border: 1px solid currentColor; background: #081321; font: 8px var(--mono); opacity: 0; transform: translate(-50%, -50%); animation: flow-flight 1.7s ease-out forwards; }
.flow-out { color: #ffcf61; box-shadow: 0 0 11px rgba(255,207,97,.45); }
.flow-in { color: #74ffe6; box-shadow: 0 0 11px rgba(76,255,225,.45); }
.system-flow-ledger { display: grid; gap: 4px; min-height: 64px; padding: 8px 12px; border-top: 1px solid #1d3552; color: #95acc2; font: 9px var(--mono); }
.system-flow-ledger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-flow-ledger i { display: inline-block; width: 18px; color: #74ffe6; font-style: normal; }
.system-flow-ledger .flow-ledger-out i { color: #ffcf61; }
.system-order-stream { max-height: 290px; overflow-y: auto; scrollbar-color: #315675 #091524; }
.system-order-event { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 55px; align-items: center; gap: 7px; min-height: 49px; padding: 7px 9px; border-bottom: 1px solid rgba(41, 70, 101, .55); }
.system-order-signal { color: #6d87a3; font: 13px var(--mono); }
.stream-filled .system-order-signal { color: #4cffe1; text-shadow: 0 0 8px #4cffe1; }
.stream-cancelled { opacity: .56; }
.stream-cancelled .system-order-signal { color: #ff718d; }
.system-order-main { min-width: 0; }
.system-order-main strong, .system-order-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-order-main strong { color: #e8f5ff; font: 600 10px var(--sans); }
.system-order-main em { margin-left: 6px; color: #ffcf61; font: 8px var(--mono); font-style: normal; }
.system-order-main small { margin-top: 3px; color: #6f89a2; font: 8px var(--mono); }
.system-order-numbers { text-align: right; }
.system-order-numbers b { display: block; color: #74ffe6; font: 9px var(--mono); }
.system-order-numbers small { display: block; margin-top: 3px; color: #7690aa; font: 8px var(--mono); }
.system-order-event time { color: #6d87a3; font: 8px var(--mono); text-align: right; }
.system-live-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding: 9px 13px; border-top: 1px solid #203752; color: #708ba6; font: 8px var(--mono); letter-spacing: .06em; }
.system-footer-dot { margin-right: 5px; }
@keyframes cyber-pulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes cyber-scan { 0% { top: -4px; } 100% { top: calc(100% + 4px); } }
@keyframes cyber-spin { to { transform: rotate(360deg); } }
@keyframes flow-flight { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--flow-x)), calc(-50% + var(--flow-y))) scale(1); } }
body.system-fullscreen { overflow: hidden; background: #050a13; }
body.system-fullscreen .sidebar, body.system-fullscreen .topbar, body.system-fullscreen .page-footer { display: none; }
body.system-fullscreen .main-content { height: 100vh; overflow-y: auto; padding: 18px 24px 24px; background: radial-gradient(circle at 80% 0%, rgba(45,78,130,.18), transparent 34%), #050a13; }
body.system-fullscreen #page-system { padding-top: 0; }
body.system-fullscreen #page-system > .page-intro { display: none; }
body.system-fullscreen .system-metrics .metric-card { border-color: #223b59; background: #0a1422; color: #ecf7ff; }
body.system-fullscreen .system-metrics .metric-label, body.system-fullscreen .system-metrics small { color: #7892ad; }
body.system-fullscreen .system-metrics .metric-card-accent { background: #0a2227; border-color: #23605b; }
body.system-fullscreen .system-chart-panel, body.system-fullscreen .panel:not(.system-live-board) { border-color: #213956; background: #091321; color: #dcecff; }
body.system-fullscreen .system-live-board { margin-top: 10px; }
body.system-fullscreen .system-live-board .system-live-heading { padding-top: 15px; }
body.system-fullscreen .system-chart-wrap { background: #08111e; }
body.system-fullscreen .system-chart-panel .panel-heading h3, body.system-fullscreen .panel-heading h3 { color: #eaf6ff; }
body.system-fullscreen .config-list > div { border-color: #1c304a; }
body.system-fullscreen .config-list strong { color: #dcecff; }
.funnel { display: grid; gap: 8px; padding: 3px 0 12px; }
.funnel > div { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 12px 16px; background: #eef1ee; clip-path: polygon(3% 0, 97% 0, 91% 100%, 9% 100%); }
.funnel > div:nth-child(2) { margin-inline: 8%; background: #e4f3ed; }
.funnel > div:nth-child(3) { margin-inline: 16%; background: var(--ink); color: #fff; }
.funnel span { color: var(--muted); font: 10px var(--mono); }
.funnel > div:nth-child(3) span { color: var(--mint); }
.funnel strong { font: 600 22px var(--display); }
.filter-row { display: flex; gap: 6px; padding: 17px 0; }
.filter { border: 1px solid var(--line); padding: 8px 12px; background: transparent; color: var(--muted); font: 10px var(--mono); }
.filter.active, .filter:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.reject-detail { min-height: 360px; padding: 28px 35px; }
.large-bars { max-width: 700px; gap: 24px; }
.large-bars .bar-track { height: 10px; }
.toast { position: fixed; z-index: 8; top: 23px; left: 50%; padding: 10px 14px; transform: translate(-50%, -20px); border: 1px solid var(--line); background: var(--ink); color: #fff; font: 11px var(--mono); opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.page-footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line); color: #9aa2a4; font: 9px var(--mono); letter-spacing: .05em; }
.live-readiness-strip { border-color: #30445d; background: linear-gradient(135deg, #101a2b, #15263e); }
.live-metrics strong { font-size: clamp(22px, 2.4vw, 36px); }
.live-blocker-list { display: grid; gap: 8px; padding: 18px; }
.live-blocker { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-left: 3px solid #ff718d; background: #fff1f4; }
.live-blocker > i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #ff718d; border-radius: 50%; color: #d23d5c; font: 700 13px var(--mono); font-style: normal; }
.live-blocker strong, .live-blocker small { display: block; }
.live-blocker strong { color: #6d2534; font: 600 12px var(--sans); }
.live-blocker small { margin-top: 4px; color: #a85b6b; font: 9px var(--mono); }
.live-blocker-clear { border-left-color: #44c79a; background: #ebfaf5; }
.live-blocker-clear > i { border-color: #44c79a; color: #178b66; }
.live-blocker-clear strong { color: #176f55; }
.live-danger-dot { background: #ff718d !important; box-shadow: 0 0 10px rgba(255,113,141,.65) !important; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-orbit { margin-right: 0; }
  .form-grid { grid-template-columns: repeat(3, 1fr); }
  .paper-overview-grid { grid-template-columns: repeat(4, 1fr); }
  .system-metrics { grid-template-columns: repeat(3, 1fr); }
  .latency-status-grid, .latency-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .latency-hero { align-items: flex-start; flex-direction: column; }
  .latency-hero-values { width: 100%; min-width: 0; }
  .latency-breakdown-track { grid-template-columns: repeat(4, 1fr); }
  .system-detail-grid { grid-template-columns: repeat(3, 1fr); }
  .system-live-grid { grid-template-columns: 1fr 1fr; }
  .system-order-console { grid-column: 1 / -1; }
}
@media (max-width: 850px) {
  .sidebar { width: 75px; flex-basis: 75px; padding-left: 10px; padding-right: 10px; }
  .sidebar-brand { padding: 0; justify-content: center; }
  .sidebar-brand > span:last-child, .system-label, .nav-item > span:last-child, .read-only-card, .logout-button { display: none; }
  .main-nav { margin-top: 52px; }
  .nav-item { justify-content: center; padding: 16px 7px; }
  .nav-number { width: auto; }
  .two-thirds { grid-template-columns: 1fr; }
  .hero-orbit { display: none; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .paper-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .latency-grid { grid-template-columns: repeat(2, 1fr); }
  .latency-status-grid, .latency-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .latency-breakdown-track { grid-template-columns: repeat(2, 1fr); }
  .crypto-metrics { grid-template-columns: repeat(2, 1fr); }
  .leader-metrics { grid-template-columns: repeat(2, 1fr); }
  .model-metrics { grid-template-columns: repeat(2, 1fr); }
  .leader-analysis-metrics { grid-template-columns: repeat(2, 1fr); }
  .ledger-card-grid-inner { grid-template-columns: repeat(3, 1fr); }
  .glossary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crypto-notes { grid-template-columns: 1fr; }
  .system-live-grid { grid-template-columns: 1fr; }
  .system-order-console { grid-column: auto; }
  .system-strategy-console { overflow-x: auto; }
  .system-strategy-board { min-width: 590px; }
  .latency-alert { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .main-content { padding: 22px 15px; }
  .topbar { align-items: flex-start; padding-bottom: 22px; }
  .topbar-actions { display: grid; justify-items: end; gap: 10px; }
  .latency-status-grid, .latency-kpi-grid { grid-template-columns: 1fr; }
  .latency-hero-values { grid-template-columns: repeat(2, 1fr); }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .strategy-page-actions { width: 100%; justify-content: flex-start; }
  .strategy-control { align-items: flex-start; flex-direction: column; }
  .system-page-actions { align-items: flex-start; flex-wrap: wrap; }
  .topbar h2 { font-size: 22px; }
  .hero-strip { min-height: 190px; padding: 25px 22px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .system-metrics { grid-template-columns: repeat(2, 1fr); }
  .system-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .system-live-heading { align-items: flex-start; flex-direction: column; }
  .system-live-clock { width: 100%; justify-content: space-between; }
  .system-live-footer { align-items: flex-start; flex-direction: column; }
  .three-equal { grid-template-columns: 1fr; }
  .replay-metrics { grid-template-columns: repeat(2, 1fr); }
  .replay-actions { align-items: flex-start; flex-direction: column; }
  .replay-options { align-items: flex-start; flex-direction: column; }
  .speed-chip { margin-left: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .latency-grid { grid-template-columns: 1fr; }
  .page-footer { display: grid; }
  .login-card { padding: 32px 25px 27px; }
  .login-card .eyebrow { margin-top: 38px; }
  .auth-side-note { right: 20px; bottom: 17px; }
  .crypto-strip { align-items: flex-start; flex-direction: column; }
  .feed-status { justify-items: start; }
  .ledger-card-grid { grid-template-columns: 1fr; }
  .ledger-card-grid-inner { grid-template-columns: repeat(2, 1fr); }
  .glossary-grid { grid-template-columns: 1fr; }
}