/* нормальный VPN — Mini App. Токены из дизайна «GLASS UI · Аметист» (393×852). */
:root {
  --bg: #0c0818;
  --accent: #b49bff;
  --accent2: #a893dd;
  --muted: #a598c4;
  --dim: #7b7192;
  --soft: #e0d6f7;
  --green: #4ae08a;
  --red: #ff6b78;
  --glass-bg: linear-gradient(180deg, rgba(30,20,64,.72), rgba(9,6,22,.86));
  --glass-border: rgba(200,180,255,.13);
  --glass-shadow: 0 18px 40px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09);
  --plate-bg: linear-gradient(180deg, rgba(58,40,120,.5), rgba(24,16,56,.58));
  --plate-border: rgba(200,180,255,.14);
  --btn-grad: linear-gradient(180deg, #a98cff, #6a3fe0);
  --btn-shadow: 0 14px 28px -12px rgba(139,108,245,.9), inset 0 1px 0 rgba(255,255,255,.35);
  --acc-bg: linear-gradient(180deg, rgba(84,60,168,.5), rgba(32,22,72,.55));
  --acc-border: rgba(178,152,255,.42);
  --acc-shadow: 0 10px 26px -14px rgba(169,140,255,.9), inset 0 1px 0 rgba(255,255,255,.18);
  --quiet-bg: linear-gradient(180deg, rgba(44,32,88,.5), rgba(18,12,40,.55));
  --safe-top: var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; }
