: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}.soud-logo-link{display:flex;width:46px;height:46px;flex:0 0 46px;align-items:center;justify-content:center;padding:4px;background:#fff;border-radius:10px;transition:transform .15s ease,box-shadow .15s ease}.soud-logo-link:hover,.soud-logo-link:focus-visible{transform:translateY(-1px);box-shadow:0 4px 12px #0005;outline:2px solid #93c5fd;outline-offset:2px}.soud-logo-link img{display:block;width:100%;height:100%;object-fit:contain}.brand h1{font-size:19px;line-height:1.1;margin:0}.brand-meta{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;margin:3px 0 0;color:#cbd5e1;font-size:12px}.brand-site{color:#93c5fd;font-weight:700;text-decoration:none;border-bottom:1px solid #93c5fd66}.brand-site:hover,.brand-site:focus-visible{color:#dbeafe;border-bottom-color:#dbeafe;outline:none}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.install-button{width:auto;margin:0;padding:7px 10px;background:#2563eb;font-size:12px}.origin-warning{margin:10px 12px 0;padding:10px 12px;border:1px solid #f59e0b;border-radius:10px;background:#fffbeb;color:#78350f;font-size:13px;line-height:1.4}.origin-warning a{color:#92400e;font-weight:800}
.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);grid-template-areas:"usb right" "parameter right" "gi right" "game right" "communication right" "firmware right" "diagnostics right" "file right";grid-template-rows:repeat(8,auto);gap:10px 12px;padding:12px;min-height:calc(100dvh - 65px);align-content:start}
.usb-panel{grid-area:usb}.parameter-panel{grid-area:parameter}.gi-panel{grid-area:gi}.game-panel{grid-area:game}.communication-panel{grid-area:communication}.firmware-panel{grid-area:firmware}.diagnostics-panel{grid-area:diagnostics}.file-panel{grid-area:file}.right-column{grid-area:right;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;align-self:stretch}.matrix-card{min-width:0;flex:0 0 auto}.monitor-panel{min-width:0;min-height:174px;display:flex;flex:1 1 174px;flex-direction:column}
.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}.panel-title,.section-title,.monitor-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-title h2{margin-bottom:0}
.connection-status{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px;color:var(--muted);font-size:11px;font-weight:700}.status-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px #94a3b822}.connection-status.connected{color:var(--ok)}.connection-status.connected .status-dot{background:var(--ok);box-shadow:0 0 0 3px #16a34a22}#deviceVersion{white-space:nowrap}
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}input.invalid{border-color:var(--danger);box-shadow:0 0 0 3px #dc262622}
.number-stepper{position:relative}
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}.toggle-button.active{background:var(--ok)}
.firmware-panel progress{display:block;width:100%;height:8px;margin-top:8px;accent-color:var(--ok)}.firmware-fallback{margin-top:12px;padding-top:9px;border-top:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.hint,.help,.matrix-help{color:var(--muted);font-size:12px;line-height:1.35;margin:8px 0 0}.compatibility-note{color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px}.inline-label{display:block;color:var(--muted);font-size:12px;font-weight:700;margin:8px 0 4px}.section-title span{font-size:12px;color:var(--muted)}
#matrixCanvas{display:block;width:100%;height:auto;aspect-ratio:4/5;background:var(--card);border-radius:14px;border:1px solid var(--border);touch-action:none}.gi-panel.disabled{opacity:.56;filter:grayscale(.25)}
.monitor-title button{width:auto;margin:0;background:#475569;padding:6px 10px;font-size:12px}#serialMonitor{height:auto;min-height:150px;flex:1;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}
.access-dialog{width:min(470px,calc(100vw - 32px));border:1px solid var(--border);border-radius:16px;padding:20px;color:var(--text);box-shadow:0 20px 55px #0005}.access-dialog::backdrop{background:#0f172a99}.access-dialog h2{margin:0 0 8px;font-size:18px}.access-dialog p{margin:0;color:var(--muted);line-height:1.45}.dialog-actions{display:flex;gap:8px;margin-top:16px}.dialog-actions button{margin:0}.dialog-actions .secondary-button{background:#64748b}
.welcome-dialog{border-top:5px solid #2563eb}.welcome-dialog .welcome-site{margin-top:12px}.welcome-dialog .welcome-site a{color:#1d4ed8;font-size:17px;font-weight:900;text-decoration:none}.welcome-dialog .welcome-site a:hover,.welcome-dialog .welcome-site a:focus-visible{text-decoration:underline}
.diagnostic-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;margin-top:9px;color:var(--muted);font-size:10px}.diagnostic-legend span{display:flex;align-items:center;gap:5px;min-width:0}.diagnostic-legend i{width:9px;height:9px;border-radius:50%;background:var(--diagnostic-color);flex:0 0 auto}.dip-heading{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.dip-heading h3{font-size:12px;margin:0}.dip-heading span{color:var(--muted);font-size:10px}.dip-switches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:7px}.dip-switch{display:grid;justify-items:center;gap:3px;padding:6px 2px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--muted);user-select:none}.dip-switch.editable{cursor:pointer}.dip-switch.editable:hover,.dip-switch.editable:focus-visible{outline:2px solid #2563eb66;outline-offset:1px}.dip-number{font-size:10px;font-weight:800}.dip-track{position:relative;width:22px;height:38px;border-radius:6px;background:#cbd5e1;box-shadow:inset 0 0 0 1px #94a3b8}.dip-thumb{position:absolute;left:3px;top:3px;width:16px;height:14px;border-radius:4px;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .15s ease}.dip-switch.on{border-color:#16a34a;background:#f0fdf4;color:#166534}.dip-switch.on .dip-track{background:#16a34a}.dip-switch.on .dip-thumb{transform:translateY(18px)}.dip-switch.overridden{border-color:#dc2626;background:#fef2f2;color:#991b1b;box-shadow:0 0 0 2px #dc262633}.dip-switch.overridden .dip-track{background:#dc2626}.dip-switch.overridden .dip-state{color:#dc2626}.dip-label{font-size:9px;font-weight:700;text-align:center;line-height:1.1;min-height:20px;overflow-wrap:anywhere}.dip-state{font-size:9px;font-weight:900}.dip-switch.on:not(.overridden) .dip-state{color:#15803d}.dip-switch.off:not(.overridden) .dip-state{color:#64748b}
@media(hover:none) and (pointer:coarse){.number-stepper input{padding-right:46px;touch-action:manipulation;background-image:linear-gradient(#cbd5e1,#cbd5e1);background-repeat:no-repeat;background-size:1px calc(100% - 10px);background-position:right 40px center}.number-stepper::before,.number-stepper::after{content:"";position:absolute;right:15px;z-index:1;pointer-events:none;border-left:6px solid transparent;border-right:6px solid transparent}.number-stepper::before{top:8px;border-bottom:7px solid #475569}.number-stepper::after{bottom:8px;border-top:7px solid #475569}}
@media(max-width:850px){
  .app-header{align-items:flex-start;flex-direction:column;padding:10px 12px}.header-actions{width:100%;justify-content:space-between}
  .layout{grid-template-columns:1fr;grid-template-areas:"usb" "matrix" "parameter" "gi" "game" "communication" "firmware" "diagnostics" "file" "monitor";grid-template-rows:auto;padding:10px}
  .right-column{display:contents}.matrix-card{grid-area:matrix;min-height:0}.monitor-panel{grid-area:monitor;margin-top:0}#matrixCanvas{height:auto;min-height:0}.dialog-actions{flex-direction:column}
}
@media(max-width:480px){.brand h1{font-size:17px}.panel,.matrix-card{border-radius:12px;padding:10px}.layout{padding:8px;gap:8px}}