:root { --bg:#10141a; --panel:#1a212b; --line:#2a3442; --fg:#dbe4f0; --dim:#8696aa; --acc:#4aa3ff; --ok:#3ddc84; --warn:#ffb347; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui, "Noto Sans TC", sans-serif; }
header { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:18px; } h1 small { color:var(--dim); font-weight:400; font-size:12px; margin-left:8px; }
#toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
button, select, input[type=text], input:not([type]) { background:#243040; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:5px 10px; font:inherit; }
button { cursor:pointer; } button:hover { background:#2d3c50; } button.primary { background:#1f5fa8; border-color:#2b78cc; } button.primary:hover { background:#2670c4; }
.chk { color:var(--dim); display:inline-flex; gap:4px; align-items:center; }
.stat { color:var(--dim); font-variant-numeric: tabular-nums; font-size:12px; }
main { display:flex; flex-wrap:wrap; gap:12px; padding:12px; align-items:flex-start; }
#left { flex:1 1 680px; min-width:320px; } #right { flex:1 1 320px; min-width:280px; max-width:560px; }
#screenWrap { position:relative; background:#000; border:2px solid var(--line); border-radius:8px; outline:none; overflow:hidden; }
#screenWrap.focus { border-color:var(--acc); box-shadow:0 0 0 2px #4aa3ff44; }
#screen { display:block; width:100%; aspect-ratio:4/3; image-rendering:pixelated; background:#000; }
#screen.native { aspect-ratio:auto; }
#noSignal { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#456; font-size:20px; pointer-events:none; }
#capHint { position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:11px; background:#000a; color:var(--acc); padding:2px; display:none; }
#screenWrap.focus #capHint { display:block; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
#vkbd { user-select:none; touch-action:manipulation; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px; }
.krow { display:flex; gap:3px; margin-bottom:3px; }
.key { flex:1 1 0; min-width:0; height:36px; display:flex; align-items:center; justify-content:center; background:#27323f; border:1px solid #3a4758; border-bottom-width:3px; border-radius:5px; font-size:12px; cursor:pointer; color:var(--fg); padding:0; }
.key:active, .key.down { background:#3f6aa3; border-color:#5b8fd0; }
.key.mod.latched { background:#7a5a1c; border-color:#d9a640; }
.key.sp { visibility:hidden; }
details { background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:10px; padding:6px 10px; }
summary { cursor:pointer; color:var(--acc); font-weight:600; }
#serial { height:200px; overflow:auto; background:#05080c; color:#c8f0c8; padding:6px; border-radius:6px; margin:8px 0; white-space:pre-wrap; word-break:break-all; font:12px/1.35 ui-monospace, Menlo, Consolas, monospace; }
#serialIn { flex:1; }
#board { width:100%; background:#0b1a12; border:1px solid #1e4a30; border-radius:6px; }
#gpioGrid { display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; margin:6px 0; }
.pin { font-size:9px; text-align:center; padding:2px 0; border-radius:3px; background:#202a36; color:var(--dim); border:1px solid #2c3949; }
.pin.hi { background:#1f6f3d; color:#fff; } .pin.drv { border-color:var(--warn); }
.note { color:var(--dim); font-size:11px; margin-top:6px; }
table { width:100%; border-collapse:collapse; font-size:12px; } th, td { text-align:left; padding:3px 4px; border-bottom:1px solid var(--line); }
td input { width:90px; font-family:ui-monospace, monospace; }
footer { color:var(--dim); font-size:11px; padding:10px 14px; }
@media (max-width: 760px) { .key { height:30px; font-size:10px; } h1 small { display:none; } }
#screenWrap:fullscreen { display:flex; align-items:center; justify-content:center; background:#000; }
#screenWrap:fullscreen #screen { max-height:100vh; width:auto; height:100vh; }