:root {
    /* Surfaces */
    --bg-color: #0a0a0c;
    --bg-elev: #101013;
    --card-bg: #141417;
    --card-bg-2: #16161a;
    --card-hover: #1a1a1f;
    --card-inset: #0c0c0e;

    /* Borders */
    --card-border: rgba(255, 255, 255, 0.07);
    --card-border-strong: rgba(255, 255, 255, 0.12);
    /* Поля ввода отдельно и заметно жирнее карточных границ: у поля рамка не
       декоративная, она сообщает «сюда можно писать». */
    --input-border: rgba(255, 255, 255, 0.22);

    /* Text */
    --text-primary: #f5f5f7;
    --text-secondary: #9aa0a6;
    /* Было #6a6f76 — около 3.7:1 на фоне карточки, ниже порога AA. #8b8b8b даёт ~5.5:1.
       Этим цветом набраны подписи, подсказки и плейсхолдеры — то есть текст, который
       читают в момент, когда что-то пошло не так. */
    --text-faint: #8b8b8b;

    /* Brand */
    --orange: #ff6b00;
    --orange-2: #ff8a2b;
    --orange-hover: #ff7d1a;
    --orange-ghost: rgba(255, 107, 0, 0.1);
    --orange-border: rgba(255, 107, 0, 0.5);

    /* Status */
    --danger: #ff4d4f;
    --success: #28c76f;
    --success-ghost: rgba(40, 199, 111, 0.12);

    /* Radii */
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
    /* Плотнее и короче прежнего 0 10px 30px -8px / .45: широкий ореол расползался
       за границы кнопки, и она читалась как расфокусированная. */
    --shadow-glow: 0 4px 14px -4px rgba(255, 107, 0, 0.35);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.6, 1);

    /* Высота шапки (28 + 32 + 44) и нижний отступ контейнера. Вынесены в переменные,
       потому что от них считается центрирование экрана входа, а меняются они
       на брейкпоинтах — литералы в двух местах разъехались бы. */
    --header-h: 104px;
    --container-pad-b: 80px;

    /* Внутренний отступ карточки входа. Отсюда же его берёт юридическая строка под
       карточкой: без этого она тянулась во всю ширину оболочки и её ссылки уходили
       наружу колонки, по которой выровнено всё содержимое карточки. */
    --login-card-pad: 36px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--bg-color);
    /* Два зеркальных пятна фирменного оранжевого — сверху справа и снизу слева.
       Одно пятно в углу выглядело случайным; пара читается как приём. Нижнее
       слабее: свет привычнее видеть падающим сверху. */
    background-image:
        radial-gradient(1100px 520px at 80% -10%, rgba(255, 107, 0, 0.08), transparent 60%),
        radial-gradient(1100px 520px at 20% 110%, rgba(255, 107, 0, 0.06), transparent 60%);
    background-attachment: fixed;
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2f; border-radius: 8px; border: 2px solid var(--bg-color); }
::-webkit-scrollbar-thumb:hover { background: #3a3a42; }

/* Layout */
.app-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px var(--container-pad-b);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0 44px;
}

/* До входа правая часть шапки пуста, а сам логотип живёт в .login-shell вместе
   с карточкой — иначе расстояние между ними зависело бы от высоты экрана. */
body.is-login .header { display: none; }

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.logo img {
    height: 32px;
    width: 32px;
    object-fit: cover;
    /* Исходник — квадратная картинка; скругляем по общей шкале радиусов. */
    border-radius: var(--radius-md);
    /* Свечения нет: единственный оранжевый акцент на экране — кнопка действия. */
}

.btn-logout {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s, transform .15s;
}
.btn-logout i, .btn-support-link i { font-size: 15px; }
/* Выход — деструктивное действие: краснеет на hover, чтобы не нажали по инерции. */
.btn-logout:hover {
    color: var(--danger);
    border-color: rgba(255, 77, 79, 0.4);
    background: rgba(255, 77, 79, 0.1);
}
.btn-logout:active { transform: scale(0.96); }

