/* IgnatikVPN — Telegram Mini App. Тёмно-фиолетовая тема (фиолет/молния). */
:root{
  --bg:#0a0710; --bg2:#0f0a1a;
  --card:#15101f; --card2:#1c1530; --border:#2a2140;
  --text:#f1ecf8; --muted:#9a8fb5; --faint:#6c6088;
  --purple:#a855f7; --purple-2:#7c3aed; --purple-lt:#c084fc;
  --soft:rgba(168,85,247,.14);
  --grad:linear-gradient(135deg,#a855f7 0%,#6d28d9 100%);
  --green:#34d399; --red:#fb7185;
  --radius:20px; --radius-sm:14px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.45; min-height:100vh;
  padding-bottom:calc(76px + var(--safe-bot));
  overflow-x:hidden;
}

/* Фоновые свечения + «карта» из точек */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 360px at 50% -8%, rgba(168,85,247,.30), transparent 70%),
    radial-gradient(500px 500px at 110% 8%, rgba(124,58,237,.18), transparent 70%),
    radial-gradient(circle at 18% 14%, rgba(192,132,252,.5) 0 1.3px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(192,132,252,.4) 0 1.3px, transparent 2px),
    radial-gradient(circle at 60% 40%, rgba(192,132,252,.3) 0 1.2px, transparent 2px),
    radial-gradient(circle at 32% 52%, rgba(192,132,252,.25) 0 1.2px, transparent 2px),
    var(--bg);
}

/* Шапка */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:calc(12px + var(--safe-top)) 18px 12px;
  background:linear-gradient(180deg,rgba(10,7,16,.92),rgba(10,7,16,.55) 70%,transparent);
  backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:9px}
.bolt{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a1745,#0c0716);
  border:2px solid var(--purple);box-shadow:0 0 18px var(--soft),inset 0 0 14px rgba(168,85,247,.35)}
.bolt svg path{fill:var(--purple-lt);
  filter:drop-shadow(0 0 4px var(--purple))}
.wordmark{font-weight:800;font-size:20px;letter-spacing:-.02em;font-style:italic}
.wordmark b{color:#fff;font-weight:800}
.wordmark i{color:var(--purple);font-style:italic;
  text-shadow:0 0 14px rgba(168,85,247,.6)}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--card);color:var(--muted);font-size:16px;font-weight:700;cursor:pointer}

main{padding:6px 16px 24px;max-width:520px;margin:0 auto}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Hero / статус */
.hero{position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(160deg,#1b1030,#120b22);
  border:1px solid var(--border);padding:22px 20px 20px;margin-top:6px;
  box-shadow:0 16px 40px rgba(80,30,160,.25)}
.hero-glow{position:absolute;top:-60px;right:-40px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(168,85,247,.5),transparent 65%);filter:blur(6px)}
.hero-status{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--muted);
  background:rgba(0,0,0,.25);border:1px solid var(--border);
  padding:6px 12px;border-radius:20px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex-shrink:0}
