* { box-sizing: border-box; }
:root { --bg: #14171c; --panel: #1d2128; --line: #2c323c; --text: #d8dde4; --dim: #8a94a3; --acc: #5fd0a8; --warn: #f0b456; --bad: #f06a5a; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header h1 { font-size: 18px; margin: 0; letter-spacing: .5px; }
header .sub { color: var(--dim); font-size: 12px; }
.grow { flex: 1; }
.chip { background: var(--panel); border: 1px solid var(--line); padding: 3px 9px; border-radius: 12px; font-size: 12px; color: var(--dim); }
.chip b { color: var(--text); }
main { display: flex; gap: 12px; padding: 12px; align-items: flex-start; flex-wrap: wrap; }
#left { flex: 1 1 640px; max-width: 900px; min-width: 0; }
#right { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
canvas { display: block; width: 100%; height: auto; border-radius: 6px; }
.viewwrap { position: relative; max-width: 900px; }
#mic { background: #888; aspect-ratio: 4 / 3; }
#toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(10,12,16,.82); padding: 6px 12px; border-radius: 6px; font-size: 13px; pointer-events: none; opacity: 0; transition: opacity .3s; max-width: 90%; text-align: center; }
#toast.show { opacity: 1; }
.scopehead { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; color: var(--dim); font-size: 13px; }
#osc { background: #0b0e12; border: 1px solid var(--line); }
.hint { margin-top: 8px; background: #1b2a26; border: 1px solid #2b4a40; color: #bfeedd; padding: 8px 12px; border-radius: 6px; min-height: 20px; }
.hint:empty { display: none; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); margin: 0 0 8px; font-weight: 600; }
.panel h2 .keys { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; opacity: .7; margin-left: 6px; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.row label { min-width: 56px; color: var(--dim); }
.row input[type=range], .row select { flex: 1; }
select { background: #2a313b; color: var(--text); border: 1px solid #3a4350; border-radius: 6px; padding: 5px; font: inherit; }
.row b { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.note { color: var(--dim); font-size: 12px; }
button { background: #2a313b; color: var(--text); border: 1px solid #3a4350; border-radius: 6px; padding: 7px 10px; font: inherit; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button:hover { background: #343c48; }
button:active, button.held { background: #46505e; }
button:disabled { opacity: .4; cursor: default; }
button.small { padding: 3px 8px; font-size: 12px; }
button.wide { width: 100%; }
button.primary { background: #1f6b55; border-color: #2e8f72; }
button.primary:hover { background: #26806a; }
button.danger { background: #5a2a2a; border-color: #7a3a3a; }
button.on { background: #2e6b8f; border-color: #3f8ab5; }
button.done { border-color: var(--acc); color: var(--acc); }
.seg { gap: 0; }
.seg button { flex: 1; border-radius: 0; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.btns { gap: 4px; }
.btns button { flex: 1; padding: 7px 4px; }
.chk { display: flex; align-items: center; gap: 6px; color: var(--text) !important; }
.manip { display: flex; gap: 14px; align-items: center; justify-content: space-around; }
.pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 40px); gap: 4px; }
.pad button, .manip .col button { padding: 0; font-size: 16px; }
.manip .col { display: flex; flex-direction: column; gap: 4px; }
.manip .col button { width: 64px; height: 40px; font-size: 14px; }
.padlbl { color: var(--dim); font-size: 11px; text-align: center; align-self: center; }
.pos { font: 12px ui-monospace, Menlo, monospace; color: var(--dim); margin-top: 6px; white-space: pre; }
.pressure { font-size: 22px; display: flex; align-items: center; gap: 8px; }
.pressure b { font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
#pBar { flex: 1; height: 10px; background: #111; border-radius: 5px; position: relative; overflow: hidden; }
#pBar i { position: absolute; top: 0; bottom: 0; background: var(--acc); }
.status .stage { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.readouts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.readouts div { background: #161a20; border-radius: 6px; padding: 5px 7px; }
.readouts label { display: block; font-size: 11px; color: var(--dim); }
.readouts b { font-size: 15px; font-variant-numeric: tabular-nums; }
.good { color: var(--acc); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.drugs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.drug { position: relative; overflow: hidden; }
.drug .lvl { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--acc); }
.drug small { display: block; color: var(--dim); font-size: 11px; }
#results { display: flex; gap: 12px; padding: 0 12px 20px; flex-wrap: wrap; }
#results > .panel { flex: 1 1 420px; }
.plots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.plots canvas { background: #0b0e12; border: 1px solid var(--line); }
.summary { margin-top: 8px; font-size: 13px; }
.summary table, #notebook table { width: 100%; border-collapse: collapse; }
.summary td, #notebook td, #notebook th { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
#notebook th { color: var(--dim); font-weight: 500; font-size: 12px; }
#log { max-height: 180px; overflow-y: auto; font-size: 12px; color: var(--dim); }
#log div { padding: 2px 0; border-bottom: 1px solid #22272f; }
#log b { color: var(--text); font-weight: 500; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 12px; }
.modal.hidden { display: none; }
.modal .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; max-width: 620px; padding: 18px 22px; max-height: 92vh; overflow-y: auto; }
.modal h2 { margin-top: 0; }
.modal li { margin: 4px 0; }
.classify { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 700px) {
  .plots { grid-template-columns: 1fr; }
  #right { max-width: none; }
}