/* Typography & Utils */
h1 { font-size: 32px; font-weight: 700; letter-spacing: -1px; }
h2 { font-size: 20px; font-weight: 600; margin-bottom: 20px; }
.text-orange { color: var(--orange); }
.text-white { color: var(--text-primary); }
.text-muted { color: var(--text-secondary); }
.text-faint { color: var(--text-faint); }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
.text-center { text-align: center; }
.text-danger { color: var(--danger); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-100 { width: 100%; }
.flex-row { display: flex; }
.align-center { align-items: center; }
.tabular { font-variant-numeric: tabular-nums; }

/* ====== Views & entrance animation ====== */
.view { animation: viewFade .35s var(--ease-out) both; }
@keyframes viewFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

#dashboard-view.entered .welcome-heading,
#dashboard-view.entered .top-stats-grid > *,
#dashboard-view.entered .left-col,
#dashboard-view.entered .right-col {
    animation: fadeUp .55s var(--ease-out) both;
}
#dashboard-view.entered .welcome-heading            { animation-delay: 0s; }
#dashboard-view.entered .top-stats-grid > *:nth-child(1) { animation-delay: .07s; }
#dashboard-view.entered .top-stats-grid > *:nth-child(2) { animation-delay: .13s; }
#dashboard-view.entered .left-col                   { animation-delay: .20s; }
#dashboard-view.entered .right-col                  { animation-delay: .27s; }

/* Dashboard Layout */
.welcome-heading {
    margin-bottom: 32px;
    font-size: 34px;
    letter-spacing: -1.2px;
}

.top-stats-grid {
    display: grid;
    /* Было 1.1fr / 0.9fr — из-за этого разреженная карточка подписки растягивалась,
       а плотное автопродление жалось. Равные колонки убирают перекос. */
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.left-col, .right-col { display: flex; flex-direction: column; }

@media (max-width: 860px) {
    .top-stats-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* ====== Cards ====== */
.minimal-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 120px),
        var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}
/* subtle top highlight, "lit from above" */
.minimal-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    pointer-events: none;
}

.stat-card {
    display: flex;
    flex-direction: column;
}

.card-eyebrow,
.stat-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}

.stat-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
}
.stat-subtext {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ====== Subscription status card ====== */
.sub-card { justify-content: flex-start; }

/* Компактнее и спокойнее — крупная яркая пилюля «выбивалась» из карточки. */
.sub-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 14px 6px 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    transition: background .3s, border-color .3s, color .3s;
}
.sub-status-pill.is-active {
    background: var(--success-ghost);
    border-color: rgba(40, 199, 111, 0.35);
    color: var(--success);
}

.status-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
}
.sub-status-pill.is-active .status-dot {
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(40, 199, 111, 0.6);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(40, 199, 111, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(40, 199, 111, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 199, 111, 0); }
}

.sub-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sub-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--card-border);
}
.sub-meta-row:last-child { border-bottom: none; }
.sub-meta-label {
    font-size: 14px;
    color: var(--text-secondary);
}
.sub-meta-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ====== Auto-renewal card ====== */
#ar-status-text {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.ar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

/* ====== Section titles ====== */
.section-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.left-col > .section-title,
.right-col > .section-title {
    padding-left: 2px;
}

