/* Supply Pulse — the blueprint theme of the Warehouse Model (same tokens, type and panels). */
:root{
  --bg:#0a2f52; --panel:#0d3a63; --panel-2:#082444; --line:#2a5580; --line-soft:#1d4470;
  --ink:#bfe4ff; --ink-dim:#8fd0f2; --ink-faint:#6fa8c9; --accent:#7dd3fc; --accent-ink:#04202b; --tele:#7be0c4;
  --good:#1baf7a; --warn:#eda100; --bad:#e34948;
  /* chart series (validated for the dark surface: lightness band, CVD separation, contrast) */
  --s-demand:#bfe4ff; --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s-base:#6fa8c9;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --head:'Rajdhani', 'Arial Narrow', sans-serif;
  --body:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);}
a{color:var(--accent);}
code{font-family:var(--mono); font-size:0.92em; background:var(--panel-2); border:1px solid var(--line); padding:1px 5px; border-radius:4px; color:var(--ink);}

/* ---- header */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0d3a63,#0a2f52); position:sticky; top:0; z-index:30;}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand .mark{font-family:var(--head); font-weight:700; font-size:22px; letter-spacing:.04em; color:var(--ink); text-decoration:none;}
.brand .mark span{color:var(--accent);}
.brand .sub{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.03em;}
.brand .ver{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); border-radius:5px; padding:1px 6px;}
.header-actions{display:flex; align-items:center; gap:8px;}
.back-link{font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none;
  padding:6px 10px; border:1px solid var(--line); border-radius:6px; white-space:nowrap; background:transparent; cursor:pointer;}
.back-link:hover{color:var(--accent); border-color:var(--accent);}
select.lang-sel{appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; padding-right:22px;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 11px) 55%, calc(100% - 7px) 55%; background-size:4px 4px; background-repeat:no-repeat;}
select.lang-sel option{background:var(--panel-2); color:var(--ink);}
select.lang-sel:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.back-link.tour{color:var(--tele); border-color:rgba(123,224,196,.5);}

/* ---- layout */
.layout{display:grid; grid-template-columns:310px minmax(0,1fr);}
.rail{border-right:1px solid var(--line);
  background:repeating-linear-gradient(0deg, rgba(125,211,252,.05) 0, rgba(125,211,252,.05) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(125,211,252,.05) 0, rgba(125,211,252,.05) 1px, transparent 1px, transparent 28px), var(--panel-2);
  overflow-y:auto; padding:18px 18px 28px; display:flex; flex-direction:column; gap:18px; max-height:calc(100vh - 57px); position:sticky; top:57px;}
.rail::-webkit-scrollbar{width:8px;} .rail::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}
.rail-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.rail-h1{font-family:var(--head); font-weight:700; font-size:16px; letter-spacing:.04em; margin:0;}
.rail-note{font-size:11.5px; line-height:1.55; color:var(--ink-faint); margin:0;}
.rail-section{display:flex; flex-direction:column; gap:12px;}
.rail-section h2{margin:0; font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:8px; border-bottom:1px solid var(--line-soft);}
.ctrl{display:flex; flex-direction:column; gap:5px;}
.ctrl[hidden]{display:none;}
.ctrl .row-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.ctrl .name{font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.03em; color:var(--ink);}
.ctrl .val{font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; color:var(--tele); white-space:nowrap;}
.ctrl .note{font-size:11px; line-height:1.45; color:var(--ink-faint);}
.ctrl.changed .name:after{content:" ●"; color:var(--accent); font-size:9px; vertical-align:2px;}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:var(--line); outline:none; margin:6px 0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--accent-ink); box-shadow:0 0 0 2px var(--accent), 0 0 8px rgba(125,211,252,.6); cursor:pointer;}
input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--accent-ink); box-shadow:0 0 0 2px var(--accent); cursor:pointer;}
input[type=range]:focus-visible{box-shadow:0 0 0 2px var(--accent);}
select.choice{width:100%; font-family:var(--body); font-size:13px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:6px 8px;}
select.choice:focus{outline:none; border-color:var(--accent);}
.switch{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;}
.switch input{position:absolute; opacity:0; width:1px; height:1px;}
.switch .knob{flex:0 0 auto; width:38px; height:20px; border-radius:10px; background:var(--line); position:relative; transition:background .15s; border:1px solid var(--line);}
.switch .knob:after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--ink-faint); transition:left .15s, background .15s;}
.switch input:checked + .knob{background:rgba(125,211,252,.25); border-color:var(--accent);}
.switch input:checked + .knob:after{left:20px; background:var(--accent);}
.switch input:focus-visible + .knob{box-shadow:0 0 0 2px var(--accent);}

