html { background:#000 !important; background-image:none !important; }
/* фикс “уезжания” блоков на мобилке из-за padding/border при width:100% */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: #000000 !important; background-image:none !important; color:#f2efe9; overflow-x:hidden; }
.wrap { position:relative; z-index:1; }
/* убираем CSS пылевой фон - теперь только canvas анимация */

/* слой движущейся пыли на canvas */
.dust { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.8; width:100vw; height:100vh; }
.wrap { max-width: 720px; margin: 40px auto; padding: 0 16px; }
h1 { font-size: 20px; margin: 0 0 16px; }
.row { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
input { flex:1; padding:10px 12px; border-radius:8px; border:1px solid #223049; background:#141922; color:#e8eef9; }
button { cursor:pointer; }
.mono { background:#0d0a08; border:1px solid #3a2b1c; border-radius:12px; padding:12px; overflow:auto; color:#f3e6d4; }

/* компактная карточка подписки */
.card { position:relative; overflow:hidden; background:rgba(20,20,20,0.32); border:1px solid rgba(120,90,50,0.25); border-radius:16px; padding:16px; box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: cardSlideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.card-title { font-size:18px; font-weight:800; color:#f7f1e7; letter-spacing:0.3px; }
.status { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:0.3px; }
.status--active { background:#2a1f10; color:#f1c46b; border:1px solid #634a20; }
.status--expired { background:#3a1b1b; color:#ff9b85; border:1px solid #6b2a2a; }
.status-dot { width:8px; height:8px; border-radius:50%; background: currentColor; box-shadow: 0 0 0 0 rgba(107,226,143,0.7); }
.status--active .status-dot { animation: pulse-green 1.8s ease-in-out infinite; }
.status--expired .status-dot { animation: pulse-red 1.8s ease-in-out infinite; }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(107,226,143,0.6);} 70% { box-shadow: 0 0 0 10px rgba(107,226,143,0); } 100% { box-shadow: 0 0 0 0 rgba(107,226,143,0);} }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(255,139,139,0.6);} 70% { box-shadow: 0 0 0 10px rgba(255,139,139,0); } 100% { box-shadow: 0 0 0 0 rgba(255,139,139,0);} }
.kv { display:grid; grid-template-columns: 1fr; gap:8px; animation: kvSlideIn 0.6s ease both 0.2s; }
.kv-row { display:flex; justify-content:space-between; gap:12px; background:rgba(15,12,10,0.28); border:1px solid rgba(90,60,30,0.3); border-radius:10px; padding:10px 12px; transform: translateX(-8px); opacity: 0; animation: rowSlideIn 0.4s ease both; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kv-row:nth-child(1) { animation-delay: 0.3s; }
.kv-row:nth-child(2) { animation-delay: 0.35s; }
.kv-row:nth-child(3) { animation-delay: 0.4s; }
.kv-row:nth-child(4) { animation-delay: 0.45s; }
.kv-row:nth-child(5) { animation-delay: 0.5s; }
.kv-row:nth-child(6) { animation-delay: 0.55s; }
.kv-label { color:#d6c2a3; font-size:12px; }
.kv-value { color:#f7f1e7; font-size:14px; font-weight:700; text-align:right; }
.btn-row { display:flex; gap:8px; margin-top:12px; }
.btn-row { flex-wrap: wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px; border:1px solid transparent; font-weight:800; letter-spacing:0.35px; transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-decoration:none; position:relative; overflow:hidden; }
.btn:before { content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s ease; }
.btn:hover:before { left:100%; }
.btn-primary { background: linear-gradient(135deg, #d4863a, #8b4513, #cd853f); color:#fff; box-shadow: 0 10px 30px -12px rgba(212,134,58,.55); }
.btn-primary:hover { box-shadow: 0 15px 40px -10px rgba(212,134,58,.7); transform: translateY(-2px); }
.btn-danger { background: linear-gradient(135deg, #dc143c, #8b0000, #b22222); color:#fff; box-shadow: 0 10px 30px -12px rgba(220,20,60,.45); }
.btn-danger:hover { box-shadow: 0 15px 40px -10px rgba(220,20,60,.65); transform: translateY(-2px); }
.btn-secondary { background:#223049; color:#e8eef9; border-color:#2a3a57; }
.btn-secondary:hover { background:#2a3a57; transform: translateY(-1px); }
.btn-outline { background:transparent; color:#ffdca6; border:1px solid #6a4a2a; }
.btn-outline:hover { background:rgba(255,218,166,0.1); border-color:#8b6914; transform: translateY(-1px); }
.btn-lg { padding:12px 18px; font-size:15px; }
.btn-sm { padding:6px 10px; font-size:12px; border-radius:8px; }
.btn[disabled] { opacity:.6; cursor:not-allowed; }
.btn-row button { transition: transform .08s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-row { animation: btnRowSlideIn 0.5s ease both 0.6s; }
.plan-block { margin-top:16px; }
.plan-block-title { font-size:12px; letter-spacing:0.25px; text-transform:uppercase; color:#d6c2a3; margin-bottom:6px; }
.plan-row { display:flex; flex-wrap:wrap; gap:8px; }
.btn-plan { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:140px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,0.03); color:#f7f1e7; text-decoration:none; border:1px solid rgba(148,163,184,0.20); }
.btn-plan .plan-price { font-size:12px; font-weight:800; color:#f1c46b; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.btn-plan .plan-price-old { font-size:11px; font-weight:800; color:#9cb3d8; opacity:.85; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255,155,133,0.9); }
.btn-plan .plan-price-new { font-size:12px; font-weight:900; color:#f1c46b; }
.btn-plan .plan-badge { font-size:11px; font-weight:900; padding:2px 7px; border-radius:999px; background:#22c55e; border:1px solid #22c55e; color:#052e16; }
.btn-plan .plan-label { font-size:14px; font-weight:800; }
.btn-plan[aria-disabled="true"] { opacity:.6; pointer-events:none; }
.plan-actions { width:100%; display:flex; gap:10px; margin-top:10px; }
.plan-actions .btn { flex: 1 1 0; justify-content:center; }

/* помощь по оплате (когда банк не открывается внутри Telegram WebView) */
.pay-helper { margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(11,19,29,0.55); border:1px solid rgba(27,42,64,0.9); }
.pay-helper-text { color:#cfe1ff; font-size:12px; line-height:1.35; margin-bottom:8px; }

/* промокод в блоке тарифов */
.promo-block { margin-top:10px; padding:12px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid rgba(148,163,184,0.20); }
.promo-title { font-size:12px; letter-spacing:0.25px; text-transform:uppercase; color:#d6c2a3; margin-bottom:6px; font-weight:900; }
.promo-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.promo-input { flex:1; min-width: 180px; padding:10px 12px; border-radius:12px; border:1px solid rgba(148,163,184,0.25); background:rgba(255,255,255,0.03); color:#f7f1e7; outline:none; }
.promo-input:focus { border-color: rgba(212,134,58,0.65); box-shadow: 0 0 0 3px rgba(212,134,58,0.15); }

/* mobile polish (Telegram WebView) */
@media (max-width: 420px) {
  .wrap { margin: 18px auto; }

  /* больше воздуха между группами кнопок */
  .btn-row { gap:10px; }
  .plan-row { flex-direction:column; gap:10px; }
  .btn-plan { min-width: 100%; width: 100%; }
  .plan-actions { gap:12px; }
  .plan-actions .btn { min-height: 42px; }

  /* промокод: инпут на всю ширину, кнопки не липнут */
  .promo-row { gap:10px; }
  .promo-input { min-width: 100%; width: 100%; }
  #btn-promo-apply, #btn-promo-clear { flex: 1 1 auto; min-height: 40px; }

  /* читаемость скидки и цен */
  .btn-plan .plan-price { gap:8px; }
  .btn-plan .plan-price-old { opacity: .95; }
  .btn-plan .plan-badge { padding:3px 8px; }
}

/* ссылки внутри блоков */
.kv-row a { color:#ffd27a; text-decoration:none; font-weight:800; }
.kv-row a:hover { text-decoration:underline; }

/* прогресс-бар трафика */
.progress { position:relative; height:10px; border-radius:999px; background:#100c09; border:1px solid #3a2b1c; overflow:hidden; animation: progressSlideIn 0.4s ease both 0.4s; }
.progress-bar { height:100%; width:0%; background: linear-gradient(90deg, #dc143c, #cd853f, #d4863a); box-shadow: 0 0 20px rgba(212,134,58,0.4); transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); position:relative; }
.progress-bar:after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%); animation: shimmer 2s ease-in-out infinite; }

/* шаги */
.step-title { font-weight:900; color:#f7f1e7; letter-spacing:.4px; }
.step-title .num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:#b0382f; color:#fff; font-size:12px; font-weight:900; margin-right:8px; box-shadow: 0 0 0 2px rgba(176,56,47,.25); animation: pulse 2s ease-in-out infinite; }
.progress.infinite .progress-bar { width:30%; animation: progress-anim 1.8s ease-in-out infinite; }
@keyframes progress-anim { 0% { transform: translateX(-50%);} 50% { transform: translateX(20%);} 100% { transform: translateX(120%);} }

/* флаги и мелкие детали */
.flag { font-size:16px; margin-right:6px; }
.flag-icon { display:inline-block; width:22px; height:16px; border-radius:4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.flag-icon--ru { background: linear-gradient(to bottom, #ffffff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66% 100%); }
/* упрощённый US (английский), без emoji-шрифта */
.flag-icon--us {
  background:
    /* синие звёзды (упрощённо) */
    linear-gradient(#3c3b6e, #3c3b6e) left top / 45% 55% no-repeat,
    /* красные полосы */
    repeating-linear-gradient(
      to bottom,
      #b22234 0 10%,
      #ffffff 10% 20%
    );
}
.subtle { color:#9cb3d8; opacity:.85; }
.muted { color:#9cb3d8; font-size:12px; }

/* шаги и подсказки */
.hint { background:#0b131d; border:1px solid #1b2a40; border-radius:10px; padding:10px 12px; color:#cfe1ff; animation: hintSlideIn 0.5s ease both 0.1s; }

/* Reveal анимации для шагов */
#flow { opacity:0; transform: translateY(10px); transition: all 0.4s ease; }
#flow.show { opacity:1; transform: none; }
#flow .kv { transform: translateY(8px); opacity:0; transition: all 0.3s ease; }
#flow.show .kv { transform: none; opacity:1; transition-delay: 0.1s; }
#flow .btn-row { transform: translateY(8px); opacity:0; transition: all 0.3s ease; }
#flow.show .btn-row { transform: none; opacity:1; transition-delay: 0.2s; }

/* Keyframes */
@keyframes cardSlideIn { from { opacity:0; transform: translateY(20px) scale(0.95); } to { opacity:1; transform: none; } }
@keyframes kvSlideIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }
@keyframes rowSlideIn { from { opacity:0; transform: translateX(-8px); } to { opacity:1; transform: none; } }
@keyframes btnRowSlideIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: none; } }
@keyframes progressSlideIn { from { opacity:0; transform: scaleX(0); } to { opacity:1; transform: none; } }
@keyframes hintSlideIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform: none; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }