/* ═══════════════════════════════════════════════════════════════
   Xam — веб-приложение (Telegram WebApp)
   Фиолетовая тема. Переменные — в :root, меняются в одном месте.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* фон */
  --bg-1:#1a0b2e;
  --bg-2:#2d1b4e;
  --bg-3:#160a26;

  /* панели */
  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.028);
  --card-solid:rgba(38,20,66,.72);
  --line:rgba(168,132,255,.16);
  --line-2:rgba(168,132,255,.09);

  /* акценты */
  --acc:#a855f7;
  --acc-2:#c084fc;
  --acc-3:#7c3aed;
  --acc-soft:rgba(168,85,247,.18);
  --pink:#ec4899;
  --cyan:#22d3ee;

  /* текст */
  --txt:#f5f1ff;
  --txt-2:#c3b4e6;
  --txt-3:#8f82ba;

  /* статусы */
  --ok:#34d399;
  --ok-soft:rgba(52,211,153,.16);
  --warn:#fbbf24;
  --bad:#fb7185;

  /* геометрия */
  --r:20px;
  --r-sm:14px;
  --r-xs:11px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);

  --shadow:0 18px 44px rgba(8,3,20,.5);
  --shadow-sm:0 8px 22px rgba(8,3,20,.34);
  --glow:0 0 0 1px rgba(168,85,247,.22), 0 12px 34px rgba(124,58,237,.24);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(680px 420px at 84% -8%, rgba(168,85,247,.30), transparent 62%),
    radial-gradient(520px 380px at 4% 104%, rgba(124,58,237,.24), transparent 60%),
    linear-gradient(168deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
  background-attachment:fixed;
  color:var(--txt);
  font-family:Inter,'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}

/* ═══════════════ загрузка: буквы X · a · m ═══════════════ */
.loader{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(168deg,#1a0b2e 0%,#2d1b4e 52%,#160a26 100%);
  transition:opacity .55s ease, visibility .55s ease;
}
.loader.done{opacity:0;visibility:hidden}
.loader-stage{display:flex;flex-direction:column;align-items:center}
.loader-word{
  display:flex;align-items:baseline;gap:2px;
  font-size:74px;font-weight:800;letter-spacing:-2px;line-height:1;
}
.ltr{
  display:inline-block;opacity:0;transform:scale(.5);
  background:linear-gradient(150deg,#f0e6ff 0%,#c084fc 46%,#7c3aed 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.ltr.in{animation:ltrIn .62s cubic-bezier(.22,1.2,.36,1) forwards}
@keyframes ltrIn{
  0%{opacity:0;transform:scale(.5);filter:blur(7px) drop-shadow(0 0 0 rgba(168,85,247,0))}
  62%{opacity:1;transform:scale(1.07);filter:blur(0) drop-shadow(0 0 20px rgba(192,132,252,.85))}
  100%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 11px rgba(168,85,247,.5))}
}
.loader-sub{
  margin-top:7px;font-size:12.5px;font-weight:700;letter-spacing:5.5px;
  color:var(--txt-3);text-transform:uppercase;
  opacity:0;animation:subIn .7s ease 1.05s forwards;
}
@keyframes subIn{from{opacity:0;transform:translateY(7px)}to{opacity:.95;transform:none}}
.loader-bar{
  margin-top:26px;width:154px;height:3px;border-radius:99px;
  background:rgba(168,132,255,.16);overflow:hidden;
  opacity:0;animation:subIn .5s ease 1.15s forwards;
}
.loader-bar i{
  display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-3),var(--acc-2),var(--pink));
  animation:barSlide 1.15s ease-in-out infinite;
}
@keyframes barSlide{0%{transform:translateX(-105%)}100%{transform:translateX(370%)}}
.loader-by{
  margin-top:30px;font-size:12px;font-weight:700;letter-spacing:.9px;
  color:var(--txt-3);opacity:0;animation:subIn .6s ease 1.35s forwards;
}

/* ═══════════════ каркас ═══════════════ */
.app{max-width:520px;margin:0 auto;padding:calc(14px + var(--safe-t)) 14px calc(30px + var(--safe-b))}
.app.fade{animation:appIn .5s ease both}
@keyframes appIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* шапка */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:42px;height:42px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  font-size:20px;
  background:linear-gradient(150deg,rgba(168,85,247,.34),rgba(124,58,237,.18));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(124,58,237,.24);
}
.brand-name{font-size:20px;font-weight:800;letter-spacing:-.3px;line-height:1.1}

/* блок подписки */
.subcard{
  flex:0 0 auto;text-align:right;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--card);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.subcard.on{border-color:rgba(52,211,153,.3);background:linear-gradient(150deg,rgba(52,211,153,.13),rgba(52,211,153,.04))}
.subcard.off{border-color:rgba(251,113,133,.28);background:linear-gradient(150deg,rgba(251,113,133,.12),rgba(251,113,133,.04))}
.subcard-t{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:12.5px;font-weight:800}
.subcard-t.ok{color:#6ee7b7}
.subcard-t.no{color:#fda4af}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.dot.live{animation:dotPulse 1.9s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.subcard-d{font-size:11px;font-weight:700;color:var(--txt-3);margin-top:3px;white-space:nowrap}
.subcard-i{font-size:10px;font-weight:700;color:var(--txt-3);opacity:.75;margin-top:1px}

/* ═══════════════ сетка 2x2 ═══════════════ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.tile{
  position:relative;overflow:hidden;
  padding:15px 15px 16px;border-radius:var(--r);
  background:linear-gradient(158deg,var(--card),var(--card-2));
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}
.tile::after{
  content:"";position:absolute;right:-46px;top:-46px;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.2),transparent 68%);pointer-events:none;
}
.tile-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--txt-3)}
.tile-ico{font-size:14px;line-height:1}
.tile-v{margin-top:9px;font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1.06}
.tile-v.acc{background:linear-gradient(140deg,#e9d5ff,#c084fc 55%,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tile-v small{font-size:13px;font-weight:700;color:var(--txt-3);letter-spacing:0;margin-left:4px;-webkit-text-fill-color:var(--txt-3)}
.tile-s{margin-top:5px;font-size:11.5px;font-weight:700;color:var(--txt-3)}

/* ═══════════════ кнопки ═══════════════ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:16px 18px;border-radius:var(--r-sm);
  font-size:15.5px;font-weight:800;letter-spacing:-.1px;
  background:var(--card);border:1px solid var(--line-2);color:var(--txt);
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:scale(.972)}
.btn-ico{font-size:17px;line-height:1}

.btn-main{
  margin-bottom:11px;padding:18px;
  font-size:16.5px;
  background:linear-gradient(128deg,#7c3aed 0%,#a855f7 42%,#c084fc 72%,#ec4899 100%);
  border:0;color:#fff;
  box-shadow:0 14px 34px rgba(124,58,237,.42), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-main:active{box-shadow:0 8px 20px rgba(124,58,237,.36)}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.row2 .btn{padding:15px 12px;font-size:14.5px}

.btn-ref{
  position:relative;margin-bottom:16px;padding:17px;
  background:linear-gradient(128deg,rgba(124,58,237,.34),rgba(168,85,247,.2));
  border:1px solid rgba(192,132,252,.42);
  color:#f3e8ff;
  box-shadow:0 0 0 1px rgba(192,132,252,.14), 0 12px 32px rgba(124,58,237,.3);
}
.btn-ref::after{
  content:"";position:absolute;inset:-1px;border-radius:var(--r-sm);pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(192,132,252,.3),transparent);
  opacity:.5;animation:refShine 3.4s ease-in-out infinite;
}
@keyframes refShine{0%,100%{opacity:.28}50%{opacity:.72}}

.footer{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--txt-3);padding:6px 0 2px}
.footer b{color:var(--acc-2)}

/* ═══════════════ статус VPN ═══════════════ */
.vpn-card{
  position:relative;overflow:hidden;
  padding:20px;border-radius:var(--r);margin-bottom:11px;
  background:linear-gradient(158deg,rgba(58,26,116,.85),rgba(22,12,48,.9));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.vpn-card.on{border-color:rgba(52,211,153,.34)}
.vpn-card::before{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,230,255,.5),transparent);
}
.vpn-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vpn-state{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800}
.vpn-orb{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:23px;
  background:radial-gradient(circle at 34% 30%,rgba(192,132,252,.42),rgba(124,58,237,.16));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(124,58,237,.3);
}
.vpn-orb.live{animation:orbPulse 2.4s ease-in-out infinite}
@keyframes orbPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(124,58,237,.3)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 32px rgba(168,85,247,.6)}}
.vpn-meta{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.vpn-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}
.vpn-row span:first-child{color:var(--txt-3)}
.vpn-row span:last-child{color:var(--txt);font-weight:800}
.bar{height:7px;border-radius:99px;background:rgba(168,132,255,.16);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c3aed,#c084fc,#22d3ee)}

/* список серверов */
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 9px}
.sec-t{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-3)}
.sec-n{font-size:11.5px;font-weight:800;color:var(--txt-3)}
.srv-list{display:flex;flex-direction:column;gap:8px}

