/* ============================================================
   ADR-051: общие фиксы дизайн-кода
   Слой поверх theme.css. Подключать СТРОГО ПОСЛЕ theme.css.
   Здесь живут правила, которые чинят класс проблемы целиком,
   а не одно место. Ничего нового не изобретаем — только
   дотягиваем выпавшие элементы до уже принятого дизайна.
   ============================================================ */

/* ── 1. Единый шрифт на элементах форм ──────────────────────
   Браузер не наследует font-family на button / input / select /
   textarea — они рисуются системным шрифтом ОС. В списке
   типографики theme.css есть .btn-generate, .btn-upgrade,
   .btn-login и другие, но НЕТ .btn-plan и .btn-extra, а своего
   font-family у них не было. Отсюда чужой шрифт на кнопках
   планов и на MY PROJECTS.
   Наследуется ТОЛЬКО семейство: font-size и font-weight не
   трогаем, иначе поедут размеры кнопок и полей. */
button,
input,
select,
textarea {
    font-family: 'Outfit', -apple-system, sans-serif;
}

/* ── 2. Кнопка закрытия инлайн-панелей ──────────────────────
   .panel-close не был описан НИГДЕ — во всех трёх панелях
   (Effects, Mask, Scene Length) он рисовался системной серой
   кнопкой. Приводим к тому же кругу, что .modal-close в
   премиальных модалках. */
.quick-action-panel .panel-close,
.settings-panel .panel-close {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.4);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Перебиваем глобальный button:hover из theme.css (подъём + лиловый текст):
   для маленькой круглой кнопки подъём выглядит как дребезг. */
.quick-action-panel .panel-close:hover,
.settings-panel .panel-close:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #FF6B9D;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-shadow: none;
}

.quick-action-panel .panel-close:active,
.settings-panel .panel-close:active {
    transform: rotate(90deg) scale(0.92);
}
/* ===== /ADR-051 ===== */

/* ============================================================
   ADR-076: ячейка шорта, у которого есть recut-версии (My Projects)
   ------------------------------------------------------------
   Класс .has-recut и бейдж «R·N» ставит ui-recut-versions.js (ADR-076);
   здесь только их вид. Размеры ячейки не меняются:
     — полоса нарисована inset-тенью, а не border/padding: в раскладке
       не участвует ни на пиксель;
     — бейдж — инлайн-элемент в .short-main, того же размера и приёма,
       что соседний .run-tag (theme.css:3160-3174).
   Полоса .run-group-1 (theme.css:3443-3445: 2px rgba(167,139,250,0.3)) уже есть
   у каждой ячейки, поэтому акцент ADR-076 рисуется рядом с ней, а не вместо.
   ============================================================ */

.short-item.has-recut {
    box-shadow: inset 3px 0 0 0 #A78BFA;
}

/* Мелкий бейдж «R·N»: размеры как у .run-tag, но уже и без капса */
.short-item.has-recut .short-recut-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(167, 139, 250, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.4);
    color: #7C3AED;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    flex: 0 0 auto;      /* не сжимается вместе с именем */
}
/* ===== /ADR-076 ===== */

/* ============================================================
   ADR-078: ленивая регистрация (H-17b)
   ------------------------------------------------------------
   Два новых элемента интерфейса: email-модалка (§3.3, она же стена
   на скачивании) и блок аккаунта в шапке (§3.6). Оба — слой поверх
   theme.css, поэтому живут здесь, а не в theme.css: тот же приём,
   что у ADR-051/ADR-076 выше.
   ============================================================ */

/* ── Email-модалка ─────────────────────────────────────────── */
.auth-modal-content {
    max-width: 440px;
}

.auth-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field[hidden] {
    display: none;
}

.auth-field .setting-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.auth-input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.auth-input:focus {
    border-color: rgba(183, 148, 246, 0.7);
    box-shadow: 0 0 0 3px rgba(183, 148, 246, 0.18);
}

/* Код из письма — 6 цифр: разрядка и табличные цифры, чтобы код читался
   как код, а не как число */
.auth-input-code {
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
}

.auth-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* H-18c (Б-58): display:flex у класса перебивает [hidden] из таблицы стилей
   браузера — в окне Save на шаге успеха серая Free оставалась видимой.
   Тот же приём, что у .auth-code-block[hidden] и .account-box[hidden] ниже. */
