:root { --bg:#0f1419; --card:#1a2230; --fg:#e6edf3; --muted:#8b97a7; --accent:#3b82f6; --ok:#22c55e; --err:#ef4444; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Noto Sans TC", sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem; border-bottom:1px solid #2a3444; }
header h1 { font-size:1.1rem; margin:0; }
header h1 small { color:var(--muted); font-weight:400; }
.who { margin-left:auto; color:var(--muted); }
.card { max-width:760px; margin:1.5rem auto; background:var(--card); border:1px solid #2a3444; border-radius:12px; padding:1.25rem 1.5rem; }
h2 { margin-top:0; }
label { display:block; margin:.6rem 0; }
input { width:100%; padding:.55rem .7rem; margin-top:.25rem; border-radius:8px; border:1px solid #2a3444; background:#0d1117; color:var(--fg); }
button { padding:.5rem .9rem; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; font-size:.9rem; }
button:hover { filter:brightness(1.1); }
.hidden { display:none !important; }
.err { color:var(--err); min-height:1.2em; }
.muted { color:var(--muted); font-size:.85rem; }
ul { list-style:none; padding:0; }
li { display:flex; align-items:center; gap:.75rem; padding:.6rem .25rem; border-bottom:1px solid #2a3444; }
li button { margin-left:auto; }
.row { display:flex; gap:.6rem; align-items:center; margin:.75rem 0; flex-wrap:wrap; }
.badge { background:#0d1117; border:1px solid #2a3444; border-radius:999px; padding:.15rem .6rem; font-size:.8rem; }
.controls { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.log { background:#0d1117; border:1px solid #2a3444; border-radius:8px; padding:.5rem; height:300px; overflow:auto; font-family: ui-monospace, monospace; font-size:.78rem; }
.log-line { padding:.15rem .25rem; border-bottom:1px solid #161b22; white-space:pre-wrap; word-break:break-all; }
.log-line.event { color:#fde047; }
.log-line.response, .log-line.report { color:var(--ok); }
.log-line.sent { color:var(--muted); }
.log-line.error { color:var(--err); }
.log-line.auth, .log-line.ota, .log-line.fw, .log-line.device { color:#60a5fa; }

select { width:100%; padding:.55rem .7rem; margin-top:.25rem; border-radius:8px; border:1px solid #2a3444; background:#0d1117; color:var(--fg); }
button.ghost { background:transparent; border:1px solid #2a3444; color:var(--accent); }
button.danger { background:var(--err); }
.ok-msg { color:var(--ok); }

/* key/value panels (self-info, detail, bind, ota confirm) */
.panel { background:#0d1117; border:1px solid #2a3444; border-radius:8px; padding:.5rem .75rem; margin:.5rem 0; }
.panel h3 { margin:.25rem 0 .5rem; }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:.25rem .75rem; margin:0; }
dl.kv dt { color:var(--muted); }
dl.kv dd { margin:0; word-break:break-all; }

/* upgrade badge */
.badge.upgrade { color:#f59e0b; border-color:#f59e0b; }

/* op control grid */
.ctl-grid { display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0; }
.ctl-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ctl-row > span:first-child { min-width:11rem; }
.ctl-status { font-family: ui-monospace, monospace; font-size:.82rem; padding:.1rem .5rem; border-radius:6px; background:#161b22; }
.ctl-status.pending { color:var(--muted); }
.ctl-status.ok { color:var(--ok); }
.ctl-status.err { color:var(--err); }

/* OTA progress bar */
.bar { background:#161b22; border:1px solid #2a3444; border-radius:999px; height:.9rem; overflow:hidden; }
.bar-fill { height:100%; width:0%; background:var(--accent); transition:width .3s; }