/* ══════════════════════════════════════════════════════════
   ON1X VPN — Mini App
   Две темы: тёмная (по умолчанию) и светлая.
   Цвет в интерфейсе значит одно — статус доступа.
   ══════════════════════════════════════════════════════════ */

:root{
  /* тёмная тема */
  --bg:#0D1017;
  --bg-2:#12161F;
  --card:#171C28;
  --card-2:#1D2331;
  --line:rgba(148,163,199,.14);
  --line-2:rgba(148,163,199,.24);
  --text:#F2F5FA;
  --text-2:#9AA5BC;
  --text-3:#5F6A82;
  --accent:#6E7BFF;
  --accent-2:#5763E6;
  --accent-soft:rgba(110,123,255,.14);
  --on-accent:#FFFFFF;

  --ok:#2FC97C;    --ok-soft:rgba(47,201,124,.14);   --on-ok:#04160D;
  --warn:#F2A93B;  --warn-soft:rgba(242,169,59,.15); --on-warn:#1A1103;
  --bad:#F25A68;   --bad-soft:rgba(242,90,104,.14);  --on-bad:#FFFFFF;
  --ice:#4FBFDE;   --ice-soft:rgba(79,191,222,.14);

  --shadow:0 10px 34px -14px rgba(0,0,0,.6);
  --nav-h:56px;
  --r-lg:22px; --r-md:15px; --r-sm:11px;
  --ease:cubic-bezier(.22,.9,.24,1);

  /* стеклянные поверхности */
  --glass:color-mix(in srgb, #171C28 42%, transparent);
  --glass-2:color-mix(in srgb, #1D2331 38%, transparent);
  --glass-hi:color-mix(in srgb, #fff 12%, transparent);
  --glass-line:color-mix(in srgb, #fff 16%, transparent);
  --glass-blur:26px;
  --glass-shadow:0 16px 44px -18px rgba(0,0,0,.7), inset 0 1px 0 var(--glass-hi), inset 0 0 0 .5px color-mix(in srgb, #fff 6%, transparent);
}

html[data-theme="light"]{
  --bg:#E7EBF3;
  --bg-2:#FFFFFF;
  --card:#FFFFFF;
  --card-2:#EEF1F8;
  --line:rgba(23,32,54,.10);
  --line-2:rgba(23,32,54,.18);
  --text:#151A26;
  --text-2:#5B6478;
  --text-3:#98A0B3;
  --accent:#4A57E8;
  --accent-2:#3A46CC;
  --accent-soft:rgba(74,87,232,.10);
  --on-accent:#FFFFFF;

  --ok:#149A58;    --ok-soft:rgba(20,154,88,.11);
  --warn:#C97E12;  --warn-soft:rgba(201,126,18,.12);
  --bad:#DD3A4C;   --bad-soft:rgba(221,58,76,.10);
  --ice:#1E8FB4;   --ice-soft:rgba(30,143,180,.11);

  --shadow:0 8px 26px -14px rgba(23,32,54,.22);

  --glass:color-mix(in srgb, #fff 62%, transparent);
  --glass-2:color-mix(in srgb, #EEF1F8 58%, transparent);
  --glass-hi:color-mix(in srgb, #fff 92%, transparent);
  --glass-line:rgba(23,32,54,.14);
  --glass-blur:26px;
  --glass-shadow:0 12px 34px -14px rgba(23,32,54,.22), 0 1px 3px rgba(23,32,54,.08), inset 0 1px 0 var(--glass-hi);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{touch-action:manipulation}
button,a,.row,.tab,.opt,.dtile,.atile,.chip,.seg button,.devrow,.chat-item,summary,[role="button"]{touch-action:manipulation;-webkit-user-select:none;user-select:none}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font:500 15px/1.45 'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .25s,color .25s;
  padding-bottom:calc(52px + 12px + 26px + env(safe-area-inset-bottom));
}

.bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:var(--bg);
  transition:background .25s;
}
.bg::before,.bg::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.85;
  animation:blob 20s ease-in-out infinite;
}
.bg::before{
  width:74vw;height:74vw;left:-18vw;top:-10vh;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
}
.bg::after{
  width:66vw;height:66vw;right:-20vw;top:22vh;
  background:radial-gradient(circle at 60% 40%, var(--ice), transparent 68%);
  animation-delay:-7s;animation-duration:24s;opacity:.7;
}
.bg__glow{
  position:absolute;width:64vw;height:64vw;left:18vw;bottom:-22vh;border-radius:50%;
  filter:blur(64px);opacity:.6;
  background:radial-gradient(circle at 50% 50%, var(--ok), transparent 66%);
  animation:blob 28s ease-in-out infinite;animation-delay:-12s;
}
html[data-theme="light"] .bg::before{opacity:.42}
html[data-theme="light"] .bg::after{opacity:.34}
html[data-theme="light"] .bg__glow{opacity:.28}
@keyframes blob{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(6vw,4vh) scale(1.12)}
  66%{transform:translate(-4vw,6vh) scale(.94)}
}
@media (prefers-reduced-motion: reduce){
  .bg::before,.bg::after,.bg__glow{animation:none}
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}
.hide{display:none !important}

/* ── Шапка ───────────────────────────────────────────── */
.hdr{
  max-width:440px;margin:0 auto;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.mark{display:flex;align-items:center;gap:9px}
.mark__ic{width:22px;height:22px;color:var(--accent)}
.mark__logo{width:26px;height:26px;object-fit:contain;display:block}
.mark span{
  font:800 14px/1 'Onest',sans-serif;letter-spacing:.1em;text-transform:uppercase;
}
.ava{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--line-2);background:var(--card) center/cover no-repeat;
  color:var(--text-2);font:700 13px 'Onest',sans-serif;
  display:grid;place-items:center;
}

.wrap{max-width:440px;margin:0 auto;padding:0 16px}

.viewhead{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.viewhead h2{font:700 22px/1.2 'Onest',sans-serif;letter-spacing:-.015em;flex:1}
.viewhead__n{
  font:700 12px 'Manrope',sans-serif;color:var(--text-2);
  background:var(--card);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;
}
.tbtn{
  background:none;border:0;cursor:pointer;color:var(--accent);
  font:700 13px 'Manrope',sans-serif;padding:4px 0;
}
.tbtn:disabled{color:var(--text-3);cursor:default}

/* ══════════════════════════════════════════════════════
   ПОДПИСКА — вертикальные карточки
   ══════════════════════════════════════════════════════ */
.sub{
  --c:var(--text-3);--c-soft:var(--card-2);
  position:relative;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.8) brightness(1.05);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow);
  padding:16px;
  margin-bottom:14px;
  overflow:hidden;
  transition:background .25s,border-color .25s;
}
.sub::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:3.5px;
  border-radius:0 4px 4px 0;background:var(--c);
}
.sub--skel{height:300px}
.sub.s-active {--c:var(--ok);  --c-soft:var(--ok-soft)}
.sub.s-expiring{--c:var(--warn);--c-soft:var(--warn-soft)}
.sub.s-expired{--c:var(--bad); --c-soft:var(--bad-soft)}
.sub.s-frozen {--c:var(--ice); --c-soft:var(--ice-soft)}

.sub__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.sub__title{flex:1;min-width:0}
.sub__name{
  font:700 17px/1.25 'Onest',sans-serif;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sub__tariff{font:500 12.5px 'Manrope',sans-serif;color:var(--text-2);margin-top:3px}

.badge{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 11px;border-radius:999px;
  background:var(--c-soft);color:var(--c);
  font:700 11.5px/1 'Manrope',sans-serif;letter-spacing:.04em;white-space:nowrap;
}
.led{width:6px;height:6px;border-radius:50%;background:var(--c)}
.sub.s-active .led{animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* блок срока: цифра + линия */
.term{
  background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 14px 14px;margin-bottom:10px;
}
.term__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.term__left b{
  font:800 30px/1 'Onest',sans-serif;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.term__left span{font:600 13.5px 'Manrope',sans-serif;color:var(--text-2);margin-left:6px}
.term__date{font:500 12px 'JetBrains Mono',monospace;color:var(--text-3);text-align:right}
.term__date b{display:block;color:var(--text-2);font-weight:500}

.track{position:relative;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.track i{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;
  background:var(--c);
  transition:width 1s var(--ease);
}

/* факты: устройства и трафик */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.fact{
  background:color-mix(in srgb, var(--card-2) 55%, transparent);
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);padding:11px 12px;
}
.fact__k{
  display:flex;align-items:center;gap:6px;
  font:600 11.5px 'Manrope',sans-serif;color:var(--text-2);margin-bottom:5px;
}
.fact__k .ic{width:14px;height:14px;color:var(--text-3)}
.fact__v{font:700 14.5px 'Onest',sans-serif;letter-spacing:-.01em}
.fact__v em{font-style:normal;font-weight:600;color:var(--text-3);font-size:12.5px}
.fact .cells{display:flex;gap:3px;margin-top:8px}
.cell{flex:1;height:4px;border-radius:2px;background:var(--line)}
.cell.on{background:var(--c)}
.fact .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:8px}
.fact .bar i{display:block;height:100%;border-radius:2px;background:var(--c);width:0;transition:width .9s var(--ease)}

.sub__btns{display:grid;gap:8px}

/* ── Кнопки ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--r-md);padding:14px 16px;cursor:pointer;
  font:700 14.5px 'Manrope',sans-serif;color:var(--text);
  background:var(--card-2);border:1px solid var(--line-2);
  transition:transform .12s var(--ease),background .2s,filter .2s;
  min-height:48px;
}
.btn:active{transform:scale(.977)}
.btn .ic{width:18px;height:18px}
.btn--primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.btn--primary:active{filter:brightness(.94)}
.btn--danger{background:var(--bad);border-color:transparent;color:var(--on-bad)}
.btn--warn{background:var(--warn);border-color:transparent;color:var(--on-warn)}
.btn--ok{background:var(--ok);border-color:transparent;color:var(--on-ok)}
.btn--wide{width:100%}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.iconbtn{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:10px;border:1px solid var(--line);background:var(--card-2);
  color:var(--text-2);cursor:pointer;
}
.iconbtn:active{transform:scale(.94)}

/* ── Карточки / списки ───────────────────────────────── */
.card{
  border:1px solid var(--glass-line);border-radius:var(--r-lg);
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.8) brightness(1.05);
  box-shadow:var(--glass-shadow);
  padding:16px;margin-bottom:12px;
  transition:background .25s,border-color .25s;
}
.card__t{
  font:700 11px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px;
}

.row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 0;border:0;background:none;color:var(--text);text-align:left;
  border-bottom:1px solid var(--line);cursor:pointer;font-family:inherit;
  transition:opacity .1s;
}
.row:active{opacity:.55}
.row:last-child{border-bottom:0}
.row__ic{
  width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--line);color:var(--text-2);
}
.row__tx{flex:1;min-width:0}
.row__tx b{display:block;font:700 14px 'Manrope',sans-serif}
.row__tx span{display:block;font:500 12px 'Manrope',sans-serif;color:var(--text-3);margin-top:2px}
.row__go{color:var(--text-3)}
.row__go .ic{width:16px;height:16px}
.row__sum{font:600 13px 'JetBrains Mono',monospace;white-space:nowrap}
.row__sum.plus{color:var(--ok)}
.row__sum.minus{color:var(--bad)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.empty{text-align:center;padding:40px 22px;color:var(--text-3)}
.empty .ic{width:30px;height:30px;margin-bottom:12px}
.empty b{display:block;font:700 15px 'Onest',sans-serif;color:var(--text-2);margin-bottom:5px}
.empty p{font-size:13px;line-height:1.55}

/* ── Профиль ─────────────────────────────────────────── */
.me{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;margin:6px 0 18px;
}
.me__ava{
  width:86px;height:86px;border-radius:30px;
  border:none;background:var(--card) center/cover no-repeat;
  display:grid;place-items:center;color:var(--accent);font:700 30px 'Onest',sans-serif;
  box-shadow:0 0 0 3px var(--bg), 0 0 0 5.5px var(--accent), var(--shadow);
}
.me__n{font:800 21px/1.2 'Onest',sans-serif;letter-spacing:-.015em}
.me__s{
  display:inline-flex;align-items:center;gap:6px;
  font:600 12px 'Manrope',sans-serif;color:var(--text-2);margin-top:6px;
  background:var(--card);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;
}

.wallet{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% -30%, var(--accent-soft), transparent 60%),
    var(--card);
  box-shadow:var(--shadow);
  padding:20px 16px 16px;margin-bottom:12px;
}
.wallet .card__t{margin-bottom:6px}
.wallet__sum{
  font:800 42px/1 'Onest',sans-serif;letter-spacing:-.035em;margin:2px 0 18px;
  font-variant-numeric:tabular-nums;
}
.wallet__sum i{font:700 22px 'Onest',sans-serif;font-style:normal;color:var(--text-2);margin-left:2px}

/* чипы сумм пополнения */
.chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.chip{
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);cursor:pointer;
  padding:12px 6px;font:700 14px 'Manrope',sans-serif;font-variant-numeric:tabular-nums;
  transition:border-color .2s,background .2s,transform .12s var(--ease);
  min-height:46px;
}
.chip:active{transform:scale(.96)}
.chip.is-sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* сегмент выбора темы */
.seg{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:4px;
  background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:4px;
}
.seg--2{grid-template-columns:repeat(2, 1fr)}
.seg button{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:calc(var(--r-md) - 5px);
  padding:11px 6px;cursor:pointer;min-height:42px;
  background:none;color:var(--text-2);font:700 13px 'Manrope',sans-serif;
  transition:background .18s,color .18s;
}
.seg button .ic{width:15px;height:15px}
.seg button.is-on{background:var(--card);color:var(--text);box-shadow:var(--shadow);border-color:var(--line)}

/* ── Нижнее меню: плавающая таблетка (iOS) ───────────── */
.nav{
  position:fixed;left:0;right:0;z-index:20;
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;
  padding:0 20px;pointer-events:none;
}
.nav__in{
  pointer-events:auto;position:relative;
  display:flex;gap:2px;
  background:color-mix(in srgb, var(--bg-2) 62%, transparent);
  backdrop-filter:blur(28px) saturate(1.9);
  -webkit-backdrop-filter:blur(28px) saturate(1.9);
  border:1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius:999px;
  padding:6px;
  box-shadow:
    0 18px 44px -14px rgba(0,0,0,.55),
    0 2px 10px -4px rgba(0,0,0,.3),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 14%, transparent);
}
html[data-theme="light"] .nav__in{
  background:color-mix(in srgb, #fff 66%, transparent);
  border-color:color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow:
    0 16px 40px -14px rgba(23,32,54,.3),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(23,32,54,.05);
}
/* бегущая подсветка активной вкладки */
.nav__pill{
  position:absolute;top:6px;height:calc(100% - 12px);
  border-radius:999px;z-index:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow:0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:transform .34s cubic-bezier(.34,1.4,.5,1), width .34s cubic-bezier(.34,1.4,.5,1), opacity .2s;
  opacity:0;pointer-events:none;
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;cursor:pointer;color:var(--text-3);
  font:700 10px 'Manrope',sans-serif;
  width:92px;height:54px;border-radius:999px;
  position:relative;z-index:1;transition:color .25s,transform .2s var(--ease);
}
.tab .ic{width:21px;height:21px;transition:transform .3s var(--ease)}
.tab:active{transform:scale(.92)}
.tab.is-on{color:var(--accent)}
.tab.is-on .ic{transform:translateY(-1px) scale(1.06)}
.tab__wrap{position:relative;display:grid;place-items:center}
.pip{
  position:absolute;top:-2px;right:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--bad);border:2px solid color-mix(in srgb, var(--bg-2) 80%, transparent);
  box-shadow:0 0 8px var(--bad);
}
@media (max-width:379px){ .tab{width:82px} }