.auth-actions[hidden]{display:none}

/* Обе кнопки делят строку поровну: у .btn-modal-action ширина 240px
   с !important, у .btn-modal-secondary её нет — выравниваем явно. */
.auth-actions .btn-modal-action,
.auth-actions .btn-modal-secondary {
    flex: 1 1 0;
    width: auto !important;
    margin: 0 !important;
}

.auth-hint {
    margin: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.auth-hint[hidden] {
    display: none;
}

.auth-hint.is-error {
    color: #D6455E;
}

.auth-hint.is-ok {
    color: #2E9E6B;
}

.auth-sep {
    width: 100%;
    height: 1px;
    margin: 4px 0;
    border: 0;
    background: rgba(0, 0, 0, 0.08);
}

.auth-code-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* display:flex у класса перебивает [hidden] из таблицы стилей браузера
   (одинаковая специфичность, наш файл позже) — гасим явно. */
.auth-code-block[hidden] {
    display: none;
}

/* ── Блок аккаунта в шапке (§3.6) ──────────────────────────── */
/* Слот третьей колонки .top-bar — тот самый, что занимала кнопка LOGIN
   (layout.css:35). Вход больше ничего не блокирует, поэтому в шапке
   появляется только тот, кто уже вошёл. */
.top-bar .account-box {
    grid-column: 3;
    justify-self: start;
    position: relative;
}

.account-box {
    display: flex;
    flex-direction: column;
}

.account-box[hidden] {
    display: none;
}

.account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    max-width: 320px;
    padding: 0 14px 0 6px;
    border: 1px solid var(--glass-border);
    border-radius: 19px;
    cursor: pointer;
    text-shadow: none !important;
}

.account-btn:hover {
    transform: translateY(-1px) scale(1) !important;
    text-shadow: none !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
}

.account-email {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    padding: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.account-menu[hidden] {
    display: none;
}

.account-menu-head {
    margin: 0 0 4px;
    padding: 0 8px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    color: var(--text-secondary);
    word-break: break-all;
}

.account-menu-item {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.account-menu-item:hover {
    transform: none !important;
    text-shadow: none !important;
    background: rgba(0, 0, 0, 0.05);
    color: #B794F6;
    box-shadow: none !important;
}
/* ===== /ADR-078 ===== */

/* ============================================================
   ADR-081 (§3, H-17b): парная строка DEFAULT / APPLY в Effects
   ------------------------------------------------------------
   Было: у DEFAULT и APPLY были разные высота, радиус и выравнивание —
   APPLY (правило «Pearl» theme.css:4747) стоял ниже DEFAULT и не выглядел
   основной кнопкой. H-37 Р2: перечень прежних значений снят из комментария
   (Б-86 — проверки не должны опираться на код в комментариях).
   Стало: одна высота (42px) и один радиус (21px) у обеих, обе тянутся
   поровну (flex:1 1 0), APPLY — основная (акцентный градиент), DEFAULT —
   вторичная, но читаемая (--text-secondary #636E72 вместо #B2BEC3).
   Гасим !important из блока «Pearl» — он писался под одиночную кнопку.
   Кнопка Clear в панели Mask (.panel-actions-dual > #btnCancelMask)
   НЕ затронута: правила адресованы по id.
   ============================================================ */
.quick-action-panel .panel-actions-dual {
    align-items: center;
}

.quick-action-panel .panel-actions-dual > #btnDefaultLookBoost,
.quick-action-panel .panel-actions-dual > #btnApplyLookBoost {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 21px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

/* APPLY — основная */
.quick-action-panel .panel-actions-dual > #btnApplyLookBoost {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(183, 148, 246, 0.32) !important;
}

.quick-action-panel .panel-actions-dual > #btnApplyLookBoost:hover {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(183, 148, 246, 0.42) !important;
}

/* DEFAULT — вторичная, читаемая */
.quick-action-panel .panel-actions-dual > #btnDefaultLookBoost {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

.quick-action-panel .panel-actions-dual > #btnDefaultLookBoost:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.09) !important;
    color: var(--text-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

/* Неактивна ТОЛЬКО когда настройки уже по умолчанию (ставит ui-panels.js) */
.quick-action-panel .panel-actions-dual > #btnDefaultLookBoost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    color: var(--text-tertiary) !important;
}
/* ===== /ADR-081 ===== */

