:root {
  --bg:#080b12; --surface:#10151f; --surface-2:#151b27; --surface-3:#0c111a;
  --line:#252d3c; --line-soft:#1c2330; --text:#f6f7fb; --muted:#929caf;
  --accent:#f0bd57; --accent-2:#ffe2a0; --ok:#48d597; --warn:#f0ad4e; --danger:#ff7d85;
  --shadow:0 18px 50px rgba(0,0,0,.26); --radius:18px;
}
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; min-height:100vh; font-family:Inter,"Segoe UI",system-ui,sans-serif; background:radial-gradient(900px 500px at 8% -15%,rgba(240,189,87,.11),transparent 60%),radial-gradient(700px 400px at 95% 5%,rgba(60,98,180,.09),transparent 55%),var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.018; background-image:linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px); background-size:40px 40px; }
.wrap { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:34px 0 72px; position:relative; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; }
.brand { display:flex; align-items:center; gap:14px; }
header h1 { margin:0; font-size:25px; letter-spacing:-.03em; }
.header-actions { position:relative; display:flex; align-items:center; gap:8px; }
.icon-button { width:43px; padding:0; font-size:19px; line-height:1; }
.account-menu { position:absolute; z-index:30; top:52px; right:0; width:min(390px,calc(100vw - 24px)); padding:20px; border:1px solid var(--line); border-radius:16px; background:#111722; box-shadow:0 24px 70px rgba(0,0,0,.48); }
.menu-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.menu-heading h2 { margin-bottom:0; }
.menu-close { min-height:32px; width:32px; padding:0; border-radius:9px; background:#1a2231; color:var(--muted); border:1px solid var(--line); font-size:20px; }
.menu-divider { height:1px; margin:19px 0; background:var(--line-soft); }
.eyebrow,.step { color:var(--accent); letter-spacing:.15em; font-size:10px; font-weight:800; margin:0 0 4px; }
.sub,.hint { color:var(--muted); }
.hint.compact { margin:-3px 0 4px; font-size:11px; }
.sub { margin:3px 0 0; font-size:13px; }
.hint { font-size:13px; line-height:1.55; }
h2 { margin:0 0 8px; font-size:20px; letter-spacing:-.02em; }
h3 { margin:0; font-size:15px; }
.card { background:linear-gradient(145deg,rgba(20,26,38,.96),rgba(14,19,29,.96)); border:1px solid var(--line); border-radius:var(--radius); padding:21px; margin-top:16px; box-shadow:0 1px 0 rgba(255,255,255,.025) inset; }
.auth-card { max-width:480px; margin:48px auto 0; padding:30px; box-shadow:var(--shadow); }
.auth-heading { text-align:center; margin-bottom:22px; }
.auth-heading h2 { font-size:26px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; background:var(--surface-3); border:1px solid var(--line-soft); border-radius:13px; margin-bottom:20px; }
.auth-tabs button { padding:9px; }
.form,.row { display:flex; flex-direction:column; gap:10px; }
.row { flex-direction:row; }
.row>* { flex:1; }
label { color:#c2c8d4; font-size:12px; font-weight:650; margin-top:2px; }
input,select,button { min-height:43px; border-radius:11px; border:1px solid var(--line); font:inherit; }
input,select { width:100%; padding:10px 12px; background:#0b1018; color:var(--text); outline:none; transition:border-color .18s,box-shadow .18s; }
input::placeholder { color:#5f687a; }
input:focus,select:focus { border-color:rgba(240,189,87,.75); box-shadow:0 0 0 3px rgba(240,189,87,.1); }
button { padding:10px 15px; border:0; background:linear-gradient(180deg,#f5c866,var(--accent)); color:#1d1507; font-weight:800; cursor:pointer; transition:transform .16s,filter .16s,opacity .16s; }
button:hover { filter:brightness(1.06); transform:translateY(-1px); }
button:active { transform:translateY(0); }
button:disabled { opacity:.55; cursor:wait; transform:none; }
button.secondary { background:#1a2231; color:#e8ebf2; border:1px solid #30394a; }
.section-heading,.table-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.privacy-badge,.live-pill { border:1px solid rgba(72,213,151,.25); background:rgba(72,213,151,.08); color:#7de5b5; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:750; white-space:nowrap; }
.onboarding { border-color:rgba(240,189,87,.34); box-shadow:0 16px 45px rgba(0,0,0,.16); }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.setup-grid article { display:flex; gap:13px; padding:17px; background:rgba(8,12,19,.64); border:1px solid var(--line-soft); border-radius:14px; }
.setup-grid article>b { display:grid; place-items:center; flex:0 0 31px; height:31px; border-radius:9px; background:rgba(240,189,87,.12); color:var(--accent); border:1px solid rgba(240,189,87,.22); }
.setup-grid article>div { min-width:0; flex:1; }
.setup-grid p { min-height:36px; color:var(--muted); font-size:12px; line-height:1.5; margin:6px 0 12px; }
.secret-row { display:flex; gap:7px; margin-bottom:8px; }
.secret-row input { min-width:0; font-family:"Cascadia Code",Consolas,monospace; font-size:11px; }
.secret-row button { flex:0 0 auto; }
.message { min-height:18px; margin:11px 0 0; color:var(--danger); font-size:12px; }
.status-grid,.grid-2,.totals { display:grid; gap:14px; }
.status-grid { grid-template-columns:repeat(4,1fr); }
.grid-2 { grid-template-columns:1fr 1fr; }
.totals { grid-template-columns:repeat(3,1fr); }
.status { position:relative; overflow:hidden; min-height:108px; }
.status i { display:block; width:8px; height:8px; border-radius:50%; background:#687184; margin-bottom:16px; box-shadow:0 0 0 4px rgba(104,113,132,.1); }
.status span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.status strong { display:block; margin-top:7px; font-size:15px; }
.status.ok { border-color:rgba(72,213,151,.28); }
.status.ok i { background:var(--ok); box-shadow:0 0 0 4px rgba(72,213,151,.11),0 0 16px rgba(72,213,151,.3); }
.status.warn { border-color:rgba(240,173,78,.25); }
.status.warn i { background:var(--warn); }
.totals { padding:0; overflow:hidden; }
.totals>div { padding:22px; border-right:1px solid var(--line-soft); }
.totals>div:last-child { border:0; }
.totals small { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.totals b { display:block; margin:7px 0 3px; color:#fff; font-size:28px; letter-spacing:-.04em; }
.totals em { color:var(--muted); font-size:11px; font-style:normal; }
.check { display:flex; gap:9px; align-items:center; padding:5px 0; }
.check input { width:17px; min-height:17px; accent-color:var(--accent); }
input[type="range"] { min-height:24px; padding:0; accent-color:var(--accent); border:0; background:transparent; box-shadow:none; }
.settings-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.save-state { margin:0; color:var(--ok); font-size:11px; }
.save-state.dirty { color:var(--warn); }
.audio-settings { margin-top:8px; padding-top:15px; border-top:1px solid var(--line-soft); }
.audio-row { display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:9px; margin-top:10px; }
.audio-row span { display:flex; flex-direction:column; gap:2px; }
.audio-row small { color:var(--muted); font-weight:500; }
.audio-row small.active { color:var(--ok); }
.audio-row input { min-height:39px; padding:6px; font-size:11px; }
.audio-row button { min-height:39px; }
.table-heading { align-items:center; margin-bottom:12px; }
.live-pill::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--ok); }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:13px 10px; text-align:left; border-bottom:1px solid var(--line-soft); }
th { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.09em; font-weight:750; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:rgba(255,255,255,.018); }
tbody tr:last-child td { border-bottom:0; }
.hidden { display:none!important; }
.toast { position:fixed; right:24px; bottom:24px; max-width:380px; padding:13px 16px; border-radius:12px; background:#202938; color:#f7f8fa; border:1px solid #354054; box-shadow:var(--shadow); font-size:13px; transform:translateY(24px); opacity:0; pointer-events:none; transition:.22s ease; z-index:20; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.error { border-color:rgba(255,125,133,.45); }
@media(max-width:850px) { .status-grid { grid-template-columns:repeat(2,1fr); } .grid-2,.setup-grid { grid-template-columns:1fr; } .setup-grid p { min-height:0; } }
@media(max-width:600px) { .wrap { width:min(100% - 24px,1180px); padding:20px 0 44px; } header { align-items:flex-start; } header .sub { display:none; } .auth-card { margin-top:24px; padding:22px; } .section-heading { flex-direction:column; gap:8px; } .status-grid { gap:10px; } .status { min-height:98px; padding:17px; } .totals { grid-template-columns:1fr; } .totals>div { border-right:0; border-bottom:1px solid var(--line-soft); } .row { flex-direction:column; } .settings-actions { grid-template-columns:1fr; } .audio-row { grid-template-columns:1fr; } .card { padding:17px; border-radius:15px; } .secret-row { flex-direction:column; } .toast { left:12px; right:12px; bottom:12px; } .header-actions>button:first-child { padding-inline:11px; } .account-menu { position:fixed; top:76px; right:12px; left:12px; width:auto; max-height:calc(100vh - 90px); overflow-y:auto; } }