/* ===== Ghost VPN mini app ===== */
:root{
  --bg-0:#0a1e33;
  --bg-1:#12406e;
  --bg-2:#0c2842;
  --card:#05080d;
  --card-2:#0d141d;
  --accent:#3d9bfd;
  --accent-2:#6bb8ff;
  --text:#eaf3ff;
  --muted:#8ea3ba;
  --green:#4ade80;
  --violet:#8b5cf6;
  --radius:26px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  background:var(--bg-0);
  color:var(--text);
  /* чуть выше экрана — чтобы «резинка» работала даже на коротких страницах */
  min-height:calc(100vh + 1px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  -webkit-font-smoothing:antialiased;
}
html{-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto}
.hidden{display:none!important}

/* фон: светлый синий фейд + топографический узор */
.bg-pattern{
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(135% 60% at 50% -6%, #3d86cf 0%, #24659f 22%, #14456f 48%, #0d2c48 78%, var(--bg-0) 100%),
    var(--bg-0);
}
/* маскот во весь задний план (как в боте кодера) */
.bg-ghost{
  position:fixed;left:50%;top:5%;transform:translateX(-50%);
  width:min(126vw,640px);z-index:-2;pointer-events:none;
  aspect-ratio:1/1;
  background:url('img/ghost-shield.webp') center/contain no-repeat;
  opacity:.22;filter:saturate(1.2);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);
}
.bg-pattern::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%2373b4ff' stroke-width='1.1' opacity='.30'%3E%3Cpath d='M-40 90c70-55 150-55 220 0s150 55 220 0'/%3E%3Cpath d='M-40 130c70-55 150-55 220 0s150 55 220 0'/%3E%3Cpath d='M-40 170c70-55 150-55 220 0s150 55 220 0'/%3E%3Cpath d='M-40 300c70-55 150-55 220 0s150 55 220 0'/%3E%3Cpath d='M-40 340c70-55 150-55 220 0s150 55 220 0'/%3E%3Cpath d='M-40 380c70-55 150-55 220 0s150 55 220 0'/%3E%3Ccircle cx='330' cy='215' r='58'/%3E%3Ccircle cx='330' cy='215' r='92'/%3E%3Ccircle cx='60' cy='240' r='46'/%3E%3C/g%3E%3C/svg%3E");
  background-size:420px 420px;
}
/* мягкое затемнение к низу, чтобы контент читался */
.bg-pattern::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,30,51,0) 0%, rgba(10,30,51,.30) 60%, rgba(8,22,38,.72) 100%);
}