/* ── H-33 Б-37: кнопка «Load more» упирается в нижний край панели ──────
   .retouch-panel.active держит max-height: 520px (theme.css:2883) и
   overflow: hidden, а .retouch-scroll-area внутри — 480px (theme.css:2895).
   Кнопка догрузки (H-26b) — ТРЕТИЙ ребёнок панели: её строка (~8px отступ
   сверху + ~48px сама кнопка .btn-modal-action, theme.css:1831) в остаток
   высоты не влезала, и список проектов визуально упирался в подрезанную
   кнопку. Панель с кнопкой получает ровно столько же места, сколько
   занимает кнопка; без кнопки правило не срабатывает и вид прежний.
   Новых цветов, классов и токенов нет — признак берётся по существующему
   id кнопки (ui-panels.js:_renderLoadMore). */
.retouch-panel.active:has(#projectsLoadMore) {
    max-height: 576px;
}

/* ── H-34-2 Б-78 (Р1): цвет фона купленного — цвет полосы recut ───────────
   Было: розовый --accent-glow — признак покупки кричал громче содержимого
   (факт боя 16.10: Роман назвал его «поросячьим»). H-37 Р2: прежнее значение
   снято из комментария (Б-86 — проверки не должны опираться на код в
   комментариях).

   Стало: `rgba(167,139,250,.08)` — тот же сиреневый (ADR-076, A78BFA), которым
   нарисована полоса recut (ui-fixes.css:80), непрозрачность 8 %. Решение Романа
   16.10 дословно: «Значение фона `.is-bought` — `rgba(167,139,250,.08)`. Это
   цвет полосы recut (ADR-076), непрозрачность 8 %».

   Что НЕ тронуто: селекторы, `:not(.active):not(:hover)`, логика признака
   (её по-прежнему решает существующая функция H-18e `ownsShort`, api.js) и
   классы, которые его ставят (ui-panels.js `applyBoughtMarks`, ui-player.js
   `applyBoughtMarksToTiles`). Правка — одно значение.

   Почему литералом, а не переменной: переменной с этими 8 % в палитре нет, а
   `--accent-glow` — розовая подсветка, которой пользуются ещё полтора десятка
   правил (тени кнопок и карточек); переписав её, задача покрасила бы пол-экрана.
   Новых токенов и новых цветов, кроме этого одного значения, нет.

   Почему `:not(.active):not(:hover)` у плитки: `.preview-thumb` меняет фон на
   наведении и в активном состоянии (theme.css:1296, :1302 — та же
   специфичность 0,2,0), и наше правило файлом ниже убило бы обе подсказки.
   Плитка активна → виден её собственный фон; в остальных случаях — тон покупки.

   Почему фоном, а не рамкой: у плитки рамка 2px `transparent` (theme.css:1291),
   фон по умолчанию рисуется и под ней (`background-clip: border-box`), поэтому
   тон покупки виден узким кольцом вокруг кадра и не сдвигает раскладку полосы
   ни на пиксель. Полоса `has-recut` (ui-fixes.css:80 — inset-тень) и бейдж «R·N»
   (:85) не перекрываются: они нарисованы на других свойствах и на другом узле. */
.short-item.is-bought,
.preview-thumb.is-bought:not(.active):not(:hover) {
    background: rgba(167,139,250,.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   H-35 Б-90/Б-91/Б-92 (Р1/Р2/Р3): My Projects — поиск, различимые карточки,
   маленькая «Load more».

   Все классы этого блока — с префиксом `mp-` (Р2: «Новые CSS-классы — только с
   префиксом `mp-`»). НОВЫХ ЦВЕТОВ здесь нет: только существующие переменные
   темы (--text-primary/--text-secondary/--text-tertiary/--glass-white/
   --glass-border), объявленные в theme.css:1-35. Единственный литерал цвета —
   тот же rgba(167,139,250,…), которым уже нарисованы полоса recut
   (ui-fixes.css:80) и фон купленного шорта (:478).

   Размеры превью карточки (Р2, «итоговые размеры»): .mp-preview наследует
   коробку существующей .source-thumb — 100 % ширины ячейки источника
   (.retouch-source-cell = 40 % ширины таблицы карточки, padding 16 px) и
   height 90 px (theme.css:2946-2950). На панели шириной 360 px это ≈120×90 px;
   кадр шорта 9:16 вписан `object-fit: cover` — как в плитке полосы превью.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── H-35 Б-90 (Р1): поле поиска над списком ─────────────────────────────── */
.mp-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 10px;
}

.mp-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    opacity: 0.75;
    pointer-events: none;
}

