:root{--color-bg: #f4f5f7;--color-surface: #ffffff;--color-text: #191c30;--color-text-secondary: #1b1f3b;--color-muted: rgba(27, 31, 59, .55);--color-border: #e0e0e0;--color-accent: #526ed3;--color-accent-hover: #455ec4;--color-status-ok: #d4f2e7;--color-status-warn: #fff2c2;--color-status-alert: #fdd7cb;--color-danger: #f42525;--color-row-hover: #f8f9fb;--radius-lg: 20px;--radius-md: 12px;--radius-sm: 8px;--space-page: 24px;--header-height: 56px}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--color-bg);color:var(--color-text)}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{height:var(--header-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 var(--space-page);gap:2rem}.app-brand{display:flex;align-items:baseline;gap:.5rem;font-size:1rem;font-weight:600;white-space:nowrap}.app-brand a{color:var(--color-text);text-decoration:none}.app-brand a:hover{text-decoration:none}.app-version{color:var(--color-muted);font-size:.75rem;font-weight:500}.app-nav{display:flex;gap:1.5rem;font-size:.9rem}.app-nav a{color:var(--color-text-secondary);text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent}.app-nav a:hover{color:var(--color-text);text-decoration:none}.app-nav a.active{color:var(--color-accent);border-bottom-color:var(--color-accent);font-weight:500}.app-main{flex:1;padding:var(--space-page);max-width:1440px;width:100%;margin:0 auto}.panel{background:var(--color-surface);border-radius:var(--radius-lg);padding:1.25rem 1.5rem 1.5rem;min-height:calc(100vh - var(--header-height) - var(--space-page) * 2)}h2{margin:0 0 .75rem;font-size:1.25rem;font-weight:600}table{width:100%;border-collapse:collapse}th,td{padding:.6rem .75rem;border-bottom:1px solid var(--color-border);text-align:left}th{color:var(--color-muted);font-weight:500;font-size:.85rem}tbody tr:hover{background:var(--color-row-hover)}.badge{display:inline-block;padding:.2rem .5rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;color:var(--color-text)}.badge.ok{background:var(--color-status-ok)}.badge.warn{background:var(--color-status-warn)}.badge.off{background:var(--color-status-alert)}.badge.disabled{background:var(--color-border);color:var(--color-muted)}.stale{color:var(--color-muted);font-style:italic}.row-disabled{opacity:.6}.actions{white-space:nowrap}.device-actions{margin:.5rem 0 1rem}.device-actions button{margin-right:.35rem}.actions button{margin-left:.35rem;font-size:.8rem;padding:.3rem .55rem}.toolbar{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}input,button,select{font:inherit;border-radius:var(--radius-sm);padding:.45rem .65rem}input,select{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text)}input:focus,select:focus{outline:2px solid rgba(82,110,211,.35);outline-offset:1px}button{cursor:pointer;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text)}button:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}button.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}button.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#fff}button.btn-listening{border-color:var(--color-accent);color:var(--color-accent);background:#526ed314}button:disabled{opacity:.45;cursor:not-allowed}.pagination{display:flex;gap:.5rem;align-items:center;margin-top:1rem;color:var(--color-muted);font-size:.9rem}.tabs{display:flex;gap:.5rem;margin:1rem 0}.tab{padding:.4rem .85rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;color:var(--color-text-secondary)}.tab:hover{border-color:var(--color-accent);color:var(--color-accent)}.tab.active{background:#526ed31a;border-color:var(--color-accent);color:var(--color-accent);font-weight:500}.chart-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.5rem;margin:1rem 0}.meta{color:var(--color-muted);font-size:.9rem;margin:.5rem 0}.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;margin-bottom:.75rem}.ex-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.6rem .75rem}.ex-list{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.ex-card-head{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-size:.8rem}.ex-card-chart{height:120px;margin:.35rem 0;background:var(--color-bg);border-radius:var(--radius-sm);padding:.25rem}.ex-card audio{width:100%;height:24px;margin-top:.2rem}audio{width:100%;margin-top:.5rem}.settings-form{max-width:380px;display:grid;gap:.6rem}.settings-form label{font-size:.9rem;color:var(--color-text-secondary)}.page-back{margin:0 0 .75rem}