/* ====== Plan Tabs ====== */
.plan-tabs {
    display: flex;
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 5px;
    margin-bottom: 24px;
    gap: 4px;
}
.plan-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    /* Концентрика с контейнером .plan-tabs: 12 = 7 + 5 (padding). */
    border-radius: 7px;
    transition: color .25s, background .25s, box-shadow .25s, transform .12s;
}
.plan-tab:hover { color: var(--text-primary); }
.plan-tab:active { transform: scale(0.98); }
.plan-tab.active {
    background: linear-gradient(180deg, #232328, #1b1b1f);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tab-icon { color: var(--orange); display: inline-flex; }

/* ====== Period Block / Radio ====== */
.purchase-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.period-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.amnezia-radio-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    padding: 15px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .12s;
}
.amnezia-radio-row:hover {
    border-color: var(--card-border-strong);
}
.amnezia-radio-row:active { transform: scale(0.992); }
.amnezia-radio-row.active {
    border-color: var(--orange-border);
    background: var(--orange-ghost);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.25);
}
.amnezia-radio-left {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
    font-size: 15px;
}
/* faux radio bullet */
.amnezia-radio-left::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--card-border-strong);
    background: transparent;
    flex-shrink: 0;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.amnezia-radio-row.active .amnezia-radio-left::before {
    border-color: var(--orange);
    background: var(--orange);
    box-shadow: inset 0 0 0 4px var(--card-inset);
}
.amnezia-radio-left input[type="radio"] { display: none; }
.amnezia-radio-right {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ====== Quantity Selector ====== */
.qty-selector-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    /* Концентрика: внешний = внутренний + паддинг → 16 = 8 + 8. */
    border-radius: var(--radius-lg);
    padding: 8px;
}
.btn-qty-min {
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, transform .1s;
}
.btn-qty-min:hover { background: var(--card-hover); border-color: var(--card-border-strong); }
.btn-qty-min:active { transform: scale(0.96); }
.qty-display {
    font-weight: 600;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* ====== Form Checkbox ====== */
.custom-checkbox-row {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--card-border-strong);
    border-radius: 6px;
    margin-right: 12px;
    background: var(--card-inset);
    transition: background .2s, border-color .2s;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.custom-checkbox:checked {
    background: var(--orange);
    border-color: var(--orange);
}
.custom-checkbox:checked::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 11px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.checkbox-label {
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ====== Total Box ====== */
.total-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    margin-top: 28px;
    border-top: 1px solid var(--card-border);
}
.total-label {
    font-size: 15px;
    color: var(--text-secondary);
}
.total-value {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ====== Buttons ====== */
.btn-primary-large {
    width: 100%;
    background: linear-gradient(180deg, var(--orange-2), var(--orange));
    color: #fff;
    border: none;
    padding: 17px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform .15s var(--ease-spring), box-shadow .2s, filter .2s;
}
.btn-primary-large:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 38px -8px rgba(255, 107, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.btn-primary-large:active { transform: translateY(0) scale(0.97); }
.btn-primary-large:disabled { opacity: 0.7; cursor: progress; filter: none; box-shadow: none; }

.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 132px;
    background: var(--card-hover);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.btn-copy:hover { background: #232328; border-color: var(--card-border-strong); }
.btn-copy:active { transform: scale(0.97); }
.btn-copy.copied {
    background: var(--success-ghost);
    border-color: rgba(40, 199, 111, 0.4);
    color: var(--success);
}

.btn-text {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .2s;
}
.btn-text.text-danger { color: var(--danger); }
.btn-text.text-danger:hover { color: #ff7173; }

.btn-outline-minimal {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .1s;
}
.btn-outline-minimal:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--card-border-strong); }
.btn-outline-minimal:active { transform: scale(0.98); }

.btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid rgba(255, 77, 79, 0.3);
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .1s;
}
.btn-outline-danger:hover { background: rgba(255, 77, 79, 0.12); border-color: rgba(255, 77, 79, 0.5); }
.btn-outline-danger:active { transform: scale(0.98); }

/* ====== Key card ====== */
.key-container {
    display: flex;
    gap: 12px;
}
.key-input {
    flex: 1;
    min-width: 0;
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    transition: border-color .2s;
    text-overflow: ellipsis;
}
.key-input:focus { outline: none; border-color: var(--orange-border); color: var(--text-primary); }
.key-actions { display: flex; }

@media (max-width: 480px) {
    .key-container { flex-direction: column; }
    .btn-copy { width: 100%; padding: 12px; }
}

/* ====== Traffic Card ====== */
.traffic-card { padding: 24px; }
.traffic-label {
    text-transform: uppercase;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.6px;
}
.traffic-value {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.4px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #ffffff, #c9ccd1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.traffic-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.traffic-stat {
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.traffic-stat .traffic-label { margin-bottom: 4px; }
.traffic-stat-val {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.traffic-chart-container {
    width: 100%;
    height: 110px;
    position: relative;
    margin-top: 4px;
}
.traffic-svg { width: 100%; height: 100%; display: block; }

/* ====== Switch Toggle ====== */
.ar-toggle-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}
.switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer;
    inset: 0;
    background-color: #2a2a30;
    border: 1px solid var(--card-border);
    transition: background-color .35s var(--ease-out), border-color .35s;
    border-radius: 999px;
}
.slider:before {
    position: absolute; content: "";
    height: 19px; width: 19px; left: 3px; bottom: 3px;
    background-color: #9aa0a6;
    transition: transform .35s var(--ease-spring), background-color .35s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
input:checked + .slider {
    background-color: var(--orange);
    border-color: var(--orange);
}
input:checked + .slider:before { transform: translateX(19px); background-color: #fff; }
input:disabled + .slider { opacity: 0.45; cursor: not-allowed; }
.ar-toggle-label { font-size: 14px; color: var(--text-secondary); }

/* ====== Devices ====== */
.device-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.device-item {
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color .2s, background .2s, transform .12s;
    cursor: pointer;
}
.device-item:hover {
    border-color: var(--card-border-strong);
    background: var(--card-hover);
    transform: translateX(2px);
}
.device-anim { animation: deviceIn .45s var(--ease-out) both; }
@keyframes deviceIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.device-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.device-info h4 {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.device-info h4 i { color: var(--text-secondary); }
.device-actions {
    display: flex;
    align-items: center;
}
.device-actions .btn-ghost-danger {
    background: rgba(255, 77, 79, 0.0);
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color .2s, background .2s, opacity .2s, transform .2s;
}
.device-actions .btn-ghost-danger:hover {
    color: var(--danger);
    background: rgba(255, 77, 79, 0.12);
    border-color: rgba(255, 77, 79, 0.25);
}
/* reveal delete on hover (pointer devices only) */
@media (hover: hover) {
    .device-actions .btn-ghost-danger {
        opacity: 0;
        transform: translateX(6px);
    }
    .device-item:hover .btn-ghost-danger,
    .btn-ghost-danger:focus-visible {
        opacity: 1;
        transform: translateX(0);
    }
}
.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 28px 0;
}
.empty-state i { display: block; }

/* ====== Helpers ====== */
.badge {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 10px;
    font-weight: 600;
    border: 1px solid var(--card-border);
    font-variant-numeric: tabular-nums;
}

/* ====== Login ====== */

/* Экран входа занимает всю область под шапкой. Отрицательное поле снизу гасит нижний
   отступ контейнера: он нужен прокручиваемому дашборду, а здесь только смещал бы
   карточку вверх от настоящего центра. Итог по высоте ровно 100dvh — без прокрутки.
   Центрирование — через margin: auto у карточки, а не align-items: центрированный
   флекс-элемент обрезается сверху, когда не помещается. */
#login-view {
    display: flex;
    min-height: calc(100dvh - var(--header-h));
    margin-bottom: calc(-1 * var(--container-pad-b));
}
/* Оболочка держит карточку и правовую строку под ней одним блоком: центрируется
   она, а не карточка, иначе второй элемент ломал бы вертикальное центрирование.
   width: 100% обязателен — флекс-элемент по умолчанию сжимается по содержимому. */
.login-shell {
    margin: auto;
    width: 100%;
    max-width: 420px;
}
.login-shell .login-card { width: 100%; }

/* Шапка на экране входа скрыта, поэтому область под центрирование — вся высота окна. */
body.is-login #login-view { min-height: 100dvh; }

/* Логотип над карточкой. Расстояние фиксированное и не зависит от того,
   насколько высок экран. */
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
}
.login-brand img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.login-card { text-align: center; padding: 44px; margin: 0 auto; max-width: 420px; border-radius: var(--radius-xl); }

/* Карточка-форма: всё содержимое по левому краю. Заголовок по центру над формой,
   выключенной влево, читался как два разных блока в одной коробке.
   Модификатор нужен, потому что .login-card делят кабинет и страница поддержки —
   там верстка другая и центрирование уместно. */
/* Оба класса в селекторе: .minimal-card задаёт свои 20px в медиазапросе ниже по файлу
   и при равной специфичности перебил бы отступ карточки, а вместе с ним разъехалась
   бы и юрстрока под ней — она считает свой отступ от той же переменной. */
.login-card.login-card--form { text-align: left; padding: var(--login-card-pad); }
.login-card--form h1 { margin-bottom: 6px; }
.login-sub {
    color: var(--text-faint);
    font-size: 14px;
    margin-bottom: 24px;
}
/* Полноширинные текстовые кнопки тоже влево — по центру они спорили бы с формой.
   Оба класса в селекторе намеренно: правило .login-card .btn-text идёт ниже по файлу
   и при равной специфичности перебило бы это. */
.login-card.login-card--form .btn-text { justify-content: flex-start; padding-left: 0; }

/* Вторая форма — запасной способ, а не равноправное действие: оранжевая заливка
   у её кнопки спорила бы с основной «Войти» наверху за один и тот же взгляд. */
.other-methods .btn-primary {
    background: var(--card-hover);
    border: 1px solid var(--card-border-strong);
    box-shadow: none;
    color: var(--text-primary);
}
.other-methods .btn-primary:hover {
    filter: none;
    border-color: rgba(255, 255, 255, 0.2);
    background: #202026;
}
.fox-icon-login {
    font-size: 44px;
    color: var(--orange);
    margin-bottom: 22px;
    display: inline-flex;
    width: 84px; height: 84px;
    align-items: center; justify-content: center;
    border-radius: 24px;
    background: var(--orange-ghost);
    border: 1px solid var(--orange-border);
}
.tg-widget-box { min-height: 50px; display: flex; justify-content: center; }
.loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; }
.loader, .loader-big {
    border: 3px solid var(--card-border);
    border-radius: 50%;
    border-top: 3px solid var(--orange);
    animation: spin 1s linear infinite;
}
.loader { width: 30px; height: 30px; }
.loader-big { width: 50px; height: 50px; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Login Tabs */
.login-tabs {
    display: flex;
    background: var(--card-inset);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 5px;
    margin: 24px 0;
    gap: 4px;
}
.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    /* Концентрика с .login-tabs: 12 = 7 + 5. */
    border-radius: 7px;
    transition: color .2s, background .2s;
}
.tab-btn.active {
    background: linear-gradient(180deg, #232328, #1b1b1f);
    color: var(--orange);
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: viewFade .3s var(--ease-out); }

/* Email Login Form */
.input-group { text-align: left; margin-bottom: 20px; }
.input-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.input-group input {
    width: 100%;
    background: var(--card-inset);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.input-group input::placeholder {
    /* Браузерный плейсхолдер по умолчанию ещё и полупрозрачный — гасим opacity,
       иначе подсказка в поле почти не читается на тёмном фоне. */
    color: var(--text-faint);
    opacity: 1;
}
.input-group input:hover { border-color: rgba(255, 255, 255, 0.34); }
.input-group input:focus {
    /* Кольцо 2px сплошным оранжевым, а не полупрозрачной дымкой: фокус должен быть
       виден однозначно, в том числе при навигации с клавиатуры. */
    border-color: var(--orange);
    box-shadow: 0 0 0 2px var(--orange);
}
.btn-primary {
    width: 100%;
    background: linear-gradient(180deg, var(--orange-2), var(--orange));
    color: #fff;
    border: none;
    padding: 14px;
    /* На мобильном отступы давали 43px — одного пикселя не хватало до нормы касания. */
    min-height: 44px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    /* Без свечения: оранжевый на почти чёрном и так единственный акцент на экране,
       а ореол только размывал край кнопки. */
    transition: filter .2s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(0.96); }
.btn-primary:disabled { opacity: 0.7; cursor: progress; }
.login-card .btn-text {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    justify-content: center;
    /* Зона нажатия 44px: текст сам по себе даёт около 21px, а «Отправить ещё раз» и
       «Указать другую почту» — основные кнопки на шаге с кодом. Высоту добираем
       внутренним отступом, а не псевдоэлементом: кнопки идут стопкой, и растянутые
       невидимые области перекрыли бы друг друга. Шаг между ними 44 + 6 — не пересекаются. */
    min-height: 44px;
    padding: 11px 8px;
    margin-top: 6px;
}
.login-card .btn-text:hover { color: var(--text-primary); }

.find-creds-link {
    display: flex;
    text-decoration: none;
}
.find-creds-hint {
    color: var(--text-faint);
    font-size: 12px;
    margin-top: 10px;
}

/* ====== Вход по почте ====== */
.login-lead {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.login-lead b { color: var(--text-primary); }

/* Поле кода — главный элемент шага, поэтому крупное и моноширинное по цифрам.
   Одно поле, а не шесть ячеек: ячейки ломают вставку кода из буфера. */
/* Селектор с типом элемента намеренно: одноклассовый .otp-input проигрывал по
   специфичности общему правилу .input-group input и терял крупный кегль. */
.input-group input.otp-input {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 10px;
    /* Компенсация трекинга: с letter-spacing строка визуально уезжает влево на один интервал. */
    text-indent: 10px;
    font-variant-numeric: tabular-nums;
}

.typo-hint {
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary);
    margin: -8px 0 16px;
}
.typo-fix {
    background: none;
    border: none;
    font: inherit;
    color: var(--orange);
    cursor: pointer;
    text-decoration: underline;
    /* Кнопка стоит внутри строки между полем ввода и «Войти», поэтому до 44px её не
       растянуть — область налезла бы на соседние элементы. Берём максимум, который
       помещается: отступы увеличивают зону нажатия, отрицательные поля возвращают
       строку на место. */
    padding: 6px 4px;
    margin: -6px -4px;
    transition: color .2s;
}
.typo-fix:hover { color: var(--orange-2); }

.code-error {
    color: var(--danger);
    font-size: 13px;
    text-align: left;
    margin: -8px 0 16px;
}
.code-hint {
    color: var(--text-faint);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 18px;
}

/* Обратный отсчёт до повторной отправки тикает раз в секунду — без табличных цифр
   подпись дёргается по ширине на каждой смене разряда. */
#btn-resend { font-variant-numeric: tabular-nums; }

/* Смена шага входа: содержимое въезжает частями — почта, форма, вторичные действия.
   Это одноразовая последовательность, а не переключаемое состояние, поэтому keyframes
   здесь уместны. Атрибут навешивает JS и только при смене шага: на первой отрисовке
   экран и так появляется целиком (.view), дублировать анимацию незачем. */
.login-step[data-enter] > * {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
    animation: loginStepIn .32s var(--ease-out) forwards;
    /* Хвост — подсказки и вторичные кнопки — идёт одной группой. */
    animation-delay: 200ms;
}
.login-step[data-enter] > *:nth-child(1) { animation-delay: 0ms; }
.login-step[data-enter] > *:nth-child(2) { animation-delay: 100ms; }

@keyframes loginStepIn {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Правовые документы — под карточкой: до входа попасть в них больше неоткуда. */
.login-legal {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-faint);
    /* Тот же отступ, что и внутри карточки: строка лежит в .login-shell, то есть
       во всю её ширину, и без этого её ссылки выходили за колонку, по которой
       выровнены поля и кнопки. На мобильном разница была заметнее всего. */
    padding-inline: var(--login-card-pad);
    /* Строка живёт вне .login-card, под общее правило переносов не попадает —
       без этого «конфиденциальности» уезжает на отдельную строку одиноким словом. */
    text-wrap: pretty;
}
/* Зачин всегда на своей строке, ссылки — на следующей, через точку-разделитель.
   Одним абзацем перенос вставал где придётся: «и» в конце строки, ссылка сиротой. */
.login-legal > span:first-child { display: block; }
.login-legal .dot { margin: 0 4px; color: var(--text-faint); }
.login-legal a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.login-legal a:hover { color: var(--text-primary); }

/* Способы, требующие Telegram, — за чертой: они не работают там, где кабинет нужен. */
.other-methods { margin-top: 8px; }

/* Черта с подписью внутри: отдельная линия плюс отдельный заголовок делали одну работу дважды. */
.divider-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    font-size: 13px;
    color: var(--text-faint);
}
.divider-label::before,
.divider-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--card-border);
}

