:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#6b7280; --line:#e2e5ea; --card:#fff; --accent:#0f766e; --danger:#b91c1c; --ok:#15803d; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1115; --fg:#e6e8eb; --muted:#9aa3ad; --line:#262a31; --card:#171a20; --accent:#2dd4bf; --danger:#f87171; --ok:#4ade80; }
}
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; align-items:center; gap:16px; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--card); }
header h1 { font-size:16px; margin:0 8px 0 0; letter-spacing:.08em; }
header nav button { background:none; border:none; color:var(--muted); padding:6px 10px; cursor:pointer; font:inherit; border-radius:6px; }
header nav button.active { color:var(--fg); background:var(--bg); }
.spacer { flex:1; }
main { padding:20px; max-width:1300px; margin:0 auto; }
section > h2 { margin-top:0; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
tbody tr:last-child td { border-bottom:none; }
#device-table tbody tr { cursor:pointer; }
#device-table tbody tr:hover { background:var(--bg); }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--muted); }
.dot.on { background:var(--ok); }
input, select { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); min-width:0; }
button { font:inherit; padding:7px 12px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
@media (prefers-color-scheme: dark) { button { color:#06201d; } }
button.ghost { background:none; color:var(--fg); border-color:var(--line); }
button.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
button.danger.ghost { background:none; color:var(--danger); }
button:disabled { opacity:.5; cursor:default; }
.toolbar { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.toolbar input { flex:1; max-width:420px; }
.grid { display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:end; margin:12px 0 20px; }
.grid label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:12px; }
.grid input { font-size:14px; color:var(--fg); }
#app-form { grid-template-columns: 1fr 1fr 2fr 1fr 1fr auto; }
.columns { display:grid; grid-template-columns: 1fr 1.2fr; gap:28px; }
.columns > div { min-width:0; }
@media (max-width: 900px) { .columns, .grid, #app-form { grid-template-columns: 1fr; } }
dl { display:grid; grid-template-columns: max-content 1fr; gap:4px 14px; margin:0 0 16px; }
dt { color:var(--muted); }
dd { margin:0; word-break:break-all; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.status { font-size:12px; padding:2px 7px; border-radius:10px; background:var(--bg); border:1px solid var(--line); }
.status.done { color:var(--ok); } .status.failed { color:var(--danger); } .status.sent { color:var(--accent); }
.error { color:var(--danger); }
.muted { color:var(--muted); }
code, pre { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { margin:0; white-space:pre-wrap; word-break:break-all; max-width:420px; }
#login { max-width:420px; margin:60px auto; }
#login form { display:flex; gap:8px; }
#login input { flex:1; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:8px; }