.mp-search-input {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    padding: 0 32px 0 34px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-white);
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}

.mp-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
    font-weight: 500;
}

.mp-search-input:focus {
    border-color: var(--text-tertiary);
}

/* ── H-35-2 Р3: в поле поиска ОДИН крестик — свой (.mp-search-clear) ───────
   Факт боя 17.10: в поле видно ДВА крестика — наш `×` (кнопка #projectsSearchClear,
   выше) и встроенный крестик браузера: поле объявлено `type="search"`
   (ui-panels.js:4123), а у такого поля WebKit/Blink рисует свою кнопку отмены
   (::-webkit-search-cancel-button), Edge/IE — ::-ms-clear.

   Выбран этот путь, а не смена `type="search"` на `type="text"`: тип поля —
   не только вид. `search` даёт мобильную клавиатуру с кнопкой «Найти», Esc для
   очистки, роль searchbox для экранных дикторов и автоподсказки браузера, — их
   смена типа отняла бы. Скрывается только встроенная КНОПКА, поведение поля
   остаётся прежним. Новых классов, цветов и узлов разметки нет: правило висит
   на существующем классе поля.

   `-webkit-appearance: none` нужен и без `display: none`: в части сборок
   Chromium псевдоэлемент остаётся кликабельным местом без отрисовки, и клик
   по нему чистил бы поле мимо нашего обработчика (.has-value не снимался). */
.mp-search-input::-webkit-search-cancel-button,
.mp-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.mp-search-input::-ms-clear,
.mp-search-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* Кнопка очистки × — видна только когда в поле что-то есть (.has-value). */
.mp-search-clear {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    display: none;
}

.mp-search.has-value .mp-search-clear {
    display: block;
}

.mp-search-clear:hover {
    color: var(--text-primary);
}

/* «No projects found» — текст вместо пустого списка (Р1). */
.mp-empty {
    padding: 14px 10px;
    text-align: center;
    color: var(--text-secondary);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

/* ── H-35 Б-91 (Р2): превью карточки — реальный кадр первого шорта ──────── */
.mp-preview-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--glass-white);
}

/* Заглушка — существующая картинка карточки; видна, пока кадра нет. */
.mp-preview-fallback {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── H-35 Б-91 (Р2): название до 2 строк и подпись «дата · N shorts» ────── */
.mp-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    /* Контраст — как у названий шортов (.short-name, theme.css): тот же
       --text-primary, не ниже. Полное название — в атрибуте title (Р2). */
    color: var(--text-primary);
    word-break: break-word;
}

