:root {
  color-scheme: dark;
  --bg: #0b1018;
  --surface: #121a25;
  --surface-raised: #172230;
  --surface-soft: #0e1620;
  --border: #283747;
  --text: #edf4f8;
  --muted: #a3b3c1;
  --subtle: #8193a5;
  --accent: #74d8c7;
  --accent-dark: #103b38;
  --success: #89deb1;
  --danger: #ff9d9d;
  --warning: #f3ca80;
  --radius: 16px;
  --font-ui: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.shell { max-width: 1280px; margin: 0 auto; padding: 0 28px 48px; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--bg); background: var(--accent); font-size: 20px; line-height: 1; }
.brand-divider { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.brand-context { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.badge, .pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.on, .pill.ok { color: var(--success); border-color: #3b6859; background: #143026; }
.badge.off { color: var(--warning); }
.pill.run { color: var(--accent); border-color: #3b7770; background: #12312e; }
.pill.warn { color: var(--warning); border-color: #665337; background: #312819; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 42px 0 32px; }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--accent); font: 600 11px/1.2 var(--font-mono); letter-spacing: .11em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.05em; font-weight: 600; }
.intro-copy { max-width: 55ch; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.intro-note { display: flex; align-items: start; gap: 11px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); line-height: 1.3; white-space: nowrap; }
.intro-note small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.note-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px #224c3e; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.metric { min-width: 0; display: flex; flex-direction: column; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.metric > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.metric strong { margin: 12px 0 6px; font: 600 30px/1 var(--font-mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.metric small { color: var(--subtle); font-size: 12px; }
.metric small b { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.card-head .section-kicker { margin-bottom: 7px; }
h2 { margin-bottom: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.03em; font-weight: 600; }
.section-copy { max-width: 64ch; margin: -4px 0 2px; color: var(--muted); font-size: 13px; }
.section-copy.restriction-hint { color: var(--warning); background: #312819; border: 1px solid #665337; border-radius: 9px; padding: 10px 12px; }
code { font: 12px var(--font-mono); color: var(--accent); }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
label span { font-weight: 400; }
input, textarea { width: 100%; min-width: 0; padding: 11px 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; color: var(--text); outline: none; transition: border-color .16s, box-shadow .16s; }
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:hover, textarea:hover { border-color: #466071; }
input:focus-visible, textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px #74d8c730; }
textarea { min-height: 210px; resize: vertical; font: 13px/1.65 var(--font-mono); }
input[type=file] { padding: 8px; font-size: 12px; }
input[type=file]::file-selector-button { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 5px 8px; margin-right: 10px; cursor: pointer; }
.field-row, .import-row, .card-actions { display: flex; gap: 10px; }
.field-row > label, .import-row > label { flex: 1; min-width: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .16s, border-color .16s, transform .16s; }
.btn:focus-visible, .text-link:focus-visible, .accounts-list .del:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); color: #07221f; }
.btn.primary:hover:not(:disabled) { background: #9ae7d9; }
.btn.secondary { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
.btn.secondary:hover:not(:disabled) { border-color: var(--accent); }
.btn.text { min-height: 40px; padding-left: 0; padding-right: 0; background: transparent; color: var(--muted); }
.btn.text:hover { color: var(--text); }
.btn.danger-text { color: var(--danger); align-self: flex-start; }
.btn.big { flex: 1; }
.hidden { display: none !important; }
.hint { margin: 0; color: var(--muted); font-size: 12px; }
.login-flow, .login-step { display: flex; flex-direction: column; gap: 12px; }
.api-setup { display: flex; flex-direction: column; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.api-setup .list-head { align-items: center; }
.api-setup .field-row { width: 100%; }
.api-setup .btn { align-self: flex-start; }
.gate-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate { width: min(100%, 420px); gap: 28px; }
.gate h1 { font-size: 34px; }
.gate form { display: flex; flex-direction: column; gap: 14px; }
.gate .section-copy { margin-top: 10px; }
.gate #gate-error { color: var(--danger); min-height: 18px; }
.accounts-list { list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; margin: 0; padding: 0; }
.accounts-list li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; }
.accounts-list .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); }
.accounts-list .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.accounts-list .phone { color: var(--muted); font-size: 12px; }
.accounts-list .spacer { flex: 1; }
.accounts-list .del { display: grid; place-items: center; min-width: 40px; min-height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; font-size: 16px; }
.accounts-list .del:hover { color: var(--danger); background: #422929; }
.empty { color: var(--muted); font-size: 13px; padding: 12px 2px; }
.scrape-result { padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: 12px; }
.scrape-result b { color: var(--text); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--subtle); font: 600 10px var(--font-mono); letter-spacing: .08em; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.import-row { align-items: end; }
.list-head, .progress-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 600; }
.text-link { color: var(--accent); text-decoration: none; font-weight: 700; }
.text-link:hover { text-decoration: underline; }
.members-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 72px; max-height: 160px; overflow-y: auto; align-content: flex-start; }
.members-preview span { padding: 5px 9px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; font: 12px/1.3 var(--font-mono); }
.members-preview .empty { width: 100%; padding: 10px 0; }
.card-actions { align-items: center; justify-content: space-between; }
.settings-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.action-row { margin-top: 2px; }
.progress { height: 9px; overflow: hidden; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; }
.progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width .3s ease; }
.campaign-stats { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 12px; }
.campaign-stats b { color: var(--text); font: 600 15px var(--font-mono); }
.campaign-stats .s-sent b { color: var(--success); }
.campaign-stats .s-failed b { color: var(--danger); }
.campaign-stats .s-skipped b { color: var(--warning); }
.accounts-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mini-acc { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }
.mini-acc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-acc .st { color: var(--muted); }
.mini-acc.s-done .st { color: var(--success); }
.mini-acc.s-error .st, .mini-acc.s-flood-limited .st { color: var(--danger); }
.log-card { margin-top: 16px; }
.log { height: 220px; overflow-y: auto; padding: 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; font: 12px/1.7 var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.log .l-error { color: var(--danger); }
.log .l-warn { color: var(--warning); }
.log .l-info { color: #bbcbdb; }
.log .l-time { color: var(--subtle); margin-right: 10px; }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(90vw, 480px); padding: 12px 18px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 40px #0008; font-size: 13px; z-index: 10; }
.toast.err { border-color: var(--danger); color: var(--danger); }
.toast.ok { border-color: var(--success); color: var(--success); }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } .intro-note { display: none; } }
@media (max-width: 650px) { .shell { padding: 0 16px 30px; } .topbar { min-height: 64px; } .intro { padding: 30px 0 24px; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { padding: 18px; } .metric { padding: 14px; } .metric strong { font-size: 26px; } }
@media (max-width: 420px) { .brand-context, .brand-divider { display: none; } .field-row, .import-row, .card-actions { flex-direction: column; } .settings-row { grid-template-columns: 1fr 1fr; } .settings-row label:last-child { grid-column: 1 / -1; } .card-actions { align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }