:root { color-scheme: dark; --bg:#0a0c0c; --panel:#121616; --line:#28302f; --text:#edf3ef; --muted:#94a29c; --accent:#d8ff55; --danger:#ff7a6e; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 75% -10%,#28331f 0,transparent 34%),var(--bg); color:var(--text); font-family:Inter,Segoe UI,sans-serif; }
header { height:72px; padding:0 max(28px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#0a0c0cdd; position:sticky; top:0; backdrop-filter:blur(14px); z-index:2; }
header>div { display:flex; align-items:center; gap:12px; }
.identity { color:var(--muted); font-size:13px; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mark { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--accent); color:#111; font-weight:900; }
main { width:min(1180px,calc(100% - 40px)); margin:52px auto 100px; }
h1 { max-width:760px; font-size:clamp(38px,6vw,74px); line-height:.98; letter-spacing:-.055em; margin:10px 0 22px; }
h2 { margin:0 0 20px; font-size:22px; }
p { color:var(--muted); line-height:1.6; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.15em; font-size:12px; font-weight:800; margin:0; }
.hero { padding:36px 0 42px; }
.hero h1 { font-size:clamp(38px,5vw,62px); }
.card { background:linear-gradient(145deg,#151a19,#0f1212); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 18px 70px #0004; }
.auth { max-width:800px; margin:12vh auto; padding:48px; }
.auth form { display:flex; gap:10px; margin-top:28px; }
.auth input { flex:1; }
#otp-step { margin-top:22px; padding-top:4px; border-top:1px solid var(--line); }
#otp-step form { margin:14px 0 10px; }
.grid { display:grid; gap:16px; }
.stats { grid-template-columns:repeat(3,1fr); margin-bottom:16px; }
.stats article { display:flex; align-items:end; justify-content:space-between; }
.stats span { color:var(--muted); }
.stats b { font-size:42px; color:var(--accent); }
.columns { grid-template-columns:1fr 1fr; margin-bottom:16px; }
.users-card { margin-bottom:16px; }
.user-form { display:grid; grid-template-columns:1fr 1fr auto; gap:9px; }
.stack { display:grid; gap:10px; }
input,select,button { border-radius:10px; border:1px solid var(--line); padding:12px 14px; font:inherit; }
input,select { background:#090b0b; color:var(--text); }
button { background:var(--accent); color:#111; font-weight:800; cursor:pointer; }
button:hover { filter:brightness(1.08); }
button:disabled { opacity:.35; cursor:not-allowed; }
button.secondary { background:transparent; color:var(--text); }
.list { margin-top:22px; border-top:1px solid var(--line); }
.row { padding:13px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; }
.row small,.connection small,.connection span,.campaign span,.campaign small { display:block; color:var(--muted); }
.direct-card { margin-bottom:16px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.section-head h2 { margin:6px 0 0; }
.connection-form { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:9px; }
.oauth-result { margin-top:16px; padding:16px; border:1px solid #52682f; border-radius:13px; background:#10150d; }
.oauth-result p { margin-top:0; }
.copy-row { display:grid; grid-template-columns:1fr auto auto; gap:9px; }
.button-link { display:inline-grid; place-items:center; border-radius:10px; border:1px solid var(--line); padding:12px 14px; background:var(--accent); color:#111; font-weight:800; text-decoration:none; }
.connect { max-width:760px; margin:8vh auto; }
.connect-code { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:22px; }
.connections,.campaigns { margin-top:20px; display:grid; gap:10px; }
.connection,.campaign { padding:16px; border:1px solid var(--line); border-radius:13px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; background:#0a0d0c; }
.campaign { grid-template-columns:1fr 180px auto; }
.actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pill,.state { padding:7px 11px; border-radius:99px; border:1px solid var(--line); font-size:12px; font-weight:800; }
.pill.safe,.state.on { border-color:#5e7931; color:var(--accent); }
.pill.danger,.state.suspended { border-color:#7d3e39; color:var(--danger); }
.muted,.empty { color:var(--muted); }
.notice { position:fixed; right:24px; bottom:24px; max-width:520px; background:#151a19; border:1px solid #4b6030; padding:14px 18px; border-radius:12px; color:var(--text); box-shadow:0 15px 60px #0008; }
.notice:empty { display:none; }
.error { color:var(--danger); border-color:#713b36; }
@media (max-width:900px) { .columns,.stats { grid-template-columns:1fr; } .connection-form { grid-template-columns:1fr 1fr; } .campaign { grid-template-columns:1fr; } .identity { display:none; } }
@media (max-width:560px) { main { width:min(100% - 24px,1180px); margin-top:24px; } .auth { padding:26px; } .auth form,.connection-form,.copy-row,.connect-code,.user-form { grid-template-columns:1fr; display:grid; } header { padding:0 12px; } }