/* ===== Sovg'a Bot — kreativ dizayn ===== */
:root {
  --bg: #0b0d17;
  --card: rgba(255,255,255,.055);
  --card-border: rgba(255,255,255,.09);
  --text: #eef0ff;
  --muted: #8b90b0;
  --radius: 20px;

  /* bo'lim aksentlari */
  --home1:#6366f1; --home2:#8b5cf6;
  --quiz1:#a855f7; --quiz2:#ec4899;
  --top1:#f59e0b; --top2:#fbbf24;
  --ref1:#f97316; --ref2:#ef4444;
  --poll1:#10b981; --poll2:#14b8a6;
  --adm1:#f43f5e; --adm2:#e11d48;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--text);
  overflow-x:hidden;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
}

/* orqa fon blob'lari */
.bg-blobs { position:fixed; inset:0; z-index:-1; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; animation:float 18s ease-in-out infinite; }
.b1 { width:340px; height:340px; background:#6d28d9; top:-120px; left:-80px; }
.b2 { width:280px; height:280px; background:#0e7490; bottom:10%; right:-100px; animation-delay:-6s; }
.b3 { width:240px; height:240px; background:#be185d; top:45%; left:-110px; animation-delay:-12s; }
@keyframes float { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.15)} }

/* ===== Header ===== */
header {
  display:flex; align-items:center; gap:12px;
  padding:16px 18px 10px;
}
.avatar {
  width:46px; height:46px; border-radius:16px; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:19px;
  background:linear-gradient(135deg,var(--home1),var(--home2));
  box-shadow:0 6px 18px rgba(99,102,241,.4);
}
.head-info { flex:1; min-width:0; }
.head-name { font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.head-sub { font-size:12px; color:var(--muted); }
.head-badge {
  font-size:12px; font-weight:700; padding:7px 12px; border-radius:999px;
  background:rgba(251,191,36,.12); color:#fbbf24; border:1px solid rgba(251,191,36,.25);
  white-space:nowrap;
}

/* ===== Umumiy ===== */
main { padding:6px 16px 20px; max-width:560px; margin:0 auto; }
.card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:18px; margin-bottom:14px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:pop .35s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pop { from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none} }
.card + .card { animation-delay:.06s; }

.section-title {
  display:flex; align-items:center; gap:10px;
  font-size:20px; font-weight:800; margin:10px 2px 14px;
}
.section-title .ico {
  width:40px; height:40px; border-radius:14px; display:grid; place-items:center; font-size:20px;
}
.hint { color:var(--muted); font-size:13px; line-height:1.5; }

.btn {
  display:block; width:100%; border:none; cursor:pointer;
  padding:15px; border-radius:16px; font-size:15px; font-weight:700;
  color:#fff; font-family:inherit; transition:transform .12s, filter .12s;
}
.btn:active { transform:scale(.97); filter:brightness(1.15); }
.btn.small { width:auto; display:inline-block; padding:9px 16px; font-size:13px; border-radius:12px; }
.btn.ghost { background:rgba(255,255,255,.08); border:1px solid var(--card-border); }
.btn.danger { background:linear-gradient(135deg,#f43f5e,#e11d48); }
.btn:disabled { opacity:.5; pointer-events:none; }

.g-home { background:linear-gradient(135deg,var(--home1),var(--home2)); box-shadow:0 8px 22px rgba(99,102,241,.35); }
.g-quiz { background:linear-gradient(135deg,var(--quiz1),var(--quiz2)); box-shadow:0 8px 22px rgba(217,70,239,.35); }
.g-top  { background:linear-gradient(135deg,var(--top1),var(--top2)); box-shadow:0 8px 22px rgba(245,158,11,.35); }
.g-ref  { background:linear-gradient(135deg,var(--ref1),var(--ref2)); box-shadow:0 8px 22px rgba(249,115,22,.35); }
.g-poll { background:linear-gradient(135deg,var(--poll1),var(--poll2)); box-shadow:0 8px 22px rgba(16,185,129,.35); }
.g-adm  { background:linear-gradient(135deg,var(--adm1),var(--adm2)); box-shadow:0 8px 22px rgba(244,63,94,.35); }

input, textarea, select {
  width:100%; padding:13px 14px; border-radius:14px; font-size:14px; font-family:inherit;
  background:rgba(255,255,255,.06); border:1px solid var(--card-border); color:var(--text);
  outline:none; margin-bottom:10px;
}
input:focus, textarea:focus { border-color:var(--home1); }
label.fld { display:block; font-size:12px; color:var(--muted); margin:2px 2px 5px; font-weight:600; }

/* ===== Tab bar ===== */
nav#tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; align-items:stretch;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(13,15,28,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.07);
}
.tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px; border-radius:14px; cursor:pointer; border:none; background:none;
  color:var(--muted); font-family:inherit; font-size:10.5px; font-weight:700;
  transition:color .15s;
}
.tab .tico { font-size:21px; transition:transform .2s; filter:grayscale(.4); }
.tab.active { color:var(--text); }
.tab.active .tico { transform:translateY(-2px) scale(1.15); filter:none; }
.tab.active::after {
  content:''; width:16px; height:3px; border-radius:3px; margin-top:1px;
  background:linear-gradient(90deg,var(--tabc1,#6366f1),var(--tabc2,#8b5cf6));
}

/* ===== Home ===== */
.hero {
  border-radius:24px; padding:22px; margin-bottom:14px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#312e81,#6d28d9 55%,#9d174d);
  animation:pop .35s both;
}
.hero::before {
  content:'🎁'; position:absolute; right:-14px; bottom:-22px; font-size:110px; opacity:.18; transform:rotate(-14deg);
}
.hero h1 { font-size:21px; margin-bottom:6px; }
.hero p { font-size:13px; color:rgba(255,255,255,.75); line-height:1.5; max-width:85%; }

.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.stat {
  background:var(--card); border:1px solid var(--card-border); border-radius:18px;
  padding:14px; animation:pop .4s both;
}
.stat .sv { font-size:22px; font-weight:800; }
.stat .sl { font-size:11px; color:var(--muted); margin-top:2px; font-weight:600; }
.stat .si { font-size:18px; margin-bottom:6px; display:block; }

.menu-row {
  display:flex; align-items:center; gap:13px; cursor:pointer;
  padding:15px; border-radius:18px; margin-bottom:10px;
  background:var(--card); border:1px solid var(--card-border);
  transition:transform .12s; animation:pop .4s both;
}
.menu-row:active { transform:scale(.98); }
.menu-row .mi { width:44px; height:44px; border-radius:15px; display:grid; place-items:center; font-size:21px; flex:none; }
.menu-row .mt { font-weight:700; font-size:15px; }
.menu-row .md { font-size:12px; color:var(--muted); margin-top:1px; }
.menu-row .arr { margin-left:auto; color:var(--muted); font-size:18px; }

/* ===== Quiz ===== */
.quiz-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.q-progress { display:flex; gap:4px; flex:1; margin-right:14px; }
.q-progress i { height:5px; flex:1; border-radius:4px; background:rgba(255,255,255,.12); }
.q-progress i.done { background:linear-gradient(90deg,var(--quiz1),var(--quiz2)); }

.timer-wrap { position:relative; width:64px; height:64px; flex:none; }
.timer-wrap svg { transform:rotate(-90deg); }
.timer-ring { fill:none; stroke:rgba(255,255,255,.1); stroke-width:5; }
.timer-arc { fill:none; stroke:url(#tgrad); stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset .3s linear; }
.timer-num {
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-size:19px;
}
.timer-num.low { color:#f87171; animation:pulse .6s infinite; }
@keyframes pulse { 50%{transform:scale(1.18)} }

.q-text {
  font-size:18px; font-weight:700; line-height:1.45; margin-bottom:16px;
  animation:pop .3s both;
}
.opt {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:15px 16px; border-radius:16px; margin-bottom:10px; cursor:pointer;
  background:var(--card); border:1.5px solid var(--card-border);
  color:var(--text); font-family:inherit; font-size:14.5px; font-weight:600; text-align:left;
  transition:border-color .15s, background .15s, transform .12s;
  animation:pop .35s both;
}
.opt:active { transform:scale(.98); }
.opt .letter {
  width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.09); font-size:13px; font-weight:800;
}
.opt.sel { border-color:var(--quiz1); background:rgba(168,85,247,.12); }
.opt.ok { border-color:#22c55e; background:rgba(34,197,94,.15); }
.opt.ok .letter { background:#22c55e; }
.opt.bad { border-color:#ef4444; background:rgba(239,68,68,.14); animation:shake .35s; }
.opt.bad .letter { background:#ef4444; }
.opt.dim { opacity:.45; }
@keyframes shake { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.result-big {
  text-align:center; padding:28px 18px;
}
.result-big .emoji { font-size:64px; display:block; animation:bounce .8s; }
@keyframes bounce { 0%{transform:scale(0)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }
.result-big h2 { font-size:23px; margin:12px 0 4px; }
.result-score {
  font-size:44px; font-weight:900;
  background:linear-gradient(90deg,var(--quiz1),var(--quiz2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.points-fly {
  position:fixed; left:50%; top:38%; transform:translateX(-50%); z-index:99;
  font-size:30px; font-weight:900; color:#22c55e; pointer-events:none;
  animation:flyup 1s ease-out forwards;
}
@keyframes flyup { from{opacity:1; transform:translate(-50%,0)} to{opacity:0; transform:translate(-50%,-70px)} }

/* ===== Leaderboard ===== */
.podium { display:flex; align-items:flex-end; justify-content:center; gap:10px; margin:18px 0 16px; }
.pod { text-align:center; flex:1; max-width:110px; animation:pop .5s both; }
.pod .pav {
  width:56px; height:56px; margin:0 auto 6px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:20px;
  background:linear-gradient(135deg,#475569,#334155);
}
.pod.p1 .pav { width:70px; height:70px; font-size:26px; background:linear-gradient(135deg,#f59e0b,#fbbf24); box-shadow:0 0 28px rgba(251,191,36,.45); }
.pod.p2 .pav { background:linear-gradient(135deg,#94a3b8,#cbd5e1); }
.pod.p3 .pav { background:linear-gradient(135deg,#b45309,#d97706); }
.pod .pn { font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pod .ps { font-size:13px; font-weight:800; color:#fbbf24; }
.pod .crown { font-size:22px; }

.lb-row {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:15px; margin-bottom:7px;
  background:var(--card); border:1px solid var(--card-border);
}
.lb-row.me { border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.08); }
.lb-rank { width:26px; text-align:center; font-weight:800; color:var(--muted); font-size:14px; flex:none; }
.lb-name { flex:1; font-weight:600; font-size:14px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-pts { font-weight:800; font-size:14px; }
.lb-sub { font-size:11px; color:var(--muted); }

/* ===== Referral ===== */
.ref-link-card {
  background:linear-gradient(135deg,rgba(249,115,22,.16),rgba(239,68,68,.12));
  border:1px solid rgba(249,115,22,.3);
}
.ref-link {
  font-size:12.5px; word-break:break-all; padding:11px 12px; border-radius:12px;
  background:rgba(0,0,0,.3); margin:10px 0; font-family:Consolas, monospace; color:#fdba74;
}
.ref-btns { display:flex; gap:8px; }
.ref-btns .btn { flex:1; }

.prog-wrap { margin-top:12px; }
.prog-bar { height:10px; border-radius:8px; background:rgba(255,255,255,.09); overflow:hidden; }
.prog-fill { height:100%; border-radius:8px; background:linear-gradient(90deg,var(--ref1),var(--ref2)); transition:width .6s cubic-bezier(.2,.9,.3,1); }
.prog-lbls { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:5px; font-weight:600; }

.gbadge {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:6px 11px; border-radius:999px; margin:2px 4px 2px 0;
}
.gbadge.g1 { background:rgba(249,115,22,.15); color:#fb923c; border:1px solid rgba(249,115,22,.3); }
.gbadge.g2 { background:rgba(236,72,153,.15); color:#f472b6; border:1px solid rgba(236,72,153,.3); }

.seg { display:flex; gap:6px; background:rgba(255,255,255,.06); padding:5px; border-radius:14px; margin-bottom:12px; }
.seg button {
  flex:1; padding:9px 4px; border:none; border-radius:10px; cursor:pointer;
  background:none; color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:700;
}
.seg button.on { background:rgba(255,255,255,.12); color:var(--text); }

/* ===== Polls ===== */
.poll-card { position:relative; }
.poll-status {
  position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:800;
  padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px;
}
.poll-status.active { background:rgba(16,185,129,.15); color:#34d399; border:1px solid rgba(16,185,129,.35); }
.poll-status.closed { background:rgba(148,163,184,.13); color:#94a3b8; border:1px solid rgba(148,163,184,.3); }
.poll-title { font-size:16px; font-weight:800; margin-bottom:3px; padding-right:70px; }
.poll-desc { font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.poll-opt {
  position:relative; display:block; width:100%; text-align:left; overflow:hidden;
  padding:13px 14px; border-radius:14px; margin-bottom:8px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1.5px solid var(--card-border);
  color:var(--text); font-family:inherit; font-size:13.5px; font-weight:600;
}
.poll-opt .fill {
  position:absolute; inset:0; width:0; border-radius:12px;
  background:linear-gradient(90deg,rgba(16,185,129,.22),rgba(20,184,166,.1));
  transition:width .7s cubic-bezier(.2,.9,.3,1);
}
.poll-opt .row { position:relative; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.poll-opt .pct { font-weight:800; color:#34d399; font-size:13px; flex:none; }
.poll-opt.myvote { border-color:#10b981; }
.poll-opt.myvote .row::after { content:'✓'; color:#34d399; font-weight:900; }
.poll-total { font-size:12px; color:var(--muted); text-align:right; margin-top:4px; }

/* ===== Admin ===== */
.adm-item {
  padding:13px 14px; border-radius:14px; margin-bottom:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--card-border);
  font-size:13.5px;
}
.adm-item .top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.adm-item .acts { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.adm-item .meta { font-size:11.5px; color:var(--muted); margin-top:4px; }
.chip {
  border:none; cursor:pointer; font-family:inherit;
  font-size:11.5px; font-weight:700; padding:7px 12px; border-radius:10px;
  background:rgba(255,255,255,.09); color:var(--text);
}
.chip.red { background:rgba(244,63,94,.16); color:#fb7185; }
.chip.green { background:rgba(16,185,129,.16); color:#34d399; }

.winner-flash {
  text-align:center; padding:20px; border-radius:18px; margin-bottom:12px;
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(244,63,94,.12));
  border:1px solid rgba(251,191,36,.4); animation:pop .5s both;
}
.winner-flash .wname { font-size:20px; font-weight:900; color:#fbbf24; }

/* ===== Toast ===== */
#toast {
  position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(20px);
  background:#1e2135; color:var(--text); border:1px solid var(--card-border);
  padding:12px 20px; border-radius:14px; font-size:13.5px; font-weight:600;
  opacity:0; pointer-events:none; transition:.25s; z-index:100; max-width:85%;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.empty { text-align:center; padding:34px 16px; color:var(--muted); font-size:13.5px; }
.empty .e-ico { font-size:44px; display:block; margin-bottom:10px; opacity:.7; }
.center { text-align:center; }
.mt { margin-top:12px; }
.spinner {
  width:34px; height:34px; margin:40px auto; border-radius:50%;
  border:3px solid rgba(255,255,255,.12); border-top-color:var(--home1);
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }