:root{
  --bg:#0b1220; --card:#111a2e; --text:#e9eefc; --muted:#9fb0d9;
  --primary:#3b82f6; --primary-2:#2b6bd6; --danger:#ef4444; --ok:#10b981;
  --border:#1f2a44;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--text)}
img{max-width:100%;display:block}

.header{padding:10px 12px 18px;background:linear-gradient(180deg,#0d1730,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px}
.logo{width:28px;height:28px;border-radius:6px;object-fit:cover}
.nav-right{display:flex;gap:8px;align-items:center}
.stack{flex-wrap:wrap}
.group{display:flex;gap:6px;align-items:center}

.container{max-width:960px;margin:0 auto;padding:0 12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.card.narrow{max-width:720px;margin:0 auto}
.row{display:flex;gap:10px;flex-wrap:wrap}
hr{border:none;border-top:1px solid var(--border);margin:10px 0}

.btn{background:#1a2750;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:#162146}
.btn:disabled{opacity:.7;cursor:not-allowed}
.btn-primary{background:var(--primary);border-color:transparent}
.btn-primary:hover{background:var(--primary-2)}
.btn-danger{background:var(--danger);border-color:transparent}
.btn-ghost{background:transparent}
.btn-telegram{background:#229ED9;border-color:#229ED9}
.btn-ua::before{content:"🇺🇦 ";} .btn-us::before{content:"🇺🇸 ";}

.input{flex:1 1 420px;min-width:240px;background:#0e1730;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 12px}
.input:focus{outline:none;border-color:#3556a4;box-shadow:0 0 0 3px #3556a444}

.hint{color:var(--muted);font-size:.95rem}
.err{color:#ff7b7b}

.hero{padding:12px 0 18px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#122048;border:1px solid var(--border);color:#cbd6ff;font-size:.9rem}

.footer{max-width:960px;margin:22px auto;padding:10px 12px;color:var(--muted);border-top:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}

.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.progress{height:10px;background:#0e1730;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,#3b82f6,#22d3ee);width:0%}

.loader-overlay{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;z-index:30}
.spinner{width:36px;height:36px;border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}