/* Способы показаны сразу, кнопками с иконками: строка серого текста не читалась
   как кликабельная и прятала за собой сам выбор. */
/* Ровно 50/50. minmax(0, 1fr), а не 1fr: колонка по умолчанию не уже своего
   содержимого, и более длинная подпись растянула бы свою половину. */
.method-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}
/* На телефонах «Логин и пароль» в половину ширины не влезает: подпись переносилась
   в две строки, кнопка вырастала вдвое против соседней и ряд разъезжался. Порог
   именно 480, а не «впритык»: при 390–420 подпись помещалась на грани и ломалась
   от любой смены шрифта. */
@media (max-width: 480px) {
    .method-buttons { grid-template-columns: minmax(0, 1fr); }
}
.method-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 12px;
    background: var(--card-inset);
    border: 1px solid var(--card-border-strong);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s, transform .15s;
}
/* Базовые правила для инлайновых иконок: на странице поддержки они приходят из
   support.css, а кабинет её не подключает — экран входа общий, значит и иконки
   должны работать на обеих. */
.method-btn .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.method-btn .ico-svg { width: 18px; height: 18px; display: block; }
/* Подпись в одну строку: при переносе иконка прижималась к левому краю, а текст
   уезжал вправо — пара распадалась, хотя justify-content стоит center. */
