:root { color-scheme: dark; --bg:#050710; --panel:#111827; --panel2:#0d1321; --line:#263348; --text:#e5edf6; --muted:#9aa8ba; --accent:#5ad7ff; --accent2:#f6b23c; --danger:#ff6677; --ok:#71e38e; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; overflow:hidden; }
button, input, select, .button-link { font:inherit; }
button, .file-button, select, .button-link { background:#172033; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:.62rem .82rem; text-decoration:none; }
button, .file-button, .button-link { cursor:pointer; }
button:hover, .file-button:hover, select:hover, .button-link:hover { border-color:var(--accent); }
.file-button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; position:relative; overflow:hidden; }
.file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-button.wide { width:100%; min-height:44px; margin-top:.5rem; }
.app-shell { display:grid; grid-template-columns:1fr minmax(320px,380px); height:100vh; }
.stage { min-width:0; min-height:0; padding:14px; }
.screen-frame { position:relative; display:grid; place-items:center; width:100%; height:100%; background:#000; outline:none; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.35); }
canvas { display:block; width:auto; height:auto; max-width:none; max-height:none; object-fit:contain; background:#000; outline:0; }
canvas.nearest { image-rendering:pixelated; }
canvas.smooth { image-rendering:auto; }
.screen-frame[data-aspect="stretch"] canvas { width:100% !important; height:100% !important; aspect-ratio:auto !important; }
.screen-frame.scanlines::after { content:""; pointer-events:none; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px); mix-blend-mode:multiply; }
.overlay-actions { position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:5; }
.icon-button { width:42px; min-width:42px; height:42px; padding:0; display:grid; place-items:center; font-size:1.15rem; background:rgba(18,28,45,.78); }
.hidden { display:none !important; }
.fps-counter { position:absolute; left:12px; top:12px; z-index:30; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.18); padding:6px 8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; pointer-events:none; }
.side-menu { height:100vh; overflow:auto; background:var(--panel); border-left:1px solid var(--line); padding:14px; display:grid; gap:12px; align-content:start; }
.menu-header { display:flex; align-items:start; justify-content:space-between; gap:12px; }
h1 { margin:0; font-size:1.25rem; letter-spacing:.02em; } h2 { margin:0 0 .75rem; font-size:1rem; } h3 { margin:0 0 .25rem; font-size:.95rem; } p { margin:.35rem 0; color:var(--muted); }
.panel-section, .bios-card { background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px; }
.bios-card.ready { border-color:rgba(113,227,142,.45); } .bios-card.warn { border-color:rgba(246,178,60,.7); }
.row { display:flex; gap:8px; flex-wrap:wrap; } .row > * { flex:1; }
.check-row { display:flex; align-items:center; gap:8px; margin:8px 0; color:var(--text); }
.runtime-grid { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:10px 0 0; } dt { color:var(--muted); } dd { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.input-actions { margin:.6rem 0 .25rem; }
#mouseCaptureStatus { margin:.25rem 0 .55rem; font-size:.92rem; }
.control-map { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.map-row { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px; background:#111a2b; }
.map-row button { padding:.35rem .55rem; min-width:92px; } .map-row.pending { border-color:var(--accent2); box-shadow:0 0 0 1px var(--accent2) inset; }
.hint, .muted { color:var(--muted); } .status-ok { color:var(--ok); } .status-warn { color:var(--accent2); } .status-bad { color:var(--danger); }
.modal { position:fixed; inset:0; display:none; place-items:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); z-index:20; overflow:auto; }
.modal.open { display:grid; }
.modal-card { width:min(760px,100%); background:#101827; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.modal-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.modal-title-row h2 { margin:0; }
.bios-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.print-card { width:min(820px,100%); }
#printCanvas { width:100%; height:auto; max-height:70vh; image-rendering:pixelated; border:1px solid var(--line); }
summary { color:var(--accent); cursor:pointer; margin-top:14px; } code { color:#d8eaff; }
body.fullscreen-emulation, body.fullscreen-emulation .app-shell, body.fullscreen-emulation .stage { background:#000 !important; }
body.fullscreen-emulation .app-shell { display:block !important; width:100dvw !important; height:100dvh !important; }
body.fullscreen-emulation .stage { width:100dvw !important; height:100dvh !important; margin:0 !important; padding:0 !important; }
body.fullscreen-emulation .side-menu, body.fullscreen-emulation #menuToggle { display:none !important; }
.screen-frame.fullscreen-active { position:fixed !important; inset:0 !important; width:100dvw !important; height:100dvh !important; }
@media (max-width:900px) { html,body { overflow:auto; } .app-shell { grid-template-columns:1fr; height:auto; min-height:100vh; } .stage { min-height:58vh; } .side-menu { position:fixed; right:0; top:0; width:min(380px,94vw); transform:translateX(105%); transition:transform .18s ease; z-index:10; box-shadow:-20px 0 60px rgba(0,0,0,.45); } .side-menu.open { transform:translateX(0); } .bios-grid { grid-template-columns:1fr; } }