.btn{font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:8px 12px; cursor:pointer;}
.btn:hover{border-color:var(--accent); color:var(--accent);}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn.primary:hover{filter:brightness(1.08); color:var(--accent-ink);}
.btn.small{padding:6px 10px; font-size:11px;}

/* ---- main column */
.main{padding:20px 22px 0; display:flex; flex-direction:column; gap:18px; min-width:0;}
.errors{background:rgba(227,73,72,.1); border:1px solid rgba(227,73,72,.5); border-radius:8px; padding:10px 14px; font-family:var(--mono); font-size:12.5px; color:#ffb3b2;}
.errors[hidden]{display:none;}
.notes{background:rgba(237,161,0,.08); border:1px solid rgba(237,161,0,.45); border-radius:8px; padding:10px 14px; font-family:var(--mono); font-size:12.5px; color:#ffd88a;}
.notes[hidden]{display:none;}
.headline{font-size:17px; line-height:1.55; color:var(--ink-dim); margin:0;}
.headline b{color:var(--ink);}
.headline .cmp{display:block; font-size:14px; color:var(--ink-faint); margin-top:4px;}
.kpi-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;}
.kpi-tile{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:11px 12px;}
.kpi-label{font-family:var(--head); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.kpi-value{font-family:var(--head); font-size:22px; font-weight:700; color:var(--ink); margin-top:2px; font-variant-numeric:tabular-nums;}
.kpi-sub{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-top:2px; line-height:1.4;}
.kpi-delta{font-family:var(--mono); font-size:10.5px; margin-top:3px;}
.kpi-delta.up{color:var(--good);} .kpi-delta.down{color:var(--bad);} .kpi-delta.same{color:var(--ink-faint);}
.kpi-tile.status-warning{border-color:rgba(237,161,0,.55);} .kpi-tile.status-warning .kpi-value{color:var(--warn);}
.kpi-tile.status-critical{border-color:rgba(227,73,72,.6); background:rgba(227,73,72,.06);} .kpi-tile.status-critical .kpi-value{color:var(--bad);}
.kpi-tile .flag{font-size:10px; margin-left:4px;}

.compare{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px 14px;}
.compare .msg{font-size:13px; color:var(--ink-dim);}
.compare .msg b{color:var(--tele);}
.compare .acts{display:flex; flex-wrap:wrap; gap:6px;}

.panel{position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:2px; padding:16px 18px;}
.panel:before, .panel:after{content:""; position:absolute; width:10px; height:10px; pointer-events:none; border-color:var(--accent); border-style:solid; border-width:0;}
.panel:before{top:-1px; left:-1px; border-left-width:2px; border-top-width:2px;}
.panel:after{bottom:-1px; right:-1px; border-right-width:2px; border-bottom-width:2px;}
.panel h2{margin:0 0 4px; font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.panel-note{font-size:12.5px; line-height:1.5; color:var(--ink-faint); margin:0 0 10px;}
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.chart-grid .wide{grid-column:1 / -1;}

/* ---- charts */
.chart{position:relative;}
.chart-plot{position:relative; width:100%;}
.chart-plot > svg{display:block; width:100%; height:auto; overflow:visible;}
.chart .grid{stroke:var(--line-soft); stroke-width:1;}
.chart .axis{stroke:var(--line); stroke-width:1;}
.chart .tick{font-family:var(--mono); font-size:10.5px; fill:var(--ink-faint);}
.chart .cross{stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:3 3;}
.chart .band{fill:rgba(125,211,252,.06);}
.chart .band.outage{fill:rgba(227,73,72,.13);}
.chart .band.expedite{fill:rgba(201,133,0,.16);}
.chart .band.shock{fill:rgba(125,211,252,.07);}
.chart .band.ingoutage{fill:rgba(217,89,38,.14);}
.chart .band.lab{fill:rgba(25,158,112,.14);}
.chart-legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--ink-dim);}
.legend-item{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.legend-item svg{flex:0 0 auto;}
#controls{display:flex; flex-direction:column; gap:24px;}
.rail-section[hidden]{display:none;}
.band-key{display:inline-block; width:14px; height:10px; border-radius:2px;}
.band-key.outage{background:rgba(227,73,72,.35);} .band-key.expedite{background:rgba(201,133,0,.4);} .band-key.shock{background:rgba(125,211,252,.2);}
.band-key.ingoutage{background:rgba(217,89,38,.4);} .band-key.lab{background:rgba(25,158,112,.4);}
.chart-tip{position:absolute; top:6px; pointer-events:none; z-index:5; background:rgba(4,32,60,.96); border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-family:var(--mono); font-size:11px; color:var(--ink); min-width:150px; box-shadow:0 6px 18px rgba(0,0,0,.35);}
.chart-tip[hidden]{display:none;}
.chart-tip b{display:block; font-family:var(--head); font-size:12px; letter-spacing:.04em; color:var(--ink-dim); margin-bottom:3px;}
.chart-tip span{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.chart-tip span i{width:9px; height:9px; border-radius:2px; display:inline-block;}
.chart-tip span em{font-style:normal; margin-left:auto; padding-left:12px; color:var(--tele);}
.chart-title{font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--ink); margin:0 0 2px;}
.chart-table-btn{background:none; border:none; padding:2px 0; margin-top:4px; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); text-decoration:underline; cursor:pointer;}
.chart-table-btn:hover, .chart-table-btn:focus-visible{color:var(--accent);}
.chart-table{max-height:260px; overflow:auto; margin-top:6px; border:1px solid var(--line-soft); border-radius:6px;}
.chart-table[hidden]{display:none;}
.chart-table table{min-width:0;}
.chart-table caption{text-align:left; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); padding:4px 8px;}
.chart-sub{font-size:11.5px; color:var(--ink-faint); margin:0 0 6px;}

