:root {
  color-scheme: dark;
  --bg: #090d12;
  --header: #0d1218;
  --panel: #111820;
  --panel-2: #171f29;
  --panel-3: #0c1219;
  --line: #273342;
  --line-strong: #3b4d60;
  --text: #f1f5f9;
  --muted: #8292a6;
  --blue: #72a9ff;
  --cyan: #67d7dc;
  --green: #29d398;
  --amber: #f2bd55;
  --red: #ff6577;
  --violet: #b59bff;
  --call: #123028;
  --put: #321922;
  --radius: 8px;
  --shadow: 0 18px 50px #0009;
  --sticky-clearance: 72px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.4; }
button, input, select { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; }
button, select { cursor: pointer; }
button { padding: 7px 11px; font-weight: 700; }
button:hover:not(:disabled), select:hover:not(:disabled), input:hover:not(:disabled) { border-color: var(--line-strong); background: #1d2834; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .42; }
input, select { width: 100%; padding: 7px 9px; }
a { color: var(--muted); text-decoration: none; }
a:hover { color: var(--text); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: 24px; line-height: 1.15; }
h2 { margin: 0; font-size: 16px; line-height: 1.25; }
small { font-size: 12px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.warningText { color: var(--amber) !important; }
.eyebrow, .controlLabel { display: block; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.primary { border-color: #3e77c0; background: #235c9f; color: #fff; }
.primary:hover:not(:disabled) { border-color: var(--blue); background: #2c6db8; }
.dangerGhost { border-color: #68404a; color: #ff93a1; }
.dangerGhost:hover:not(:disabled) { border-color: var(--red); background: #321922; }

.appHeader { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--header); }
.brand { display: grid; gap: 1px; color: var(--text); }
.brand strong { font-size: 18px; letter-spacing: -.02em; }
.appHeader nav { display: flex; align-items: center; gap: 6px; }
.appHeader nav a { padding: 6px 8px; border-radius: 5px; font-size: 13px; }
.statusPill, .miniPill, .tabCount { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; }
.statusPill.ok { border-color: #25604d; color: var(--green); }
.statusPill.error { border-color: #743746; color: var(--red); }
.statusPill.loading { color: var(--amber); }

.commandBar { position: sticky; z-index: 40; top: 0; display: grid; grid-template-columns: minmax(150px, 210px) minmax(185px, .9fr) minmax(190px, 1fr) auto minmax(440px, auto); gap: 8px; align-items: center; min-height: 62px; padding: 7px 20px; border-bottom: 1px solid var(--line); background: #0d1218f5; box-shadow: 0 9px 26px #0008; backdrop-filter: blur(14px); }
.runPicker, .speedControl { display: block; color: var(--muted); font-size: 12px; }
.runPicker select, .speedControl select { margin-top: 3px; }
.commandFact { min-width: 0; }
.commandFact span { display: block; color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.commandFact strong { display: block; overflow: hidden; margin-top: 2px; color: var(--blue); font-size: 13px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.nextFact strong { color: var(--text); }
.runState { justify-self: center; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.runState.running { color: var(--green); }
.runState.paused { color: var(--amber); }
.runState.completed { color: var(--cyan); }
.runState.cancelled, .runState.error { color: var(--red); }
.transport, .transportScroller { display: flex; min-width: 0; align-items: end; justify-content: flex-end; gap: 5px; }
.transportScroller button { white-space: nowrap; }
.speedControl { width: 82px; flex: 0 0 auto; }
.overflowMenu { position: relative; }
.overflowMenu summary { display: flex; width: 38px; min-height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); cursor: pointer; font-weight: 900; letter-spacing: .12em; list-style: none; }
.overflowMenu summary::-webkit-details-marker { display: none; }
.overflowMenu > div { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; display: grid; width: 225px; gap: 5px; padding: 7px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel); box-shadow: var(--shadow); }
.overflowMenu > div button { width: 100%; text-align: left; }

main { width: 100%; max-width: 1920px; margin: 0 auto; padding: 10px 20px 36px; }
.panel, .metricGrid article { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel { padding: 12px; }
.message { display: flex; min-height: 48px; align-items: center; gap: 11px; margin-bottom: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.message > div { display: grid; }
.message span { color: var(--muted); }
.message.error, .localStatus.error { border-color: #713746; background: #2d151d; color: #ffd3d8; }
.message.warning { border-color: #735b29; background: #28200f; color: #f5d997; }
.spinner { width: 20px; height: 20px; flex: 0 0 auto; border: 2px solid var(--line-strong); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.setupView { display: flex; min-height: calc(100vh - 155px); align-items: flex-start; justify-content: center; padding-top: clamp(8px, 3vh, 34px); }
.setupCard { width: min(1220px, 100%); padding: 18px; border-color: #33485e; }
.setupHead, .setupFoot, .sectionHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.setupHead p { max-width: 760px; margin: 0; color: var(--muted); }
.iconButton { width: 38px; min-width: 38px; padding: 0; font-size: 22px; line-height: 1; }
#configForm { display: grid; gap: 12px; margin-top: 17px; }
fieldset { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; }
legend { padding: 0 6px; font-size: 13px; font-weight: 750; }
label { color: var(--muted); font-size: 12px; }
label input, label select { display: block; margin-top: 4px; }
.configGrid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; gap: 8px; }
.segmented { display: grid; gap: 5px; }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented.two { grid-template-columns: repeat(2, 1fr); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; min-height: 54px; align-content: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 750; }
.segmented span small { color: var(--muted); font-weight: 400; }
.segmented input:checked + span { border-color: var(--blue); background: #14233a; color: var(--blue); }
.segmented input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.budgetRow { display: grid; grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(130px, .7fr)) minmax(180px, .9fr); gap: 8px; align-items: end; }
.policyGrid { display: grid; grid-template-columns: minmax(340px, 1.6fr) repeat(4, minmax(130px, .7fr)); gap: 8px; align-items: end; }
.fixedFact { min-height: 57px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3); }
.fixedFact span, .assumption strong { display: block; color: var(--amber); font-size: 12px; letter-spacing: .05em; }
.fixedFact strong { display: block; margin-top: 5px; font-size: 13px; }
.setupFoot { align-items: end; }
.assumption { max-width: 790px; margin: 0; padding: 9px 11px; border-left: 3px solid var(--amber); background: #1e1b11; color: var(--muted); }
.assumption span { display: block; margin-top: 3px; }
.setupSubmit { min-width: 210px; }
.validationErrors { margin: 0 0 6px; padding-left: 18px; color: var(--red); font-size: 12px; }
.validationErrors:empty { display: none; }
.setupSubmit button { width: 100%; }
.localStatus { min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; }

.activeWorkspace { display: grid; gap: 18px; }
.workspaceJump { display: flex; min-width: 0; align-items: center; gap: 3px; overflow-x: auto; padding: 2px 4px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.workspaceJump::before { content: "НА ЭКРАНЕ"; flex: 0 0 auto; margin-right: 5px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .075em; }
.workspaceJump button { flex: 0 0 auto; min-height: 30px; padding-block: 3px; border-color: transparent; background: transparent; color: var(--muted); }
.workspaceJump button::after { content: " ↓"; color: #536477; }
.workspaceJump button[aria-current="location"] { color: var(--blue); }
.tabCount { min-width: 22px; min-height: 20px; padding: 1px 5px; }
.tabPanel, .workflowSection { display: grid; min-width: 0; gap: 9px; scroll-margin-top: var(--sticky-clearance); }
.sectionTitle { padding: 7px 2px 0; }
.sectionTitle h2 { margin-top: 2px; font-size: 20px; }
.sectionTitle p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.deltaCockpit { display: grid; gap: 10px; overflow: hidden; border-color: #35516b; background: linear-gradient(140deg, #101a25, #0d141c 54%, #111820); }
.cockpitHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cockpitHeader h1 { margin: 1px 0 0; font-size: 20px; }
.cockpitFacts { display: grid; grid-template-columns: repeat(4, minmax(125px, .8fr)) minmax(280px, 1.45fr); gap: 6px; }
.cockpitFacts article { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: #0a1119b8; }
.cockpitFacts span, .cockpitFacts small { display: block; color: var(--muted); font-size: 12px; }
.cockpitFacts b { display: block; margin: 3px 0 2px; overflow-wrap: anywhere; font-size: 17px; font-variant-numeric: tabular-nums; }
.cockpitDecision b { font-size: 14px; letter-spacing: .025em; }
.cockpitDecision b.safe { color: var(--green); }.cockpitDecision b.warning { color: var(--amber); }.cockpitDecision b.breached, .cockpitDecision b.missing { color: var(--red); }
.deltaBandPanel { padding: 0 4px 1px; }
.deltaScale { --outer-low: 17%; --inner-low: 33%; --inner-high: 67%; --outer-high: 83%; position: relative; height: 15px; border: 1px solid #435262; border-radius: 999px; background: linear-gradient(90deg, #7f2935 0 var(--outer-low), #76551e var(--outer-low) var(--inner-low), #17654d var(--inner-low) var(--inner-high), #76551e var(--inner-high) var(--outer-high), #7f2935 var(--outer-high) 100%); box-shadow: inset 0 1px 4px #0009; }
.deltaScale::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; border-left: 1px solid #eef3f8aa; }
.deltaMarker { position: absolute; z-index: 2; top: 50%; width: 15px; height: 24px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 4px; background: #17212c; box-shadow: 0 2px 8px #000; transition: left .18s ease; }
.deltaMarker.safe { border-color: #b7ffe4; }.deltaMarker.warning { border-color: #ffe0a0; }.deltaMarker.breached, .deltaMarker.missing { border-color: #ffadb7; }
.deltaMarker i { position: absolute; inset: 3px; border-radius: 1px; background: currentColor; }
.deltaBandTicks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 5px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.deltaBandTicks span { overflow-wrap: anywhere; text-align: center; }.deltaBandTicks span:first-child { text-align: left; }.deltaBandTicks span:last-child { text-align: right; }
.deltaBandPanel p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.alertRegion { display: grid; gap: 6px; }
.profitAlert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid #8c4151; border-radius: 7px; background: linear-gradient(100deg, #30151e, #1c1218); }
.alertIcon { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: #260910; font-weight: 900; }
.profitAlert h2 { color: #ffd6dc; }
.profitAlert p { margin: 2px 0 0; color: #dfacb6; font-size: 12px; }
.alertActions, .legCloseActions { display: flex; gap: 4px; }
.alertActions button, .legCloseActions button { min-height: 30px; padding: 4px 7px; }
.tradeHeader { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(310px, 1fr) auto; gap: 14px; align-items: end; padding: 9px 12px; }
.spotBlock strong { display: block; margin-top: 2px; color: var(--green); font-size: 22px; font-variant-numeric: tabular-nums; }
.spotBlock small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.expiryBlock { min-width: 0; overflow: hidden; }
.expiryTabs { display: flex; width: 100%; max-width: 100%; gap: 4px; overflow-x: auto; padding: 3px 2px; scrollbar-width: thin; }
.expiryTabs button { flex: 0 0 auto; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.expiryTabs button.active { border-color: var(--blue); background: #14233a; color: var(--blue); }
.expiryTabs button.expired { color: var(--red); }
.boardControls { display: flex; align-items: end; justify-content: flex-end; gap: 12px; }
.compactChoice { display: flex; gap: 3px; margin-top: 3px; }
.compactChoice button { min-height: 32px; padding: 5px 8px; }
.compactChoice button.active { border-color: var(--blue); color: var(--blue); }
.checkControl { display: flex; min-height: 34px; align-items: center; gap: 6px; white-space: nowrap; }
.checkControl input { width: 16px; min-height: 16px; margin: 0; }

.tradeGrid { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 9px; min-width: 0; align-items: start; }
.classicBoardPanel { position: relative; min-width: 0; padding: 0; overflow: hidden; }
.boardHead { min-height: 53px; margin: 0; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.classicBoardWrap { width: 100%; max-width: 100%; max-height: min(690px, calc(100vh - 242px)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.classicBoard { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.classicBoard th, .classicBoard td { height: 38px; padding: 4px 6px; border-right: 1px solid #1e2a36; border-bottom: 1px solid #202c38; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.classicBoard th { position: sticky; z-index: 8; top: 0; height: 32px; background: #101820; color: var(--muted); font-weight: 750; }
.classicBoard .boardSides th { top: 0; height: 28px; text-align: center; letter-spacing: .12em; }
.classicBoard thead tr:nth-child(2) th { top: 28px; }
.classicBoard .boardSides th:first-child { background: #10241e; color: var(--green); }
.classicBoard .boardSides th:last-child { background: #29151c; color: #ff91a0; }
.classicBoard tbody tr:hover td { background: #182331; }
.classicBoard tbody tr.selectedRow td { background: #172940; }
.classicBoard tbody tr.atm td { border-top: 1px solid var(--amber); border-bottom-color: var(--amber); }
.classicBoard tbody tr.atm .strikeCell { color: #161007; background: var(--amber); }
.classicBoard .strikeHead, .classicBoard .strikeCell { position: sticky; z-index: 7; left: 50%; width: 94px; min-width: 94px; transform: translateX(-50%); border-right: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); background: #17212c; color: var(--text); text-align: center; font-weight: 850; box-shadow: -5px 0 10px #0004, 5px 0 10px #0004; }
.classicBoard thead .strikeHead { z-index: 12; }
.quoteButton { width: 100%; min-width: 66px; min-height: 29px; padding: 3px 6px; background: transparent; font-variant-numeric: tabular-nums; }
.quoteButton.bid { border-color: #3d4a58; color: var(--red); }
.quoteButton.ask { border-color: #315f53; color: var(--green); }
.quoteButton:hover:not(:disabled) { transform: translateY(-1px); }
.quoteButton.selected { outline: 2px solid var(--blue); outline-offset: -2px; background: #183153; color: #fff; }
.boardAdvanced { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
.contractMissing { color: #4f6072; text-align: center !important; }
.contractFlag { display: inline-block; margin-left: 4px; padding: 1px 4px; border: 1px solid var(--amber); border-radius: 9px; color: var(--amber); font-size: 12px; }
.contractFlag.expired { border-color: var(--red); color: var(--red); }
.legAlertAdvice { display: block; width: fit-content; margin: 4px 0 0; white-space: normal; line-height: 1.25; }
.emptyCell { padding: 26px !important; color: var(--muted) !important; text-align: center !important; white-space: normal !important; }
.localOverlay { position: absolute; z-index: 20; inset: 53px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #0b1118e6; color: var(--text); backdrop-filter: blur(2px); }
#chainError { margin: 8px; }

.manualTicket { position: sticky; top: 72px; max-height: min(calc(100vh - 82px), 360px); overflow-y: auto; align-self: start; padding: 11px; scrollbar-width: thin; }
.ticketModeNote { margin-bottom: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 12px; }
.ticketModeNote.readOnly { border-color: #735b29; background: #28200f; color: #f5d997; }.ticketModeNote.ready { border-color: #25604d; background: #102119; color: #9ef0d0; }
.ticketTabs { display: flex; gap: 4px; margin-bottom: 10px; }
.ticketTabs button { flex: 1; }
.ticketTabs button.active { border-color: var(--blue); background: #14233a; color: var(--blue); }
.manualTicket form { display: grid; gap: 8px; }
.ticketTitle { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.ticketTitle h2 { overflow-wrap: anywhere; }
.ticketTitle p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.ticketQuote { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border-radius: 6px; background: var(--panel-3); font-variant-numeric: tabular-nums; }
.ticketFormRow { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ticketEstimate { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; }
.ticketEstimate div { min-width: 0; padding: 6px 7px; border-radius: 5px; background: var(--panel-3); }
.ticketEstimate dt { color: var(--muted); font-size: 12px; }
.ticketEstimate dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 750; font-variant-numeric: tabular-nums; }
.riskHint { margin: 0; padding: 7px 8px; border-left: 3px solid var(--amber); background: #211d12; color: #dfcb99; font-size: 12px; }
.riskHint.danger { border-color: var(--red); background: #2b151c; color: #ffc1ca; }
.manualTicket form > button, .manualTicket > #confirmTrade { width: 100%; }
.previewBox { display: grid; gap: 6px; margin-top: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3); }
.emptyPreview { color: var(--muted); text-align: center; }
.previewGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.previewGrid div { min-width: 0; padding: 6px; border-radius: 4px; background: var(--panel-2); }
.previewGrid span { display: block; color: var(--muted); font-size: 12px; }
.previewGrid b { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.disclosure, .railIntro { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.metricGrid { display: grid; grid-template-columns: repeat(8, minmax(120px, 1fr)); gap: 6px; }
.metricGrid article { min-width: 0; padding: 9px 10px; }
.metricGrid span, .metricGrid small { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.metricGrid b { display: block; overflow: hidden; margin: 3px 0; font-size: 17px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.metricGrid .equityMetric { border-color: #356750; background: #102119; }
.portfolioGrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 9px; align-items: start; }
.portfolioTotalRow { margin-top: 0; }
.positionsPanel { min-width: 0; padding: 0; overflow: hidden; }
.positionsPanel > .sectionHead { padding: 10px 11px 0; }
.tableWrap { width: 100%; max-width: 100%; overflow: auto; }
.tableWrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tableWrap th, .tableWrap td { padding: 7px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableWrap th { position: sticky; z-index: 2; top: 0; background: var(--panel); color: var(--muted); }
.tableWrap th:first-child, .tableWrap td:first-child { text-align: left; }
.positionsTable { min-width: 1260px; }
.legTitle { display: block; color: var(--text); font-weight: 750; }
.legMeta { display: block; color: var(--muted); font-size: 12px; }
.portfolioRail { display: grid; gap: 9px; }
.railCard { padding: 11px; }
.factGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; }
.factGrid div { min-width: 0; padding: 7px; border-radius: 5px; background: var(--panel-3); }
.hedgeFacts .wideFact { grid-column: 1 / -1; }
dt { color: var(--muted); font-size: 12px; }
dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 750; font-variant-numeric: tabular-nums; }
.nakedNotice { margin: 8px 0 0; padding: 8px; border: 1px solid #735b29; border-radius: 5px; background: #28200f; color: #f1d28c; }
.nakedNotice strong { display: block; }
.lotList, .recommendations { display: grid; max-height: 290px; gap: 5px; overflow: auto; }
.lotCard, .recommendationCard { padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.lotHead, .recommendationHead { display: flex; justify-content: space-between; gap: 6px; font-weight: 750; }
.lotCard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 5px 0 0; }
.lotCard dl div { display: flex; justify-content: space-between; gap: 5px; color: var(--muted); font-size: 12px; }
.recommendationCard p { margin: 5px 0; color: var(--muted); font-size: 12px; }
.recommendationStats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; color: var(--muted); font-size: 12px; }
.recommendationCard button { width: 100%; margin-top: 6px; }
.emptyCompact { margin: 0; padding: 12px; color: var(--muted); text-align: center; }
.secondaryDetails { padding: 10px 12px; }
.secondaryDetails summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.secondaryDetails summary::-webkit-details-marker { display: none; }
.secondaryDetails summary > span:first-child { display: grid; }
.summaryText { color: var(--muted); font-size: 12px; }
.metaFacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 10px 0 0; }
.metaFacts > div { min-width: 0; padding: 7px; border-radius: 5px; background: var(--panel-3); }
.metaFacts dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }

.analyticsToolbar, .lazyFooter { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.analyticsToolbar .localStatus, .lazyFooter .localStatus { flex: 1; }
.analyticsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-width: 0; }
.chartPanel { min-width: 0; overflow: hidden; }
.chartLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; color: var(--muted); font-size: 12px; }
.chartLegend span::before { content: ""; display: inline-block; width: 12px; margin-right: 4px; vertical-align: middle; border-top: 2px solid; }
.eventLegend span::before { width: 13px; border: 0; text-align: center; font-weight: 800; line-height: 1; }
.entryKey::before { content: "●" !important; color: var(--green); }.expiryKey::before { content: "■" !important; color: var(--violet); }.hedgeKey::before { content: "◆" !important; color: var(--cyan); }.skipKey::before { content: "▼" !important; color: var(--amber); }.manualKey::before { content: "▲" !important; color: var(--blue); }.alertKey::before { content: "⬢" !important; color: var(--red); }
.optionKey::before { border-color: var(--cyan) !important; }.futureKey::before { border-color: var(--violet) !important; border-style: dashed !important; }.totalKey::before { border-color: #fff !important; border-style: dotted !important; }.outerKey::before { border-color: var(--red) !important; border-style: dashed !important; }.innerKey::before { border-color: var(--amber) !important; border-style: dotted !important; }.standardKey::before { border-color: var(--cyan) !important; }.lifoKey::before { border-color: var(--violet) !important; border-style: dashed !important; }
.chartBox { position: relative; overflow: hidden; border-radius: 6px; background: var(--panel-3); }
svg { display: block; width: 100%; min-height: 210px; height: auto; }
.chartGrid { stroke: #25313e; stroke-width: 1; }.chartAxis { fill: #91a1b5; font-size: 12px; }.priceLine, .deltaLine, .compareLine, .pnlLine { fill: none; stroke-linecap: round; stroke-linejoin: round; }.priceLine { stroke: var(--green); stroke-width: 2.4; }.optionLine { stroke: var(--cyan); stroke-width: 2; }.futureLine { stroke: var(--violet); stroke-width: 2; stroke-dasharray: 9 5; }.totalLine { stroke: #eef3f8; stroke-width: 2.4; stroke-dasharray: 2 4; }.optionPnlLine { stroke: var(--cyan); stroke-width: 2; }.futuresPnlLine { stroke: var(--violet); stroke-width: 2; stroke-dasharray: 9 5; }.totalPnlLine { stroke: #eef3f8; stroke-width: 2.6; stroke-dasharray: 2 4; }.zeroLine { stroke: #7890a7; stroke-width: 1; stroke-dasharray: 3 4; }.outerBand { stroke: var(--red); stroke-width: 1.2; stroke-dasharray: 7 5; }.innerBand { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 2 4; }.safeBand { fill: #29d3980c; }.standardLine { stroke: var(--cyan); stroke-width: 2.4; }.lifoLine { stroke: var(--violet); stroke-width: 2.4; stroke-dasharray: 9 5; }
.optionPnlKey::before { border-color: var(--cyan) !important; }.futurePnlKey::before { border-color: var(--violet) !important; border-style: dashed !important; }.totalPnlKey::before { border-color: #fff !important; border-style: dotted !important; }
.chartNote { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; text-align: right; }
.chartDisclosure { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.eventStem { stroke: #8393a6; stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }.eventMark { cursor: help; stroke: #071017; stroke-width: 2; }.eventMark.entry { fill: var(--green); }.eventMark.expiry { fill: var(--violet); }.eventMark.hedge { fill: var(--cyan); }.eventMark.skip { fill: var(--amber); }.eventMark.manual { fill: var(--blue); }.eventMark.alert { fill: var(--red); }
svg [data-tip]:focus { outline: none; stroke: #eef3f8; stroke-width: 3; filter: drop-shadow(0 0 3px #071017); }
svg:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.chartTooltip { position: absolute; z-index: 5; max-width: 320px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #070a0ef3; box-shadow: var(--shadow); font-size: 12px; pointer-events: none; }
.comparisonMetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.comparisonPanel { min-width: 0; overflow: hidden; }
.policyCard { padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.policyCard.error { border-color: #713746; background: #2d151d; }
.policyCardHeader { display: flex; justify-content: space-between; gap: 7px; }
.policyNumbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.policyNumbers div { padding: 7px; border-radius: 5px; background: var(--panel-3); }
.policyNumbers span { display: block; color: var(--muted); font-size: 12px; }
.policyNumbers b { display: block; margin-top: 2px; }

.ledgerPanel { overflow: hidden; }
.ledgerFilters { display: flex; flex-wrap: wrap; gap: 4px; }
.ledgerFilters button { min-height: 32px; padding: 5px 8px; }
.ledgerFilters button.active { border-color: var(--blue); color: var(--blue); }
.ledger { display: grid; max-height: min(760px, 67vh); gap: 5px; overflow: auto; }
.ledgerEntry { border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3); }
.ledgerEntry summary { display: grid; grid-template-columns: 18px 170px 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; cursor: pointer; list-style: none; }
.ledgerEntry summary::before { content: "›"; color: var(--blue); }.ledgerEntry[open] summary::before { content: "⌄"; }
.ledgerEntry time { color: var(--blue); font-variant-numeric: tabular-nums; }.eventType { font-weight: 800; }.ledgerMain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ledgerValue { font-weight: 750; font-variant-numeric: tabular-nums; }
.ledgerDetail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 10px 10px 28px; }
.ledgerDetail div { min-width: 0; padding: 6px; border-radius: 4px; background: var(--panel-2); }.ledgerDetail span { display: block; color: var(--muted); font-size: 12px; }.ledgerDetail b, .ledgerDetail code { display: block; margin-top: 2px; overflow-wrap: anywhere; color: var(--text); }.ledgerDetail code { font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.ledgerOperation { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 0 10px 7px 28px; }
.ledgerOperation div { min-width: 0; padding: 6px; border: 1px solid #263849; border-radius: 4px; background: #111b26; }.ledgerOperation span { display: block; color: var(--muted); font-size: 12px; }.ledgerOperation b { display: block; margin-top: 2px; overflow-wrap: anywhere; font-size: 12px; }
.lazyFooter { margin-top: 9px; }

.advancedAnalytics { padding: 0; overflow: hidden; scroll-margin-top: var(--sticky-clearance); }
.advancedAnalytics > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; cursor: pointer; list-style: none; }
.advancedAnalytics > summary::-webkit-details-marker { display: none; }
.advancedAnalytics > summary > span:first-child { display: grid; }
.advancedAnalytics[open] > summary { border-bottom: 1px solid var(--line); }
.advancedBody { display: grid; gap: 9px; padding: 9px; background: #0b1118; }
.advancedGrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 9px; align-items: start; }
.advancedRail { display: grid; gap: 9px; }

dialog { width: min(700px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: #020509c7; backdrop-filter: blur(3px); }
.dialogCard { padding: 15px; }
.dialogActions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }

@media (max-width: 1320px) {
  :root { --sticky-clearance: 136px; }
  .commandBar { grid-template-columns: minmax(145px, 190px) minmax(170px, .8fr) minmax(170px, 1fr) auto; }
  .transport { grid-column: 1 / -1; }
  .manualTicket { top: 136px; max-height: min(calc(100vh - 146px), 300px); }
  .cockpitFacts { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .cockpitDecision { grid-column: span 2; }
  .metricGrid { grid-template-columns: repeat(4, 1fr); }
  .ledgerOperation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .policyGrid, .budgetRow { grid-template-columns: repeat(3, 1fr); }
  .policyGrid .segmented, .budgetRow .segmented { grid-column: span 2; }
}

@media (max-width: 980px) {
  .appHeader { padding-inline: 12px; }
  .commandBar { padding-inline: 12px; }
  main { padding-inline: 12px; }
  .tradeHeader { grid-template-columns: minmax(140px, .4fr) minmax(0, 1fr); }
  .boardControls { grid-column: 1 / -1; justify-content: flex-start; }
  .tradeGrid, .portfolioGrid { grid-template-columns: 1fr; }
  .manualTicket { position: relative; top: auto; max-height: none; }
  .analyticsGrid { grid-template-columns: 1fr; }
  .advancedGrid { grid-template-columns: 1fr; }
  .advancedRail { grid-template-columns: 1fr 1fr; }
  .configGrid { grid-template-columns: repeat(2, 1fr); }
  .metaFacts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --sticky-clearance: 190px; }
  .appHeader { min-height: 54px; align-items: flex-start; }
  .appHeader nav { flex-wrap: wrap; justify-content: flex-end; }
  .appHeader nav a { padding: 5px; }
  .brand strong { font-size: 16px; }
  .commandBar { position: sticky; top: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; min-height: 0; gap: 5px 7px; padding: 5px 8px; }
  .runPicker { grid-column: auto; }
  .replayFact { grid-column: 2; }
  .nextFact { grid-column: 1 / -1; }
  .runState { position: static; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .transport { grid-column: 1 / -1; width: 100%; align-items: stretch; justify-content: stretch; overflow: visible; padding: 1px 0 3px; }
  .transportScroller { flex: 1 1 auto; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .transport button, .transport summary, .transport select { min-height: 42px; }
  .transportScroller button { min-width: max-content; }
  .speedControl { width: 76px; min-width: 76px; }
  .speedControl { font-size: 0; }
  .speedControl select { margin-top: 0; font-size: 13px; }
  .overflowMenu { flex: 0 0 auto; }
  .overflowMenu summary { width: 100%; min-width: 44px; }
  .workspaceJump { padding-bottom: 4px; }
  .workspaceJump button { min-width: max-content; min-height: 40px; }
  main { padding: 8px 8px 26px; }
  .setupView { min-height: 0; padding-top: 0; }
  .setupCard { padding: 12px; }
  .configGrid, .segmented.three, .segmented.two, .budgetRow, .policyGrid, .setupFoot { grid-template-columns: 1fr; }
  .policyGrid .segmented, .budgetRow .segmented { grid-column: auto; }
  .setupFoot { display: grid; }
  .setupSubmit { min-width: 0; }
  .tradeHeader { grid-template-columns: minmax(128px, .6fr) minmax(0, 1fr); gap: 8px; }
  .expiryBlock { grid-column: 2; min-width: 0; }
  .boardControls { grid-column: 1 / -1; }
  .boardControls { width: 100%; min-width: 0; max-width: 100%; align-items: flex-end; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .boardControls > div:first-child { min-width: 158px; }
  .checkControl { gap: 3px; font-size: 12px; }
  .spotBlock > span { font-size: 0; }
  .spotBlock > span::after { content: "ETH INDEX"; font-size: 12px; }
  .classicBoardWrap { max-height: 58vh; }
  .classicBoard { min-width: 820px; }
  .manualTicket { display: block; }
  .ticketFormRow, .previewGrid { grid-template-columns: 1fr 1fr; }
  .manualTicket button, .manualTicket input, .manualTicket select { min-height: 44px; }
  .metricGrid { grid-template-columns: repeat(2, 1fr); }
  .cockpitFacts { grid-template-columns: 1fr 1fr; }
  .cockpitDecision { grid-column: 1 / -1; }
  .advancedRail { grid-template-columns: 1fr; }
  .sectionHead { flex-wrap: wrap; }
  .chartLegend { justify-content: flex-start; }
  .comparisonMetrics { grid-template-columns: 1fr; }
  .policyNumbers { grid-template-columns: 1fr 1fr; }
  .ledgerFilters { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .ledgerFilters button { min-height: 44px; white-space: normal; }
  .ledgerEntry summary { grid-template-columns: 18px 1fr; }
  .ledgerEntry time, .ledgerEntry .eventType, .ledgerEntry .ledgerMain, .ledgerEntry .ledgerValue { grid-column: 2; white-space: normal; }
  .ledgerDetail, .ledgerOperation { grid-template-columns: 1fr; padding-left: 10px; }
  .analyticsToolbar, .lazyFooter { align-items: stretch; flex-direction: column; }
  .analyticsToolbar button, .lazyFooter button { min-height: 44px; }
  .metaFacts { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .appHeader nav a:nth-child(2), .appHeader nav a:nth-child(3) { display: none; }
  .commandFact strong { white-space: normal; }
  .spotBlock strong { font-size: 20px; }
  .compactChoice { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .compactChoice button { padding-inline: 5px; }
  .ticketEstimate { grid-template-columns: 1fr 1fr; }
  .metricGrid article { padding: 8px; }
  .metricGrid b { font-size: 15px; }
  .dialogActions { display: grid; grid-template-columns: 1fr 1fr; }
  .dialogActions button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .spinner { animation: none !important; }
}