.notice{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;border:1.5px dashed var(--lead);background:var(--lead-soft);color:var(--lead-ink);padding:10px 14px;font-size:14px}
.notice .label{color:var(--lead-ink)}
.timebar{display:grid;grid-template-columns:auto 1fr auto;gap:12px 24px;align-items:center;padding:14px 16px}
.timebar .when{display:flex;flex-direction:column}
.timebar .when b{font-family:var(--display);font-size:30px;line-height:1;font-weight:700}
.timebar input{width:100%;accent-color:var(--line)}
@media (max-width:700px){.timebar{grid-template-columns:1fr}}

.stage{position:relative;height:clamp(520px,calc(100vh - 250px),900px);overflow:hidden;background:#9fc0d6}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage.day{background:linear-gradient(180deg,#5d8fb8 0%,#9fc3da 38%,#d6e2e6 62%,#c9d2d0 100%)}
.stage.golden{background:linear-gradient(180deg,#2f4a73 0%,#a9788a 34%,#f0a868 58%,#d99a62 100%)}
.stage.night{background:radial-gradient(1200px 600px at 60% 110%,#1a2740 0%,#070b14 60%,#04060b 100%)}
.stage.thermal canvas{filter:url(#thermal) contrast(1.15)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px rgba(0,0,0,.42)}

.hud{position:absolute;z-index:3;font-size:13px}
.hud.tl{left:10px;top:10px;background:rgba(30,34,38,.9);border:1px solid var(--rule);backdrop-filter:blur(6px)}
.hud.tl div{display:flex;gap:18px;justify-content:space-between;align-items:baseline;padding:5px 10px;border-bottom:1px solid var(--rule-2);color:var(--ink-2)}
.hud.tl div:last-child{border-bottom:0}
.hud.tl b{font-family:var(--display);font-size:22px;font-weight:700;color:var(--ink)}
.hud b.red{color:#F0695F}.hud b.amber{color:var(--lead-ink)}
.hud.tc{left:50%;top:10px;transform:translateX(-50%);display:flex;gap:6px}
.hud.bl{left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.hud button{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(30,34,38,.9);color:var(--ink);border:1.5px solid var(--ink);padding:5px 10px;cursor:pointer}
.hud button:hover{border-color:var(--line-hi);color:var(--line-hi)}
.hud button[aria-pressed="true"]{background:var(--line);border-color:var(--line);color:#1E2226}
.hud.tr{right:10px;top:10px;background:rgba(30,34,38,.9);border:1px solid var(--rule);padding:8px 12px;display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(6px)}
.hud.tr label{display:flex;gap:8px;align-items:center;cursor:pointer;color:var(--ink)}
.hud.tr input{accent-color:var(--line);width:15px;height:15px}
.hud.br{right:10px;bottom:10px;font-size:11px;color:rgba(255,255,255,.7);text-shadow:0 1px 3px #000}
@media (max-width:760px){.hud.tr{display:none}.hud.tc{top:auto;bottom:48px}}

.labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.lb{position:absolute;left:0;top:0;pointer-events:auto;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:rgba(30,34,38,.88);color:var(--ink);border:1px solid rgba(255,255,255,.35);padding:1px 6px;white-space:nowrap;cursor:pointer}
.lb::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:rgba(255,255,255,.55)}
.lb.lead{border:1.5px dashed var(--lead);color:var(--lead-ink)}
.lb.disc{border-color:var(--red);background:var(--red);color:#fff}
.lb.sel{outline:2px solid var(--line);outline-offset:2px}

.loading{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(30,34,38,.82);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.loading.err{color:#F0695F;text-transform:none;letter-spacing:0;padding:24px;text-align:center}
.loading[hidden]{display:none}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:start}
@media (max-width:980px){.cols{grid-template-columns:minmax(0,1fr)}}
.queue{list-style:none;margin:0;padding:0;max-height:640px;overflow:auto}
.queue li{border-bottom:1px solid var(--rule-2)}
.queue li.none{padding:16px;color:var(--ink-2)}
.queue button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;width:100%;padding:12px 16px;cursor:pointer}
.queue button:hover,.queue button.on{background:var(--sheet-2)}
.queue button.on{box-shadow:inset 3px 0 0 var(--line)}
.queue .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.queue .row b{font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:14.5px}
.queue .amt{margin-left:auto;color:#F0695F;font-size:14px}
.queue .tx{color:var(--ink-2);font-size:14.5px}
.queue .src{color:var(--ink-3);font-size:11.5px}

.record .rhead{padding:14px 16px 10px;display:flex;flex-direction:column;gap:3px}
.record h3{font-size:30px;font-weight:700;text-transform:none;letter-spacing:0}
.kp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kp div{padding:10px 16px;border-right:1px solid var(--rule-2);display:flex;flex-direction:column}
.kp b{font-family:var(--display);font-size:32px;line-height:1;font-weight:700}
.kp span{color:var(--ink-2);font-size:13px}
.spark{display:block;width:100%;height:64px;padding:8px 16px;box-sizing:border-box;border-bottom:1px solid var(--rule)}
.spark path{fill:none;stroke:var(--line);stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark .lim{stroke:var(--red);stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.spark .now{stroke:var(--ink-3);vector-effect:non-scaling-stroke}
.iss{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule-2)}
.iss p{color:var(--ink-2);font-size:15px;margin-bottom:5px}
.iss p b{color:var(--ink)}
.iss .chk{color:var(--ink)}
.iss .chk .label{margin-right:6px;color:var(--line-hi)}
.iss .ag{color:var(--line-hi)}

.log{list-style:none;margin:6px 0 0;padding:0;max-height:430px;overflow:auto;border-top:1px solid var(--rule-2)}
.log li{display:grid;grid-template-columns:auto 96px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px;color:var(--ink-2);animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.log .n{color:var(--ink-3);font-size:12px;padding-top:2px}
.log .w{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px;color:var(--ink)}
.log li.disc .w{color:#F0695F}.log li.lead .w{color:var(--lead-ink)}.log li.esc .w{color:var(--line-hi)}.log li.false .w,.log li.miss .w{color:#fff;background:var(--red);padding:2px 5px;align-self:start;text-align:center}

/* sensor-style framing */
.frame{position:absolute;inset:14px;z-index:2;pointer-events:none}
.frame i{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.7)}
.frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.frame .cross{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) center/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) center/100% 1px no-repeat;-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px)}
.track{position:absolute;left:0;top:0;z-index:2;pointer-events:none;border:1px solid rgba(224,112,58,.0);background:linear-gradient(#E0703A,#E0703A) left top/18px 2px no-repeat,linear-gradient(#E0703A,#E0703A) left top/2px 18px no-repeat,linear-gradient(#E0703A,#E0703A) right top/18px 2px no-repeat,linear-gradient(#E0703A,#E0703A) right top/2px 18px no-repeat,linear-gradient(#E0703A,#E0703A) left bottom/18px 2px no-repeat,linear-gradient(#E0703A,#E0703A) left bottom/2px 18px no-repeat,linear-gradient(#E0703A,#E0703A) right bottom/18px 2px no-repeat,linear-gradient(#E0703A,#E0703A) right bottom/2px 18px no-repeat}
.track::after{content:"TRK  " attr(data-name);position:absolute;left:0;top:100%;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#F08A55;white-space:nowrap;text-shadow:0 1px 3px #000}
.hud.bc{right:44px;bottom:30px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.85);text-shadow:0 1px 3px #000;white-space:pre}
.hud.br{right:44px;bottom:12px}
.stage.night .frame i,.stage.thermal .frame i{border-color:rgba(120,255,160,.75)}
.stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
@media (max-width:760px){.hud.bc{display:none}}

.optitle{display:flex;flex-wrap:wrap;gap:6px 36px;align-items:flex-end;justify-content:space-between;padding-block:4px 0;margin-bottom:-10px}
.optitle h1{font-size:clamp(24px,2.6vw,36px);line-height:1;font-weight:700;margin-top:4px}
.optitle p{max-width:62ch;color:var(--ink-2);font-size:14.5px}
.sheet.wide{width:min(1800px,calc(100vw - 40px));position:relative;left:50%;margin-left:calc(min(1800px,calc(100vw - 40px)) / -2)}

.loading span::after{content:" ...";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}