/* ---- decision lab */
.dtabs{display:flex; flex-wrap:wrap; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:3px; margin:6px 0 12px; max-width:100%; width:max-content;}
.dtabs button{background:transparent; border:none; border-radius:6px; color:var(--ink-dim); font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; cursor:pointer;}
.dtabs button.active{background:var(--accent); color:var(--accent-ink);}
.dtabs button:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.dpane[hidden]{display:none;}
.dtools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; font-size:12.5px; color:var(--ink-dim);}
.dtools label{display:flex; align-items:center; gap:6px;}
.dtools select.choice{width:auto; max-width:280px; padding:5px 8px; font-size:12.5px;}
.dtools input[type=text]{font-family:var(--body); font-size:13px; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:6px 8px; min-width:180px;}
.dtools input[type=text]:focus{outline:none; border-color:var(--accent);}
.sweep-tools{margin-top:16px;}
.dmsg{font-family:var(--mono); font-size:11.5px; color:var(--tele);}
.lab-sum{font-size:14px; line-height:1.55; color:var(--ink-dim); margin:0 0 12px;}
.lab-sum b{color:var(--ink);}
.table-scroll{overflow-x:auto; margin-top:8px;}
.dtable{width:100%; border-collapse:collapse; font-size:12.5px; min-width:520px;}
.dtable th, .dtable td{padding:6px 8px; border-bottom:1px dashed var(--line-soft); text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;}
.dtable thead th{font-family:var(--head); font-size:11.5px; letter-spacing:.03em; color:var(--ink-dim); vertical-align:bottom; white-space:normal;}
.dtable tbody th{text-align:left; font-family:var(--body); font-weight:500; color:var(--ink-dim);}
.dtable td.best{color:var(--good); font-weight:600;}
.dtable tr.cur td, .dtable tr.cur th{color:var(--tele);}
.scn-actions{display:flex; gap:4px; justify-content:flex-end; margin-top:4px;}
.scn-actions button{background:transparent; border:1px solid var(--line); border-radius:4px; color:var(--ink-dim); font-size:10.5px; padding:2px 7px; cursor:pointer;}
.scn-actions button:hover{border-color:var(--accent); color:var(--accent);}
.opt-progress{height:4px; background:var(--panel); border-radius:2px; overflow:hidden; margin:4px 0 10px;}
.opt-progress div{height:100%; width:0; background:var(--tele); transition:width .1s;}
#opt-plot{margin-top:16px;}
.chart .pt{fill:var(--s-base); fill-opacity:.55; stroke:var(--panel-2); stroke-width:1;}
.chart .pt.front{fill:var(--s1); fill-opacity:1; stroke-width:2;}
.chart .pt.best{fill:var(--good); fill-opacity:1; stroke:var(--panel-2); stroke-width:2;}
.chart .pt.current{fill:none; stroke:var(--s4); stroke-width:2.5;}
.pt-key{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--s-base); opacity:.7;}
.pt-key.front{background:var(--s1); opacity:1;} .pt-key.best{background:var(--good); opacity:1;} .pt-key.current{background:none; border:2px solid var(--s4); opacity:1;}
.chart .tor-label{fill:var(--ink-dim); font-family:var(--body); font-size:12px;}
.chart .base-line{stroke:var(--ink); stroke-width:1.5;}
.chart .band.now{fill:rgba(201,133,0,.6);}
.band-key.now{background:rgba(201,133,0,.8);}