html { margin: 0; background: var(--bg); color: #fff; }
body { margin: 0; background: transparent; }   /* фон рисует .bg (z-index:-1) — непрозрачный body его перекрывал */
body {
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
body.noscroll { overflow: hidden; }
::-webkit-scrollbar { width: 0; height: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
button:active:not([disabled]) { transform: scale(.985); }
button[disabled] { opacity: .5; cursor: default; }
a { color: var(--accent); text-decoration: none; }
b { font-weight: 800; }

/* фон: градиент + линейный паттерн */
.bg { position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(125% 55% at 50% 0%, #7b52e8 0%, #4a2c9e 30%, #1d123a 66%, #0c0818 100%); }
.bg::after { content: ''; position: absolute; inset: 0; opacity: .17; background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'%3E%3Cg fill='none' stroke='%23d8caff' stroke-width='1.3'%3E%3Ccircle cx='30' cy='140' r='150'/%3E%3Ccircle cx='30' cy='140' r='225'/%3E%3Ccircle cx='375' cy='330' r='165'/%3E%3Ccircle cx='375' cy='330' r='245'/%3E%3Cpolyline points='-20,430 70,355 155,475 245,325 330,445 425,365'/%3E%3Cpolyline points='-20,625 80,555 170,665 265,535 350,645 425,585'/%3E%3Ccircle cx='195' cy='775' r='125'/%3E%3C/g%3E%3C/svg%3E"); }

/* Иконки Material Symbols Rounded (лигатуры).
   По умолчанию контурные — как в макете, где заливка стоит адресно только у чата и таб-бара.
   В font-variation-settings перечисляем ТОЛЬКО ось FILL: вес и оптический размер должны
   наследоваться от font-weight/font-size родителя, иначе иконка в жирной кнопке худеет. */
.ms { font-family: 'Material Symbols Rounded'; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0; }
.ms.fill { font-variation-settings: 'FILL' 1; }
.ms.nofill { font-variation-settings: 'FILL' 0; }   /* устаревший псевдоним, оставлен безвредным */
.ms.i19 { font-size: 19px; } .ms.i21 { font-size: 21px; } .ms.i22 { font-size: 22px; } .ms.big { font-size: 40px; }
.ms.a2 { color: var(--accent2); }

/* логотип: скруглённый квадрат с белой «N» */
.logo { position: relative; width: var(--s, 36px); height: var(--s, 36px); border-radius: var(--r, 12px); flex: 0 0 auto; overflow: hidden;
  background: linear-gradient(150deg, #c3b0ff, #7b4ff0 46%, #4a24b8);
  box-shadow: 0 8px 18px -8px rgba(139,108,245,.95), inset 0 1px 0 rgba(255,255,255,.5); }
.logo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,.5), rgba(255,255,255,0) 60%); }
.logo i { position: absolute; background: #fff; border-radius: 99px; }
.logo i:nth-child(1) { left: 24%; top: 20%; width: 11%; height: 52%; }
.logo i:nth-child(2) { right: 24%; top: 30%; width: 11%; height: 52%; }
.logo i:nth-child(3) { left: 50%; top: 50%; width: 52%; height: 11%; transform: translate(-50%,-50%) rotate(-34deg); }
.wordmark { display: flex; align-items: baseline; gap: 6px; }
.wordmark span { color: #fff; font-size: 17px; font-weight: 500; }
.wordmark b { color: var(--accent); font-size: 17px; font-weight: 800; letter-spacing: .03em; }
.wordmark.lg span { font-size: 32px; } .wordmark.lg b { font-size: 32px; font-weight: 900; }

/* экран «откройте в Telegram» */
#lock { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
#lock[hidden], #app[hidden] { display: none; }
.lock-card { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 360px; }
.lock-card p { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0; }

/* вкладки */
.tab { display: none; max-width: 520px; margin: 0 auto; min-height: 100vh;
  padding: calc(14px + var(--safe-top)) 16px calc(106px + var(--safe-bottom));
  grid-auto-rows: min-content; align-content: start; row-gap: 14px; }
.tab.on { display: grid; }

/* стекло */
.glass { position: relative; overflow: hidden; border-radius: 28px; padding: 20px; background: var(--glass-bg);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; gap: 16px; }
.glass.r26 { border-radius: 26px; }
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.glow.g1 { left: -40px; top: -50px; width: 190px; height: 190px; background: radial-gradient(circle, rgba(169,140,255,.28), rgba(169,140,255,0) 66%); }
.glow.g2 { right: -30px; top: 20px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(169,140,255,.26), rgba(169,140,255,0) 66%); }
.plate { border-radius: 18px; background: var(--plate-bg); border: 1px solid var(--plate-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

/* кнопки */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px;
  border-radius: 18px; font-size: 17px; font-weight: 700; color: #fff; transition: transform .12s ease; }
.btn-primary { background: var(--btn-grad); box-shadow: var(--btn-shadow); }
.btn-acc { background: var(--acc-bg); border: 1px solid var(--acc-border); box-shadow: var(--acc-shadow); }
.btn-quiet { background: var(--quiet-bg); border: 1px solid rgba(200,180,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); font-weight: 600; }
.btn.h44 { height: 44px; border-radius: 15px; font-size: 16px; }
.btn.h48 { height: 48px; width: auto; padding: 0 22px; border-radius: 16px; flex: 0 0 auto; }
.btn.h58 { height: 58px; }
.btn.col { flex-direction: column; gap: 1px; }
.btn.col span { font-size: 16px; font-weight: 700; }
.btn.col small { font-size: 13px; font-weight: 500; color: var(--accent2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt { margin-top: 6px; }

/* ---- главная ---- */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; }
.brand { display: flex; align-items: center; gap: 11px; }
.pill { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(58,40,120,.55), rgba(24,16,56,.62)); border: 1px solid rgba(200,180,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.pill span { color: var(--soft); font-size: 13px; font-weight: 600; white-space: nowrap; }
.row2 { display: flex; gap: 14px; align-items: stretch; height: 126px; }
.sq { width: 104px; flex: 0 0 auto; padding: 0; display: grid; place-items: center; }
.sq .big { color: #cfbcff; }
.sq .q { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc-bg); border: 1px solid rgba(178,152,255,.35); color: var(--soft); font-size: 15px; font-weight: 700; }
.bal { flex: 1; min-width: 0; padding: 16px; justify-content: space-between; gap: 0; }
.bal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bal-top .ms { color: #b7a4e8; }
.lbl { color: var(--muted); font-size: 13px; font-weight: 500; }
.amt { color: #fff; font-size: 24px; font-weight: 800; line-height: 1.1; margin-top: 2px; white-space: nowrap; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(30,20,64,.6), rgba(9,6,22,.7)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(200,180,255,.11); }
.seg button { height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--accent2); font-size: 15px; font-weight: 600; }
.seg button.on { background: var(--acc-bg); border: 1px solid rgba(178,152,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); color: #fff; font-weight: 700; }
.tariff { gap: 18px; }
.t-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.days { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.days b { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.days span { font-size: 23px; font-weight: 600; }
.prog { position: relative; display: flex; flex-direction: column; gap: 8px; }
.bar { height: 6px; border-radius: 99px; background: rgba(200,180,255,.12); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6a3fe0, #c3b0ff); box-shadow: 0 0 14px rgba(169,140,255,.8); }
.price { color: var(--accent); font-size: 14px; font-weight: 500; }
.tariff .grid2 { position: relative; }
.refcard .ref-top, .refcard2 .ref-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.refcard2 .ref-top { align-items: flex-start; }   /* на «Бонусах» заголовок вровень с верхом кольца */
.ref-title { color: #fff; font-size: 21px; font-weight: 700; line-height: 1.25; }
.ref-title2 { color: #fff; font-size: 22px; font-weight: 800; line-height: 1.25; max-width: 210px; }
/* Три слоя врозь: свечение на самом блоке, два кольца — на ::before и ::after.
   Прозрачная box-shadow ничего не «вырезает», поэтому имитация второго кольца тенью
   давала сплошную полосу в 14px вместо волосяной линии. */
.ring { position: relative; width: 96px; height: 96px; flex: 0 0 auto; display: grid; place-items: center; margin: -10px -2px;
  background: radial-gradient(circle, rgba(169,140,255,.42), rgba(169,140,255,0) 66%); border-radius: 50%; }
.ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(200,180,255,.3); }
.ring::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; border: 1px solid rgba(200,180,255,.16); }
.ring .logo { position: relative; z-index: 1; --r: 17px; box-shadow: 0 14px 30px -10px rgba(139,108,245,.95), inset 0 1px 0 rgba(255,255,255,.5); }
/* На «Бонусах» подсветку даёт блоб карточки, а кольца стоят ближе к краю. */
.ring.sm { width: 88px; height: 88px; margin: -8px -4px; background: none; }
.ring.sm::before { inset: 6px; }
.ring.sm::after { inset: 20px; }
.ref-plate { position: relative; padding: 15px; text-align: center; color: #e6dcfa; font-size: 15px; font-weight: 500; width: 100%; }
.ref-plate b { color: var(--accent); font-weight: 800; }
.ref-text { position: relative; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.5; text-wrap: pretty; }
.ref-text b { color: var(--accent); font-weight: 700; }
.refcard2 { gap: 14px; }
.tgcard { padding: 18px; gap: 14px; }
.tg-row { display: flex; align-items: center; gap: 12px; }
.tg-row .logo { --s: 44px; --r: 15px; }
.tt { color: #fff; font-size: 16px; font-weight: 700; }
.ts { color: var(--muted); font-size: 14px; font-weight: 400; margin-top: 1px; }

/* ---- бонусы ---- */
.b-hdr { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.h24 { color: #fff; font-size: 24px; font-weight: 800; }
.h17 { color: #fff; font-size: 17px; font-weight: 700; }
.qbtn { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--accent2); font-size: 18px; font-weight: 700;
  background: var(--acc-bg); border: 1px solid rgba(178,152,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.stat { height: 112px; padding: 16px; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--plate-bg); border: 1px solid var(--plate-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.stat span { color: #b3a6cf; font-size: 14px; font-weight: 500; }
.stat b { color: #fff; font-size: 26px; font-weight: 800; line-height: 1; white-space: nowrap; }
.stat.green { background: linear-gradient(180deg, rgba(20,80,62,.42), rgba(8,34,28,.55)); border-color: rgba(74,224,138,.3); }
.stat.green span { color: #a8d6c2; } .stat.green b { color: var(--green); }
.how { gap: 14px; }
.steps { display: flex; flex-direction: column; gap: 12px; }
.steps > div { display: flex; align-items: center; gap: 12px; }
.steps i { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; font-style: normal;
  background: var(--acc-bg); border: 1px solid rgba(178,152,255,.3); color: var(--accent2); font-size: 14px; font-weight: 700; }
.steps span { color: var(--soft); font-size: 15px; font-weight: 400; line-height: 1.35; }

/* ---- профиль ---- */
.prof { gap: 18px; }
.p-top { display: flex; align-items: center; gap: 16px; }
.ava { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #04231e; font-size: 26px; font-weight: 800;
  background: linear-gradient(150deg, #6bf0d6, #17b39a 55%, #0b7d6a); box-shadow: 0 14px 30px -12px rgba(63,220,192,.7), inset 0 1.5px 0 rgba(255,255,255,.5); }
.p-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pn { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.ph { color: var(--muted); font-size: 15px; }
.plist { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(58,40,120,.42), rgba(24,16,56,.5)); border: 1px solid rgba(200,180,255,.12); }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 52px; padding: 0 16px; width: 100%; }
.prow .k { color: var(--muted); font-size: 15px; }
.prow .v { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; font-weight: 600; min-width: 0; }
.prow .v em { color: var(--red); font-style: normal; }
.prow .v .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; font-weight: 500; }
.pdiv { height: 1px; background: rgba(200,180,255,.1); }
.menu { padding: 0; gap: 0; }
.mrow { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px; width: 100%; }
.mrow + .mrow { border-top: 1px solid rgba(200,180,255,.08); }
.mic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(84,60,168,.45), rgba(32,22,72,.5)); border: 1px solid rgba(200,180,255,.14); }
.mic .ms { color: var(--accent); }
.ml { color: #fff; font-size: 17px; font-weight: 500; flex: 1; }
.chev { color: var(--dim); }

/* ---- устройства ---- */
.dsum { color: var(--muted); font-size: 15px; line-height: 1.45; }
.dsum b { color: #fff; }
.dlist { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(58,40,120,.42), rgba(24,16,56,.5)); border: 1px solid rgba(200,180,255,.12); }
.drow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; }
.drow + .drow { border-top: 1px solid rgba(200,180,255,.08); }
.dinfo { flex: 1; min-width: 0; }
.dn { color: #fff; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ibtn { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center;
  background: var(--acc-bg); border: 1px solid rgba(178,152,255,.3); color: #fff; }
.ibtn.red { color: var(--red); background: linear-gradient(180deg, rgba(120,40,60,.35), rgba(60,16,30,.45)); border-color: rgba(255,107,120,.3); }

/* ---- шторка ---- */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-back { position: absolute; inset: 0; background: rgba(3,1,10,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet-card { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #221647, #100b22); border: 1px solid rgba(200,180,255,.16); border-bottom: 0;
  padding: 10px 18px calc(22px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; animation: up .22s ease; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.grab { width: 44px; height: 5px; border-radius: 99px; background: rgba(200,180,255,.25); margin: 0 auto 4px; }
.sh-title { color: #fff; font-size: 22px; font-weight: 800; }
.sh-sub { color: var(--muted); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.sh-lbl { color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 4px; }
.sh-warn { padding: 14px; border-radius: 16px; background: rgba(255,107,120,.12); border: 1px solid rgba(255,107,120,.3); color: #ffd3d8; font-size: 15px; line-height: 1.4; }
.sh-note { color: var(--dim); font-size: 13px; line-height: 1.4; }
.input { width: 100%; height: 52px; border-radius: 16px; padding: 0 16px; font: inherit; font-size: 16px; color: #fff; outline: none;
  background: rgba(58,40,120,.42); border: 1px solid rgba(200,180,255,.16); }
.input::placeholder { color: var(--dim); }
.input:focus { border-color: rgba(178,152,255,.6); }
.chips, .presets { display: flex; flex-wrap: wrap; gap: 8px; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); }
.chip { height: 40px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--quiet-bg); border: 1px solid rgba(200,180,255,.14); color: var(--soft); font-size: 14px; font-weight: 600; white-space: nowrap; }
.chip.on { background: var(--acc-bg); border-color: var(--acc-border); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.sublink { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px;
  background: rgba(58,40,120,.35); border: 1px solid rgba(200,180,255,.14); }
.sublink code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps { display: flex; flex-direction: column; gap: 10px; }
.app { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--plate-bg); border: 1px solid var(--plate-border); }
.app-i { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.an { color: #fff; font-size: 16px; font-weight: 700; }
.ad { color: var(--muted); font-size: 13px; }
.app-b { display: flex; gap: 8px; flex-wrap: wrap; }
.app-b .chip { height: 36px; padding: 0 12px; font-size: 13px; }
.txlist { display: flex; flex-direction: column; }
.tx { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.tx + .tx { border-top: 1px solid rgba(200,180,255,.08); }
.tx .mic { width: 36px; height: 36px; border-radius: 11px; }
.tx .mic .ms { font-size: 19px; }
.tx-n { flex: 1; min-width: 0; }
.tx-t { color: #fff; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-d { color: var(--dim); font-size: 12px; margin-top: 2px; }
.tx-a { font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.tx-a.plus { color: var(--green); }
.spinner { width: 34px; height: 34px; margin: 8px auto; border-radius: 50%; border: 3px solid rgba(200,180,255,.2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { color: var(--dim); font-size: 15px; text-align: center; padding: 18px 0; }

/* ---- таб-бар ---- */
.tabbar { position: fixed; left: 14px; right: 14px; bottom: calc(14px + var(--safe-bottom)); height: 74px; z-index: 20;
  max-width: 492px; margin: 0 auto; border-radius: 26px; background: rgba(14,9,30,.6);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(200,180,255,.13); box-shadow: 0 -16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; }
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--dim); height: 100%; width: 100%; justify-content: center; }
.tabbar button .ms { font-size: 26px; }
.tabbar button span:last-child { font-size: 12px; font-weight: 600; }
.tabbar button.on { color: #a68cf7; }

/* ---- тост ---- */
.toast { position: fixed; left: 50%; bottom: calc(104px + var(--safe-bottom)); transform: translateX(-50%); z-index: 60; max-width: 90%;
  padding: 12px 18px; border-radius: 14px; background: rgba(20,12,44,.94); border: 1px solid rgba(200,180,255,.22);
  color: #fff; font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: up .2s ease; }
.toast.ok { border-color: rgba(74,224,138,.45); }
.toast.err { border-color: rgba(255,107,120,.45); }
.toast[hidden] { display: none; }

/* ---- узкие экраны (iPhone SE и подобные) ---- */
/* Четыре фиксированные колонки не вмещают чип «1000 ₽», и внутри шторки появлялась
   горизонтальная прокрутка с обрезанным правым чипом. */
@media (max-width: 380px) {
  .presets { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
  .chip { padding: 0 10px; font-size: 13px; }
  .days b { font-size: 40px; }
  .btn.h48 { padding: 0 16px; font-size: 16px; }
  .amt { font-size: 22px; }
}