.method-btn span:not(.ico) { white-space: nowrap; }
.method-btn:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background: var(--card-hover);
}
.method-btn:active { transform: scale(0.96); }
.method-btn.active {
    color: var(--orange);
    border-color: var(--orange-border);
    background: var(--orange-ghost);
}

/* Раскрытие — переход, а не keyframes: по кнопке жмут туда-обратно, и анимация обязана
   разворачиваться с полпути, а не начинаться заново. grid-template-rows от 0fr к 1fr
   даёт это без фиксированной высоты — содержимое блока заранее неизвестно. */
.other-methods-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition-property: grid-template-rows, opacity;
    transition-duration: .3s;
    transition-timing-function: var(--ease-out);
}
.other-methods-collapse.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.other-methods-inner { overflow: hidden; }

/* SweetAlert overrides */
.swal2-popup.swal2-toast { background: var(--card-bg) !important; color: #fff !important; border: 1px solid var(--card-border) !important; }
.swal2-popup { background: var(--card-bg) !important; color: #fff !important; border: 1px solid var(--card-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
.swal2-title { color: #fff !important; }
.swal2-html-container { color: var(--text-secondary) !important; }
.swal2-confirm { background: linear-gradient(180deg, var(--orange-2), var(--orange)) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-glow) !important; }
.swal2-cancel { background: #232328 !important; border-radius: var(--radius-sm) !important; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .app-container { padding: 0 16px var(--container-pad-b); }
    .header { padding: 22px 0 28px; }
    :root { --header-h: 82px; --container-pad-b: 48px; } /* 22 + 32 + 28 */
    h1 { font-size: 28px; }
    .welcome-heading { font-size: 28px; }
    h2 { font-size: 18px; }
    .traffic-stats { gap: 10px; }
    .minimal-card { padding: 20px; }
    /* Карточка входа и юрстрока под ней тянут отступ отсюда — правятся вместе. */
    :root { --login-card-pad: 20px; }

    /* В колонку карточки обе ссылки в одну строку не встают, и точка-разделитель
       оставалась висеть в конце строки. Разносим ссылки по строкам, точка не нужна. */
    .login-legal a { display: block; }
    .login-legal .dot { display: none; }
    .traffic-value { font-size: 34px; }
}

@media (max-width: 480px) {
    .app-container { padding: 0 12px var(--container-pad-b); }
    .header { padding: 16px 0 20px; }
    :root { --header-h: 68px; --container-pad-b: 32px; } /* 16 + 32 + 20 */
    .logo { font-size: 18px; }
    .btn-logout { padding: 0 14px; font-size: 13px; }
    h1 { font-size: 24px; }
    .welcome-heading { font-size: 25px; }
    .top-stats-grid { grid-template-columns: 1fr; gap: 16px; }
    .dashboard-grid { grid-template-columns: 1fr; gap: 16px; }
    .stat-value { font-size: 22px; }
    .traffic-stats { grid-template-columns: 1fr; }
    .amnezia-radio-row { padding: 13px 15px; }
    .device-item { padding: 14px 16px; }
    .ar-toggle-box { flex-wrap: wrap; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─────────────── Поддержка: ссылка в шапке и плавающая кнопка ─────────────── */

.header-right { display: flex; align-items: center; gap: 10px; }

.btn-support-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Высота совпадает с .btn-logout — иначе кнопки шапки выглядят разнокалиберными. */
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
                background 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}

.btn-support-link:hover {
    color: var(--orange);
    border-color: var(--orange-border);
    background: var(--orange-ghost);
}
.btn-support-link:active { transform: scale(0.96); }

.support-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    font-size: 21px;
    text-decoration: none;
    box-shadow: var(--shadow-glow);
    z-index: 50;
    transition: transform 0.18s var(--ease-spring);
}

.support-fab:hover { transform: scale(1.07); }
.support-fab:active { transform: scale(0.96); }

.support-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg-color);
}