/* ---- model: diagram and equations */
.sfd-wrap{overflow-x:auto;}
svg.sfd{display:block; width:100%; min-width:640px; height:auto;}
.sfd-stock rect{fill:var(--panel); stroke:var(--accent); stroke-width:1.5;}
.sfd-name{font-family:var(--head); font-weight:600; font-size:13px; fill:var(--ink); text-anchor:middle;}
.sfd-val{font-family:var(--mono); font-size:12px; fill:var(--tele); text-anchor:middle;}
.sfd-pipe{stroke:var(--ink-dim); stroke-width:3;}
.sfd-valve{stroke:var(--ink); stroke-width:2;}
.sfd-flow{font-family:var(--head); font-size:12px; fill:var(--ink-dim);}
.sfd-fval{font-family:var(--mono); font-size:11px; fill:var(--tele);}
.sfd-cloud{fill:none; stroke:var(--ink-faint); stroke-dasharray:3 2;}
.sfd-aux{fill:var(--panel); stroke:var(--ink-dim);}
.sfd-link{fill:none; stroke:var(--ink-faint); stroke-width:1.2; stroke-dasharray:4 3;}
.arw{fill:var(--ink-dim);} .arwi{fill:var(--ink-faint);}
.eq-week{font-family:var(--mono); font-size:11.5px; color:var(--tele);}
.eq-sec{margin-top:12px;}
.eq-sec h3{font-family:var(--head); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 4px; padding-bottom:4px; border-bottom:1px solid var(--line-soft);}
.eq-row{display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr) 120px; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line-soft); font-size:12.5px; align-items:baseline;}
.eq-row .n{color:var(--ink); font-weight:500;}
.eq-row .e{font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); line-height:1.5;}
.eq-row .e small{display:block; font-family:var(--body); font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.eq-row .v{font-family:var(--mono); font-size:12px; color:var(--tele); text-align:right; white-space:nowrap;}

/* ---- explanations and footer */
details.rules{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:4px 18px;}
details.rules summary{cursor:pointer; font-family:var(--head); font-weight:700; font-size:13.5px; padding:14px 0; color:var(--ink-dim); list-style:none;}
details.rules summary::-webkit-details-marker{display:none;}
details.rules summary:before{content:"▸ "; color:var(--accent);}
details.rules[open] summary:before{content:"▾ ";}
details.rules[open] summary{color:var(--ink);}
details.rules p, details.rules li{font-size:13.5px; line-height:1.65; color:var(--ink-dim);}
details.rules ol, details.rules ul{padding-left:20px;}
details.rules li{margin-bottom:6px;}
.explain{display:flex; flex-direction:column; gap:12px;}
footer.foot{margin:24px 0 0; padding:22px 0 50px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:12.5px; line-height:1.7;}
footer.foot a{color:var(--ink-faint);}
footer.foot .consult{display:block; margin-bottom:6px; font-weight:600; color:var(--ink);}
footer.foot .consult a{color:var(--accent);}

/* ---- your own demand */
.import-box{border:1px dashed var(--line); border-radius:8px; padding:10px 12px;}
.imp-row{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px;}
.file-btn{position:relative; overflow:hidden; display:inline-block;}
.file-btn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.file-btn:focus-within{box-shadow:0 0 0 2px var(--accent);}
.import-box .bad{color:#ffb3b2;}

/* ---- play mode */
.back-link.playlink{color:var(--s4); border-color:rgba(201,133,0,.55);}
.play{max-width:1280px; margin:0 auto; padding:20px 22px 0; display:flex; flex-direction:column; gap:18px;}
.play .foot{margin-top:6px;}
.switch.inline{gap:8px; justify-content:flex-start;}
.game-grid{display:grid; grid-template-columns:340px minmax(0,1fr); gap:24px;}
.decide{display:flex; flex-direction:column; gap:10px;}
.game-week{font-family:var(--head); font-size:15px; letter-spacing:.04em; color:var(--ink-dim); margin:0;}
.game-week b{font-size:24px; color:var(--ink);}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.fact{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
.fact span{display:block; font-family:var(--head); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.fact b{display:block; font-family:var(--head); font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums;}
.fact small{display:block; font-family:var(--mono); font-size:10px; color:var(--ink-faint); line-height:1.35; margin-top:2px;}
.plan-row{display:flex; align-items:center; gap:10px;}
.plan-row input[type=number]{width:110px; font-family:var(--mono); font-size:14px; background:var(--panel-2); color:var(--ink); border:1px solid var(--accent); border-radius:6px; padding:6px 8px; text-align:right;}
.quick{display:flex; flex-wrap:wrap; gap:6px;}
.quick [hidden]{display:none;}
.btn.big{padding:12px 14px; font-size:14px;}
.game-charts .chart-title{margin-top:6px;}
.end-tools{margin-top:16px;}
a.btn{text-decoration:none; display:inline-block;}
@media (max-width:900px){ .game-grid{grid-template-columns:1fr;} }

/* ---- tutorial */
.tour-menu{position:fixed; z-index:60; width:min(360px, calc(100vw - 16px)); background:var(--panel-2); border:1px solid var(--accent); border-radius:10px; padding:10px; box-shadow:0 12px 32px rgba(0,0,0,.45);}
.tour-menu-h{font-family:var(--head); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--ink-faint); margin:2px 4px 8px;}
.tour-level{display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:10px 12px; margin-bottom:6px; cursor:pointer; font-family:var(--body);}
.tour-level:hover{border-color:var(--accent);}
.tour-level b{display:block; font-family:var(--head); font-size:15px; letter-spacing:.04em;}
.tour-level span{display:block; font-size:12.5px; color:var(--ink-dim); margin:2px 0 4px; line-height:1.45;}
.tour-level em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--tele);}
.tour-card{position:fixed; z-index:60; right:18px; bottom:18px; width:min(400px, calc(100vw - 24px)); max-height:min(70vh, 560px); overflow-y:auto; background:var(--panel-2); border:1px solid var(--accent); border-radius:10px; padding:14px 16px; box-shadow:0 14px 40px rgba(0,0,0,.5);}
.tour-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-faint);}
.tour-x{background:none; border:none; color:var(--ink-dim); font-size:20px; cursor:pointer; line-height:1;}
.tour-bar{height:3px; background:var(--line); border-radius:2px; margin:8px 0 10px; overflow:hidden;}
.tour-bar i{display:block; height:100%; background:var(--tele);}
.tour-card h3{font-family:var(--head); font-size:18px; letter-spacing:.03em; margin:0 0 6px; color:var(--ink);}
.tour-body{font-size:13.5px; line-height:1.6; color:var(--ink-dim);}
.tour-body b{color:var(--ink);}
.tour-quiz{margin-top:10px; border-top:1px dashed var(--line); padding-top:10px;}
.tour-quiz p{font-size:13.5px; color:var(--ink); margin:0 0 8px; font-weight:500;}
.tour-quiz button{display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:6px; color:var(--ink); padding:7px 10px; margin-bottom:5px; cursor:pointer; font-family:var(--body); font-size:13px;}
.tour-quiz button:hover:not(:disabled){border-color:var(--accent);}
.tour-quiz button.right{border-color:var(--good); background:rgba(27,175,122,.15);}
.tour-quiz button.wrong{border-color:var(--bad); background:rgba(227,73,72,.12);}
.tour-fb{font-size:13px; line-height:1.55; color:var(--ink-dim); margin-top:6px;}
.tour-fb b{color:var(--ink);}
.tour-nav{display:flex; justify-content:space-between; gap:8px; margin-top:12px;}
.tour-nav button{font-family:var(--head); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:12px; padding:7px 14px; border-radius:6px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink);}
.tour-nav .tour-next{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.tour-nav button:disabled{opacity:.4; cursor:default;}
.tour-hl{outline:2px solid var(--tele) !important; outline-offset:4px; border-radius:4px; transition:outline-color .2s; scroll-margin-top:130px;}

@media (max-width:1180px){ .kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:980px){
  .layout{grid-template-columns:1fr;}
  .rail{position:static; max-height:none; border-right:none; border-bottom:1px solid var(--line);}
  .chart-grid{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .topbar{flex-wrap:wrap; row-gap:8px; padding:10px 14px;}
  .brand{flex-wrap:wrap; row-gap:2px;} .brand .sub .rest{display:none;}
  .header-actions{flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-left:auto;}
  .header-actions .back-link{padding:5px 8px; font-size:11px;}
  .main{padding:16px 16px 0;}
  .rail{padding:16px;}
  .eq-row{grid-template-columns:1fr; gap:2px;} .eq-row .v{text-align:left;}
  .headline{font-size:15.5px;}
  .tour-card{right:12px; left:12px; bottom:12px; width:auto; max-height:52vh;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }