/*
 * UI-компоненты Фономатики (docs/design_handoff_fonomatika/README.md).
 * Кнопки, формы, бейджи, PlaylistCard, TrackRow, Category cover card.
 */

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-control);
    background: var(--accent); color: var(--accent-contrast);
    font-size: var(--fs-body); font-weight: 700; line-height: 1;
    transition: filter var(--transition), background var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.95); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }

.btn--outline {
    background: transparent; border-color: var(--border-strong); color: var(--text);
}
.btn--outline:hover { background: var(--surface-hover); filter: none; }

.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-hover); filter: none; }

.btn--sm { padding: 7px 12px; font-size: var(--fs-meta); }
.btn--block { display: flex; width: 100%; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Круглая иконочная кнопка */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: transparent; border: none; color: var(--text-secondary);
    transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn--filled { background: var(--accent); color: var(--accent-contrast); }
.icon-btn--filled:hover { background: var(--accent); filter: brightness(1.08); color: var(--accent-contrast); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.is-active { color: var(--accent); }

/* ---------- Формы ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-secondary); }
.input, .textarea {
    width: 100%; padding: 11px 14px;
    background: var(--input-bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    font: inherit; font-size: var(--fs-body);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 110px; resize: vertical; }
.textarea--compact { min-height: 54px; }

/* ---------- Бейджи ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: var(--radius-pill);
    font-size: var(--fs-small); font-weight: 700;
    color: var(--accent); background: var(--accent-soft);
}
.badge--success { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.badge--warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.badge--danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }

/* ---------- Обложка-плейсхолдер (CSS-градиент по hue) ---------- */
.cover {
    position: relative; border-radius: var(--radius-card); overflow: hidden;
    background: linear-gradient(135deg,
        hsl(var(--hue, 240) 55% 52%), hsl(calc(var(--hue, 240) + 40) 60% 42%));
    aspect-ratio: 1 / 1;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- PlaylistCard (точно по PlaylistCard.dc.html) ---------- */
.playlist-card {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden; cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.playlist-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}
.playlist-card__cover {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, hsl(var(--hue, 220) 60% 40%), hsl(calc(var(--hue, 220) + 42) 55% 22%));
}
.playlist-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.playlist-card__heart {
    position: absolute; top: 10px; right: 10px;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.4); color: #fff; border: none;
    backdrop-filter: blur(6px); cursor: pointer;
    transition: background var(--transition), transform var(--transition), color var(--transition);
}
.playlist-card__heart svg { width: 20px; height: 20px; }
.playlist-card__heart:hover { background: rgba(0, 0, 0, 0.62); transform: scale(1.08); }
.playlist-card__heart.is-active { color: var(--accent); background: rgba(0, 0, 0, 0.55); }
.playlist-card__heart.is-active:hover { color: var(--accent); }
/* Радио раздела на обложке — подсветка акцентом при наведении */
.playlist-card__radio { transition: background var(--transition), transform var(--transition); }
.playlist-card__radio:hover { background: var(--accent); transform: scale(1.08); }
.playlist-card__tier {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(6px); font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.04em; color: #fff; text-transform: uppercase;
}
.playlist-card__body { padding: 14px 16px 16px; }
.playlist-card__title {
    font-size: 15px; font-weight: 700; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.playlist-card__category {
    font-size: 13px; color: var(--text-secondary); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.playlist-card__meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.playlist-card__desc {
    font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

/* Плитка жанра (блок «Жанры» на главной): тот же грид/размер, что карточка
   плейлиста, но целиком цветная плитка с названием по центру и переносами. */
.genre-card {
    aspect-ratio: 1 / 1; width: 100%;
    border-radius: 16px; border: 1px solid var(--border);
    background: linear-gradient(135deg, hsl(var(--hue, 220) 60% 40%), hsl(calc(var(--hue, 220) + 42) 55% 22%));
    color: #fff; cursor: pointer; padding: 16px; font: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.genre-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22); }
.genre-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.genre-card__name {
    font-size: 16px; font-weight: 700; line-height: 1.25;
    overflow-wrap: break-word; word-break: break-word;
    /* длинные/составные названия переносятся; максимум 4 строки, дальше — многоточие */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- TrackRow (точно по TrackRow.dc.html) ---------- */
.track-row {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 8px; border-radius: 10px; cursor: pointer;
    transition: background var(--transition);
}
.track-row:hover { background: var(--bg-hover); }
.track-row__index {
    width: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--text-muted);
}
.track-row__eq { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.track-row__eq i { width: 3px; border-radius: 1px; background: var(--accent); display: block; }
.track-row__eq i:nth-child(1) { height: 8px; animation: eqA 0.9s ease-in-out infinite; }
.track-row__eq i:nth-child(2) { height: 13px; animation: eqB 0.9s ease-in-out infinite; }
.track-row__eq i:nth-child(3) { height: 6px; animation: eqC 0.9s ease-in-out infinite; }
@keyframes eqA { 0%,100% { height: 5px; } 50% { height: 13px; } }
@keyframes eqB { 0%,100% { height: 12px; } 50% { height: 4px; } }
@keyframes eqC { 0%,100% { height: 8px; } 50% { height: 15px; } }
.track-row__thumb {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px;
    background: linear-gradient(135deg, hsl(var(--hue, 220) 60% 40%), hsl(calc(var(--hue, 220) + 42) 55% 22%));
}
.track-row__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.track-row__main { flex: 1; min-width: 0; }
.track-row__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-row__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-row__dur { font-size: 13px; color: var(--text-muted); flex-shrink: 0; width: 46px; text-align: right; }
.track-row__when { font-size: 12.5px; color: var(--text-muted); flex-shrink: 0; margin-right: 4px; white-space: nowrap; }
.track-row__menu {
    width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.track-row__menu:hover { background: var(--bg-hover); color: var(--text); }
.track-row__menu svg { width: 17px; height: 17px; }
.track-row.is-playing .track-row__title { color: var(--accent); }

/* Упорядочивание перетаскиванием (личные плейлисты) — ручка + состояния. */
.track-row__grip {
    width: 28px; flex-shrink: 0; border: none; background: transparent; padding: 0;
    color: var(--text-muted); cursor: grab; display: flex; align-items: center; justify-content: center;
    touch-action: none; /* палец тащит строку, а не скроллит страницу */
}
.track-row__grip:hover { color: var(--text); }
.track-row__grip:active { cursor: grabbing; }
.track-row__grip svg { width: 18px; height: 18px; }
.track-row.is-dragging {
    background: var(--bg-elevated); box-shadow: var(--shadow-card); opacity: .97; cursor: grabbing;
}
.track-list.is-reordering { user-select: none; -webkit-user-select: none; }
.track-list.is-reordering .track-row { transition: none; }
.reorder-hint {
    display: flex; align-items: center; gap: 7px; margin: 2px 4px 10px;
    font-size: 12.5px; color: var(--text-muted);
}
.reorder-hint svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-secondary); }

/* Заблокированный трек: содержимое приглушено (но не кнопка «снять блок»).
   Клик по строке ИГРАЕТ трек (осознанный выбор), но в авто-очереди он
   пропускается. opacity вешаем на элементы, а не на всю строку — иначе
   кнопку разблокировки тоже погасило бы. */
.track-row.is-blocked .track-row__index,
.track-row.is-blocked .track-row__thumb,
.track-row.is-blocked .track-row__main,
.track-row.is-blocked .track-row__dur { opacity: .45; }
.track-row.is-blocked .track-row__title { text-decoration: line-through; }
.track-row__unblock.is-active { color: var(--danger); }

/* ---------- Апселл «доступно на Бизнес» ---------- */
.upsell {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 44px 20px;
}
.upsell__icon {
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #1a1400; background: linear-gradient(135deg, hsl(45 90% 55%), hsl(35 85% 48%));
}
.upsell__icon svg { width: 28px; height: 28px; }
.upsell__text { max-width: 440px; }
.upsell__cta { margin-top: 12px; }
.upsell--banner {
    flex-direction: row; text-align: left; gap: 14px; padding: 16px 18px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 14px; margin-bottom: 24px; align-items: center;
}
.upsell--banner .upsell__icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 0; flex: 0 0 auto; }
.upsell--banner .upsell__icon svg { width: 20px; height: 20px; }
.upsell--banner .upsell__body { flex: 1; min-width: 0; }
.upsell--banner .upsell__title { font-size: 15px; font-weight: 700; }
.upsell--banner .upsell__cta { margin-top: 0; flex: 0 0 auto; }
/* Мобильная: не сжимаем кнопку в строку — переносим её под текст на всю ширину */
@media (max-width: 640px) {
    .upsell--banner { flex-wrap: wrap; }
    .upsell--banner .upsell__cta { flex-basis: 100%; margin-top: 4px; }
}

/* ---------- Popover-меню (kebab) ---------- */
.popover {
    position: absolute; z-index: var(--z-menu);
    min-width: 200px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-control); box-shadow: var(--shadow-card);
}
.popover__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: none; background: transparent; color: var(--text);
    font-size: var(--fs-meta); text-align: left; border-radius: 8px;
}
.popover__item:hover { background: var(--surface-hover); }
.popover__item svg { width: 18px; height: 18px; color: var(--text-secondary); }

/* ---------- Модалка действий с треком ---------- */
.track-modal {
    position: fixed; inset: 0; z-index: 55;
    background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Высота ограничена экраном, прокручивается тело: длинное содержимое (например,
   предупреждение об автопродлении) иначе просто обрезалось бы — карточка с
   overflow:hidden росла за пределы экрана и кнопка оплаты становилась недоступна.
   dvh вместо vh — из-за адресной строки мобильных браузеров. */
.track-modal__card {
    width: 100%; max-width: 360px; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
}
.track-modal__head {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.track-modal__cover {
    width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, hsl(var(--hue,220) 60% 40%), hsl(calc(var(--hue,220) + 42) 55% 22%));
}
.track-modal__meta { min-width: 0; flex: 1; }
.track-modal__title { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-modal__subtitle { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-modal__close { background: none; border: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; display: flex; }
.track-modal__close svg { width: 16px; height: 16px; }
.track-modal__body { padding: 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Модал «Новая версия» (whats-new.js). */
.whatsnew__eyebrow {
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px;
    color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.whatsnew__eyebrow svg { width: 14px; height: 14px; }
.whatsnew__lead { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.whatsnew__hint {
    margin-top: 12px; padding: 11px 13px; border-radius: 10px;
    background: var(--accent-soft); color: var(--text-secondary);
    font-size: 13.5px; line-height: 1.5;
}
.whatsnew__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.whatsnew__actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.whatsnew__actions .btn svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
    .whatsnew__actions { flex-direction: column-reverse; }
    .whatsnew__actions .btn { width: 100%; justify-content: center; }
}
.track-modal__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px; border-radius: 10px; border: none; background: none; color: var(--text);
    font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.track-modal__item:hover { background: var(--bg-hover); }
.track-modal__item svg { width: 17px; height: 17px; flex-shrink: 0; }
.track-modal__item--danger { color: var(--danger); }

/* Сведения о треке — панель свойств внутри модалки трека */
.ti-card { max-width: 420px; }
.ti-back {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    display: flex; flex-shrink: 0; padding: 0;
}
.ti-back:hover { color: var(--text); }
.ti-back svg { width: 18px; height: 18px; }
.ti-body { padding: 6px 6px 12px; }
.ti-row {
    display: flex; align-items: baseline; gap: 14px;
    padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.ti-row:last-child { border-bottom: none; }
.ti-row--block { align-items: flex-start; }
.ti-row__k { flex: 0 0 104px; font-size: 12.5px; color: var(--text-muted); }
.ti-row__v { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ti-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.ti-chip {
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.ti-link {
    flex: 1; display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.ti-link:hover { text-decoration: underline; }
.ti-link svg { width: 13px; height: 13px; }

/* ---------- Состояния ---------- */
.state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 48px 24px; text-align: center; color: var(--text-muted);
}
.state__icon { color: var(--text-muted); }
.state__icon svg { width: 44px; height: 44px; }
.skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
    background-size: 200% 100%; animation: skeleton 1.3s infinite; border-radius: var(--radius-control);
}
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Заказы ---------- */
.orders-section-title { font-size: 15px; font-weight: 800; margin: 8px 0 14px; }
.orders-section-title:not(:first-of-type) { margin-top: 32px; }
/* Заказ «в разработке»: жёлтый бейдж + замок по центру обложки */
.playlist-card--wip .playlist-card__cover { filter: saturate(0.72) brightness(0.92); }
.playlist-card__tier--wip { background: rgba(214, 158, 46, 0.94); color: #1a1400; }
.order-lock {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.order-lock span {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.42); color: #fff; backdrop-filter: blur(6px);
}
.order-lock svg { width: 20px; height: 20px; }
/* Кнопки действий на готовой карточке заказа */
.order-card__actions { display: flex; gap: 8px; padding: 0 16px 16px; }
.order-card__act {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.order-card__act:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.order-card__act svg { width: 16px; height: 16px; }

/* ---------- Поддержка ---------- */
.support-head { text-align: center; margin-bottom: 28px; }
.support-head__title { font-size: 28px; font-weight: 800; }
.support-head__sub { font-size: 14.5px; color: var(--text-muted); margin-top: 6px; }
.support-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    max-width: 760px; margin: 0 auto 36px;
}
.support-card {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
    padding: 26px; text-align: center; cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.support-card:hover { border-color: var(--border-strong); }
.support-card.is-active { border-color: var(--accent); }
.support-card__icon {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.support-card__icon svg { width: 18px; height: 18px; }
.support-card__title { font-size: 15px; font-weight: 700; }
.support-card__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.support-section-title { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.support-form { max-width: 560px; margin-bottom: 36px; }
.support-tickets { display: flex; flex-direction: column; gap: 12px; }
.support-ticket {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px;
}
.support-ticket__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.support-ticket__title { font-size: 14.5px; font-weight: 700; }
.support-ticket__preview { font-size: 13px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.support-ticket__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.support-ticket__date { font-size: 12px; color: var(--text-muted); }
.support-status {
    font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.support-status--resolved { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
/* Узкий экран: дата и статус не влезают в строку — переносим их под заголовок,
   а превью обращения переносим по словам (в колонке оно иначе вылезает за край) */
@media (max-width: 720px) {
    .support-ticket__head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .support-ticket__head > div:first-child { width: 100%; min-width: 0; }
    .support-ticket__right { width: 100%; justify-content: space-between; }
    .support-ticket__preview { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
.support-thread { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.support-msg { display: flex; }
.support-msg--user { justify-content: flex-end; }
.support-bubble {
    max-width: 78%; padding: 10px 13px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.45; white-space: pre-wrap;
    background: var(--surface); color: var(--text);
}
.support-bubble--user { background: var(--accent); color: #fff; }
.support-bubble__time { font-size: 11px; opacity: 0.65; margin-top: 5px; }
.support-reply { display: flex; gap: 8px; margin-top: 14px; align-items: flex-end; }
.support-reply .input, .support-reply .textarea { flex: 1; }
/* ---------- Подписка ---------- */
.sub-status {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px 24px; margin-bottom: 28px;
}
.sub-status__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.sub-status__badge--business {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent); border-color: transparent;
}
.sub-status__badge svg { width: 15px; height: 15px; }
.sub-status__expires { font-size: 13.5px; color: var(--text-muted); margin-top: 12px; }
.sub-status__desc { font-size: 14px; color: var(--text-secondary); margin-top: 8px; }
.sub-status__points {
    margin-top: 14px; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent);
}
.sub-status__points-label { font-size: 12.5px; color: var(--text-muted); }
.sub-status__points-value { font-size: 19px; font-weight: 800; margin-top: 2px; }
.sub-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 36px; }
.sub-plan {
    position: relative; background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 16px; padding: 26px; display: flex; flex-direction: column;
}
.sub-plan--accent { border: 2px solid var(--accent); }
.sub-plan__flag {
    position: absolute; top: -11px; left: 22px;
    background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.06em; padding: 4px 12px; border-radius: 999px; text-transform: uppercase;
}
.sub-plan__name { font-size: 17px; font-weight: 800; }
.sub-plan__price { font-size: 26px; font-weight: 800; margin: 8px 0 16px; }
.sub-plan__price small { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.sub-plan__list {
    border-top: 1px solid var(--border); padding-top: 16px;
    display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.sub-plan__item { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.sub-plan__item svg { width: 15px; height: 15px; flex-shrink: 0; }
.sub-plan__item--yes svg { color: var(--success); }
.sub-plan__item--no { color: var(--text-muted); }
.sub-plan__item--no svg { color: var(--text-muted); }
.sub-plan .btn { margin-top: 20px; width: 100%; justify-content: center; }
/* История платежей */
.pay-history { display: flex; flex-direction: column; }
.pay-row {
    display: flex; align-items: center; gap: 18px;
    padding: 15px 18px; border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.pay-history { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pay-row:last-child { border-bottom: none; }
.pay-row__date { width: 92px; flex-shrink: 0; }
.pay-row__date b { display: block; font-size: 13.5px; font-weight: 700; }
.pay-row__date span { font-size: 12px; color: var(--text-muted); }
.pay-row__main { flex: 1; min-width: 0; }
.pay-row__title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-row__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-row__amount { font-size: 14.5px; font-weight: 800; flex-shrink: 0; width: 92px; text-align: right; }
.pay-row__receipt { flex-shrink: 0; width: 64px; display: flex; justify-content: center; }
.pay-row__receipt-link {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800;
    padding: 4px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.pay-row__receipt-link:hover { filter: brightness(1.08); }
.pay-row__receipt-link svg { width: 12px; height: 12px; flex-shrink: 0; }
.pay-row__receipt-num { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.pay-badge {
    flex-shrink: 0; width: 116px; text-align: center; line-height: 1.3; white-space: normal;
    font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.pay-badge--succeeded { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.pay-badge--canceled { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pay-badge--refunded { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
/* Модалка оформления: карточка тарифа + степпер точек */
.sub-modal__plan { border: 2px solid var(--accent); border-radius: 16px; padding: 22px; }
.sub-modal__points {
    background: var(--surface); border-radius: 12px; padding: 16px; margin: 18px 0;
    text-align: center;
}
.sub-modal__points-label {
    font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 12px;
}
.sub-modal__stepper { display: flex; align-items: center; justify-content: center; gap: 22px; }
.sub-modal__step {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--accent); background: none; color: var(--accent);
    font-size: 18px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sub-modal__step:disabled { opacity: 0.35; cursor: default; }
.sub-modal__count { font-size: 22px; font-weight: 800; min-width: 40px; }
.sub-modal__points-hint { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.sub-modal__note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 16px 0; }

/* Чекбокс автопродления в модалке оформления */
.sub-ar-check {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    margin: 30px 0; user-select: none;
}
.sub-ar-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sub-ar-check__box {
    flex: none; width: 20px; height: 20px; border-radius: 6px;
    border: 1.6px solid var(--border-strong); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s;
}
.sub-ar-check__box svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.sub-ar-check input:checked + .sub-ar-check__box { background: var(--accent); border-color: var(--accent); }
.sub-ar-check input:checked + .sub-ar-check__box svg { opacity: 1; }
.sub-ar-check input:focus-visible + .sub-ar-check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub-ar-check__text { font-size: 14px; font-weight: 600; }
.sub-ar-warn {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
    border-radius: 12px; padding: 12px 14px; margin: 30px 0;
    font-size: 12.5px; line-height: 1.55; color: var(--text);
}
.sub-ar-warn p { margin: 0 0 8px; }
.sub-ar-warn p:last-child { margin-bottom: 0; }

/* Блок «Автопродление» на экране подписки */
.sub-autorenew {
    border: 1px solid var(--border); border-radius: 16px;
    padding: 16px 18px; margin-bottom: 20px; background: var(--surface);
}
.sub-autorenew.is-on { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.sub-autorenew__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
.sub-autorenew__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.sub-autorenew__title svg { width: 17px; height: 17px; color: var(--accent); }
.sub-autorenew__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; }
.sub-autorenew__desc--off { display: flex; align-items: flex-start; gap: 8px; margin-top: 0; }
.sub-autorenew__desc--off svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
/* «Отключить»: btn--ghost прозрачен и без рамки, а блок сам лежит на --surface —
   кнопка сливалась с фоном. Даём контур и цвет предупреждения, но без заливки:
   действие обратимое (подписка доработает оплаченный период), красная кнопка
   пугала бы сильнее, чем следует. */
.sub-autorenew__off {
    flex: none;
    border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
    color: var(--danger);
}
.sub-autorenew__off:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: var(--danger);
    color: var(--danger);
    filter: none;
}

/* Модальное подтверждение (клиент) */
.confirm-dialog__title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.confirm-dialog__text { font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }

@media (max-width: 760px) {
    .sub-plans { grid-template-columns: 1fr; }
    .pay-row { flex-wrap: wrap; gap: 8px 14px; }
    .pay-row__main { flex-basis: 100%; order: 3; }
    .sub-autorenew__head { flex-direction: column; align-items: stretch; }
    .sub-autorenew__off { width: 100%; }
}

.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 16px 2px; cursor: pointer; font-weight: 600; font-size: 15px;
}
.faq-q svg { width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--transition); flex-shrink: 0; }
.faq-item.is-open .faq-q svg { transform: rotate(180deg); }
.faq-a { font-size: 14px; color: var(--text-secondary); line-height: 1.55; padding: 0 2px 16px; display: none; }
.faq-item.is-open .faq-a { display: block; }
@media (max-width: 640px) {
    .support-cards { grid-template-columns: 1fr; }
    .support-bubble { max-width: 88%; }
}