:root{--text-sm:13px;--text-base:16px;--text-lg:20px;--text-xl:25px;--text-2xl:31px;--font:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-display:"DM Serif Display", Georgia, serif;--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--radius:4px;--radius-lg:6px;--motion:.15s ease;--color-bg:#0a0a0a;--color-surface:#181818;--color-surface-sunken:#111;--color-border:#2a2a2a;--color-text:#f2f0eb;--color-text-mut:#888884;--color-accent:#c9a84c;--color-accent-fg:#0a0a0a;--color-accent-wash:#c9a84c1f;--color-danger:#d95c3a;--color-danger-wash:#d95c3a26;--color-success:#6aab7d;--color-success-wash:#6aab7d26;--color-warning:#c9a84c;--color-warning-wash:#c9a84c1f;--focus-ring:0 0 0 3px var(--color-accent-wash), 0 0 0 1px var(--color-accent)}@media (prefers-color-scheme:dark){:root{--color-bg:#15130f;--color-surface:#1e1c17;--color-surface-sunken:#181611;--color-border:#322e26;--color-text:#ece7de;--color-text-mut:#a39c8f;--color-accent:#5cc0b6;--color-accent-fg:#0c211f;--color-accent-wash:#12302c;--color-danger:#e2837a;--color-danger-wash:#3a1f1c;--color-success:#8ecb98;--color-success-wash:#1c2f20;--color-warning:#e0b06a;--color-warning-wash:#332412;--focus-ring:0 0 0 3px var(--color-accent-wash), 0 0 0 1px var(--color-accent)}}*{box-sizing:border-box}html,body{height:100%}body{font-family:var(--font);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;margin:0}a{color:var(--color-accent)}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.screen{max-width:980px;padding:var(--space-5);gap:var(--space-5);flex-direction:column;margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-surface);display:flex}.app-name{font-size:var(--text-lg);font-weight:700}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);gap:var(--space-3);flex-direction:column;display:flex}.card h3{font-size:var(--text-lg);margin:0}.grid-3{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.status-pill{font-size:var(--text-sm);padding:2px var(--space-2);background:var(--color-surface-sunken);color:var(--color-text-mut);white-space:nowrap;border-radius:999px;font-weight:600}.status-pill[data-status=CONNECTED]{background:var(--color-success-wash);color:var(--color-success)}.status-pill[data-status=ERROR]{background:var(--color-danger-wash);color:var(--color-danger)}.btn{font-family:inherit;font-size:var(--text-base);padding:10px var(--space-3);border-radius:var(--radius);cursor:pointer;transition:background var(--motion), border-color var(--motion), opacity var(--motion);border:1px solid #0000;font-weight:600}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible{box-shadow:var(--focus-ring);outline:none}.btn-primary{background:var(--color-accent);color:var(--color-accent-fg)}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-secondary{background:var(--color-surface-sunken);color:var(--color-text);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}.btn-ghost{color:var(--color-text-mut);border-color:var(--color-border);background:0 0}.btn-danger{background:var(--color-danger-wash);color:var(--color-danger)}input,select{font-family:inherit;font-size:var(--text-base);padding:8px var(--space-2);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}input:focus-visible,select:focus-visible{box-shadow:var(--focus-ring);border-color:var(--color-accent);outline:none}label{font-size:var(--text-sm);color:var(--color-text-mut);margin-bottom:4px;font-weight:600;display:block}.field-row{flex-direction:column;gap:2px;display:flex}.actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.log-panel{background:var(--color-surface-sunken);border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text-mut);max-height:140px;overflow-y:auto}.log-error{color:var(--color-danger);font-weight:600}.log-success{color:var(--color-success);font-weight:600}.muted{color:var(--color-text-mut);font-size:var(--text-sm)}table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}th,td{padding:var(--space-2);border-bottom:1px solid var(--color-border);text-align:left}th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}.error-banner{background:var(--color-danger-wash);color:var(--color-danger);padding:var(--space-3);border-radius:var(--radius);font-size:var(--text-sm)}h1,h2,h3,.app-name{font-family:var(--font-display);font-weight:400}.app-name{letter-spacing:.01em}.brand-sub{font-size:var(--text-sm);color:var(--color-text-mut);margin-left:var(--space-2);font-family:var(--font)}.app-footer{border-top:1px solid var(--color-border);margin-top:var(--space-6);padding:var(--space-4) var(--space-5);text-align:center;color:var(--color-text-mut);font-size:var(--text-sm)}.app-footer a{color:var(--color-text-mut)}.app-footer a:hover{color:var(--color-accent)}