/* ===== загрузка / ошибка ===== */
.boot,.fatal{position:fixed;inset:0;display:grid;place-items:center;gap:18px;align-content:center;z-index:50}
.boot__logo{font-weight:900;font-size:30px;letter-spacing:-1px}
.boot__logo span{color:var(--accent);margin-left:2px}
.boot__spinner{width:26px;height:26px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fatal__box{background:var(--card);padding:26px;border-radius:var(--radius);text-align:center;max-width:320px;margin:0 16px}
.fatal__icon{font-size:34px}
.fatal__title{font-weight:700;margin:8px 0}
.fatal__text{color:var(--muted);font-size:14px;margin-bottom:16px;word-break:break-word}

/* ===== раскладка ===== */
.app{padding:22px 15px calc(94px + var(--safe-b));max-width:520px;margin:0 auto}
.page{display:flex;flex-direction:column;gap:15px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== шапка ===== */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:46px}
.logo{
  font-size:29px;padding-top:4px;letter-spacing:-1.2px;font-weight:900;
  display:flex;align-items:baseline;gap:2px;line-height:1;
}
.logo__g{
  background:linear-gradient(180deg,#ffffff 40%,#c8dcf5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(120,180,255,.35));
}
.logo__v{
  background:linear-gradient(180deg,#7cc0ff 0%,#2f8ef0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(61,155,253,.55));
}
.balance-card{
  background:linear-gradient(180deg,#0a1119,var(--card));
  box-shadow:0 10px 26px rgba(3,10,20,.45);
  border-radius:20px;padding:11px;min-width:144px;display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden
}
.balance-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(160deg,rgba(150,205,255,.9),rgba(90,160,240,.25) 45%,rgba(120,180,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.balance-card__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.balance-card__sum{font-size:20px;font-weight:800}
.balance-card__icon{font-size:20px;opacity:.9}

/* ===== кнопки ===== */
.btn{border:0;border-radius:15px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s, filter .12s;padding:11px 16px;color:#fff}
.btn:active{transform:scale(.97)}
.btn--primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 6px 18px rgba(61,155,253,.25)}
.btn--sm{padding:9px 12px;font-size:14px;border-radius:13px;width:100%}
.btn--outline{
  background:linear-gradient(180deg,rgba(61,155,253,.18),rgba(61,155,253,.06));
  border:1.5px solid rgba(120,190,255,.75);color:var(--text);
  box-shadow:0 0 18px rgba(61,155,253,.22), inset 0 1px 0 rgba(255,255,255,.12)
}
.btn--wide{width:100%;padding:13px}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--text)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ===== карточки ===== */
.card{
  background:linear-gradient(180deg,#0a1119 0%,var(--card) 55%);
  border-radius:24px;padding:15px;position:relative;overflow:hidden;
  box-shadow:0 14px 34px rgba(3,10,20,.5);
}
/* светящаяся градиентная рамка */
.card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(160deg,
    rgba(175,220,255,.95) 0%,
    rgba(100,170,245,.45) 28%,
    rgba(255,255,255,.08) 55%,
    rgba(130,190,255,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card--plain{padding:14px}
.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card__head b{font-size:20px;letter-spacing:-.4px}
.round-btn{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--text);font-weight:700;cursor:pointer}

/* ===== вкладки подписки (закладки) ===== */
.tabs{display:flex;gap:6px;margin-bottom:-24px;padding:0 12px;position:relative;z-index:1}
.tab{
  border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14.5px;
  background:rgba(255,255,255,.10);color:#a8c0d8;backdrop-filter:blur(8px);
  padding:9px 16px 30px;border-radius:16px 16px 0 0;transition:.15s;
  display:flex;align-items:center;gap:6px;line-height:1;
}
.tab i{width:15px;height:15px;opacity:.9}
.tab i svg{width:100%;height:100%}
.tab.is-active{background:#0a1119;color:var(--text)}
/* карточка перекрывает «хвосты» закладок */
.card--sub{position:relative;z-index:2}

/* ===== карточка подписки ===== */
.card--sub{padding-top:18px}
.sub-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.days-badge{display:flex;align-items:center;gap:8px;min-width:0}
.days-badge__wrap{position:relative;width:74px;height:74px;flex:none;display:grid;place-items:center}
.days-badge__wrap::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(circle,rgba(150,205,255,.34) 0%,transparent 66%);
}
.days-badge__star{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 0 18px rgba(150,205,255,.65)) drop-shadow(0 8px 16px rgba(5,15,30,.6));
}
.days-badge__num{
  position:relative;z-index:1;
  font-size:26px;font-weight:900;line-height:1;color:#0a1728;letter-spacing:-1px;
}
.days-badge--router .days-badge__wrap::before{background:radial-gradient(circle,rgba(168,85,247,.42) 0%,transparent 66%)}
.days-badge--router .days-badge__star{filter:drop-shadow(0 6px 16px rgba(147,51,234,.55))}
.days-badge--router .days-badge__num{color:#fff}
.days-badge__word{font-size:19px;font-weight:800;white-space:nowrap;letter-spacing:-.3px}
.sub-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:14px 2px 14px;font-size:14px;font-weight:600}
.sub-meta__left{color:var(--accent-2)}
.sub-meta__next{
  display:block;margin-top:3px;
  font-size:12px;font-weight:500;color:rgba(255,255,255,.45)
}
.sub-meta__right{color:var(--muted)}
.sub-meta__right b{color:var(--green);font-weight:700}
.sub-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{
  border:0;cursor:pointer;font:inherit;color:var(--text);min-width:0;overflow:hidden;
  border-radius:16px;padding:12px 11px;display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-weight:600;font-size:12.5px;text-align:left;transition:transform .12s
}
.chip>span{min-width:0;white-space:nowrap}
.chip--flat b{margin-left:auto}
@media (max-width:370px){
  .chip{font-size:12px;padding:11px 10px;gap:5px}
  .chip--flat b{padding:3px 7px;font-size:12px}
}
.chip:active{transform:scale(.98)}
.chip--flat{
  background:linear-gradient(180deg,#111a25,#0a1119);
  border:1.5px solid rgba(120,180,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)
}
.chip--flat b{
  background:linear-gradient(180deg,rgba(61,155,253,.28),rgba(61,155,253,.10));
  border:1.5px solid rgba(120,190,255,.7);border-radius:10px;padding:3px 8px;font-size:12.5px;
  white-space:nowrap;flex:none;box-shadow:0 0 12px rgba(61,155,253,.25)
}
.chip--flat>span{white-space:nowrap}
.chip--outline{
  background:linear-gradient(180deg,rgba(61,155,253,.20),rgba(61,155,253,.07));
  border:1.5px solid rgba(120,190,255,.75);
  box-shadow:0 0 18px rgba(61,155,253,.25), inset 0 1px 0 rgba(255,255,255,.12);
  line-height:1.2
}
.chip--outline i{font-style:normal;font-size:20px;opacity:.85}

/* ===== промо-блок ===== */
.card--promo{padding:16px 16px 14px}
.promo__text b{font-size:19px;line-height:1.22;display:block;max-width:60%;letter-spacing:-.4px}
.promo__text p{color:var(--muted);font-size:14px;line-height:1.4;margin:10px 0 0;max-width:56%}
.promo__art{
  position:absolute;right:0;top:4px;width:104px;pointer-events:none;z-index:1;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.card--promo-lg .promo__art{top:26px;width:124px}

.promo__pill{
  margin-top:16px;border-radius:16px;padding:12px 14px;text-align:center;font-size:14px;
  position:relative;z-index:3;
  background:linear-gradient(180deg,#111a25,#0a1119);
  border:1px solid rgba(120,180,255,.22);
  box-shadow:0 6px 18px rgba(3,10,20,.55);
}
.promo__pill b{color:var(--accent-2)}
.card--promo-lg .btn{margin-top:18px;position:relative;z-index:1}

/* ===== ссылки ===== */
.card--links{padding:16px;overflow:hidden;min-height:138px;display:flex;align-items:center}
.links__art{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:112%;max-width:none;pointer-events:none;
}
/* задний слой — телефоны по краям */
.links__art--back{z-index:0}
/* передний слой — только маскот перекрывает кнопки (обрезаем боковины) */
.links__art--front{
  z-index:3;top:46%;
  -webkit-mask-image:linear-gradient(90deg,transparent 39%,#000 44%,#000 56%,transparent 61%);
  mask-image:linear-gradient(90deg,transparent 39%,#000 44%,#000 56%,transparent 61%);
}
.links__row{position:relative;z-index:2;width:100%}
.link-btn b,.link-btn span{position:relative;z-index:1;text-shadow:0 1px 6px rgba(3,10,20,.85)}
.card--links .link-btn{backdrop-filter:blur(2px)}
.links__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1}
.link-btn{
  background:linear-gradient(180deg,rgba(61,155,253,.20),rgba(61,155,253,.06));
  border:1.5px solid rgba(120,190,255,.8);border-radius:18px;
  box-shadow:0 0 20px rgba(61,155,253,.28), inset 0 1px 0 rgba(255,255,255,.14);
  padding:12px;text-align:center;text-decoration:none;color:var(--text);display:block
}
.link-btn b{display:block;font-size:15px}
.link-btn span{color:var(--accent-2);font-size:13px}

/* ===== подписки ===== */
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.seg{border:1px solid transparent;background:rgba(255,255,255,.05);color:var(--muted);border-radius:16px;padding:12px 8px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.seg.is-active{
  border-color:rgba(120,190,255,.8);
  background:linear-gradient(180deg,rgba(61,155,253,.20),rgba(61,155,253,.06));
  box-shadow:0 0 16px rgba(61,155,253,.25), inset 0 1px 0 rgba(255,255,255,.12);
  color:var(--text)
}
.subs-list{display:flex;flex-direction:column;gap:12px}
.sub-item{background:var(--card-2);border:1px solid rgba(140,195,255,.16);border-radius:20px;padding:16px}
.sub-item__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sub-item__ico{width:42px;height:42px;border-radius:12px;background:#12202f;display:grid;place-items:center;font-size:20px}
.sub-item__name{font-weight:700;font-size:17px;flex:1}
.sub-item__status{font-size:14px;font-weight:700}
.sub-item__status.ok{color:var(--green)}
.sub-item__status.off{color:var(--muted)}
.kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;font-size:15px}
.kv span{color:var(--muted)}
.kv b{font-weight:700;word-break:break-all;text-align:right}
.kv b.muted{color:var(--muted);font-weight:600}
.red{color:#f87171}
.green{color:var(--green)}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:15px}

/* ===== бонусы ===== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--card-2);border:1px solid rgba(140,195,255,.14);border-radius:16px;padding:13px}
.stat small{color:var(--muted);font-size:14px;display:block;margin-bottom:6px}
.stat b{font-size:21px;letter-spacing:-.5px}

/* ===== профиль ===== */
.profile__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar{width:56px;height:56px;border-radius:16px;background:#16283b center/cover no-repeat;flex:none}
.profile__id b{display:block;font-size:20px}
.profile__id span{color:var(--muted);font-size:15px}
.menu-list{display:flex;flex-direction:column;gap:9px}
.menu-item{
  background:linear-gradient(180deg,#0a1119,var(--card));
  border:1px solid rgba(140,195,255,.14);border-radius:18px;padding:15px;display:flex;align-items:center;gap:14px;
  font:inherit;font-size:16px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:transform .12s
}
.menu-item:active{transform:scale(.99)}
.menu-item i{font-style:normal;width:34px;height:34px;border-radius:11px;background:rgba(61,155,253,.12);display:grid;place-items:center;font-size:17px}

/* ===== нижнее меню ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  background:rgba(7,9,13,.92);backdrop-filter:blur(14px);
  padding:10px 8px calc(10px + var(--safe-b));
  border-radius:26px 26px 0 0;max-width:520px;margin:0 auto
}
.tabbar__btn{background:none;border:0;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0}
.tabbar__btn i{font-style:normal;font-size:20px;filter:grayscale(1) opacity(.6)}
.tabbar__btn.is-active{color:var(--accent)}
.tabbar__btn.is-active i{filter:none}

/* ===== шторка ===== */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);animation:fade .2s}
.sheet__panel{
  position:relative;width:100%;max-width:520px;background:var(--card);
  border-radius:26px 26px 0 0;padding:10px 18px calc(24px + var(--safe-b));
  max-height:88vh;overflow-y:auto;animation:up .28s cubic-bezier(.2,.9,.3,1)
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet__grip{width:40px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);margin:6px auto 14px}
.sheet__title{font-size:21px;font-weight:800;text-align:center;margin-bottom:16px}
.sheet__body{display:flex;flex-direction:column;gap:12px}

/* элементы внутри шторки */
.opt{
  background:var(--card-2);border:1px solid transparent;border-radius:18px;padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font:inherit;color:var(--text);text-align:left;width:100%
}
.opt.is-sel{border-color:rgba(61,155,253,.7);background:rgba(61,155,253,.10)}
.opt__radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);flex:none;display:grid;place-items:center}
.opt.is-sel .opt__radio{border-color:var(--accent)}
.opt.is-sel .opt__radio::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--accent)}
.opt__t b{display:block;font-size:16px}
.opt__t small{color:var(--muted);font-size:13px}
.opt__price{font-weight:800;font-size:17px;white-space:nowrap}
.step{display:flex;align-items:center;gap:10px;margin:4px 0 10px;color:var(--muted);font-size:15px}
.step__n{width:28px;height:28px;border-radius:50%;border:1px solid rgba(61,155,253,.6);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.field{background:var(--card-2);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;color:var(--text);font:inherit;font-size:16px;width:100%}
.field::placeholder{color:var(--muted)}
.copy-box{background:var(--card-2);border-radius:16px;padding:14px;font-size:14px;word-break:break-all;color:var(--accent-2);cursor:pointer}
.tx{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.tx:last-child{border:0}
.tx small{color:var(--muted);font-size:13px;display:block;margin-top:2px}
.tx__sum{font-weight:800;white-space:nowrap}

/* ===== шторка: заголовок с крестиком ===== */
.sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.sheet__head h2{font-size:24px;font-weight:800;margin:0}
.sheet__x{
  width:34px;height:34px;flex:none;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--text);font-size:19px;line-height:1;cursor:pointer
}
.sheet__sub{font-size:17px;font-weight:700;margin:2px 0 8px}
.sheet__text{color:var(--text);opacity:.92;line-height:1.5;font-size:16px;margin:0 0 16px}
.sheet__text b{color:var(--accent-2)}

/* чеклист «как это работает» */
.check-list{display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;align-items:flex-start;gap:12px;list-style:none;line-height:1.45;font-size:16px}
.check-list{margin:0;padding:0}
.check-list .tick{
  width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(74,222,128,.14);color:var(--green);
  display:grid;place-items:center;font-size:14px;font-weight:800
}

/* документы / пункты со стрелкой */
.doc-item{
  width:100%;background:var(--card-2);border:0;border-radius:18px;padding:15px;
  display:flex;align-items:center;gap:13px;cursor:pointer;font:inherit;color:var(--text);text-align:left
}
.doc-item:active{transform:scale(.99)}
.doc-item__ico{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(61,155,253,.14);display:grid;place-items:center;font-size:17px}
.doc-item__t{flex:1;min-width:0}
.doc-item__t b{display:block;font-size:16px}
.doc-item__t small{color:var(--muted);font-size:13px}
.doc-item__arr{color:var(--muted);font-size:20px;flex:none}

/* переименование подписки */
.rename{display:inline-flex;align-items:center;gap:7px;min-width:0}
.rename__btn{
  width:26px;height:26px;flex:none;padding:5px;cursor:pointer;
  border:1px solid rgba(61,155,253,.45);border-radius:9px;
  background:rgba(61,155,253,.14);color:var(--accent-2);line-height:0
}
.rename__btn svg{width:100%;height:100%}
.rename__btn:active{transform:scale(.9)}

/* email */
.email-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ===== иконки ===== */
svg{width:100%;height:100%;display:block}
.balance-card__icon{width:26px;height:26px;color:var(--accent-2);opacity:.95;flex:none}
.chip__ico{width:19px;height:19px;flex:none;color:var(--accent-2);opacity:.9}
.chip--flat .chip__ico{color:#9fb6cf}
.tabbar__btn i{width:23px;height:23px;display:block}
.menu-item i{width:38px;height:38px;padding:9px;color:var(--accent-2)}
.menu-item__arr{width:18px;height:18px;color:var(--muted);flex:none;margin-left:auto;opacity:.7}
.round-btn{padding:8px;color:var(--muted)}
.sheet__x{padding:9px;color:var(--text)}
.doc-item__ico{padding:9px;color:var(--accent-2)}
.doc-item__arr{width:18px;height:18px;opacity:.7}
.check-list .tick{padding:6px}
.btn--icon{display:flex;align-items:center;justify-content:center;gap:9px}
.btn--icon i,.btn--icon svg{width:19px;height:19px;flex:none}
.sub-item__ico svg{padding:9px;color:var(--accent-2)}

/* ===== шторка: суммы, методы, тарифы ===== */
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.amt{
  border:1.5px solid rgba(120,180,255,.25);background:var(--card-2);color:var(--text);
  border-radius:14px;padding:12px 6px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.14s
}
.amt.is-sel{
  border-color:rgba(120,190,255,.85);
  background:linear-gradient(180deg,rgba(61,155,253,.24),rgba(61,155,253,.08));
  box-shadow:0 0 16px rgba(61,155,253,.28)
}
.opt-list{display:flex;flex-direction:column;gap:9px}
.balance-line{
  background:var(--card-2);border:1px solid rgba(140,195,255,.16);border-radius:14px;
  padding:11px 14px;font-size:14px;color:var(--muted);margin-bottom:12px;text-align:center
}
.balance-line b{color:var(--text);font-size:16px}
.tariff{
  background:var(--card-2);border:1px solid rgba(140,195,255,.16);border-radius:18px;
  padding:14px;margin-bottom:12px
}
.tariff__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.tariff__head b{font-size:17px}
.tariff__cur{
  font-size:11px;font-weight:700;color:var(--green);
  background:rgba(74,222,128,.14);border-radius:8px;padding:3px 8px
}
.tariff__info{color:var(--muted);font-size:13px;margin-bottom:12px}
.period-list{display:flex;flex-direction:column;gap:8px}
.period{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,rgba(61,155,253,.14),rgba(61,155,253,.05));
  border:1.5px solid rgba(120,190,255,.45);border-radius:14px;
  padding:12px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;transition:.14s
}
.period:active{transform:scale(.99)}
.period b{font-size:16px;font-weight:800;white-space:nowrap}

/* ===== экран пополнения ===== */
.topup__balance{
  background:var(--card-2);border:1px solid rgba(140,195,255,.16);border-radius:18px;
  padding:14px 16px;margin-bottom:14px
}
.topup__balance small{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}
.topup__balance b{font-size:26px;letter-spacing:-.5px}
.topup__amount{
  text-align:center;font-size:44px;font-weight:900;letter-spacing:-1.5px;
  padding:10px 0 16px;line-height:1
}
.topup__amount span{color:var(--muted);font-weight:800}
.topup__limits{color:var(--muted);font-size:13px;text-align:center;margin-top:12px}

.topup__recipient{margin:12px 0 4px}
.topup__recipient-t{font-weight:700;font-size:16px;margin-bottom:8px}
.topup__hint{display:block;color:var(--muted);font-size:12.5px;margin-top:7px}

/* способы оплаты */
.pm{
  width:100%;display:flex;align-items:center;gap:13px;cursor:pointer;text-align:left;
  background:var(--card-2);border:1px solid rgba(140,195,255,.16);border-radius:18px;
  padding:13px;margin-bottom:10px;font:inherit;color:var(--text);transition:.14s
}
.pm:active{transform:scale(.99)}
.pm.is-busy{opacity:.6;pointer-events:none}
.pm__t{flex:1;min-width:0}
.pm__t b{display:block;font-size:16px}
.pm__t small{color:var(--muted);font-size:13px}
.pm__logos{
  flex:none;display:flex;align-items:center;gap:4px;
  background:#fff;border-radius:12px;padding:8px 9px;min-width:58px;justify-content:center
}
.pm__logos img{height:16px;width:auto;display:block}
.pm__logos--crypto{background:#0f1720;padding:6px;gap:3px}
.pm__logos--crypto i{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:800;color:#fff
}
.pm__logos--stars{background:linear-gradient(135deg,#2a2140,#14101f);padding:8px 12px}
.pm__logos--stars i{font-style:normal;font-size:19px;color:#ffcc4d;line-height:1}

/* ===== тост ===== */
.toast{
  position:fixed;left:50%;bottom:calc(110px + var(--safe-b));transform:translateX(-50%);
  background:rgba(20,28,40,.97);border:1px solid rgba(255,255,255,.1);
  padding:13px 20px;border-radius:16px;font-size:15px;font-weight:600;z-index:60;
  max-width:88%;text-align:center;animation:fade .2s
}


/* --- красный акцент на ошибках --- */
.toast--error{
  background:rgba(58,16,22,.98);
  border-color:rgba(255,86,102,.55);
  color:#ffd9dd;
  box-shadow:0 10px 34px rgba(255,60,80,.22)
}
.field--error{
  border-color:rgba(255,86,102,.75)!important;
  background:rgba(255,60,80,.09)!important;
  box-shadow:0 0 0 3px rgba(255,60,80,.13)
}
.field--ok{
  border-color:rgba(72,214,142,.6)!important;
  background:rgba(72,214,142,.08)!important
}
.topup__hint--bad{color:#ff8b98!important}
.topup__hint--ok{color:#5fe0a2!important}
.topup__amount--error{color:#ff6b7a;animation:shake .35s}
.topup__limits--error{color:#ff8b98}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}


/* --- карточки устройств --- */
.device{
  display:flex;align-items:center;gap:12px;
  padding:12px 13px;margin-bottom:9px;
  border-radius:16px;
  background:rgba(9,16,27,.62);
  border:1px solid rgba(255,255,255,.07)
}
.device__ico{
  flex:0 0 40px;height:40px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(94,150,255,.12);border:1px solid rgba(94,150,255,.22);
  color:#8fb6ff
}
.device__ico svg{width:21px;height:21px}
.device__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.device__body b{font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device__body small{font-size:12.5px;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device__rate{
  align-self:flex-start;margin-top:3px;
  font-size:11.5px;font-weight:600;color:#8fb6ff;
  background:rgba(94,150,255,.12);border:1px solid rgba(94,150,255,.2);
  padding:2px 8px;border-radius:9px
}
.device__del{
  flex:0 0 32px;height:32px;border-radius:11px;
  background:rgba(255,60,80,.1);border:1px solid rgba(255,86,102,.28);
  color:#ff8b98;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s
}
.device__del:active{transform:scale(.92);background:rgba(255,60,80,.2)}
.device__del.is-busy{opacity:.5}


/* --- предупреждение перед перевыпуском --- */
.warn{
  display:block;padding:13px 15px;border-radius:16px;
  background:rgba(255,60,80,.09);border:1px solid rgba(255,86,102,.3)
}
.warn b{display:block;font-size:15px;color:#ff9ea9;margin-bottom:3px}
.warn span{display:block;font-size:13px;color:rgba(255,255,255,.6);line-height:1.4}
.warn-list{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.warn-item{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 13px;border-radius:15px;
  background:rgba(9,16,27,.6);border:1px solid rgba(255,255,255,.06)
}
.warn-item__ico{flex:0 0 24px;font-size:17px;line-height:1.2;text-align:center}
.warn-item b{display:block;font-size:14px;font-weight:640;margin-bottom:2px}
.warn-item small{display:block;font-size:12.5px;color:rgba(255,255,255,.52);line-height:1.42}

/* --- обратный отсчёт --- */
.countdown{
  margin:6px auto 4px;width:104px;height:104px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;font-weight:750;color:#ff8b98;
  background:rgba(255,60,80,.09);border:2px solid rgba(255,86,102,.4);
  box-shadow:0 0 34px rgba(255,60,80,.18);
  animation:pulse 1s ease-in-out infinite
}
@keyframes pulse{50%{transform:scale(.955);opacity:.86}}
.sheet__text.center{text-align:center}

/* --- опасные кнопки --- */
.btn--danger{color:#ff8b98!important;border-color:rgba(255,86,102,.34)!important}
.btn--danger:active{background:rgba(255,60,80,.12)!important}
.btn--danger-solid{
  background:linear-gradient(180deg,#ff5f70,#e23b4f);color:#fff;
  border:1px solid rgba(255,120,135,.5);font-weight:650
}
.btn--danger-solid:active{transform:scale(.985);filter:brightness(.94)}


/* --- напоминание о почте в профиле --- */
.email-banner{
  padding:15px 16px;margin-bottom:12px;border-radius:19px;
  background:linear-gradient(180deg,rgba(94,150,255,.14),rgba(94,150,255,.05));
  border:1px solid rgba(94,150,255,.3)
}
.email-banner__ico{font-size:22px;margin-bottom:6px}
.email-banner__body b{display:block;font-size:16px;font-weight:670;margin-bottom:4px}
.email-banner__body small{display:block;font-size:13px;line-height:1.48;color:rgba(255,255,255,.58)}

/* код подтверждения крупно и по центру */
.field--code{
  text-align:center;font-size:26px;letter-spacing:9px;font-weight:700;
  padding-top:14px;padding-bottom:14px
}
.ok{color:#5fe0a2!important}


/* --- документы --- */
.doc-card{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  color:#fff;
  padding:13px 14px;margin-bottom:9px;border-radius:17px;
  background:rgba(9,16,27,.62);border:1px solid rgba(255,255,255,.07);transition:.15s
}
.doc-card:active{transform:scale(.988);background:rgba(9,16,27,.8)}
.doc-card__ico{
  flex:0 0 40px;height:40px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(94,150,255,.12);border:1px solid rgba(94,150,255,.22);color:#8fb6ff
}
.doc-card__ico svg{width:20px;height:20px}
.doc-card__body{flex:1;min-width:0}
.doc-card__body b{display:block;font-size:15px;font-weight:660;margin-bottom:1px;color:#fff}
.doc-card__body span{display:block;font-size:12.5px;color:#8fb6ff;margin-bottom:4px}
.doc-card__body small{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.5)}
.doc-card__arr{flex:0 0 18px;color:rgba(255,255,255,.3);margin-top:10px}
.doc-card__arr svg{width:16px;height:16px}
.doc-sep{margin:16px 0 9px;font-size:12.5px;color:rgba(255,255,255,.42)}

/* --- читалка --- */
.doc-toc{
  margin:12px 0 4px;padding:12px 14px;border-radius:16px;
  background:rgba(94,150,255,.07);border:1px solid rgba(94,150,255,.18)
}
.doc-toc__t{font-size:12.5px;color:#8fb6ff;margin-bottom:7px;font-weight:600}
.doc-toc__i{
  display:block;width:100%;text-align:left;padding:6px 0;
  background:none;border:0;border-radius:0;
  font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(255,255,255,.05)
}
.doc-toc__i:last-child{border-bottom:0}
.doc-toc__i:active{color:#8fb6ff}
.doc-view .btn--icon{text-decoration:none}
.doc-body{margin-top:14px}
.doc-h{
  margin:20px 0 8px;font-size:15.5px;font-weight:680;color:#fff;
  scroll-margin-top:12px
}
.doc-h:first-child{margin-top:4px}
.doc-p{
  margin:0 0 9px;font-size:14px;line-height:1.62;
  color:rgba(255,255,255,.72);text-align:left
}


/* --- именные ссылки --- */
.links__hint{margin:10px 2px 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.5)}
.link-row{
  margin-top:11px;padding:12px 13px;border-radius:16px;
  background:rgba(9,16,27,.6);border:1px solid rgba(255,255,255,.07)
}
.link-row__top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.link-chip{
  flex:1;min-width:0;text-align:left;padding:7px 13px;border-radius:11px;
  background:rgba(94,150,255,.14);border:1px solid rgba(94,150,255,.28);
  color:#a9c8ff;font-size:14px;font-weight:640;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.link-icon{
  flex:0 0 34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.65);font-size:14px
}
.link-icon svg{width:16px;height:16px}
.link-icon--del{background:rgba(255,60,80,.1);border-color:rgba(255,86,102,.28)}
.link-row__stats{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:10px
}
.link-row__stats b{color:rgba(255,255,255,.82)}
.link-earn{
  font-style:normal;font-weight:660;font-size:12.5px;color:#5fe0a2;
  background:rgba(72,214,142,.12);border:1px solid rgba(72,214,142,.25);
  padding:3px 9px;border-radius:10px;white-space:nowrap
}
.field-label{margin:12px 2px 6px;font-size:13px;color:rgba(255,255,255,.62)}

/* --- транзакции --- */
.tx-list{margin-top:12px}
.tx-card{
  padding:13px 14px;margin-bottom:9px;border-radius:16px;
  background:rgba(9,16,27,.62);border:1px solid rgba(255,255,255,.07)
}
.tx-card__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tx-card__row b{font-size:15px;font-weight:650;color:#fff}
.tx-card__sum{font-size:15px;font-weight:700;white-space:nowrap}
.tx-card__sum.red{color:#ff8b98}
.tx-card small{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.4}
.tx-card time{display:block;margin-top:7px;font-size:12px;color:rgba(255,255,255,.35)}


/* --- приветствие нового пользователя --- */
.welcome{text-align:center;padding:6px 0 2px}
.welcome__art{width:132px;height:132px;object-fit:contain;margin:0 auto 14px;display:block}
.welcome__t{font-size:27px;font-weight:750;margin-bottom:8px;letter-spacing:-.4px}
.welcome__p{
  margin:0 auto 20px;max-width:300px;
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.6)
}
.welcome__btn{font-size:16px;padding-top:16px;padding-bottom:16px}
.welcome__gift{
  padding:15px 16px;border-radius:18px;margin-bottom:15px;
  background:linear-gradient(180deg,rgba(94,150,255,.2),rgba(94,150,255,.06));
  border:1px solid rgba(94,150,255,.36)
}
.welcome__gift b{display:block;font-size:20px;font-weight:730;margin-bottom:4px}
.welcome__gift span{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.62)}
.welcome .check-list{text-align:left}


/* --- обучающий тур --- */
.tour{position:fixed;inset:0;z-index:80;pointer-events:auto}
/* затемнение делает сама «дыра» через box-shadow — отдельный слой поверх неё
   гасил бы подсветку, поэтому его нет */
.tour__hole{
  position:absolute;border-radius:18px;
  box-shadow:0 0 0 9999px rgba(3,8,16,.78), 0 0 0 2px rgba(122,170,255,.85);
  transition:top .28s, left .28s, width .28s, height .28s;
  pointer-events:none
}
.tour__card{
  position:absolute;left:14px;right:14px;
  padding:17px 18px 15px;border-radius:20px;
  background:#0d1725;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  animation:fade .22s
}
.tour__card b{display:block;font-size:18px;font-weight:700;margin-bottom:7px}
.tour__card p{margin:0;font-size:14px;line-height:1.52;color:rgba(255,255,255,.66)}
.tour__foot{
  display:flex;align-items:center;justify-content:space-between;
  margin:14px 0 12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)
}
.tour__dots{display:flex;gap:5px}
.tour__dot{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.tour__dot.is-on{background:#5e96ff;width:22px}
.tour__num{font-size:12px;color:rgba(255,255,255,.4)}
.tour__btns{display:flex;gap:9px;justify-content:flex-end}
.tour__back,.tour__next{
  padding:11px 20px;border-radius:13px;font-size:14.5px;font-weight:640
}
.tour__back{background:rgba(255,255,255,.08);color:rgba(255,255,255,.78)}
.tour__next{background:linear-gradient(180deg,#6ea4ff,#3f7ae8);color:#fff}
.tour__next:active,.tour__back:active{transform:scale(.97)}

/* шаг без подсветки: затемняем экран целиком, карточка поверх */
.tour--plain::before{content:'';position:absolute;inset:0;background:rgba(3,8,16,.78)}
.tour--plain .tour__card{z-index:1}

/* приветственный шаг тура: по центру, с картинкой */
.tour__card--center{
  top:50%!important;bottom:auto!important;
  transform:translateY(-50%);text-align:center
}
.tour__card--center .tour__btns{justify-content:center}
.tour__art{
  display:block;width:104px;height:104px;object-fit:contain;
  margin:2px auto 10px
}


/* --- баланса не хватает: подписка отключена --- */
.lowbal{
  padding:15px 16px;margin:0 0 12px;border-radius:19px;
  background:linear-gradient(180deg,rgba(255,60,80,.16),rgba(255,60,80,.05));
  border:1px solid rgba(255,86,102,.42);
  box-shadow:0 8px 28px rgba(255,60,80,.12)
}
.lowbal__ico{font-size:20px;margin-bottom:5px}
.lowbal__body b{display:block;font-size:16px;font-weight:680;color:#ff9ea9;margin-bottom:4px}
.lowbal__body small{display:block;font-size:13px;line-height:1.5;color:rgba(255,255,255,.62)}
.lowbal__btn{
  margin-top:12px;
  background:linear-gradient(180deg,#ff5f70,#e23b4f);color:#fff;
  border:1px solid rgba(255,120,135,.5);font-weight:650
}
.lowbal__btn:active{transform:scale(.985);filter:brightness(.94)}

/* дни закончились — цифра красная */
.days-badge--empty #daysNum{color:#ff8b98}


/* --- подключение устройства --- */
.connect__plats{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none
}
.connect__plats::-webkit-scrollbar{display:none}
.plat{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:13px;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.62);font-size:13.5px;font-weight:600;transition:.15s
}
.plat svg{width:16px;height:16px}
.plat.is-on{
  background:rgba(94,150,255,.16);border-color:rgba(94,150,255,.42);color:#a9c8ff
}
.connect__apps{margin-bottom:14px}

.step{display:flex;gap:12px;margin-bottom:12px}
.step__n{
  flex:0 0 26px;height:26px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(94,150,255,.16);border:1px solid rgba(94,150,255,.35);
  color:#8fb6ff;font-size:13px;font-weight:700
}
.step__body{flex:1;min-width:0}
.step__body b{display:block;font-size:15px;font-weight:650;margin-bottom:3px}
.step__body small{display:block;font-size:13px;line-height:1.5;color:rgba(255,255,255,.55)}
.step__btns{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.step__btns .btn{padding-top:12px;padding-bottom:12px;font-size:14.5px}

.connect__manual{margin-top:6px}
.connect__manual summary{
  cursor:pointer;font-size:13px;color:rgba(255,255,255,.45);
  padding:8px 0;list-style:none
}
.connect__manual summary::-webkit-details-marker{display:none}
.connect__manual summary::before{content:'⌄ ';font-size:14px}
.connect__manual[open] summary::before{content:'⌃ '}