/* FortunaVision — one workstation, the chart is the hero; everything else is a thin instrument around it.
   Tokens written once. IBM Plex Sans for words, IBM Plex Mono for numbers. Brass marks what Fortuna computed. */
:root {
  --bg: #0b0f14; --panel: #10151c; --panel-2: #141a23; --line: #1c2430; --line-2: #26303f;
  --text: #e7eaf0; --muted: #8a94a6; --dim: #5b6675;
  --brass: #d9a441; --brass-2: rgba(217,164,65,.16); --cyan: #35c7dd; --violet: #9b8cff; --up: #3ddc97; --down: #ff5c7a; --amber: #f2b94b; --blue: #5aa9ff;
  --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --t-xs: .7rem; --t-sm: .76rem; --t-base: .84rem; --t-md: .95rem; --t-lg: 1.15rem;
  --rail-w: 224px; --insp-w: 328px; --top-h: 44px; --cmd-h: 40px;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f4f2ec; --panel: #ffffff; --panel-2: #f7f5ef; --line: #e3dfd4; --line-2: #d2ccbd; --text: #1a1d23; --muted: #5f6673; --dim: #8b919c; --brass: #a9771a; --brass-2: rgba(169,119,26,.12); } }
:root[data-theme="light"] { --bg: #f4f2ec; --panel: #ffffff; --panel-2: #f7f5ef; --line: #e3dfd4; --line-2: #d2ccbd; --text: #1a1d23; --muted: #5f6673; --dim: #8b919c; --brass: #a9771a; --brass-2: rgba(169,119,26,.12); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--t-base)/1.45 var(--sans); display: grid; grid-template-rows: var(--top-h) minmax(0, 1fr) var(--cmd-h); overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .brass { color: var(--brass); } .muted { color: var(--muted); }

/* ── top bar ── */
.top { display: flex; align-items: center; gap: .8rem; padding: 0 .9rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.mark { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; letter-spacing: .01em; } .mark svg { width: 20px; height: 20px; }
.title { display: flex; align-items: baseline; gap: .6rem; min-width: 0; } .title b { font-weight: 600; font-size: var(--t-md); white-space: nowrap; } .title span { color: var(--muted); font-size: var(--t-xs); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfs { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; } .tfs button { padding: .18rem .55rem; font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); } .tfs button + button { border-left: 1px solid var(--line-2); } .tfs button.on { color: var(--text); background: var(--brass-2); }
.sp { flex: 1; }
.status { font-size: var(--t-xs); color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); } .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); } .status.ok i { background: var(--up); box-shadow: 0 0 0 3px rgba(61,220,151,.18); } .status.warn i { background: var(--amber); }
.clock { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.ghost { color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: .1rem .5rem; font-size: var(--t-xs); } .ghost:hover { color: var(--text); border-color: var(--muted); }

/* ── app grid ── */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--insp-w); min-height: 0; }
.rail { border-right: 1px solid var(--line); overflow-y: auto; background: var(--panel); }
.rail .r { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; }
.rail .r:hover { background: var(--panel-2); } .rail .r.on { background: var(--brass-2); box-shadow: inset 3px 0 0 var(--brass); }
.rail .r b { font-weight: 500; } .rail .r small { display: flex; align-items: center; gap: .4rem; } .rail .r .sp { width: 64px; height: 16px; flex: none; opacity: .9; }
tr.jump { cursor: pointer; } tr.jump:hover td { background: var(--brass-2); } .rail .r .px { font-family: var(--mono); font-size: var(--t-sm); text-align: right; } .rail .r small { color: var(--muted); font-size: var(--t-xs); } .rail .r .chg { font-family: var(--mono); font-size: var(--t-xs); text-align: right; }
.rail .r .st { font-size: .62rem; color: var(--muted); padding: 0 .35rem; border: 1px solid var(--line-2); border-radius: 4px; margin-left: .3rem; } .rail .r .st.armed { color: var(--up); border-color: rgba(61,220,151,.4); } .rail .r .st.watch { color: var(--amber); border-color: rgba(242,185,75,.4); }
.rail .grp { padding: .55rem .8rem .2rem; font-size: var(--t-xs); color: var(--dim); }