/* строка «увеличить лимит» — акцентная */
.devrow--up{
  background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 30%, transparent);
}
.devrow--up .ic:first-child{color:var(--accent)}
.devrow--up b{color:var(--accent)}

/* ── Шторка ──────────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:30;background:rgba(8,10,16,.62);
  backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
html[data-theme="light"] .scrim{background:rgba(23,32,54,.4)}
.scrim.is-on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:31;
  max-width:440px;margin:0 auto;
  max-height:88dvh;
  display:flex;flex-direction:column;
  background:color-mix(in srgb, var(--bg-2) 78%, transparent);
  backdrop-filter:blur(30px) saturate(1.8);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid var(--glass-line);border-bottom:0;
  border-radius:28px 28px 0 0;
  box-shadow:0 -18px 50px -12px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-hi);
  transform:translateY(103%);transition:transform .34s var(--ease),background .25s;
}
.sheet.is-on{transform:translateY(0)}
.sheet__grip{width:44px;height:5px;border-radius:99px;background:var(--line-2);margin:11px auto 2px;opacity:.9}
.sheet__head{display:flex;align-items:center;gap:10px;padding:8px 14px 12px}
.sheet__head h2{flex:1;font:800 18px 'Onest',sans-serif;letter-spacing:-.02em;padding-left:2px}
.sheet__body{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 16px calc(22px + env(safe-area-inset-bottom));
}
.sheet__lead{font-size:13.5px;color:var(--text-2);margin-bottom:16px;line-height:1.55}

/* ── Мастер подключения ──────────────────────────────── */
.steps{display:flex;gap:5px;margin-bottom:16px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--line-2);transition:background .3s}
.steps i.on{background:var(--accent)}