.mp-meta {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── H-35 Б-92 (Р3): «Load more» — маленькая пилюля по центру ───────────── */
/* Было (H-26b): кнопка во всю ширину панели, её правый край уходил под круглую
   кнопку чата (fixed bottom-right 56×56, layout.css:735-743, тема —
   theme.css:1728). H-37 Р2: прежнее `width:100%` из комментария снято (Б-86).
   Стало: ширина по содержимому (пилюля), высота 32 px,
   шрифт 12 px, горизонтальные отступы 20 px, по центру под списком. Форма
   пилюли — прежняя: border-radius 40px из .btn-modal-action (theme.css:1836). */
.mp-load-more {
    width: fit-content;
    height: 32px;
    padding: 0 20px;
    margin: 8px auto 0;
    font-size: 12px;
    line-height: 32px;
    /* От кнопки чата: она круглая 56×56 в правом нижнем углу окна
       (layout.css:735-743). Пилюля по центру панели до правого края не
       достаёт — но и на узкой панели ей оставлен запас справа, чтобы
       перекрытия не было ни при какой ширине. */
    margin-right: auto;
    margin-left: auto;
    max-width: calc(100% - 2 * var(--spacing-xl));
}

/* ── H-35-2 Р2: размер пилюли «Load more» — ПОБЕДИТЕЛЬ, а не проигравший ────
   Факт боя 17.10 (Роман): правило H-35 выше загружено (поле поиска видно),
   но кнопка осталась большой. Разведка 1.2: дело НЕ в кэше и не в классе —
   размер задавало ГЛОБАЛЬНОЕ правило `.btn-modal-action` (theme.css:5131),
   объявленное с `!important`: важность не перебивается специфичностью, а
   `!important` таблицы стилей бьёт любой инлайн-стиль без него. H-37 Р2:
   перечень прежних значений снят из комментария (Б-86 — проверки не должны
   опираться на код в комментариях).

   Что сделано: то же правило H-35 (строки выше) оставлено как есть — оно
   читается как «желаемый вид»; ниже — БОЕВОЕ правило со специфичностью 0,2,0
   (`.mp-load-more` + `.btn-modal-action`). После H-37 Р5 (Б-99) `!important`
   не нужен ни одной из сторон: 0,2,0 против 0,1,0 решает специфичность,
   поэтому порядок подключения файлов на исход не влияет: даже если
   ui-fixes.css приедет ДО theme.css, размер останется нашим.

   Итоговые значения (то же, что просил Р2): высота 32 px, шрифт 12 px,
   отступы 0 20px, ширина по содержимому, по центру под списком. Новых цветов,
   классов и токенов нет. */
/* H-37 Р5 (Б-99): `!important` с размера снят — он больше не нужен. Глобальное
   правило theme.css:5131 отдаёт width/height без `!important`, поэтому пилюлю
   держит специфичность: 0,2,0 (`.mp-load-more.btn-modal-action`) против 0,1,0
   (`.btn-modal-action`). Порядок подключения файлов на исход не влияет.
   `!important` оставлен ТОЛЬКО у border-radius: его `21px !important` в
   theme.css:5131 не снимался (Р5 говорит про width/height), а форма пилюли
   40 px — прежняя. Новых `!important` не заведено. */
.mp-load-more.btn-modal-action {
    width: fit-content;
    height: 32px;
    padding: 0 20px;
    margin: 8px auto 0;
    font-size: 12px;
    line-height: 32px;
    /* Радиус пилюли: theme.css:5131 ставит 21px !important, H-35 рассчитывал на
       40px из theme.css:1836. Оба значения — существующие; берём 40px, чтобы
       форма пилюли была той, под которую написан блок H-35 (и 21px, и 40px на
       высоте 32 px дают скругление «в половину», но 40px — исходный вид). */
    border-radius: 40px !important;
}


/* ── H-29-2 Р2а/Р11: ссылка входа и тихая текст-ссылка пакета ───────────────
   Обе строки — раскладка и вид СУЩЕСТВУЮЩИХ узлов: новых цветов, токенов и
   классов не заводится, значения берутся из переменных темы. */

/* H-29-2 Р2а (Б-114): `Sign in` в шапке стоит в том же слоте третьей колонки
   .top-bar, что и блок аккаунта (правило выше, .top-bar .account-box), и
   появляется только у гостя. Класс кнопки — существующий (.account-btn
   glass-card); здесь только слот, выравнивание и симметричные отступы: у
   .account-btn отступы 0 14px 0 6px рассчитаны на аватар слева, которого у
   ссылки нет. */
.top-bar .sign-in-link {
    grid-column: 3;
    justify-self: start;
    padding: 0 16px;
}

/* [hidden] у .account-btn не работает сам по себе: выше `display: flex` по
   классу перебивает таблицу стилей браузера — та же причина, по которой
   .account-box[hidden] выше гасится явно. */
.top-bar .sign-in-link[hidden] {
    display: none;
}

/* H-29-2 Р11 (решение 5): «Get 5 more for $10» в состоянии В окна Save —
   тихая текст-ссылка, а не кнопка. Вид — из существующих значений: цвет
   заголовка окна (--text-primary, тот же, что у .btn-modal-secondary в этом
   окне), подчёркивание и обычный размер текста. Новых цветов нет.

   H-29-3 Р1 (Д2): тот же вид получила «Not now» на шаге подтверждения оплаты
   в окне входа — по решению архитектора это ОДИН класс и ОДИН набор значений,
   поэтому селектор области расширен, а значений не добавлено. Контраст цвета
   к светлому фону окна — 12.68:1 на чистом белом и 6.84:1 в худшем случае
   по стеклу (расчёт в checks/test_h293_pure.py), норма
   ≥ 4.5:1 соблюдена. */
#saveModal .pack-more-link,
#authModal .pack-more-link {
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-primary) !important;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: underline;
    cursor: pointer;
}