@media (max-width: 640px) {
    .btn-support-link span { display: none; }
    .btn-support-link { padding: 0 12px; }
    .support-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════
   Полировка по make-interfaces-feel-better
   ═══════════════════════════════════════════════════════════ */

/* ── Типографика ──
   balance выравнивает строки в коротких заголовках (не даёт «сиротам» висеть),
   pretty убирает висячее слово на последней строке в тексте. */
.welcome-heading,
h1, h2,
.section-title,
.stat-value,
.traffic-value,
#ar-status-text {
    text-wrap: balance;
}
.stat-subtext,
.checkbox-label,
.sub-meta-label,
.empty-state,
.login-card p,
.find-creds-hint {
    text-wrap: pretty;
}

/* ── Табличные цифры ──
   Значения статуса (дата окончания) выровнены по разряду. */
.sub-meta-value { font-variant-numeric: tabular-nums; }

/* ── Минимальная зона нажатия ──
   Кнопка удаления устройства видимо 34px — дотягиваем кликабельную область до 44px
   псевдоэлементом, не меняя внешний размер. Иконка внутри строки-устройства, поэтому
   зоны не конфликтуют (вложены, а не пересекаются). */
.device-actions .btn-ghost-danger { position: relative; }
.device-actions .btn-ghost-danger::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ── Компоновка верхних карточек ── */
/* Точка статуса под уменьшённую пилюлю. */
.status-dot { width: 8px; height: 8px; }
/* Автопродление: кнопка прижата к низу — карточки одной высоты выглядят ровно. */
.stat-card { min-height: 100%; }
.ar-toggle-box { margin-top: 18px; }

/* ── Докупка устройств ── */
.addon-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
}
.addon-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}
.addon-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 3px;
    text-wrap: pretty;
    max-width: 46ch;
}
.addon-controls {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 16px;
}
.addon-qty {
    flex: 1;
    min-width: 0;
    /* тот же концентрический контейнер, что и в покупке: 16 = 8 + 8 */
    padding: 8px;
}
.addon-qty .qty-display { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Кнопка-оплата рядом со степпером: не на всю ширину, две строки (действие + цена). */
.btn-primary-large.addon-pay {
    width: auto;
    flex: 0 0 auto;
    min-width: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 22px;
    line-height: 1.15;
}
.addon-pay-label { font-size: 15px; }
.addon-pay-price { font-size: 13px; font-weight: 600; opacity: 0.92; font-variant-numeric: tabular-nums; }
.addon-hint {
    font-size: 12.5px;
    color: var(--text-faint);
    margin-top: 12px;
    text-wrap: pretty;
}

@media (max-width: 480px) {
    .addon-controls { flex-direction: column; }
    .btn-primary-large.addon-pay { width: 100%; flex-direction: row; gap: 8px; }
}