:root{--bg: #0d1014;--panel: rgba(16, 20, 26, .94);--panel-border: #232b34;--text: #d7dde4;--text-dim: #8b95a1;--accent: #ff8a3d;--accent-dim: #b35b22;--good: #39d98a;--warn: #e8c14a;--bad: #e5484d;--blue: #3fc2ff;--mono: "Cascadia Code", "Consolas", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font:13px/1.45 Segoe UI,system-ui,sans-serif}#viewport{position:fixed;top:0;right:0;bottom:0;left:0}#viewport canvas{display:block}#topbar{position:fixed;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:linear-gradient(180deg,rgba(13,16,20,.92),rgba(13,16,20,.55) 80%,transparent);pointer-events:none;z-index:5}#topbar .tb-left,#topbar .tb-right{display:flex;align-items:center;gap:12px}#topbar .logo{color:var(--accent);font-size:17px}#topbar .title{font-weight:600;letter-spacing:.4px}.badge{font:600 10px/1 var(--mono);letter-spacing:1px;padding:4px 8px;border-radius:3px;background:#1f2833;color:var(--blue);border:1px solid #2c3a48}.badge.danger{background:#3a1214;color:#ff6b70;border-color:#6e2226;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.4}}.hidden{display:none!important}.stat{color:var(--text-dim);font-size:12px}.stat b{color:var(--text);font-family:var(--mono);font-weight:500;margin-left:4px}#panel{position:fixed;top:52px;left:10px;bottom:10px;width:342px;overflow-y:auto;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:6;scrollbar-width:thin;scrollbar-color:#2c3540 transparent}.section{margin-bottom:14px}.section h3{font:600 10px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--panel-border);padding-bottom:6px;margin-bottom:9px}.row{display:flex;align-items:center;gap:8px;margin-bottom:7px}.row label{color:var(--text-dim);min-width:86px;font-size:12px}.row .val{font-family:var(--mono);font-size:12px;margin-left:auto;color:var(--text)}#estopWrap{display:flex;gap:12px;align-items:center}#estop{width:66px;height:66px;border-radius:50%;border:4px solid #5a1518;background:radial-gradient(circle at 35% 30%,#ff5b60,#b3181e 70%);color:#fff;font:700 11px/1.1 var(--mono);cursor:pointer;box-shadow:0 3px 14px #e5484d59,inset 0 -4px 8px #0006;flex:none}#estop:active{transform:translateY(1px)}#estop.engaged{background:radial-gradient(circle at 35% 30%,#7e2225,#55090c 70%);box-shadow:none}.estopside{display:flex;flex-direction:column;gap:6px;flex:1}button.btn{background:#1d242d;color:var(--text);border:1px solid #2d3844;border-radius:5px;padding:6px 10px;font-size:12px;cursor:pointer}button.btn:hover{background:#242d38;border-color:#3a4756}button.btn.primary{background:var(--accent-dim);border-color:var(--accent);color:#fff}button.btn.primary:hover{background:#c96a2c}button.btn:disabled{opacity:.45;cursor:default}.btnrow{display:flex;gap:6px;flex-wrap:wrap}.btnrow .btn{flex:1}.switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch input{display:none}.switch .knob{width:30px;height:16px;border-radius:9px;background:#2a333d;position:relative;transition:background .15s;flex:none}.switch .knob:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#79848f;transition:all .15s}.switch input:checked+.knob{background:var(--accent-dim)}.switch input:checked+.knob:after{left:16px;background:#fff}.switch span.lbl{font-size:12px;color:var(--text-dim)}.switch input:checked~span.lbl{color:var(--text)}.seg{display:flex;border:1px solid #2d3844;border-radius:6px;overflow:hidden}.seg button{flex:1;background:transparent;border:0;color:var(--text-dim);padding:7px 4px;font-size:12px;cursor:pointer;border-right:1px solid #2d3844}.seg button:last-child{border-right:0}.seg button.on{background:var(--accent-dim);color:#fff}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:#2a333d;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #0d1014}input[type=range]:disabled::-webkit-slider-thumb{background:#566270}select{background:#1d242d;color:var(--text);border:1px solid #2d3844;border-radius:5px;padding:5px 7px;font-size:12px;flex:1}.joint{margin-bottom:10px}.joint .jhead{display:flex;align-items:baseline;gap:8px}.joint .jname{font-size:12px;color:var(--text);min-width:108px}.joint .jang{font-family:var(--mono);font-size:12px;color:var(--blue);margin-left:auto}.joint .jflags{display:flex;gap:4px}.jflag{font:600 8.5px/1 var(--mono);letter-spacing:.5px;padding:2px 4px;border-radius:2px;display:none}.jflag.on{display:inline-block}.jflag.sat{background:#3d2c12;color:var(--warn)}.jflag.lim{background:#331d10;color:#ff9f6b}.jflag.hot{background:#3a1214;color:#ff6b70}.jflag.slip{background:#10222e;color:var(--blue)}.joint input[type=range]{width:100%;margin:5px 0 3px}.tqbar{height:5px;border-radius:2px;background:#222a33;position:relative;overflow:hidden}.tqbar .fill{position:absolute;top:0;bottom:0;left:50%;background:var(--good);width:0%;transition:width .06s linear,background .2s}.tqbar .tick{position:absolute;top:-1px;bottom:-1px;left:50%;width:1px;background:#46525f}#chartCanvas{width:100%;height:118px;background:#10151b;border:1px solid var(--panel-border);border-radius:6px}.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12px}.kv .k{color:var(--text-dim)}.kv .v{font-family:var(--mono);text-align:right;color:var(--text)}#hint{position:fixed;bottom:8px;right:12px;color:#5a6673;font-size:11px;z-index:4;pointer-events:none}.about{color:var(--text-dim);font-size:11.5px}.about b{color:var(--text)}.about ul{margin:4px 0 0 16px}.about li{margin-bottom:2px}details summary{cursor:pointer;font:600 10px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--panel-border);padding-bottom:6px;margin-bottom:9px;list-style-position:outside}.note{color:var(--text-dim);font-size:11.5px;line-height:1.4;margin-bottom:8px}.seg button:disabled{opacity:.4;cursor:default}.row .seg{flex:1}