.work { display: grid; grid-template-columns: 38px minmax(0, 1fr); min-height: 0; }
.tools { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; align-items: center; padding: .4rem 0; gap: .15rem; overflow-y: auto; }
.tools button { width: 30px; height: 30px; border-radius: 6px; color: var(--muted); display: grid; place-items: center; } .tools button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tools button:hover { color: var(--text); background: var(--panel-2); } .tools button.on { color: var(--brass); background: var(--brass-2); } .tools hr { width: 18px; border: 0; border-top: 1px solid var(--line-2); margin: .3rem 0; }
.stage { position: relative; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.plot { position: relative; min-height: 0; } #chart { height: 100%; min-height: 0; } #chart[hidden] { display: none; }
#csvg { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; } #csvg.drag { cursor: grabbing; } #csvg[hidden], #cpane[hidden] { display: none; }
#cpane { width: 100%; height: 110px; display: block; border-top: 1px solid var(--line); }
.cx { font: 10px var(--mono); fill: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; } .seg button { padding: .18rem .55rem; font-size: var(--t-xs); color: var(--muted); } .seg button + button { border-left: 1px solid var(--line-2); } .seg button.on { color: var(--text); background: var(--brass-2); }
.tools.off { opacity: .35; pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: .25rem .7rem; padding: .35rem .7rem 0; font-size: var(--t-xs); color: var(--muted); font-family: var(--mono); min-height: 1.4rem; } .legend b { color: var(--text); font-weight: 500; } .legend .tog { cursor: pointer; border-bottom: 1px dotted var(--line-2); } .legend .tog.off { opacity: .4; text-decoration: line-through; }
.ohlc { display: flex; gap: .9rem; padding: .25rem .7rem .3rem; font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); border-top: 1px solid var(--line); flex-wrap: wrap; } .ohlc b { color: var(--text); font-weight: 500; }

.inspect { border-left: 1px solid var(--line); background: var(--panel); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); } .tabs button { flex: 1; padding: .5rem 0; font-size: var(--t-xs); color: var(--muted); border-bottom: 2px solid transparent; } .tabs button.on { color: var(--text); border-bottom-color: var(--brass); }
.tab { overflow-y: auto; padding: .6rem .8rem 1rem; font-size: var(--t-sm); }
.tab h4 { margin: .6rem 0 .3rem; font-size: var(--t-xs); font-weight: 600; color: var(--muted); } .tab h4:first-child { margin-top: 0; }
.tab p { margin: .2rem 0 .5rem; color: var(--muted); line-height: 1.5; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; font-size: var(--t-sm); } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-family: var(--mono); text-align: right; }
.lv { display: grid; grid-template-columns: 1fr auto auto; gap: .1rem .6rem; font-family: var(--mono); font-size: var(--t-sm); align-items: baseline; } .lv > span { padding: .12rem 0; border-bottom: 1px solid var(--line); } .lv .t { font-family: var(--sans); color: var(--muted); font-size: var(--t-xs); } .lv .KEY { color: var(--brass); font-weight: 600; } .lv .d { color: var(--muted); font-size: var(--t-xs); text-align: right; }
.big { font-family: var(--mono); font-size: var(--t-lg); font-weight: 500; line-height: 1.1; margin: .1rem 0 .2rem; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; margin: .4rem 0; background: var(--panel-2); } .tile small { color: var(--muted); font-size: var(--t-xs); }
.gauge { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--down), var(--line-2) 50%, var(--up)); position: relative; margin: .35rem 0 .1rem; } .gauge i { position: absolute; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--text); transform: translateX(-50%); }
.prints { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); display: grid; gap: .15rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; } .form label { display: grid; gap: .15rem; font-size: var(--t-xs); color: var(--muted); } .form textarea { background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px; color: var(--text); font: 500 var(--t-xs) var(--mono); padding: .3rem .4rem; width: 100%; resize: vertical; } .form input, .form select { background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px; color: var(--text); font: 500 var(--t-sm) var(--mono); padding: .3rem .4rem; width: 100%; } .form .w { grid-column: 1 / -1; }
.btn { border: 1px solid var(--line-2); border-radius: 6px; padding: .25rem .6rem; font-size: var(--t-xs); color: var(--text); } .btn.brass { background: var(--brass); color: #0b0f14; border-color: var(--brass); font-weight: 600; }
.alist { display: grid; gap: .35rem; } .alist .a { border-left: 2px solid var(--line-2); padding: .1rem .5rem; } .alist .a.warn { border-color: var(--amber); } .alist .a.critical { border-color: var(--down); } .alist small { color: var(--muted); font-family: var(--mono); font-size: var(--t-xs); display: block; }
table.tb { width: 100%; border-collapse: collapse; font-size: var(--t-xs); } .tb th, .tb td { padding: .25rem .3rem; border-bottom: 1px solid var(--line); text-align: left; } .tb td.n, .tb th.n { font-family: var(--mono); text-align: right; } .tb th { color: var(--muted); font-weight: 500; }

.alloc { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); margin: .2rem 0 .35rem; } .alloc i { display: block; height: 100%; } .alloc-k { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }

/* ── command line ── */
.cmd { display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; border-top: 1px solid var(--line); background: var(--panel); }
.prompt { color: var(--brass); font-family: var(--mono); font-weight: 600; }
#cmd { flex: 1; background: none; border: 0; color: var(--text); font: 500 var(--t-base) var(--mono); outline: none; } #cmd::placeholder { color: var(--dim); }
.cmd .hint { color: var(--dim); font-size: var(--t-xs); font-family: var(--mono); white-space: nowrap; }
.cmd.err { box-shadow: inset 0 2px 0 var(--down); } .cmd.ok { box-shadow: inset 0 2px 0 var(--up); }

/* ── sheet (modal) ── */
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 20; padding: 1rem; } .sheet[hidden] { display: none; }
.sheet-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; width: min(720px, 100%); max-height: 86vh; overflow: auto; padding: .9rem 1.1rem 1.1rem; } .sheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; } .sheet-card p { color: var(--muted); line-height: 1.55; } .sheet-card code { font-family: var(--mono); color: var(--brass); font-size: var(--t-sm); } .sheet-card table { width: 100%; }

/* ── responsive ── */
@media (max-width: 1080px) { :root { --insp-w: 280px; --rail-w: 190px; } }
@media (max-width: 860px) {
  body { overflow: auto; grid-template-rows: var(--top-h) auto var(--cmd-h); }
  .app { grid-template-columns: 1fr; }
  .rail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .rail .grp { display: none; } .rail .r { min-width: 150px; border-bottom: 0; border-right: 1px solid var(--line); }
  .work { height: 62vh; } .inspect { border-left: 0; border-top: 1px solid var(--line); max-height: 60vh; }
  .title span, .clock, .cmd .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── mobile (390px pass) ── */
@media (max-width: 860px) {
  body { grid-template-rows: auto auto var(--cmd-h); }
  .top { flex-wrap: wrap; padding: .35rem .6rem; row-gap: .35rem; gap: .5rem; } .top .sp { flex: 1 0 100%; display: none; } .top .status { margin-left: auto; }
  .work { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 60vh; }
  .tools { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); padding: .15rem .4rem; } .tools hr { width: 0; height: 18px; border-top: 0; border-left: 1px solid var(--line-2); margin: 0 .3rem; }
  .tabs { overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex: none; padding: .5rem .75rem; }
  .rail .r { min-width: 172px; padding: .4rem .6rem; } .rail .r small { white-space: nowrap; overflow: hidden; } .rail .r .sp { width: 44px; }
  .legend { padding-top: .25rem; }
  .sheet { padding: .6rem; } .sheet-card { max-height: 92vh; padding: .8rem .9rem 1rem; }
}
@media (max-width: 480px) {
  .top .title b { font-size: var(--t-base); } .tfs button, .seg button { padding: .18rem .42rem; } .mark { font-size: 0; gap: 0; } .mark svg { width: 22px; height: 22px; }
  .work { height: 56vh; } .inspect { max-height: none; }
  #cmd::placeholder { color: transparent; } .cmd .hint { display: none; }
}