/* ── карточка сервера ── */
.srv{
  position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  min-height:72px;padding:14px 15px 14px 17px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.032);
  border:1px solid rgba(168,132,255,.1);
  transition:transform .16s ease,border-color .2s ease,background .2s ease;
  overflow:hidden;
}
.srv:active{transform:scale(.985)}
.srv + .srv{border-top:1px solid rgba(168,132,255,.07)}

/* полоса-индикатор слева */
.srv-bar{
  position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0;
  background:transparent;transition:background .2s ease;
}
.srv.on{
  background:linear-gradient(100deg,rgba(168,85,247,.22),rgba(124,58,237,.08));
  border-color:rgba(192,132,252,.42);
}
.srv.on .srv-bar{background:linear-gradient(180deg,#c084fc,#7c3aed)}
.srv.byp.on{
  background:linear-gradient(100deg,rgba(34,211,238,.2),rgba(124,58,237,.08));
  border-color:rgba(34,211,238,.4);
}
.srv.byp.on .srv-bar{background:linear-gradient(180deg,#67e8f9,#7c3aed)}

/* недоступный сервер */
.srv.down{opacity:.5}

/* круглый флаг */
.srv-flag{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;font-size:20px;line-height:1;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(229,229,229,.22);
  box-shadow:0 3px 10px rgba(8,3,20,.45);
  overflow:hidden;
}
.srv-flag img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* текст */
.srv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.srv-n{
  font-size:17.5px;font-weight:800;letter-spacing:-.2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.srv-m{
  font-size:12.5px;font-weight:700;letter-spacing:.2px;line-height:1.25;
  color:var(--txt-3);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* правая часть */
.srv-p{flex:0 0 auto;display:flex;align-items:center;gap:7px}
.srv-dot{
  width:7px;height:7px;border-radius:50%;background:#fb7185;
  box-shadow:0 0 7px rgba(251,113,133,.8);
}
.srv-chev{
  flex:0 0 auto;font-size:20px;line-height:1;color:rgba(199,199,204,.65);
  margin-left:1px;transform:translateY(-1px);
}
.srv.on .srv-chev{color:var(--acc-2)}

.ping{font-size:12px;font-weight:800}
.ping.fast{color:#6ee7b7}
.ping.mid{color:#fcd34d}
.ping.slow{color:#fda4af}
.ping.na{color:var(--txt-3)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.3px}
.tag.byp{background:rgba(34,211,238,.16);color:#67e8f9;border:1px solid rgba(34,211,238,.3)}

/* ═══════════════ списки/строки ═══════════════ */
.panel{
  padding:16px;border-radius:var(--r);margin-bottom:11px;
  background:linear-gradient(158deg,var(--card),var(--card-2));
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel-t{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-3);margin-bottom:12px}
.line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.line:last-child{border-bottom:0;padding-bottom:0}
.line:first-of-type{padding-top:0}
.line-k{font-size:13.5px;font-weight:700;color:var(--txt-2)}
.line-v{font-size:14px;font-weight:800;text-align:right}
.line-v.acc{color:var(--acc-2)}
.line-v.ok{color:#6ee7b7}
.line-v.bad{color:#fda4af}
.line-v.dim{color:var(--txt-3);font-weight:700}

/* тарифы */
.plan{
  position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px;border-radius:var(--r-sm);margin-bottom:10px;
  background:linear-gradient(158deg,var(--card),var(--card-2));
  border:1px solid var(--line-2);
  transition:transform .16s ease,border-color .2s ease;
}
.plan:active{transform:scale(.982)}
.plan.pop{border-color:rgba(168,85,247,.46);background:linear-gradient(150deg,rgba(168,85,247,.18),rgba(124,58,237,.06))}
.plan-b{flex:1;min-width:0}
.plan-t{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.plan-s{font-size:11.5px;font-weight:700;color:var(--txt-3);margin-top:3px}
.plan-p{flex:0 0 auto;text-align:right}
.plan-pr{font-size:17px;font-weight:800;letter-spacing:-.4px}
.plan-pr.acc{background:linear-gradient(140deg,#e9d5ff,#c084fc 60%,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.plan-old{font-size:11px;font-weight:700;color:var(--txt-3);text-decoration:line-through;margin-top:2px}
.plan-badge{
  position:absolute;right:14px;top:-8px;padding:3px 9px;border-radius:99px;
  font-size:9.5px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(128deg,#7c3aed,#c084fc);color:#fff;
  box-shadow:0 5px 14px rgba(124,58,237,.44);
}

/* устройства */
.dev{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.dev:last-child{border-bottom:0;padding-bottom:0}
.dev-ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:17px;
  background:var(--card);border:1px solid var(--line-2);
}
.dev-b{flex:1;min-width:0}
.dev-n{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-m{font-size:11.5px;font-weight:700;color:var(--txt-3);margin-top:2px}
.dev-x{padding:7px 9px;border-radius:9px;font-size:12px;font-weight:800;color:#fda4af;background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.24)}

/* рефералка */
.ref-link{
  display:flex;align-items:center;gap:10px;padding:13px;border-radius:var(--r-sm);
  background:rgba(168,85,247,.1);border:1px dashed rgba(168,85,247,.4);
}
.ref-link code{flex:1;min-width:0;font-size:11.5px;font-weight:700;color:var(--acc-2);word-break:break-all;font-family:ui-monospace,Menlo,monospace}
.ref-copy{flex:0 0 auto;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:800;background:linear-gradient(128deg,#7c3aed,#a855f7);color:#fff}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}
.ref-st{padding:13px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line-2);text-align:center}
.ref-st-v{font-size:20px;font-weight:800;letter-spacing:-.6px}
.ref-st-v.acc{color:var(--acc-2)}
.ref-st-k{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--txt-3);margin-top:4px}

/* чипы сумм */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.chip{
  padding:13px 8px;border-radius:var(--r-sm);text-align:center;
  background:var(--card);border:1px solid var(--line-2);
  font-size:15px;font-weight:800;transition:transform .16s ease,border-color .2s ease;
}
.chip:active{transform:scale(.96)}
.chip.on{border-color:rgba(168,85,247,.55);background:linear-gradient(150deg,rgba(168,85,247,.24),rgba(124,58,237,.08));color:#e9d5ff}

/* поле ввода */
.field{
  width:100%;padding:14px 15px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.24);border:1px solid var(--line-2);
  color:var(--txt);font-size:15px;font-weight:700;font-family:inherit;
  outline:none;transition:border-color .2s ease;
}
.field:focus{border-color:rgba(168,85,247,.55)}
.field::placeholder{color:var(--txt-3);font-weight:600}

/* ═══════════════ шторка ═══════════════ */
.sheet-host{position:fixed;inset:0;z-index:8000;background:rgba(8,3,20,.66);backdrop-filter:blur(7px);animation:fhIn .24s ease}
@keyframes fhIn{from{opacity:0}to{opacity:1}}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;padding:0 14px calc(22px + var(--safe-b))}
.sheet-in{
  max-width:520px;margin:0 auto;padding:18px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(168deg,rgba(38,20,66,.99),rgba(20,11,40,.99));
  border:1px solid var(--line);border-bottom:0;
  box-shadow:0 -18px 48px rgba(8,3,20,.6);
  animation:shUp .32s cubic-bezier(.22,1.1,.36,1);
}
@keyframes shUp{from{transform:translateY(38px);opacity:.4}to{transform:none;opacity:1}}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:rgba(168,132,255,.3);margin:0 auto 15px}
.sheet-t{font-size:18px;font-weight:800;letter-spacing:-.3px;margin:0 0 4px}
.sheet-s{font-size:13px;font-weight:600;color:var(--txt-3);margin:0 0 15px}
.sheet-close{margin-top:11px}

/* ═══════════════ уведомление ═══════════════ */
.toast{
  position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,26px);
  z-index:9500;max-width:calc(100% - 34px);
  padding:13px 18px;border-radius:13px;
  font-size:13.5px;font-weight:800;text-align:center;
  background:linear-gradient(150deg,rgba(48,26,86,.98),rgba(26,14,50,.98));
  border:1px solid var(--line);color:var(--txt);
  box-shadow:0 14px 36px rgba(8,3,20,.56);
  opacity:0;visibility:hidden;transition:all .28s cubic-bezier(.22,1.1,.36,1);
}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast.ok{border-color:rgba(52,211,153,.44)}
.toast.bad{border-color:rgba(251,113,133,.44)}

/* ═══════════════ скелетон ═══════════════ */
.skel{border-radius:9px;background:linear-gradient(90deg,rgba(168,132,255,.09),rgba(168,132,255,.19),rgba(168,132,255,.09));background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel.line{height:12px;margin-bottom:10px}
.skel.block{height:74px;border-radius:var(--r-sm)}

/* адаптив */
@media (max-width:352px){
  .tile-v{font-size:23px}
  .brand-name{font-size:18px}
  .subcard{padding:8px 10px}
  .subcard-d{font-size:10px}
  .loader-word{font-size:62px}
}
@media (min-width:430px){
  .tile-v{font-size:29px}
}