/* ── H-29-3 Р1 (Д1/Д2): шаг подтверждения оплаты — столбиком, по центру ────
   Было (H-29-2 Р2б): строка .auth-actions (display:flex, gap 10px) несла обе
   кнопки в один ряд — главная «Continue to payment — $…» шириной 240px из
   темы плюс «Not now». На окне шириной ~440px (содержимое 376px, на узком
   экране 320px) главный текст не влезал в пилюлю и переносился на две строки
   за её высоту (ФАКТ Д1). Стало: главная — во всю ширину содержимого окна и
   в ОДНУ строку, под ней тихая ссылка «Not now». Высота (42px) и скругление
   (21px) кнопки не тронуты — это значения темы, а не новые.

   Почему ширина с !important: `.auth-actions .btn-modal-action` (этот файл,
   строки 183-188) держит `width: auto !important` — важно перебивается только
   важным. `flex: 0 0 auto` снимает растяжение по главной оси: в столбце
   `flex: 1 1 0` из того же правила тянуло бы кнопку по ВЫСОТЕ. */
#authConfirmBlock .auth-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

#authConfirmBlock .auth-actions > .btn-modal-action {
    flex: 0 0 auto;
    width: 100% !important;
    white-space: nowrap;
}

/* ── H-39 Р8 (Б-123): строка «You're signed in as <email>.» ──────────────────
   Было: <p class="modal-subtitle" id="authConfirmEmail"> (ui-auth.js:544-546)
   прижата влево и вплотную к кнопке CONTINUE TO PAYMENT — у .modal-subtitle
   (theme.css:1849) только margin-top: 8px, горизонтального выравнивания нет,
   а .auth-actions[hidden] ниже строки не даёт воздуха. Стало: по центру и
   отступ снизу 12px до кнопки. Значения — существующие: --spacing-sm = 12px
   (theme.css:20); выравнивание — text-align, фон и цвет не тронуты. */
#authConfirmBlock #authConfirmEmail {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

/* ── H-39 Р8 (Б-150): шапка на узком экране ─────────────────────────────────
   Было: .top-bar — `grid-template-columns: 360px 1fr 360px` (layout.css:19-25,
   ниже 1400px — 320px), медиазапроса ниже 768px нет, а `body` держит
   `overflow-x: hidden` → на 400px третья колонка (блок аккаунта / `Sign in`)
   уезжала за экран и была недоступна. Стало: две колонки — логотип тянется,
   слот входа стоит справа и всегда на экране. Десктоп ≥ 769px не тронут:
   правило живёт только внутри медиазапроса, значений темы правка не вводит
   (gap берётся из существующих --spacing-sm/--spacing-md). */
@media (max-width: 768px) {
    .top-bar {
        grid-template-columns: 1fr auto;
        gap: var(--spacing-sm);
    }

    /* Логотип 300px — фиксированная ширина (theme.css:187-192); без сжатия
       первая колонка не отдала бы место слоту входа. SVG держит пропорции
       сам (preserveAspectRatio у .exclusive-logo-svg). */
    .top-bar .logo-section {
        min-width: 0;
    }

    .top-bar .logo-container {
        width: 100%;
        max-width: 300px;
    }

    /* Слот входа — ВТОРАЯ колонка: grid-column: 3 из правил выше
       (ui-fixes.css:234, 719) в двухколоночной сетке создал бы третью
       неявную колонку и вынес узел за экран. */
    .top-bar .account-box {
        grid-column: 2;
        justify-self: end;
    }

    .top-bar .sign-in-link {
        grid-column: 2;
        justify-self: end;
    }

    /* Длинный email не должен раздвигать шапку: кнопка сжимается по колонке,
       текст обрезается многоточием (у .account-email, ui-fixes.css:284-292,
       уже есть overflow: hidden + text-overflow: ellipsis). */
    .top-bar .account-btn {
        max-width: 100%;
    }
}