.pick{display:grid;gap:8px}
.opt{
  position:relative;display:flex;align-items:center;gap:11px;text-align:left;
  padding:13px 14px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
  border:1.5px solid var(--line);background:var(--card);color:var(--text);
  transition:border-color .2s,background .2s,transform .12s var(--ease);
  min-height:52px;
}
.opt:active{transform:scale(.985)}
.opt.is-sel{border-color:var(--accent);background:var(--accent-soft)}
.opt .ic{width:20px;height:20px;color:var(--text-2)}
.opt.is-sel .ic{color:var(--accent)}
.pay-ic{width:44px;height:30px;flex:0 0 auto;object-fit:contain;border-radius:6px}
.opt > span{flex:1;min-width:0}
.opt b{display:block;font:700 14px 'Manrope',sans-serif}
.opt small{display:block;font:500 11.5px 'Manrope',sans-serif;color:var(--text-3);margin-top:2px}
.opt__tag,.opt__auto{
  margin-left:auto;flex:0 0 auto;
  padding:3px 8px;border-radius:99px;
  font:700 9px 'Manrope',sans-serif;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.opt__tag{background:var(--accent);color:var(--on-accent)}
.opt__auto{background:var(--ok);color:#fff}
html[data-theme="dark"] .opt__auto,html:not([data-theme="light"]) .opt__auto{color:#04160D}

.note{
  display:flex;gap:9px;padding:12px;border-radius:var(--r-sm);margin-top:14px;
  background:var(--card-2);border:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--text-2);
}
.note .ic{width:16px;height:16px;flex:0 0 auto;color:var(--text-3);margin-top:1px}

.linkbox{
  display:block;width:100%;padding:12px;border-radius:var(--r-sm);
  background:var(--card-2);border:1px dashed var(--line-2);
  font:400 11px/1.5 'JetBrains Mono',monospace;color:var(--text-2);
  word-break:break-all;max-height:76px;overflow:auto;margin-bottom:10px;
}

/* ── Поля ввода ──────────────────────────────────────── */
.promo{
  width:100%;padding:14px 15px;border-radius:14px;
  background:var(--card-2);border:1.5px solid var(--line);
  font:600 15px 'Manrope',sans-serif;color:var(--text);
  outline:none;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.promo:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.promo::placeholder{color:var(--text-3);font-weight:500}
.promo--code{text-transform:uppercase;letter-spacing:.05em}
.msg{min-height:18px;font:700 12.5px 'Manrope',sans-serif;text-align:center;margin:10px 0 2px}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--bad)}

/* ── Статистика рефералов ────────────────────────────── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.stat{
  border:1px solid var(--glass-line);border-radius:var(--r-md);padding:13px 14px;
  background:color-mix(in srgb, var(--card-2) 50%, transparent);
}
.stat b{display:block;font:800 23px/1 'Onest',sans-serif;font-variant-numeric:tabular-nums}
.stat span{display:block;font:600 11.5px 'Manrope',sans-serif;color:var(--text-3);margin-top:5px}
.stat.accent b{color:var(--ok)}

/* ── Документы ───────────────────────────────────────── */
.doc h3{font:700 15px 'Onest',sans-serif;margin:18px 0 7px}
.doc h3:first-child{margin-top:0}
.doc p{font-size:13.5px;line-height:1.65;color:var(--text-2);margin-bottom:10px}

/* ── Уведомления ─────────────────────────────────────── */
.note-item{
  display:flex;gap:12px;padding:13px;border-radius:var(--r-md);margin-bottom:8px;
  border:1px solid var(--glass-line);background:var(--glass);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
}
.note-item.unread{border-color:var(--accent);background:var(--accent-soft)}
.note-item__ic{
  width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--line);color:var(--text-2);
}
.note-item.k-expiring .note-item__ic{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.note-item.k-expired .note-item__ic{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.note-item.k-topup .note-item__ic,
.note-item.k-promo .note-item__ic,
.note-item.k-referral .note-item__ic{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.note-item.k-admin .note-item__ic{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.note-item__b{flex:1;min-width:0}
.note-item__b b{display:block;font:700 13.5px 'Manrope',sans-serif;margin-bottom:3px}
.note-item__b p{font-size:12.5px;line-height:1.5;color:var(--text-2);word-wrap:break-word}
.note-item__b time{display:block;font:400 11px 'JetBrains Mono',monospace;color:var(--text-3);margin-top:6px}

/* ── Тост ────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(52px + 26px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);z-index:40;
  padding:11px 16px;border-radius:13px;
  background:var(--card-2);border:1px solid var(--line-2);box-shadow:var(--shadow);
  font:700 13px 'Manrope',sans-serif;white-space:nowrap;color:var(--text);
  opacity:0;pointer-events:none;transition:.24s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* узкие экраны */
@media (max-width:359px){
  .facts{grid-template-columns:1fr}
  .term__left b{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ── Чаты: список ────────────────────────────────────── */
.chat-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 14px;border-radius:var(--r-md);margin-bottom:8px;
  border:1px solid var(--glass-line);background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  cursor:pointer;color:var(--text);text-align:left;font-family:inherit;box-shadow:var(--glass-shadow);
}
.chat-item:active{transform:scale(.99)}
.chat-item__ava{
  width:48px;height:48px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  color:#fff;
}
.chat-item__ava.c-bell{background:linear-gradient(145deg,var(--accent),var(--accent-2))}
.chat-item__ava.c-sup{background:linear-gradient(145deg,#22B07D,#128A5E)}
.chat-item__b{flex:1;min-width:0}
.chat-item__b b{display:block;font:700 14.5px 'Manrope',sans-serif}
.chat-item__b span{
  display:block;font:500 12.5px 'Manrope',sans-serif;color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-item__meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.chat-item__meta time{font:400 11px 'JetBrains Mono',monospace;color:var(--text-3)}
.chat-item__n{
  min-width:19px;height:19px;padding:0 6px;border-radius:10px;
  background:var(--accent);color:#fff;font:700 11px/19px 'Manrope',sans-serif;text-align:center;
}

/* ── Чат: открытый диалог (мессенджер) ───────────────── */
body.in-chat .hdr{display:none}
body.in-chat .nav{display:none}
body.in-chat{padding-bottom:20px}

.chat__top{
  position:sticky;top:0;z-index:15;
  display:flex;align-items:center;gap:10px;
  margin:0 -16px 10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--glass-line);
}
.chat__who{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.chat__ava{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;
}
.chat__ava .ic{width:19px;height:19px}
.chat__who b{display:block;font:700 14.5px 'Onest',sans-serif}
.chat__who span{display:block;font:500 11.5px 'Manrope',sans-serif;color:var(--text-3)}

.chat__feed{display:flex;flex-direction:column;gap:6px;padding:2px 0 14px}
.day-sep{
  align-self:center;font:600 10.5px 'Manrope',sans-serif;color:var(--text-3);
  background:color-mix(in srgb, var(--card) 75%, transparent);
  padding:4px 11px;border-radius:999px;margin:10px 0 6px;
  backdrop-filter:blur(6px);
}
.bubble{
  position:relative;max-width:84%;align-self:flex-start;
  background:var(--card);border:0;
  border-radius:17px 17px 17px 5px;
  padding:9px 12px 7px;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
html[data-theme="light"] .bubble{box-shadow:0 1px 2px rgba(23,32,54,.10)}
.bubble + .bubble{margin-top:1px}
.bubble b{display:flex;align-items:center;gap:6px;font:700 13px 'Manrope',sans-serif;margin-bottom:2px}
.bubble b .bico{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8}
.bubble.k-expiring b .bico{color:var(--warn)}
.bubble.k-expired b .bico{color:var(--bad)}
.bubble.k-topup b .bico,.bubble.k-promo b .bico,.bubble.k-referral b .bico,.bubble.k-gift b .bico{color:var(--ok)}
.bubble.k-admin b .bico{color:var(--accent)}
.bubble p{font-size:13.5px;line-height:1.45;color:var(--text);word-wrap:break-word;padding-right:38px}
.bubble time{
  position:absolute;right:11px;bottom:6px;
  font:400 10px 'JetBrains Mono',monospace;color:var(--text-3);
}
.bubble .dot-new{
  position:absolute;left:-4px;top:50%;transform:translate(-100%,-50%);
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.bubble .btn{margin:4px 0 2px;padding:10px 14px;min-height:40px;font-size:13px;width:100%}
/* пузырь с кнопкой: время в потоке, не абсолютом, чтобы не наезжать на кнопку */
.bubble--btn{padding-bottom:10px}
.bubble--btn p{padding-right:0}
.bubble__t{
  position:static !important;display:block;text-align:right;
  margin:6px 0 2px;font:400 10px 'JetBrains Mono',monospace;color:var(--text-3);
}

/* ── Степпер устройств ───────────────────────────────── */
.stepper{
  display:flex;align-items:center;gap:12px;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;
}
.stepper__btn{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:12px;border:1px solid var(--line-2);background:var(--card);
  color:var(--text);cursor:pointer;
}
.stepper__btn:active{transform:scale(.93)}
.stepper__btn:disabled{opacity:.35}
.stepper__val{flex:1;text-align:center}
.stepper__val b{font:800 21px 'Onest',sans-serif;font-variant-numeric:tabular-nums}
.stepper__val span{display:block;font:600 11px 'Manrope',sans-serif;color:var(--text-3);margin-top:2px}

/* итог цены */
.total{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border-radius:var(--r-md);margin:12px 0;
  background:var(--accent-soft);border:1px solid var(--accent);
}
.total span{font:600 13px 'Manrope',sans-serif;color:var(--text-2)}
.total b{font:800 21px 'Onest',sans-serif;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}

/* строка-подсказка под кнопками карточки */
.sub__hint{
  display:flex;align-items:center;gap:7px;justify-content:center;
  font:600 12px 'Manrope',sans-serif;color:var(--text-3);margin-top:9px;
}
.sub__hint .ic{width:14px;height:14px}

.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* кнопка-факт «устройства» */
.fact--btn{cursor:pointer;text-align:left;font-family:inherit;color:var(--text);width:100%}
.fact--btn:active{transform:scale(.98)}
.fact__more{margin-left:auto;color:var(--text-3)}
.fact__more .ic{width:13px;height:13px}
.fact__k{position:relative}

/* ── Плитки сроков (магазин/подарок) ─────────────────── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  aspect-ratio:2.05/1;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--text);cursor:pointer;font-family:inherit;
  transition:border-color .2s,background .2s,transform .12s var(--ease);
}
.tile:active{transform:scale(.965)}
.tile.is-sel{border-color:var(--accent);background:var(--accent-soft)}
.tile b{font:800 17px 'Onest',sans-serif;letter-spacing:-.01em}
.tile.is-sel b{color:var(--accent)}
.tile span{font:600 12px 'Manrope',sans-serif;color:var(--text-3)}

/* инлайн промокод в профиле */
.inline-promo{display:flex;gap:8px}
.inline-promo .promo{flex:1;min-width:0}
.inline-promo .btn{flex:0 0 auto;padding:0 18px;min-height:0}

/* строка «Подключённые устройства» в карточке */
.devrow{
  background:color-mix(in srgb, var(--card-2) 50%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 13px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card-2);color:var(--text);cursor:pointer;
  font-family:inherit;text-align:left;
  transition:background .2s,transform .12s var(--ease);
}
.devrow:active{transform:scale(.985)}
.devrow .ic{width:17px;height:17px;color:var(--text-2)}
.devrow b{flex:1;font:700 13px 'Manrope',sans-serif}
.devrow b em{font-style:normal;color:var(--text-3);font-weight:600}
.devrow .devrow__go{color:var(--text-3)}
.devrow .devrow__go .ic{width:15px;height:15px}

/* ── Мастер: премиум-плитки устройств ── */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dtile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px 13px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
  border:1.5px solid var(--glass-line);background:var(--glass);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  color:var(--text);
  transition:border-color .2s,background .2s,transform .12s var(--ease);
}
.dtile:active{transform:scale(.965)}
.dtile.is-sel{border-color:var(--accent);background:var(--accent-soft)}
.dtile__ic{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--line);color:var(--text-2);
  transition:background .2s,color .2s;
}
.dtile__ic .ic{width:21px;height:21px}
.dtile.is-sel .dtile__ic{background:var(--accent);border-color:transparent;color:#fff}
.dtile b{font:700 13.5px 'Manrope',sans-serif;text-align:center}
.dtile small{font:600 10.5px 'Manrope',sans-serif;color:var(--ok);min-height:13px}
.dtile__check{
  position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  opacity:0;transform:scale(.6);transition:.18s var(--ease);
}
.dtile__check .ic{width:11px;height:11px;stroke-width:2.4}
.dtile.is-sel .dtile__check{opacity:1;transform:scale(1)}

/* карточки приложений в мастере */
.atile{
  position:relative;display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  padding:15px 14px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
  border:1.5px solid var(--glass-line);background:var(--glass);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  color:var(--text);
  transition:border-color .2s,background .2s,transform .12s var(--ease);
}
.atile:active{transform:scale(.98)}
.atile.is-sel{border-color:var(--accent);background:var(--accent-soft)}
.atile__ic{
  width:46px;height:46px;flex:0 0 auto;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;
}
.atile__ic img{width:46px;height:46px;object-fit:cover;display:block;border-radius:11px}
.atile__tx{flex:1;min-width:0}
.atile b{display:block;font:700 15px 'Manrope',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atile small{display:block;font:500 12px 'Manrope',sans-serif;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atile__badge{
  flex:0 0 auto;padding:4px 9px;border-radius:999px;
  background:var(--ok-soft);color:var(--ok);
  font:700 10px 'Manrope',sans-serif;letter-spacing:.05em;text-transform:uppercase;
}

/* ── Экран входа (веб) ───────────────────────────────── */
.auth{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:20px;
}
.auth__box{
  width:100%;max-width:360px;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:28px 22px 22px;
}
.auth__logo{
  width:72px;height:72px;margin:0 auto 14px;
  display:grid;place-items:center;
}
.auth__logo-img{width:72px;height:72px;object-fit:contain;display:block}
.auth__box h1{font:800 20px 'Onest',sans-serif;letter-spacing:.06em}
.auth__sub{font:600 12.5px 'Manrope',sans-serif;color:var(--text-3);margin:4px 0 18px}
.auth__seg{margin-bottom:14px}
.auth__box .promo{text-align:left}
.auth__box .btn{margin-top:4px}
.auth__hint{font:500 12px 'Manrope',sans-serif;color:var(--text-3);margin-top:14px;line-height:1.5}

/* код привязки к Telegram */
.bindcode{
  text-align:center;font:800 40px/1.1 'JetBrains Mono',monospace;
  letter-spacing:.22em;padding:20px 10px;border-radius:var(--r-md);
  background:var(--card-2);border:1.5px dashed var(--line-2);
  font-variant-numeric:tabular-nums;user-select:all;
}
.perfline{
  height:1px;margin:18px 0;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 11px);
}
textarea.promo{font:600 14px 'Manrope',sans-serif;line-height:1.5}

/* ── Пробный период ──────────────────────────────────── */
.tag-trial{
  display:inline-block;vertical-align:middle;margin-left:6px;
  padding:2px 8px;border-radius:999px;font-style:normal;
  background:var(--ok-soft);color:var(--ok);
  font:700 10px 'Manrope',sans-serif;letter-spacing:.04em;text-transform:uppercase;
}
.sub--trial::before{background:var(--ok)}
.trial-bonus{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 13px;margin-bottom:12px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
  border:1px solid transparent;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  transition:transform .12s var(--ease),filter .2s;
}
.trial-bonus:active{transform:scale(.98)}
.trial-bonus .ic{width:20px;height:20px;flex:0 0 auto}
.trial-bonus > span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.trial-bonus b{font:700 13.5px 'Manrope',sans-serif}
.trial-bonus span span,.trial-bonus > span{font-size:11.5px}
.trial-bonus > span{font:600 11.5px 'Manrope',sans-serif;opacity:.92}
.trial-bonus > span b{font-size:13.5px;opacity:1;margin-bottom:1px}

/* ── Поддержать проект ───────────────────────────────── */
.donate-hero{
  width:70px;height:70px;margin:2px auto 16px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 30% 25%,#ff6b7d,var(--bad));
  box-shadow:0 12px 30px -10px var(--bad);
}
.donate-hero .ic{width:34px;height:34px;stroke-width:1.6}

/* благодарственное письмо */
.thanks{text-align:center;padding:8px 6px 18px}
.thanks__ic{
  width:76px;height:76px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 30% 25%,#ff6b7d,var(--bad));
  box-shadow:0 14px 34px -10px var(--bad);
  animation:beat 1.6s var(--ease) infinite;
}
.thanks__ic .ic{width:38px;height:38px;stroke-width:1.6}
@keyframes beat{0%,100%{transform:scale(1)}45%{transform:scale(1.09)}}
.thanks h3{font:800 20px 'Onest',sans-serif;margin-bottom:10px}
.thanks p{font-size:14px;line-height:1.6;color:var(--text-2);margin-bottom:10px}
.thanks__sign{font-weight:700;color:var(--text)}

/* блокировка прокрутки фона при открытой шторке */
body.sheet-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ══════ Splash / загрузочный экран ══════ */
.splash{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--bg);
  opacity:1;transition:opacity .45s ease,visibility .45s;
}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash__logo{position:relative;width:96px;height:96px;display:grid;place-items:center}
.splash__img{
  width:72px;height:72px;object-fit:contain;
  animation:splashPop .7s var(--ease) both, splashFloat 2.4s ease-in-out .7s infinite;
}
.splash__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2.5px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent);
  animation:splashSpin .9s linear infinite;
}
.splash__name{
  font:800 22px 'Onest',sans-serif;letter-spacing:.14em;color:var(--text);
  opacity:0;animation:splashFade .5s ease .35s forwards;
}
.splash__name span{color:var(--accent);margin-left:6px}
.splash__bar{
  width:150px;height:4px;border-radius:99px;overflow:hidden;
  background:var(--card-2);border:1px solid var(--line);
  opacity:0;animation:splashFade .5s ease .5s forwards;
}
.splash__bar i{
  display:block;height:100%;width:40%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  animation:splashLoad 1.15s var(--ease) infinite;
}
@keyframes splashSpin{to{transform:rotate(360deg)}}
@keyframes splashPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes splashFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes splashFade{to{opacity:1}}
@keyframes splashLoad{0%{transform:translateX(-120%)}100%{transform:translateX(380%)}}


/* ── Лимит устройств: блок в шторке ── */
.limit{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:var(--r-md);margin-bottom:6px;
  background:var(--accent-soft);border:1px solid var(--accent);
}
.limit__now{flex:0 0 auto;text-align:center;padding-right:12px;border-right:1px solid var(--line-2)}
.limit__now b{display:block;font:800 24px 'Onest',sans-serif;color:var(--accent);line-height:1}
.limit__now span{font:600 10.5px 'Manrope',sans-serif;color:var(--text-3)}
.limit__btn{
  flex:1;display:flex;align-items:center;gap:10px;text-align:left;
  background:none;border:0;cursor:pointer;color:var(--text);font-family:inherit;padding:0;
}
.limit__btn > .ic:first-child{
  width:34px;height:34px;flex:0 0 auto;padding:8px;border-radius:10px;
  background:var(--accent);color:#fff;
}
.limit__btn > span{flex:1;display:flex;flex-direction:column;line-height:1.35;min-width:0}
.limit__btn b{font:700 13.5px 'Manrope',sans-serif}
.limit__btn > span{font:600 11.5px 'Manrope',sans-serif;color:var(--text-3)}
.limit__btn > span b{color:var(--text);font-size:13.5px;margin-bottom:1px}
.limit__btn > .ic:last-child{width:16px;height:16px;color:var(--text-3);flex:0 0 auto}

/* ── Визуал «сейчас → станет» ── */
.upg{
  display:flex;align-items:stretch;gap:10px;margin-bottom:16px;
}
.upg__col{
  flex:1;text-align:center;padding:16px 10px;border-radius:var(--r-md);
  background:var(--card-2);border:1px solid var(--line);
}
.upg__col span{display:block;font:600 11px 'Manrope',sans-serif;color:var(--text-3);margin-bottom:4px}
.upg__col b{font:800 30px 'Onest',sans-serif;line-height:1}
.upg__col--new{background:var(--accent-soft);border-color:var(--accent)}
.upg__col--new b{color:var(--accent)}
.upg__arrow{display:flex;align-items:center;color:var(--text-3)}
.upg__arrow .ic{width:22px;height:22px}

/* ══════ Поддержка: чат-сообщения ══════ */
.msg{
  position:relative;max-width:82%;padding:9px 12px 6px;border-radius:16px;
  font-size:13.5px;line-height:1.45;margin-bottom:2px;
  animation:msgIn .2s var(--ease);
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg p{word-wrap:break-word;padding-right:42px}
.msg time{position:absolute;right:10px;bottom:5px;font:400 10px 'JetBrains Mono',monospace;opacity:.6}
.msg--in{
  align-self:flex-start;background:var(--glass-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-line);border-bottom-left-radius:5px;
}
.msg--out{
  align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.msg--out time{color:rgba(255,255,255,.75);opacity:1}
.msg__photo{position:relative;margin:-2px -3px 5px;border-radius:12px;overflow:hidden;max-width:220px}
.msg__photo img{display:block;width:100%;max-height:280px;object-fit:cover;cursor:zoom-in}
.msg__del{
  position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:9px;border:0;cursor:pointer;
  background:rgba(10,12,18,.72);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);
}
.msg__del .ic{width:15px;height:15px}

/* зум фото на весь экран */
.photo-zoom{
  position:fixed;inset:0;z-index:120;background:rgba(6,8,12,.92);
  display:grid;place-items:center;padding:20px;cursor:zoom-out;
  backdrop-filter:blur(8px);animation:splashFade .2s ease;
}
.photo-zoom img{max-width:100%;max-height:100%;border-radius:12px}

/* секция «обращения пользователей» у админа */
.chat-sec{
  font:700 11px 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin:18px 4px 10px;
}
.chat-item__ava.c-user{background:linear-gradient(145deg,#8A6BF0,#6E4AE8)}

/* композер */
.composer{
  flex:0 0 auto;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-top:1px solid var(--glass-line);
}
.composer__row{display:flex;align-items:flex-end;gap:8px}
.composer__ic,.composer__send{
  flex:0 0 auto;width:42px;height:42px;border-radius:13px;border:0;cursor:pointer;
  display:grid;place-items:center;transition:transform .15s var(--ease),background .2s;
}
.composer__ic{background:var(--glass-2);border:1px solid var(--glass-line);color:var(--text-2)}
.composer__send{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.composer__ic:active,.composer__send:active{transform:scale(.9)}
.composer__ic .ic,.composer__send .ic{width:20px;height:20px}
.composer__in{
  flex:1;min-width:0;resize:none;max-height:96px;
  padding:11px 14px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--text);
  font:500 14px 'Manrope',sans-serif;line-height:1.4;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.composer__in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.composer__preview{position:relative;width:74px;margin-bottom:8px}
.composer__preview img{width:74px;height:74px;object-fit:cover;border-radius:12px}
.composer__x{
  position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:2px solid var(--bg);
  background:var(--bad);color:#fff;cursor:pointer;display:grid;place-items:center;
}
.composer__x .ic{width:13px;height:13px}
body.in-chat .chat__feed{padding-bottom:8px}

/* индикатор загрузки фото */
.msg--sending{opacity:.7}
.msg__uploading{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(10,12,18,.55);color:#fff;font:600 11px 'Manrope',sans-serif;backdrop-filter:blur(2px);
}
.msg__uploading .spin{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:splashSpin .8s linear infinite;
}
.composer__send.is-loading{pointer-events:none;position:relative}
.composer__send.is-loading .ic{opacity:0}
.composer__send.is-loading::after{
  content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:splashSpin .8s linear infinite;
}

/* светлая тема: усиление контраста внутренних блоков */
html[data-theme="light"] .fact{
  background:#EEF1F8;
  border-color:rgba(23,32,54,.1);
}
html[data-theme="light"] .msg--in{
  background:rgba(255,255,255,.82);
  border-color:rgba(23,32,54,.12);
  box-shadow:0 1px 3px rgba(23,32,54,.06);
}
html[data-theme="light"] .stat{
  background:rgba(255,255,255,.66);
  border-color:rgba(23,32,54,.1);
}
html[data-theme="light"] .devrow{
  background:rgba(255,255,255,.6);
  border-color:rgba(23,32,54,.1);
}

/* ══════ Push-баннер (iOS-стиль, сверху, смахиваемый) ══════ */
.push-stack{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;flex-direction:column;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 10px 0;
  max-width:440px;margin:0 auto;pointer-events:none;
}
.push{
  pointer-events:auto;position:relative;
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 14px;border-radius:20px;
  background:color-mix(in srgb, var(--bg-2) 72%, transparent);
  backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid var(--glass-line);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-hi);
  transform:translateY(-140%);opacity:0;
  transition:transform .38s var(--ease),opacity .3s;
  touch-action:pan-x;cursor:grab;
}
.push.is-on{transform:translateY(0);opacity:1}
.push.is-off{transform:translateY(-140%);opacity:0}
.push__ic{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;
}
.push__ic .ic{width:20px;height:20px}
.push__b{flex:1;min-width:0}
.push__b b{display:block;font:700 14px 'Onest',sans-serif;margin-bottom:2px}
.push__b span{display:block;font:500 12.5px 'Manrope',sans-serif;color:var(--text-2);line-height:1.35}
.push__grip{
  position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:34px;height:4px;border-radius:99px;background:var(--line-2);opacity:.6;
}

/* строка «Уведомления» в профиле */
.push-cta{margin-top:2px}

/* ── плавное появление контента экранов ── */
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.view:not(.hide) > .viewhead{animation:riseIn .38s var(--ease) both}
.view:not(.hide) #subsList > .sub,
.view:not(.hide) #subsList > .card,
.view:not(.hide) #chatList > .chat-item,
#meBody > .card{animation:riseIn .42s var(--ease) both}
.view:not(.hide) #subsList > .sub:nth-child(2){animation-delay:.05s}
.view:not(.hide) #subsList > .sub:nth-child(3){animation-delay:.1s}
#meBody > .card:nth-child(2){animation-delay:.04s}
#meBody > .card:nth-child(3){animation-delay:.08s}
#meBody > .card:nth-child(4){animation-delay:.12s}
#meBody > .card:nth-child(5){animation-delay:.15s}
#meBody > .card:nth-child(n+6){animation-delay:.18s}
.view:not(.hide) #chatList > .chat-item:nth-child(2){animation-delay:.06s}

/* появление шторки: контент проявляется чуть позже панели */
.sheet.is-on .sheet__body{animation:riseIn .34s var(--ease) .06s both}

@media (prefers-reduced-motion:reduce){
  .viewhead, #subsList > *, #chatList > *, #meBody > .card, .sheet__body{animation:none !important}
}