.dot.on{background:var(--green);box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.dot.off{background:var(--red);box-shadow:0 0 0 4px rgba(251,113,133,.16)}
.dot.trial{background:var(--purple-lt);box-shadow:0 0 0 4px var(--soft)}
.hero-days{position:relative;margin:16px 0 6px;font-weight:800;font-size:46px;
  line-height:1;letter-spacing:-.03em}
.hero-days small{display:block;font-size:13px;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-top:6px}
.hero-balance{position:relative;display:flex;align-items:center;justify-content:space-between;
  margin:18px 0 16px;padding-top:16px;border-top:1px solid var(--border)}
.hero-balance .bal{font-size:22px;font-weight:800;margin-top:2px}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:14px;padding:14px 18px;font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;color:#fff;text-decoration:none;transition:transform .1s,filter .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--grad);box-shadow:0 8px 22px rgba(124,58,237,.45)}
.btn-primary:active{filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:10px 14px;font-size:13.5px;border-radius:11px}

/* Фичи */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.feat{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 6px;font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.25}
.feat-ico{font-size:20px;filter:drop-shadow(0 0 8px rgba(168,85,247,.5))}

/* Быстрые карточки */
.quick{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.qcard{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:15px 16px;color:var(--text);font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.qcard:active{background:var(--card2)}
.q-ico{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--soft);border-radius:11px}
.q-arr{margin-left:auto;color:var(--faint);font-size:22px}

.tagline{text-align:center;color:var(--muted);font-size:12.5px;font-weight:600;
  letter-spacing:.02em;margin:22px 6px 4px;padding:11px;border-radius:20px;
  border:1px solid var(--border);background:rgba(168,85,247,.06)}

/* Заголовки экранов */
.vh{font-size:21px;font-weight:800;margin:8px 0 4px;letter-spacing:-.02em}
.vsub{color:var(--muted);font-size:13.5px;margin:0 0 16px}

/* Карточки */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;margin-bottom:14px}
.card-title{font-weight:700;font-size:15px;margin-bottom:12px}

/* Ключ */
.key-label{color:var(--muted);font-size:12.5px;margin-bottom:7px}
.key-box{background:#0c0816;border:1px solid var(--border);border-radius:12px;
  padding:12px 13px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  color:var(--purple-lt);word-break:break-all;max-height:96px;overflow:auto;line-height:1.5}
.key-actions{display:flex;gap:9px;margin-top:12px}
.key-actions .btn{flex:1}
.store-row{display:flex;gap:8px;margin-bottom:14px}
.store{flex:1;text-align:center;background:var(--card2);border:1px solid var(--border);
  border-radius:11px;padding:11px 6px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none}
.steps{margin:0;padding-left:20px;color:var(--muted);font-size:13.5px;line-height:1.8}
.steps b{color:var(--text)}

/* Устройства */
.stat-line{display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.stat-line:first-child{padding-top:0}
.pill{padding:4px 11px;border-radius:20px;font-size:12.5px;font-weight:700;
  background:var(--soft);color:var(--purple-lt)}
.pill.on{background:rgba(52,211,153,.16);color:var(--green)}
.pill.off{background:rgba(251,113,133,.16);color:var(--red)}
.traffic{padding-top:14px}
.traffic-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px}
.bar{height:9px;border-radius:6px;background:#0c0816;overflow:hidden}
.bar-fill{display:block;height:100%;width:0;border-radius:6px;background:var(--grad);
  transition:width .5s ease}

/* Пополнение */
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.amount{background:var(--card2);border:1px solid var(--border);border-radius:12px;
  padding:14px 6px;color:var(--text);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.amount.active{background:var(--soft);border-color:var(--purple);color:var(--purple-lt);
  box-shadow:0 0 0 1px var(--purple)}
.custom-lbl{display:block;color:var(--muted);font-size:12.5px;margin-bottom:16px}
.custom-lbl input{width:100%;margin-top:7px;background:#0c0816;border:1px solid var(--border);
  border-radius:12px;padding:13px 14px;color:var(--text);font-size:16px;font-family:inherit}
.custom-lbl input:focus{outline:none;border-color:var(--purple)}
.pay-note{color:var(--faint);font-size:12px;text-align:center;margin-top:11px}

/* Нижняя навигация */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
  padding:8px 8px calc(8px + var(--safe-bot));gap:2px;
  background:rgba(12,8,20,.92);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:var(--faint);font-family:inherit;cursor:pointer;
  padding:6px 2px;border-radius:12px}
.tab span{font-size:19px;filter:grayscale(.4);opacity:.7}
.tab i{font-style:normal;font-size:10.5px;font-weight:600}
.tab.active{color:var(--purple-lt)}
.tab.active span{filter:none;opacity:1;transform:translateY(-1px)}

/* Тост */
.toast{position:fixed;left:50%;bottom:calc(88px + var(--safe-bot));transform:translateX(-50%);
  background:#221634;border:1px solid var(--purple);color:#fff;padding:11px 18px;
  border-radius:12px;font-size:13.5px;font-weight:600;z-index:50;max-width:88%;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toastIn .2s ease}
@keyframes toastIn{from{opacity:0}to{opacity:1}}
.muted{color:var(--muted)}

/* Пинг в hero + текстовые кнопки */
.hero-ping{position:relative;margin-top:12px;font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.hero-ping b{color:var(--text)}
.linkbtn{background:none;border:none;color:var(--purple-lt);font:inherit;
  font-size:13px;cursor:pointer;padding:0;text-decoration:underline}
.linkbtn:active{opacity:.6}

/* Карточка устройств */
.dev-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:15px}
.dev-count{font-size:32px;font-weight:800;line-height:1}
.dev-count small{font-size:14px;font-weight:600;color:var(--muted);margin-left:5px}
.dev-price{color:var(--muted);font-size:13.5px}
.dev-price b{color:var(--text)}
.dev-hint{color:var(--muted);font-size:12.5px;margin-top:11px;text-align:center}
.dev-hint b{color:var(--purple-lt)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}

/* Инфо-баннер */
.info-banner{background:var(--soft);border:1px solid var(--border);border-radius:13px;
  padding:12px 14px;font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.55}
.info-banner b{color:var(--text)}

/* Баланс — дни */
.bal-days{color:var(--muted);font-size:12px;margin-top:3px}

/* Стрик */
.streak-num{font-size:30px;font-weight:800;line-height:1;margin-bottom:13px}
.streak-num small{font-size:14px;font-weight:600;color:var(--muted)}
.streak-dots{display:flex;gap:6px;margin-bottom:14px}
.streak-dots i{flex:1;min-width:0;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--card2);border:1px solid var(--border);color:var(--faint);
  font-style:normal;font-size:13px;font-weight:700}
.streak-dots i.on{background:var(--soft);border-color:var(--purple);color:var(--purple-lt)}

/* Рефералка */
.ref-note{color:var(--muted);font-size:13px;margin:0 0 13px;line-height:1.5}
.ref-note b{color:var(--purple-lt)}
.ref-stat{display:flex;align-items:center;justify-content:space-between;
  padding:10px 0 13px;border-bottom:1px solid var(--border);margin-bottom:13px;font-size:14px}
.ref-stat b{font-size:20px}

/* 5 табов — чуть компактнее подписи */
.tabbar .tab i{font-size:10px}