:root{--accent:#2563eb;--accent-weak:#4c8dff;--bg:#f6f7f9;--surface:#fff;--surface-2:#f0f2f5;--border:#e2e5ea;--text:#1a1d21;--muted:#6b7280;--danger:#c0362c;--danger-weak:#e5534b;--online:#22a559;--offline:#9aa0aa;--amber:#d08700;--radius:12px;--shadow:0 1px 2px #1018280f, 0 4px 16px #1018280f;font-synthesis:none;-webkit-text-size-adjust:100%}@media (prefers-color-scheme:dark){:root{--bg:#0e1116;--surface:#171b22;--surface-2:#1e232c;--border:#2a303a;--text:#e6e9ee;--muted:#9aa2ae;--online:#38c172;--offline:#6b7280;--shadow:0 1px 2px #0000004d, 0 6px 20px #00000059}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}.app{max-width:780px;margin:0 auto;padding:0 20px 64px}.app-header{background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;justify-content:space-between;align-items:center;padding:20px 0 16px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;color:var(--accent);align-items:center;gap:9px;font-weight:650;display:flex}.brand span{color:var(--text)}.header-right{align-items:center;gap:14px;display:flex}.self-label{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:13px;overflow:hidden}.dot{background:var(--offline);border-radius:50%;flex-shrink:0;width:9px;height:9px}.conn{color:var(--muted);align-items:center;gap:6px;font-size:12.5px;font-weight:550;display:inline-flex}.conn .dot{background:var(--offline);border-radius:50%;width:8px;height:8px}.conn-live .dot{background:var(--online);box-shadow:0 0 0 3px color-mix(in srgb, var(--online) 22%, transparent)}.conn-polling .dot{background:var(--amber)}.card,.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.panel{margin-top:16px}.new-device{border:1px solid var(--amber);border-radius:var(--radius);background:color-mix(in srgb, var(--amber) 10%, var(--surface));margin-bottom:12px;padding:14px 16px}.new-device-title{font-weight:600}.new-device-body{margin:4px 0 10px}.new-device-actions{gap:8px;display:flex}h1{letter-spacing:-.02em;margin:0 0 8px;font-size:22px}h2{letter-spacing:-.01em;margin:0;font-size:17px}h3{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:22px 0 6px;font-size:14px}.muted{color:var(--muted)}.center{text-align:center;padding:40px 0}.tabs{border-bottom:1px solid var(--border);gap:4px;margin-top:8px;display:flex}.tab{appearance:none;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 14px;font-weight:550}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.btn{appearance:none;font:inherit;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;border-radius:9px;padding:9px 15px;font-weight:550;transition:background .12s,border-color .12s}.btn:hover{border-color:color-mix(in srgb, var(--text) 22%, var(--border))}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:color-mix(in srgb, var(--accent) 88%, #000)}.btn.danger{color:#fff;background:var(--danger-weak);border-color:var(--danger-weak)}.btn.danger:hover{background:var(--danger)}.btn.small{padding:6px 11px;font-size:13px}.btn.tiny{border-radius:7px;padding:3px 8px;font-size:12px}.field{width:100%;font:inherit;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:9px;margin-bottom:14px;padding:10px 12px}.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);outline:none}.field-label{color:var(--muted);margin-bottom:5px;font-size:13px;font-weight:550;display:block}.onboarding{margin-top:40px}.note{color:var(--muted);background:var(--surface-2);border-radius:9px;margin-top:16px;padding:11px 13px;font-size:13px}.note.warn{background:color-mix(in srgb, var(--amber) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--amber) 30%, var(--border));color:var(--text)}code{background:color-mix(in srgb, var(--text) 8%, transparent);border-radius:5px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}.panel-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;display:flex}.device-list{margin:14px 0 0;padding:0;list-style:none}.device{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:13px 0;display:flex}.device-info{min-width:0}.device-meta{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.device-name{font-weight:600}.device.is-stale .device-name{color:var(--muted)}.device-sub{margin-top:2px;font-size:13px}.device-actions{flex-shrink:0;gap:7px;display:flex}.dot.online{background:var(--online)}.dot.unknown{border:1.5px dotted var(--offline);background:0 0}.tag{text-transform:uppercase;letter-spacing:.03em;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 7px;font-size:11px;font-weight:600}.tag-self{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, var(--border));background:color-mix(in srgb, var(--accent) 10%, var(--surface))}.tag-stale{color:var(--amber);border-color:color-mix(in srgb, var(--amber) 35%, var(--border))}.history-list{margin:14px 0 0;padding:0;list-style:none}.entry{border-top:1px solid var(--border);gap:12px;padding:14px 0;display:flex}.entry-icon{border-radius:4px;flex-shrink:0;width:16px;height:16px;margin-top:3px}.entry-icon.placeholder{background:var(--surface-2);border:1px solid var(--border)}.entry-body{flex:1;min-width:0}.entry-route-line{margin-bottom:2px}.entry-route{flex-wrap:wrap;align-items:center;font-size:12.5px;display:inline-flex}.entry-route .arrow{color:var(--accent)}.mail-end{align-items:center;gap:4px;display:inline-flex}.mail-end svg{opacity:.7;flex-shrink:0}.state{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:help;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:600}.state-arrived{color:var(--online);border-color:color-mix(in srgb, var(--online) 35%, var(--border))}.state-waiting{color:var(--amber);border-color:color-mix(in srgb, var(--amber) 35%, var(--border))}.state-never-arrived{color:var(--danger-weak);border-color:color-mix(in srgb, var(--danger-weak) 40%, var(--border))}.entry-title.sealed{color:var(--muted);cursor:help;font-style:italic;font-weight:500}.entry-title{color:var(--text);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-weight:600;text-decoration:none;display:inline-block;overflow:hidden}a.entry-title:hover{color:var(--accent);text-decoration:underline}.entry-foot{flex-wrap:wrap;align-items:center;gap:8px;margin-top:3px;font-size:12.5px;display:flex}.entry-host{text-overflow:ellipsis;white-space:nowrap;max-width:240px;overflow:hidden}.entry-foot .sep{opacity:.5}.empty{padding:22px 0}.entry-group{border-top:1px solid var(--border);padding:14px 0 4px}.batch-head{flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;display:flex}.batch-count{color:var(--text);font-weight:600}.batch-head .arrow{color:var(--accent)}.batch-head .sep{opacity:.5}.batch-list{border-left:1px solid var(--border);margin:0 0 0 3px;padding:0 0 0 14px;list-style:none}.batch-list .entry{border-top:none;padding:8px 0}.kv{gap:8px;margin-top:4px;display:grid}.kv-row{gap:12px;font-size:13.5px;display:flex}.kv-key{width:120px;color:var(--muted);flex-shrink:0}.kv-val{word-break:break-all}.status{text-align:center;min-height:22px;margin-top:14px;font-size:13.5px}.status.error{color:var(--danger-weak)}.status.info{color:var(--muted)}.overlay{z-index:20;background:#0b0e128c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.dialog{width:100%;max-width:420px}.dialog h3{text-transform:none;letter-spacing:-.01em;color:var(--text);margin-top:0;font-size:17px}.dialog-actions{justify-content:flex-end;gap:9px;margin-top:18px;display:flex}.qr{justify-content:center;margin:8px 0 14px;display:flex}.qr svg{border-radius:8px;display:block}.pair-code{text-align:center;letter-spacing:.18em;padding:8px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;font-weight:600}.pair-actions{justify-content:center;gap:9px;margin-top:4px;display:flex}
