/* Токены дизайна Mini App vpnberg.
   Источник значений — макет UI Designer + вердикт Brand Guardian
   (палитра снята по пикселям configs/branding/logo-round.png и banner-wide.png).
   Поверхности и текст — переменные темы Telegram с фолбэками макета;
   фирменный слой (неон, кольцо, градиенты) — константы ниже. */
:root{
  --neon-pink:#F45BDF; --neon-violet:#C36CF5; --neon-peri:#75A4F4; --neon-cyan:#40D6F0;
  --neon-mid:#8F79FF; --ink-navy:#44445C; --ink-deep:#0C1C3C;
  --primary:#7C52F0; --primary-down:#6B44D9;
  --grad-line:linear-gradient(90deg,#F45BDF 0%,#8F79FF 48%,#40D6F0 100%);
  /* Кольцо: низ розовый, фиолетовый на «4–5 часах» — как в оригинале логотипа */
  --grad-ring:conic-gradient(from 0deg,#75A4F4 0%,#3BD7EA 16%,#46D3F6 26%,#C36CF5 36%,#F25FDA 50%,#F85AE0 64%,#F45BDF 80%,#E05CF0 92%,#75A4F4 100%);
  --radius:14px; --radius-inner:10px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --ok:#4BDDB6; --warn:#FFC24D; --bad:#FF6E9C; --trial:#CDB2FF;
}
:root[data-theme="dark"]{
  --bg:var(--tg-theme-bg-color,#131017); --card:var(--tg-theme-secondary-bg-color,#1E1927);
  --text:var(--tg-theme-text-color,#F4F2FA); --hint:var(--tg-theme-hint-color,#A29CB2);
  --line:rgba(255,255,255,.08); --chip:rgba(255,255,255,.07);
  --shadow:0 2px 14px rgba(0,0,0,.28);
  --wordmark:url("../assets/wordmark-light.png");
}
:root[data-theme="light"]{
  --bg:var(--tg-theme-bg-color,#F2F1F7); --card:var(--tg-theme-secondary-bg-color,#FFFFFF);
  --text:var(--tg-theme-text-color,#232741); --hint:var(--tg-theme-hint-color,#8B8AA1);
  --line:rgba(35,39,65,.10); --chip:rgba(35,39,65,.06);
  --shadow:0 4px 16px rgba(48,44,94,.07);
  --ok:#0E9A78; --warn:#9A6B00; --bad:#CF2F63; --trial:#6C4FE0;
  --wordmark:url("../assets/wordmark-navy.png");
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.4;
  -webkit-tap-highlight-color:transparent;}
#screen{max-width:480px;margin-inline:auto;
  padding:0 var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:var(--space-3);}
/* Шапка бренда: марка-диск в CSS-кольце + надпись картинкой */
.brand{max-width:480px;margin-inline:auto;display:flex;align-items:center;
  gap:var(--space-3);padding:14px var(--space-4);}
.brand-mark{position:relative;width:44px;height:44px;flex:none;}
.brand-mark img{width:100%;height:100%;display:block;border-radius:50%;}
.brand-mark::before{content:"";position:absolute;inset:-3.5px;border-radius:50%;
  background:var(--grad-ring);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));}
:root[data-theme="dark"] .brand-mark::before{
  filter:drop-shadow(0 0 6px rgba(244,91,223,.55)) drop-shadow(0 0 6px rgba(64,214,240,.4));}
:root[data-theme="light"] .brand-mark::before{opacity:.85;}
.brand-wordmark{height:21px;width:auto;display:block;content:var(--wordmark);}
:root[data-theme="dark"] body{
  background:var(--bg)
    radial-gradient(420px 260px at 8% -40px,rgba(244,91,223,.17),transparent 70%),
    radial-gradient(420px 260px at 92% -40px,rgba(64,214,240,.13),transparent 70%);
  background-attachment:fixed;}
:root[data-theme="light"] .brand{
  background:linear-gradient(115deg,#FBDFF7 0%,#F3F0FB 48%,#DFF7F1 100%);
  border-radius:0 0 var(--radius) var(--radius);}