:root{--bg:#eef2f7;--panel:#f8fafc;--card:#fff;--text:#172033;--muted:#64748b;--border:#d8e0ea;--accent:#2563eb;--accent2:#cfe4ff;--lamp:#fff8df;--unused:#d7dce3;--danger:#dc2626;--ok:#16a34a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}.app-header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 18px;background:#111827;color:white;box-shadow:0 3px 16px #0002}.brand{display:flex;align-items:center;gap:12px}.bulb{font-size:34px}.brand h1{font-size:19px;line-height:1.1;margin:0}.brand p{margin:2px 0 0;color:#cbd5e1;font-size:12px}.badge{border:1px solid #475569;border-radius:999px;padding:7px 10px;font-size:12px;color:#e2e8f0}.badge.ok{background:#064e3b;border-color:#15803d}.badge.bad{background:#7f1d1d;border-color:#dc2626}.layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:12px;padding:12px;height:calc(100dvh - 65px)}.left-panel{width:285px;min-width:285px;display:flex;flex-direction:column;gap:10px;overflow:auto}.main-panel{min-width:0;display:grid;grid-template-rows:minmax(420px,1fr) auto;gap:12px}.panel,.matrix-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 4px 14px #1f29370b}.panel h2,.matrix-card h2{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.01em}select,input,button{width:100%;font:inherit}select,input{background:white;border:1px solid #cbd5e1;border-radius:10px;color:var(--text);padding:9px 10px;outline:none}select:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2563eb22}button{border:0;border-radius:10px;background:#1f2937;color:white;padding:9px 10px;font-weight:700;cursor:pointer;margin-top:7px}button:hover:not(:disabled){filter:brightness(1.05)}button:disabled{opacity:.45;cursor:not-allowed}.hint,.help,.matrix-help{color:var(--muted);font-size:12px;line-height:1.35;margin:8px 0 0}.inline-label{display:block;color:var(--muted);font-size:12px;font-weight:700;margin:8px 0 4px}.section-title,.monitor-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-title span{font-size:12px;color:var(--muted)}#matrixCanvas{display:block;width:100%;height:calc(100% - 52px);min-height:380px;background:var(--card);border-radius:14px;border:1px solid var(--border);touch-action:none} .bottom-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:12px}.gi-panel.disabled{opacity:.56;filter:grayscale(.25)}.monitor-panel{min-width:0}.monitor-title button{width:auto;margin:0;background:#475569;padding:6px 10px;font-size:12px}#serialMonitor{height:150px;overflow:auto;background:#0f172a;color:#e5e7eb;border-radius:12px;margin:0;padding:10px;font:12px/1.35 Consolas,monospace;white-space:pre-wrap}.toast{position:fixed;right:16px;bottom:16px;background:#111827;color:white;border-radius:12px;padding:12px 14px;box-shadow:0 12px 30px #0004;max-width:min(420px,calc(100vw - 32px));z-index:20}@media(max-width:850px){.app-header{align-items:flex-start;flex-direction:column;padding:10px 12px}.layout{height:auto;display:block;padding:10px}.left-panel{width:100%;min-width:0}.main-panel{display:block}.matrix-card{margin-top:12px}#matrixCanvas{height:min(92vw,760px);min-height:420px}.bottom-grid{grid-template-columns:1fr;margin-top:12px}.monitor-panel{margin-top:12px}}@media(max-width:480px){.brand h1{font-size:17px}.panel,.matrix-card{border-radius:12px;padding:10px}#matrixCanvas{height:112vw;min-height:360px}.left-panel{gap:8px}.layout{padding:8px}.bottom-grid{gap:8px}}