:root {
    color-scheme: light;
    --bg: #f4f7fb;
    --bg-soft: #f8fafd;
    --panel: #ffffff;
    --panel-2: #f8fafd;
    --line: #dce4ee;
    --text: #18263a;
    --muted: #68788d;
    --accent: #315fbd;
    --accent-2: #07877e;
    --buy: #137b54;
    --sell: #c63f55;
    --warn: #956300;
    --radius: 13px;
    --mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: linear-gradient(180deg, #f9fbfe 0%, var(--bg) 520px, #f1f5fa 100%);
    color: var(--text);
    font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

a { color: inherit; text-decoration: none; }
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 248px;
    flex: 0 0 248px;
    padding: 22px 16px;
    border-right: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
    box-shadow: 4px 0 22px rgba(30, 50, 80, .035);
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.brand-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #60a9d4);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(49, 95, 189, .2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; letter-spacing: .3px; }
.brand-text small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

.nav { display: flex; flex-direction: column; gap: 5px; }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--muted); font-weight: 550;
    transition: background .15s, color .15s;
}
.nav-link:hover { background: #f1f5fb; color: var(--text); }
.nav-link.active { background: #eaf1fc; color: #234f9f; }
.nav-bullet { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.nav-external { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-heading { padding: 0 12px 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.nav-link-external { color: var(--accent); }
.nav-link-external:hover { background: #eef4fd; color: #234f9f; }
.nav-link-external .nav-bullet { background: var(--accent); opacity: .85; }
.sidebar-footer { margin-top: auto; color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px rgba(7, 135, 126, .32); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    min-height: 62px; padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 5;
}
.topbar-title { font-size: 15px; font-weight: 650; letter-spacing: .02em; }
.topbar-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.clock { font-family: var(--mono); font-size: 13px; color: var(--text); }
.pill { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: #fff; }
.content { padding: 28px 32px 64px; max-width: 1800px; width: 100%; margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 680; letter-spacing: -.025em; }
.page-head p { margin: 6px 0 0; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.screen-info {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px;
    padding: 17px 20px; border: 1px solid #cbdcf5; border-radius: var(--radius);
    background: #f1f6ff; color: #233d60;
}
.screen-info-icon {
    display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px;
    border-radius: 50%; background: #dceaff; color: #234f9f; font-weight: 750;
}
.screen-info-body { min-width: 0; line-height: 1.55; }
.screen-info h2 { margin: 0 0 6px; color: #234f9f; font-size: 15px; font-weight: 700; }
.screen-info p { margin: 0 0 8px; }
.screen-info ul { margin: 0; padding-left: 20px; }
.screen-info li + li { margin-top: 5px; }
.screen-info a { color: #234f9f; text-decoration: underline; text-underline-offset: 2px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

.grid { display: grid; gap: 20px; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

.stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 17px 19px;
    box-shadow: 0 3px 12px rgba(30, 50, 80, .035);
    min-width: 0;
}
.stat-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.stat-value { margin-top: 8px; font-size: 23px; font-weight: 650; font-family: var(--mono); letter-spacing: -.025em; overflow-wrap: anywhere; }
.stat-hint { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.stat-good .stat-value { color: var(--buy); }
.stat-bad .stat-value { color: var(--sell); }
.stat-warn .stat-value { color: var(--warn); }

.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(30, 50, 80, .045);
    min-width: 0;
}
.panel-head {
    min-height: 52px;
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    border-bottom: 1px solid #e8edf3;
}
.panel-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #52647b; font-weight: 700; }
.panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-body { padding: 19px 20px; }
.panel-body.flush { padding: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e8edf3; }
th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 650; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-family: var(--mono); }
tbody tr:hover { background: #f5f8fd; }

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 650; letter-spacing: .035em;
    background: #edf3ff; color: var(--accent);
    border: 1px solid #d5e2fb;
}
.badge.good { background: #e9f7f0; color: var(--buy); border-color: #c9ebd9; }
.badge.bad { background: #fff0f1; color: var(--sell); border-color: #f2d3d8; }
.badge.warn { background: #fff7e5; color: var(--warn); border-color: #f1e1b7; }

.book { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.book-side { padding: 6px 0; min-width: 0; }
.book-side h3 { margin: 0; padding: 8px 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.book-row { display: grid; grid-template-columns: 1fr 1fr; padding: 5px 16px; font-family: var(--mono); font-size: 13px; }
.book-row .px { font-weight: 650; }
.book-row .qty { text-align: right; color: var(--muted); }
.book-row.bid .px { color: var(--buy); }
.book-row.ask .px { color: var(--sell); }
.book-row:hover { background: #f5f8fd; }

.market-contract-bar {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.market-contract-select { display: grid; gap: 6px; min-width: 0; flex: 1 1 320px; }
.market-contract-select label { color: var(--muted); font-size: 12px; font-weight: 650; }
.market-contract-select select { width: min(100%, 470px); }
.market-book-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.market-depth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.market-depth-side { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.market-depth-heading { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; align-items: center; }
.market-depth-heading h3 { margin: 0; font-size: 14px; }
.market-depth-heading > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.depth-bid .market-depth-heading { background: #edf8f2; color: var(--buy); }
.depth-ask .market-depth-heading { background: #fff1f2; color: var(--sell); }
.market-depth-table { overflow-x: auto; }
.market-depth-columns, .market-depth-row {
    display: grid; grid-template-columns: minmax(100px, 1.05fr) minmax(90px, 1fr) minmax(110px, 1.05fr);
    gap: 8px; align-items: center; min-width: 320px; padding: 8px 12px;
}
.market-depth-columns { color: var(--muted); font-size: 10px; font-weight: 650; border-bottom: 1px solid var(--line); }
.market-depth-columns span:not(:first-child), .market-depth-row > span:not(.market-depth-fill):not(.market-depth-price) { text-align: right; }
.market-depth-row { position: relative; min-height: 36px; border-bottom: 1px solid #edf1f6; font: 13px var(--mono); }
.market-depth-row:last-child { border-bottom: 0; }
.market-depth-row > span:not(.market-depth-fill) { position: relative; z-index: 1; }
.market-depth-fill { position: absolute; inset: 0 0 0 auto; max-width: 100%; pointer-events: none; }
.depth-bid .market-depth-fill { background: rgba(19, 123, 84, .12); }
.depth-ask .market-depth-fill { background: rgba(198, 63, 85, .11); }
.market-depth-price { font-weight: 700; }
.depth-bid .market-depth-price { color: var(--buy); }
.depth-ask .market-depth-price { color: var(--sell); }
.market-own { display: inline-block; margin-left: 3px; padding: 1px 4px; border-radius: 4px; background: #e5edfc; color: #234f9f; font: 10px "Segoe UI", sans-serif; }
.market-depth-empty { min-height: 100px; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--muted); }
.market-depth-note { margin-top: 15px; color: var(--muted); font-size: 12px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
select, input[type=text] {
    background: #fff; color: var(--text);
    border: 1px solid #ccd6e3; border-radius: 9px;
    padding: 8px 11px; font: inherit; min-height: 36px;
}
input[type=number] {
    width: 120px;
    background: #fff; color: var(--text);
    border: 1px solid #ccd6e3; border-radius: 9px;
    padding: 8px 10px; min-height: 36px; font: inherit;
}
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.availability-toggle { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.availability-timeline-axis { height: 28px; margin: 0 100px 6px 210px; position: relative; color: var(--muted); font: 10px var(--mono); }
.availability-timeline-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.availability-timeline-axis span:first-child { transform: none; }
.availability-timeline-axis span:last-child { transform: translateX(-100%); }
.availability-timeline-list { display: grid; gap: 7px; }
.availability-timeline-row { display: grid; grid-template-columns: 190px minmax(180px, 1fr) 108px; align-items: center; gap: 10px; }
.availability-timeline-name { display: grid; gap: 2px; min-width: 0; font-size: 12px; }
.availability-timeline-name .mono { font-size: 10px; }
.availability-track { position: relative; height: 22px; overflow: hidden; border-radius: 6px; background: #f0f3f7; }
.availability-time-tick { position: absolute; z-index: 2; top: 0; bottom: 0; width: 1px; background: rgba(120, 139, 161, .25); pointer-events: none; }
.availability-segment { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; }
.availability-segment.available, .availability-legend-swatch.available { background: #51ad7c; }
.availability-segment.unavailable, .availability-legend-swatch.unavailable { background: #d86a74; }
.availability-segment.unknown, .availability-legend-swatch.unknown { background: repeating-linear-gradient(135deg, #e7ebf0, #e7ebf0 4px, #d4dbe4 4px, #d4dbe4 8px); }
.availability-change-marker { position: absolute; z-index: 3; top: 0; bottom: 0; width: 2px; background: #233d60; transform: translateX(-1px); }
.availability-timeline-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 15px; font-size: 11px; }
.availability-timeline-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.availability-legend-swatch { display: inline-block; width: 13px; height: 9px; border-radius: 3px; }
select:focus, input[type=text]:focus { outline: 3px solid rgba(49, 95, 189, .14); border-color: var(--accent); }
button {
    background: linear-gradient(135deg, #386bc5, #2c55a6);
    color: white; border: none; border-radius: 9px;
    padding: 8px 14px; font: inherit; font-weight: 650; cursor: pointer;
}
button:hover { filter: brightness(1.06); }
button.ghost { background: #fff; border: 1px solid var(--line); color: var(--text); }

.empty { padding: 30px; text-align: center; color: var(--muted); }
.scroll { max-height: 460px; overflow: auto; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #cbd6e2; border-radius: 8px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #dfe6ef; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.kv .v { font-family: var(--mono); }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.alert {
    padding: 12px 16px; border-radius: 11px;
    border: 1px solid #eedda9;
    background: #fff8e6; color: #805800;
}
.alert.bad { border-color: #f1cbd2; background: #fff1f3; color: var(--sell); }
.alert.good { border-color: #c9ebd9; background: #edf8f2; color: var(--buy); }

.chart-wrap { width: 100%; min-width: 0; }
.chart-plot { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: stretch; }
.line-chart { display: block; width: 100%; height: 280px; overflow: visible; }
.chart-y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 13px 8px 35px 0; text-align: right; color: #748197; font: 11px var(--mono); }
.chart-x-labels { padding-left: 58px; color: #748197; font: 11px var(--mono); }
.chart-x-track { position: relative; height: 18px; margin: 0 .667%; }
.chart-x-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.chart-x-labels span.first { transform: none; }
.chart-x-labels span.last { transform: translateX(-100%); }
.chart-grid { stroke: #e7edf4; stroke-width: 1; }
.chart-grid-vertical { stroke-dasharray: 3 5; }
.chart-axis { stroke: #cbd5e1; stroke-width: 1; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ote-range-wick, .ote-range-cap { stroke: #536b8a; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ote-range-vwap { stroke: #315fbd; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ote-range-last { fill: #c65a20; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ote-range-key { background: #536b8a; }
.ote-vwap-key { background: #315fbd; }
.ote-last-key { width: 8px; height: 8px; border-radius: 50%; background: #c65a20; }
.chart-volume-heading { margin: 14px 0 5px 58px; color: var(--muted); font-size: 11px; }
.chart-volume { display: block; width: 100%; height: 90px; overflow: visible; }
.chart-volume-y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 0 8px 7px 0; text-align: right; color: #748197; font: 11px var(--mono); }
.chart-volume-empty { padding: 8px 0 8px 58px; font-size: 12px; }
.ote-volume rect { fill: #86a6df; }
.ote-volume:hover rect, .ote-volume:focus rect { fill: #315fbd; }
.commitment-future { fill: #f3f7fd; }
.commitment-now { stroke: #6d7888; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.commitment-zero { stroke: #a7b5c7; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.commitment-obligation, .commitment-obligation-key { fill: #315fbd; background: #315fbd; }
.commitment-plan, .commitment-plan-key { fill: #07877e; background: #07877e; }
.commitment-plan.mismatch, .commitment-mismatch-key { fill: #d98717; background: #d98717; }
.commitment-interval:hover rect, .commitment-interval:focus rect { opacity: .7; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 4px 0; color: var(--muted); font-size: 12px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.chart-swatch { width: 17px; height: 3px; border-radius: 2px; }
.chart-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.profit-period { display: grid; gap: 2px; }
.profit-total { margin-bottom: 10px; font: 700 28px var(--mono); letter-spacing: -.02em; }
.profit-total.positive { color: var(--buy); }
.profit-total.negative { color: var(--sell); }
.profit-meta { margin-top: 9px; color: var(--muted); font-size: 12px; }
.profit-warning { margin-top: 8px; color: var(--warn); font-size: 12px; }
.profit-disclaimer { padding: 14px 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--muted); font-size: 12px; line-height: 1.55; }
.limit-explanation { margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.limit-explanation a { color: var(--accent); text-decoration: underline; }
.text-good { color: var(--buy); }
.text-bad { color: var(--sell); }
.chart-value { color: var(--text); font: 650 13px var(--mono); }
.dashboard-section { margin-top: 20px; }
.telemetry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 2px; }
.telemetry-item { min-width: 0; border: 1px solid #e5ebf2; border-radius: 10px; padding: 12px 14px; background: #fbfcfe; }
.telemetry-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.telemetry-value { margin-top: 5px; color: var(--text); font: 650 16px var(--mono); }
.chart-empty { min-height: 230px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.strategy-settings { display: grid; gap: 13px; }
.strategy-toggle { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.strategy-margin { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.input-with-unit { display: flex; align-items: center; gap: 9px; color: var(--text); }

@media (max-width: 1100px) {
    .grid-5, .grid-4, .grid-3, .grid-2, .grid-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout { flex-direction: column; }
    .sidebar { position: static; width: 100%; height: auto; flex-basis: auto; padding: 12px 16px; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
    .sidebar-footer { display: none; }
    .nav { flex-direction: row; overflow-x: auto; }
    .nav-link { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 800px) {
    .market-depth-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .availability-timeline-axis { margin-left: 125px; margin-right: 0; }
    .availability-timeline-row { grid-template-columns: 112px minmax(100px, 1fr); gap: 7px; }
    .availability-timeline-row > .badge { grid-column: 2; justify-self: start; margin-top: -4px; }
    .availability-timeline-name { font-size: 11px; }
}
@media (max-width: 680px) {
    .grid-5, .grid-4, .grid-3, .grid-2, .grid-main { grid-template-columns: 1fr; }
    .content { padding: 20px 16px 40px; }
    .topbar { padding: 0 16px; }
    .page-head h1 { font-size: 22px; }
    .telemetry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-x-labels span:nth-child(even) { display: none; }
}

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; padding: 30px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 18px 45px rgba(30, 50, 80, .12); display: grid; gap: 16px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand strong { display: block; font-size: 16px; }
.login-brand small { display: block; color: var(--muted); font-size: 12px; }
.login-card h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.login-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-field { display: grid; gap: 7px; }
.login-field label { color: var(--muted); font-size: 12px; }
.login-card input[type=password] { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-soft); font: 600 15px var(--mono); color: var(--text); }
.login-card input[type=password]:focus { outline: 2px solid rgba(49, 95, 189, .35); border-color: var(--accent); }
.login-card button { padding: 11px 14px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.login-card button:hover { background: #29529f; }
.login-error { padding: 10px 12px; border: 1px solid #f0c9d2; border-radius: 9px; background: #fdeef1; color: var(--sell); font-size: 13px; }
.login-note { color: var(--muted); font-size: 11px; text-align: center; }