:root{ --stroke: rgba(2,6,23,.08); --ring:#2F6FE4; --ring2:#6A85FF }
.shadow-soft{ box-shadow:0 14px 38px -14px rgba(2,6,23,.15) }
.card{ background:#fff; border:1px solid var(--stroke); border-radius:18px; padding:16px; box-shadow:0 12px 30px -14px rgba(2,6,23,.08) }
.hero{ background:linear-gradient(180deg,#F1F5FF 0%,#F6F8FD 100%); border:1px solid var(--stroke); border-radius:18px; padding:18px }
.stat-tile{ background:linear-gradient(180deg,#F7F9FF 0%,#FFFFFF 100%); border:1px solid var(--stroke); border-radius:14px; padding:14px }
.stat-caption{ font-size:12px; color:#64748B }
.stat-value{ font-size:22px; font-weight:800; letter-spacing:.2px }
.info-tile{ background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:12px 14px }
.ghost-tile{ background:#fff; border:1px dashed var(--stroke); border-radius:14px; padding:12px 14px; transition:background-color .2s, box-shadow .2s }
.ghost-tile:hover{ background:#F8FAFF; box-shadow:0 10px 26px -14px rgba(2,6,23,.08) }
.chip-success{ display:inline-flex; align-items:center; gap:.375rem; background:#E8F7ED; color:#1E8E3E; border:1px solid rgba(16,185,129,.25); font-size:12px; font-weight:600; padding:.25rem .5rem; border-radius:999px }
.chip-success::before{ content:""; width:.5rem; height:.5rem; border-radius:999px; background:#10B981 }
.chip-neutral{ display:inline-flex; align-items:center; gap:.375rem; background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; font-size:12px; font-weight:600; padding:.25rem .5rem; border-radius:999px }
.chip-muted{ display:inline-flex; align-items:center; background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; font-size:12px; font-weight:600; padding:.1rem .5rem; border-radius:999px }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; white-space:nowrap }
.section-title{ font-size:1.05rem; font-weight:700; line-height:1 }

.plan-card{ position:relative; background:#fff; border:1.5px solid #C7D7FE; border-radius:18px; padding:16px; box-shadow:0 14px 34px -18px rgba(37,99,235,.25) }
.plan-card.basic{ border-color:#E2E8F0; box-shadow:0 14px 34px -18px rgba(2,6,23,.1) }
.plan-head{ font-weight:700 }
.plan-volume{ font-size:22px; font-weight:800; color:#2563EB }
.plan-days{ display:flex; align-items:center; gap:.375rem; color:#64748B; font-size:.92rem }
.plan-price{ font-size:28px; font-weight:800; background:linear-gradient(90deg,#2563EB,#6A85FF); -webkit-background-clip:text; background-clip:text; color:transparent }
.ul-check{ margin-top:.5rem }
.ul-check li{ display:flex; gap:.5rem; align-items:flex-start; font-size:.95rem; color:#334155 }
.ul-check li svg{ margin-top:.2rem }
.corner-badge{ position:absolute; right:10px; top:-10px; padding:.25rem .6rem; background:linear-gradient(90deg,#2563EB,#6A85FF); color:#fff; font-weight:700; font-size:11px; border-radius:999px; box-shadow:0 10px 26px -14px rgba(37,99,235,.5) }

.btn-primary{ display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(90deg,#2F6FE4 0%, #6A85FF 100%); color:#fff; padding:.8rem 1rem; border-radius:12px; font-weight:700; letter-spacing:.2px; box-shadow:0 14px 32px -12px rgba(47,111,228,.4); transition:transform .08s, filter .2s; width:100% }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-primary:active{ transform:translateY(1px) }

.btn-start{
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    background:#D95046; color:#fff; font-weight:800; letter-spacing:.2px;
    padding:.85rem 1.4rem; border:none; border-radius:26px;
    box-shadow:0 16px 36px -18px rgba(217,80,70,.55);
    min-width:220px; max-width:100%; margin:0 auto;
    transition:transform .08s, filter .2s
}
.btn-start:hover{ filter:brightness(1.03) }
.btn-start:active{ transform:translateY(1px) }
.btn-start svg{ width:18px; height:18px; display:block }

.step{ display:flex; align-items:center; gap:.75rem; background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:.9rem 1rem }
.step-num{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; color:#fff; font-weight:800; background:linear-gradient(180deg,#2563EB,#6A85FF) }

.support-card{ background:linear-gradient(180deg,#EFF4FF 0%, #F7F9FF 100%); border:1px solid var(--stroke); border-radius:18px; padding:18px; box-shadow:0 12px 30px -14px rgba(2,6,23,.08) }
.support-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(180deg,#E9F2FF 0%, #EDEBFF 100%); color:#2563EB; box-shadow:inset 0 0 0 1px rgba(37,99,235,.18) }

.hero-center{ text-align:center; background:#EEF3FA; border:1px solid var(--stroke); border-radius:18px; padding:20px 16px 18px; box-shadow:0 12px 30px -16px rgba(2,6,23,.08) }
.hero-title-lg{ font-size:1.35rem; line-height:1.25; font-weight:800; letter-spacing:.2px; margin:0 }
.hero-sub-lg{ margin:.5rem auto 0; max-width:40ch; font-size:.95rem; color:#6B7280 }

.pillv{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; padding:14px 10px; border-radius:16px; background:#fff; border:1px solid #E6ECF6; box-shadow:0 10px 26px -18px rgba(2,6,23,.12) }
.pillv:hover{ transform:translateY(-1px); border-color:#d9e4f7; box-shadow:0 16px 34px -18px rgba(47,111,228,.22) }
.pillv-icon{ line-height:0; color:#2F6FE4 }
.pillv-icon svg{ display:block; stroke:currentColor }
.pillv-full{ width:100% }
.pillv-label{ white-space:normal; text-align:center; line-height:1.2 }

.select-wrap{ position:relative }
.select-wrap::after{ content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #64748b; pointer-events:none }
.select-clean{ appearance:none; -webkit-appearance:none; -moz-appearance:none; width:100%; border:1px solid var(--stroke); border-radius:0.75rem; padding:0.5rem 2.25rem 0.5rem 0.75rem; outline:none; background:#fff }
.select-clean:disabled{ background:#f8fafc; color:#94a3b8 }
.select-clean:focus{ box-shadow:0 0 0 6px rgba(47,111,228,.12); border-color:#cfe0ff }

.chips-scroll{ position:relative; display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; scrollbar-width:none }
.chips-scroll::-webkit-scrollbar{ display:none; height:0 }
.country-chip{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--stroke); border-radius:999px; padding:.5rem .9rem; font-weight:700; white-space:nowrap; transition:transform .06s, box-shadow .2s, border-color .2s }
.country-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -18px rgba(2,6,23,.18); border-color:#d9e4f7 }
.country-chip[aria-pressed="true"]{ background:linear-gradient(90deg,#2F6FE4, #6A85FF); color:#fff; border-color:transparent }

/* [iter47 Phase 4 / Task 5.3 — 2026-04-29] Vertical country list card (replaces .country-chip horizontal pills). */
.country-list-card{ display:flex; align-items:center; gap:.85rem; width:100%; background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:.85rem 1rem; text-align:left; cursor:pointer; transition:transform .06s, box-shadow .2s, border-color .2s }
.country-list-card:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -18px rgba(2,6,23,.18); border-color:#d9e4f7 }
.country-list-card:active{ transform:translateY(0) }
.country-list-emoji{ font-size:1.75rem; line-height:1; flex-shrink:0 }
.country-list-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem }
.country-list-name{ font-weight:700; color:#0f172a; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.country-list-subtitle{ font-size:.72rem; color:#64748b; font-weight:500 }
.country-list-gb{ font-size:.78rem; color:#64748b; flex-shrink:0; white-space:nowrap }
.country-list-chevron{ color:#94a3b8; flex-shrink:0 }

/* [iter47 Phase 5 hotfix — 2026-04-30] Promo pill in country list — visible cue
   that there's an active campaign on this country, even before user opens it */
.country-list-card.has-promo{ border-color:#cfe0ff; box-shadow:0 4px 14px -8px rgba(124,58,237,.25) }
.country-list-promo-pill{ display:inline-block; margin-left:.4rem; padding:.1rem .45rem; border-radius:999px; background:linear-gradient(90deg,#7C3AED,#A855F7); color:#fff; font-size:.65rem; font-weight:700; vertical-align:middle; line-height:1.4; letter-spacing:.02em; white-space:nowrap }

/* Sticky banner: hover hint that it's clickable */
.promo-sticky-banner:hover{ filter:brightness(1.05) }
.promo-sticky-banner:active{ filter:brightness(.95) }

/* [iter47 Phase 4 UAT-v3 — 2026-04-30] Tariff card redesign per Tanya screenshot.
   v3.2 (2026-04-30 evening) — Android render fix: tightened paddings/gaps/font-sizes
   so meta row "5 GB | 📅 14 дней" stays on a single line on narrow viewports
   (Telegram Mini App on Android ≈370-390px wide). On v3.1 the meta wrapped to 3
   separate lines on Android, which inflated card height by ~50px. */
.plan-card-v3{ position:relative; background:#fff; border:1px solid var(--stroke); border-radius:18px; padding:.8rem .95rem; transition:box-shadow .2s, border-color .2s, transform .06s }
.plan-card-v3.is-hit{ border-color:#cfe0ff; box-shadow:0 6px 18px -10px rgba(47,111,228,.18) }
.plan-card-v3:hover{ box-shadow:0 12px 28px -20px rgba(2,6,23,.18) }
.plan-card-v3:active{ transform:scale(.99) }

/* Sticker badges: overlap top-left, slightly above card border */
.plan-badges{ position:absolute; top:-10px; left:12px; display:flex; gap:.35rem; z-index:1 }
.plan-badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.22rem .55rem; border-radius:999px; font-size:.7rem; font-weight:700; line-height:1; white-space:nowrap; box-shadow:0 4px 12px -4px rgba(2,6,23,.15) }
.plan-badge-hit{ background:#DBEAFE; color:#1e40af }
.plan-badge-best{ background:linear-gradient(90deg,#7C3AED,#A855F7); color:#fff }

.plan-card-body{ display:flex; align-items:center; gap:.65rem }

/* Tinted icon block — 48x48 squircle (was 56 in v3.1), variant colors per plan index */
.plan-icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex-shrink:0 }
.plan-icon svg{ width:24px; height:24px }
.plan-icon.v-mint{ background:#D1FAF1; color:#0d9488 }
.plan-icon.v-indigo{ background:#E0E7FF; color:#4F46E5 }
.plan-icon.v-peach{ background:#FFE4D6; color:#EA580C }
.plan-icon.v-sky{ background:#DBEAFE; color:#1d4ed8 }
.plan-icon.v-coral{ background:#FFE2DD; color:#DC2626 }

.plan-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.08rem }
.plan-label{ font-size:.68rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.04em; line-height:1.1 }
/* meta: GB + days on a single row, flex-wrap as fallback for very narrow screens */
.plan-meta{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; line-height:1.1; min-width:0 }
.plan-gb{ font-size:1.3rem; font-weight:800; color:#0f172a; flex-shrink:0 }
.plan-days{ display:inline-flex; align-items:center; gap:.2rem; font-size:.75rem; color:#64748b; font-weight:500; flex-shrink:0 }
.plan-days svg{ flex-shrink:0; opacity:.7 }
.plan-price{ font-size:.92rem; font-weight:600; color:#475569; line-height:1.2 }

/* CTA button — compact gradient pill (smaller padding/font than v3.1 to widen the info column) */
.plan-cta{ display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .85rem; border-radius:999px; background:linear-gradient(90deg,#2F6FE4,#6A85FF); color:#fff; font-weight:700; font-size:.85rem; flex-shrink:0; transition:transform .06s, box-shadow .2s; cursor:pointer; border:none }
.plan-cta:hover{ box-shadow:0 8px 20px -8px rgba(47,111,228,.5) }
.plan-cta:active{ transform:scale(.97) }
.plan-cta-arrow{ flex-shrink:0; width:14px; height:14px }

/* [iter47 Phase 5 / Task 6.4 — 2026-04-30] Strike-through price for active promo */
.plan-price-old{ text-decoration:line-through; color:#94a3b8; font-weight:500; margin-right:.4rem }
.plan-price-new{ color:#dc2626; font-weight:800 }

/* Mobile-tighter: stack CTA below info on very narrow screens (<340px) */
@media (max-width: 339px) {
    .plan-card-body{ flex-wrap:wrap }
    .plan-cta{ width:100%; justify-content:center; margin-top:.4rem }
    .plan-cta-arrow{ margin-left:auto }
}

/* [iter47 hotfix 2026-05-07 — Tanya UAT] Desktop layout: cap card-list width.
   On wide screens the cards used to stretch to viewport width, leaving a huge
   empty gap between the price and the "В корзину" CTA (Tanya screenshot 2026-05-07).
   Constrain both the country list (main screen) and the tariff list (overlay)
   to ~640px centered so info+CTA visually adjacent. Mobile (<768px) untouched. */
@media (min-width: 768px) {
    #country-list,
    #cts-plans {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* [iter47 hotfix 2026-05-07 v2 — Roman UAT] Compact tariff cards on desktop:
       collapse from 3-row (label / GB+days / price) + 48px icon down to a single-row
       layout matching country-card density (icon 32 + inline GB·days·price + CTA).
       Mobile v3.2 (Tanya-approved bigger layout) untouched. */
    .plan-card-v3 {
        padding: .85rem 1rem;
    }
    .plan-card-body {
        gap: .85rem;
    }
    .plan-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }
    .plan-icon svg {
        width: 18px;
        height: 18px;
    }
    .plan-info {
        flex-direction: row;
        align-items: baseline;
        gap: .5rem;
        flex-wrap: wrap;
    }
    .plan-label {
        display: none;  /* drop decorative tier name on desktop — GB is the real identifier */
    }
    .plan-meta {
        gap: .4rem;
        flex-wrap: nowrap;
    }
    .plan-gb {
        font-size: 1rem;  /* down from 1.3rem — match country-name visual weight */
    }
    .plan-days {
        font-size: .78rem;  /* match country-list-gb */
    }
    .plan-price {
        font-size: .85rem;
        font-weight: 700;
        color: #0f172a;  /* darker — promote to inline-row primary info */
    }
    .plan-cta {
        padding: .4rem .7rem;
        font-size: .78rem;
    }
}

/* [iter47 Phase 5 / Task 6.5 — 2026-04-30] Sticky promo countdown banner.
   Fixed at top of body, above header. Shown only when there's an active public
   campaign with timer_mode != 'none' (managed by app.js startPromoTimer). */
/* [iter47 hotfix 2026-05-08 — Tanya UAT] Banner v2:
   - Padding x1.5 vertically (.55rem → .85rem) for stronger visual weight
   - Purple gradient with right-side accent (was blue→purple, now violet→bright-sirenevyi)
   - Counter plate: white-solid bg + dark purple text for high contrast on lighter right edge */
.promo-sticky-banner{ position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.85rem 1rem; background:linear-gradient(90deg,#7C3AED,#A855F7); color:#fff; font-size:.82rem; font-weight:600; box-shadow:0 2px 8px -2px rgba(2,6,23,.2) }
.promo-sticky-banner.hidden{ display:none }
.promo-sticky-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.promo-sticky-countdown{ display:inline-flex; align-items:center; gap:.35rem; flex-shrink:0; font-variant-numeric:tabular-nums }
.promo-sticky-label{ opacity:.85; font-weight:500 }
.promo-sticky-time{ font-weight:800; font-size:.88rem; padding:.15rem .5rem; background:rgba(255,255,255,.95); color:#5B21B6; border-radius:8px }

.faq-item{ background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:14px }
.faq-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:600 }
.faq-item > summary::-webkit-details-marker{ display:none }
.faq-chevron{ transition:transform .2s ease; opacity:.75 }
.faq-item[open] .faq-chevron{ transform:rotate(180deg); opacity:1 }
.faq-a{ margin-top:.5rem; color:#475569; line-height:1.45 }

.chips-dots{ display:flex; justify-content:center; gap:8px; margin-top:8px; padding:6px 0 }
.chips-dots .dot{ width:8px; height:8px; border-radius:999px; background:#cbd5e1; border:1px solid #94a3b8; opacity:.95; transition:transform .12s ease, background-color .18s ease, border-color .18s ease }
.chips-dots .dot.active{ background:#2F6FE4; border-color:#2F6FE4; transform:scale(1.15) }

.action-btn{
    width:100%;
    min-height:44px;
    padding:.75rem 1rem;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;

    background:#fff;
    border:1px solid var(--stroke);
    border-radius:14px;

    font-weight:700;
    color:#0f172a;

    box-shadow:0 10px 26px -18px rgba(2,6,23,.10);
    transition:transform .08s, filter .2s, background-color .2s;
}

.action-btn:hover{ background:#F8FAFF }
.action-btn:active{ transform:translateY(1px) }

.action-btn__icon{ flex:0 0 auto; line-height:0; color:#2F6FE4 }

.action-btn__text{
    text-align:center;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.2;
}

.btn-danger-ghost{
    width:100%;
    min-height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.75rem 1rem;
    border-radius:14px;

    background:transparent;
    border:1px solid rgba(239,68,68,.28);
    color:#ef4444;

    font-weight:800;
    letter-spacing:.15px;

    transition:transform .08s, background-color .2s, filter .2s, box-shadow .2s, border-color .2s;
}

.btn-danger-ghost:hover{
    background:rgba(239,68,68,.06);
    border-color:rgba(239,68,68,.38);
    box-shadow:0 10px 26px -18px rgba(239,68,68,.25);
}

.btn-danger-ghost:active{ transform:translateY(1px) }

.btn-danger-ghost:disabled{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
}

.btn-danger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;

    background:linear-gradient(90deg,#ef4444 0%, #f97316 100%);
    color:#fff;

    padding:.8rem 1rem;
    border-radius:12px;

    font-weight:800;
    letter-spacing:.2px;

    box-shadow:0 14px 32px -12px rgba(239,68,68,.35);
    transition:transform .08s, filter .2s;
}

.btn-danger:hover{ filter:brightness(1.05) }
.btn-danger:active{ transform:translateY(1px) }
.btn-danger:disabled{ opacity:.6; cursor:not-allowed; }

/* ── Multi-package card styles ── */
.country-section{ border-top:1px solid rgba(2,6,23,.06); padding-top:12px; margin-top:12px }
.country-section:first-child{ border-top:none; padding-top:0; margin-top:0 }
.country-label{ font-size:11px; font-weight:700; text-transform:uppercase; color:#64748B; letter-spacing:.5px }

.pkg-card{ background:linear-gradient(135deg,rgba(47,111,228,.06) 0%,rgba(123,44,191,.04) 100%); border:1px solid rgba(47,111,228,.15); border-radius:14px; padding:12px }
.pkg-card-pending{ background:#F8FAFC; border:1px solid #E2E8F0; border-radius:14px; padding:10px; opacity:.85 }

.pkg-header{ display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap }
.pkg-label{ font-size:.875rem; font-weight:700; color:#1E293B }
.pkg-refresh{ background:none; border:none; padding:2px; cursor:pointer; color:#64748B; display:inline-flex }
.pkg-refresh:hover{ color:#2F6FE4 }

.badge-active{ display:inline-flex; align-items:center; gap:4px; background:#ECFDF5; color:#047857; border:1px solid rgba(16,185,129,.25); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }
.badge-active::before{ content:""; width:6px; height:6px; border-radius:999px; background:#10B981 }
.badge-pending{ display:inline-flex; align-items:center; gap:4px; background:#FFFBEB; color:#B45309; border:1px solid rgba(251,191,36,.3); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }
.badge-awaiting{ display:inline-flex; align-items:center; gap:4px; background:#EFF6FF; color:#1D4ED8; border:1px solid rgba(59,130,246,.3); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }
.badge-upcoming{ display:inline-flex; align-items:center; gap:4px; background:#ECFDF5; color:#047857; border:1px solid rgba(16,185,129,.25); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }

.progress-row{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#64748B; margin-top:8px }
.progress-value{ font-weight:600; color:#1E293B }
.progress-track{ width:100%; height:10px; background:#E2E8F0; border-radius:999px; overflow:hidden; margin-top:3px }
.progress-fill-green{ height:100%; background:#10B981; border-radius:999px; transition:width .4s ease }
.progress-fill-amber{ height:100%; background:#FBBF24; border-radius:999px; transition:width .4s ease }
.progress-fill-rose{ height:100%; background:#F43F5E; border-radius:999px; transition:width .4s ease }
.progress-track-sm{ height:8px }

.btn-activate{ display:inline-flex; align-items:center; justify-content:center; gap:4px; background:#EF4444; color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border:none; border-radius:999px; cursor:pointer; transition:filter .15s }
.btn-activate:hover{ filter:brightness(1.1) }
.btn-add-pkg{ display:inline-flex; align-items:center; gap:4px; background:rgba(47,111,228,.08); color:#2F6FE4; font-size:12px; font-weight:600; padding:6px 12px; border:none; border-radius:999px; cursor:pointer; transition:background .15s }
.btn-add-pkg:hover{ background:rgba(47,111,228,.15) }