/* ==========================================================================
   Заклинания D&D 2024 — стили
   1. Переменные        6. Каталог: список и карточки
   2. Основа            7. Предпросмотр печати
   3. Кнопки            8. Лайтбокс
   4. Каркас страницы   9. Окно прогресса PDF
   5. Каталог: фильтры 10. Баннер cookie
                       11. Страницы: донат, контакты, политика
   Брейкпоинты: 1280px — каталог над предпросмотром, 600px — мобильная версия.
   ========================================================================== */


/* 1. Переменные
   ========================================================================== */

:root {
    --bg: #f5f5f4;
    --surface: #ffffff;
    --surface-alt: #fafaf9;     /* поля, чипсы, пустые ячейки */
    --border: #e5e5e4;
    --border-strong: #c4c4c2;
    --text: #1c1c1b;
    --muted: #6b6b69;

    --gray-hover: #ecebe9;      /* наведение на обычную кнопку */
    --gray-soft: #f5f5f4;       /* круглые служебные кнопки */
    --gray-pressed: #e7e7e5;
    --gray-strong: #d9d9d6;

    --accent: #1c1c1b;          /* выбранный чипс */
    --accent-fg: #ffffff;

    --primary: #b13b3b;
    --primary-hover: #9a3232;
    --primary-fg: #ffffff;

    --green: #337445;           /* «в наборе» */
    --green-hover: #2a6139;
    --green-soft: #e8f1ea;
    --green-soft-hover: #d3e6d8;

    --radius: 8px;
    --radius-pill: 999px;

    /* Слои: нижняя панель < предпросмотр < баннер cookie < лайтбокс < прогресс PDF */
    --z-mobile-bar: 10;
    --z-preview: 90;
    --z-consent: 95;
    --z-lightbox: 100;
    --z-progress: 110;
}


/* 2. Основа
   ========================================================================== */

* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.4 "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow-x: clip;
    /* viewport-fit=cover: в альбомной ориентации не заезжаем под вырез экрана */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

h1 { margin: 0; font-size: 18px; font-weight: 600; }


/* 3. Кнопки
   ========================================================================== */

.btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 7px 14px;
    border-radius: var(--radius);
    font: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: var(--gray-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
    background: var(--primary);
    color: var(--primary-fg);
    border-color: var(--primary);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { background: transparent; }


/* 4. Каркас страницы: хедер, сетка, футер, нижняя мобильная панель
   ========================================================================== */

.topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 2px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.brand-logo {
    width: 52px;
    height: 52px;
    display: block;
}
.title-block {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}
.topbar .summary {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    transform-origin: left center; /* анимация увеличивает от левого края, текст не прыгает */
}

.layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
    gap: 20px;
    padding: 20px;
}
.layout > * { min-width: 0; }

.footer {
    margin-top: 20px;
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--border);
}
.footer a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.footer a:hover { color: var(--primary); border-color: var(--primary); }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
}
.footer-links a { white-space: nowrap; }
.footer-credit { margin: 12px 0 0; }

.mobile-bar { display: none; }

/* Подсветка сводки при изменении набора (хедер и нижняя панель) */
.summary.bump-add { animation: summary-bump-add .45s ease-out; }
.summary.bump-remove { animation: summary-bump-remove .45s ease-out; }
@keyframes summary-bump-add {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12); color: var(--green); font-weight: 600; }
    100% { transform: scale(1); }
}
@keyframes summary-bump-remove {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12); color: var(--primary); font-weight: 600; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .summary.bump-add,
    .summary.bump-remove { animation: none; }
}

@media (max-width: 1280px) {
    .layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .topbar { padding: 6px 18px; gap: 10px; }
    .topbar h1 { font-size: 20px; }
    .topbar .summary { display: none; } /* сводка переезжает в нижнюю панель */
    .brand-logo { width: 38px; height: 38px; }
    .title-block { flex-direction: column; align-items: flex-start; gap: 2px; }

    /* Минимальная высота — весь экран между хедером и нижней панелью, чтобы каталог
       заполнял его даже при коротком списке. Высоты измеряет catalog.js. */
    .layout {
        padding: 20px 12px;
        min-height: calc(100vh - var(--topbar-h, 65px) - var(--mobile-bar-h, 70px));
        min-height: calc(100dvh - var(--topbar-h, 65px) - var(--mobile-bar-h, 70px));
    }

    .mobile-bar {
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-mobile-bar);
        padding: 6px 14px calc(8px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
    }
    .mobile-bar .summary {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-bar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .mobile-bar .btn {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 14px;
        white-space: nowrap;
    }
    /* Место под панель внизу страницы. max() — страховка, пока высота не измерена */
    body:has(.mobile-bar) {
        padding-bottom: max(var(--mobile-bar-h, 0px), calc(70px + env(safe-area-inset-bottom)));
    }
}


/* 5. Каталог: панели и фильтры
   ========================================================================== */

.catalog {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    overflow: hidden;
}
.catalog-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.catalog-panel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

/* Заголовки панелей: «Фильтры» (сворачивается) и «Список заклинаний» */
.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.filters > summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { /* шеврон: вправо — свёрнуто, вниз — открыто */
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform .2s;
}
.filters[open] > summary::after { transform: rotate(45deg); }
.filters > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.filters-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0 0;
}
.filters-body fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.filters-body legend {
    float: left;
    width: 100%;
    padding: 0 0 4px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.filters-body legend + * { clear: both; }

/* Поиск */
.search-field { position: relative; }
.filters-body input[type="search"] {
    width: 100%;
    padding: 8px 40px 8px 10px; /* справа — место под крестик */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface-alt);
}
.filters-body input[type="search"]:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
/* Свой крестик: системный есть не во всех браузерах и выглядит по-разному */
.filters-body input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.search-clear[hidden] { display: none; }
.search-clear svg {
    padding: 5px;
    box-sizing: content-box;
    border-radius: 50%;
    background: var(--gray-pressed);
    transition: background-color .15s, color .15s;
}
.search-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Чипсы: уровень, школа, класс */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chips label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, border-color .15s, color .15s;
}
.chips label:has(input:checked) {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.chips label:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Чекбокс скрыт визуально, но доступен с клавиатуры и для скринридеров */
.chips input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
/* Уровни 1–3 — круги (min-width равен высоте), «Заговоры» — пилюля */
#level-filter label {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .search-clear:hover { color: var(--text); }
    .search-clear:hover svg { background: var(--gray-strong); }
    .chips label:hover { border-color: var(--border-strong); }
}

@media (max-width: 1280px) {
    .catalog {
        position: static;
        height: auto;
        overflow: visible;
    }
    .catalog-panel-list { min-height: 60vh; }
}

@media (max-width: 600px) {
    /* Список растёт по содержимому и листается вместе со страницей */
    .catalog { align-self: stretch; }
    .catalog-panel-list { overflow: visible; min-height: 0; }

    .panel-title { min-height: 32px; font-size: 16px; }

    /* iOS Safari приближает страницу при фокусе на поле со шрифтом меньше 16px */
    .filters-body input[type="search"] { font-size: 16px; }
    /* fieldset по умолчанию растягивается под содержимое и ломает прокрутку рядов */
    .filters-body fieldset { min-width: 0; }

    .chips { gap: 8px; }
    .chips label {
        min-height: 36px;
        padding: 6px 14px;
        font-size: 14px;
    }
    #level-filter label {
        min-width: 36px;
        height: 36px;
        padding: 0 13px; /* цифра + отступы должны уложиться в 36px, иначе круг станет овалом */
    }

    /* Школы и классы — в одну строку с горизонтальной прокруткой */
    #school-filter,
    #class-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        /* Оверлейный скроллбар (macOS/iOS) не занимает места — снизу отводим ему 10px;
           сверху и по бокам 4px, чтобы не обрезалась рамка фокуса.
           Отрицательные margin убирают эти отступы из потока. */
        padding: 4px 4px 10px;
        margin: -4px -4px -10px;
    }
    #school-filter label,
    #class-filter label {
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* Затухание края, за которым есть ещё чипсы (атрибуты ставит catalog.js) */
    #school-filter[data-more-right],
    #class-filter[data-more-right] {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    #school-filter[data-more-left],
    #class-filter[data-more-left] {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
        mask-image: linear-gradient(to right, transparent, #000 40px);
    }
    #school-filter[data-more-left][data-more-right],
    #class-filter[data-more-left][data-more-right] {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    }
}


/* 6. Каталог: тулбар, список, карточки
   ========================================================================== */

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.catalog-toolbar-spacer { flex: 1; }
.catalog-toolbar-group {
    display: flex;
    gap: 6px;
}
.catalog-toolbar .btn { font-size: 12px; padding: 5px 10px; }

.catalog-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 -8px -8px;
    padding: 0 8px 8px;
}
.catalog-empty {
    padding: 32px 0;
    text-align: center;
    color: var(--muted);
}

/* Карточка: слева полоса цвета школы (--school задаёт catalog.js из school.json) */
.card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: inset 4px 0 0 var(--school, transparent);
}
.card.in-set { border-color: var(--green); background: var(--surface-alt); }

/* Левая часть — кнопка просмотра карточки; зона нажатия растянута на всю высоту */
.card .meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: -8px 0 -8px -10px;
    padding: 8px 0 8px 10px;
    border: none;
    border-radius: var(--radius) 0 0 var(--radius);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}
.card .meta > span { display: block; }
.card .meta:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.card .name,
.card .name-en,
.card .sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card .name { font-weight: 500; }
.card .name-en { font-size: 12px; font-style: italic; color: var(--muted); }
.card .sub { font-size: 12px; color: var(--muted); }
.card .badge-double {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 10px;
    vertical-align: middle;
}

/* Кнопка «в набор»: зона нажатия — вся правая часть карточки до её краёв, внутри круг 40px */
.card .add-btn {
    align-self: stretch;
    width: 60px;
    margin: -8px -10px -8px 0;
    padding: 0;
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.add-btn-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-soft);
    color: var(--green);
    transition: background-color .25s, color .25s, transform .15s;
}
.card.in-set .add-btn-circle { background: var(--green); color: var(--surface); }
.card .add-btn:active .add-btn-circle { transform: scale(.92); }
.card .add-btn:focus-visible { outline: none; }
.card .add-btn:focus-visible .add-btn-circle { outline: 2px solid var(--text); outline-offset: 2px; }

@media (hover: hover) {
    .card .meta:hover .name { text-decoration: underline; text-underline-offset: 2px; }
    .card .add-btn:hover .add-btn-circle { background: var(--green-soft-hover); }
    .card.in-set .add-btn:hover .add-btn-circle { background: var(--green-hover); }
}

@media (max-width: 1280px) {
    .catalog-list { min-height: 60vh; max-height: 60vh; }
}

@media (max-width: 600px) {
    /* Две кнопки поровну, в размер чипсов; «Скачать PDF» на мобильных — в нижней панели */
    .catalog-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .catalog-toolbar-spacer { display: none; }
    .catalog-toolbar-group { display: contents; }
    .catalog-toolbar [data-pdf-btn] { display: none; }
    .catalog-toolbar .btn {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 14px;
        white-space: nowrap;
    }
    .catalog-list { min-height: 0; max-height: none; overflow-y: visible; }
}


/* 7. Предпросмотр печати: листы A4 и гайд
   ========================================================================== */

.preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
}
.preview-head { display: none; }
.preview-pages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.preview-page {
    position: relative;
    width: 210mm;
    height: 297mm;
    flex-shrink: 0;
    background: var(--surface);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    zoom: var(--page-scale, 1); /* уменьшенный A4, если не помещается по ширине (fitPages в preview.js) */
}
.preview-page[hidden] { display: none; }
.page-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1mm;
    text-align: center;
    font-size: 8pt;
    color: var(--muted);
    pointer-events: none;
}

.preview-page .slot {
    position: absolute;
    background: var(--surface-alt);
    overflow: hidden;
}
.preview-page .slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.preview-page .slot[draggable="true"] { cursor: zoom-in; }
.preview-page .slot[draggable="true"]:active { cursor: grabbing; }
.preview-page .slot.dragging { opacity: .35; z-index: 6; }
.preview-page .slot.drop-target { outline: 2px solid var(--primary); outline-offset: -2px; z-index: 7; }

/* Пустая ячейка: пунктир и размеры карточки */
.preview-page .slot.slot-empty {
    background: var(--surface-alt);
    border: 1px dashed var(--border);
}
.preview-page .slot.slot-empty::before,
.preview-page .slot.slot-empty::after {
    position: absolute;
    font-size: 2.4mm;
    color: var(--muted);
    opacity: .5;
    letter-spacing: .3mm;
    pointer-events: none;
}
.preview-page .slot.slot-empty::before {
    content: "64,2 мм";
    bottom: 1.2mm;
    left: 0;
    right: 0;
    text-align: center;
}
.preview-page .slot.slot-empty::after {
    content: "88,9 мм";
    top: 50%;
    left: 1.2mm;
    transform: translateY(-50%);
    writing-mode: sideways-lr;
}

/* Гайд на пустом листе */
.preview-page-welcome .slot { width: 64.2mm; height: 88.9mm; }
.preview-page-welcome .slot[data-slot="0"] { left: 8.7mm;   top: 10mm;    }
.preview-page-welcome .slot[data-slot="1"] { left: 72.9mm;  top: 10mm;    }
.preview-page-welcome .slot[data-slot="2"] { left: 137.1mm; top: 10mm;    }
.preview-page-welcome .slot[data-slot="3"] { left: 8.7mm;   top: 98.9mm;  }
.preview-page-welcome .slot[data-slot="4"] { left: 72.9mm;  top: 98.9mm;  }
.preview-page-welcome .slot[data-slot="5"] { left: 137.1mm; top: 98.9mm;  }
.preview-page-welcome .slot[data-slot="6"] { left: 8.7mm;   top: 187.8mm; }
.preview-page-welcome .slot[data-slot="7"] { left: 72.9mm;  top: 187.8mm; }
.preview-page-welcome .slot[data-slot="8"] { left: 137.1mm; top: 187.8mm; }
.preview-page .slot.welcome-card {
    background: var(--surface);
    border: 1px dashed var(--border);
    padding: 5mm;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.preview-page .slot.welcome-title {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-fg);
    justify-content: center;
    align-items: center;
    text-align: center;
}
.welcome-title-text {
    font-size: 4.5mm;
    font-weight: 600;
    line-height: 1.4;
}
.welcome-title-em {
    display: inline-block;
    margin: 1.5mm 0;
    font-size: 7mm;
    font-weight: 800;
    letter-spacing: .3px;
}
.welcome-step-num {
    margin-bottom: 3mm;
    color: var(--primary);
    font-size: 18mm;
    font-weight: 800;
    line-height: 1;
}
.welcome-step-text {
    color: var(--text);
    font-size: 3.6mm;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 600px) {
    /* Предпросмотр открывается полноэкранным окном по кнопке «Предпросмотр» */
    .preview { display: none; }
    body.preview-open { overflow: hidden; }
    body.preview-open .preview {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: var(--z-preview);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 12px calc(24px + env(safe-area-inset-bottom));
        background: var(--surface);
    }
    body.preview-open .preview-page {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 28px rgba(0, 0, 0, .12);
    }
    /* Шапка: «Скачать PDF» слева, крестик справа — по 16px от краёв экрана */
    .preview-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        align-self: stretch;
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 16px max(4px, calc(env(safe-area-inset-right) - 12px)) 12px max(4px, calc(env(safe-area-inset-left) - 12px));
        background: var(--surface);
    }
    .preview-pdf {
        min-height: 44px;
        padding: 8px 18px;
        font-size: 14px;
        white-space: nowrap;
    }
    .preview-close {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--gray-soft);
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .15s;
    }
    .preview-close:active { background: var(--gray-pressed); }
    .preview-close:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

    /* Лист A4 уменьшен примерно вдвое — текст гайда и размеры ячеек крупнее */
    .welcome-title-text { font-size: 6mm; }
    .welcome-title-em { font-size: 10mm; }
    .welcome-step-num { font-size: 22mm; }
    .welcome-step-text { font-size: 6.5mm; line-height: 1.3; }
    .preview-page .slot.slot-empty::before,
    .preview-page .slot.slot-empty::after {
        font-size: 5mm;
        letter-spacing: 0;
        opacity: .8;
    }
    .preview-page .slot.slot-empty::before { bottom: 2mm; }
    .preview-page .slot.slot-empty::after { left: 2mm; }
}


/* 8. Лайтбокс: просмотр карточки заклинания
   ========================================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 72px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--surface);
    cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 28px rgba(0, 0, 0, .12);
    cursor: default;
    user-select: none;
    -webkit-user-drag: none;
}

/* Круглые служебные кнопки: закрыть и стрелки */
.lightbox-close,
.lightbox-nav {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, opacity .15s;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: max(16px, env(safe-area-inset-right));
    display: flex;
    background: var(--gray-soft);
    border-color: transparent;
}
.lightbox-close svg { width: 16px; height: 16px; }
.lightbox-close:active { background: var(--gray-pressed); }
/* Стрелки — только у заклинаний из нескольких карточек */
.lightbox-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.lightbox.has-nav .lightbox-nav { display: flex; }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-nav:disabled { opacity: .35; cursor: default; }

.lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 44px;
    cursor: default;
}
.lightbox-counter {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.lightbox-counter:empty { display: none; }

/* «Добавить в набор» / «Убрать из набора»: контур, при нажатии — заливка */
.lightbox-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 22px;
    border: 2px solid var(--green);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--green);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, border-color .2s, color .2s;
}
.lightbox-action.is-remove { border-color: var(--primary); color: var(--primary); }
.lightbox-action:active { background: var(--green); color: var(--surface); }
.lightbox-action.is-remove:active { background: var(--primary); color: var(--surface); }
.lightbox-action[hidden] { display: none; }

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible,
.lightbox-action:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

@media (hover: hover) {
    .lightbox-close:hover { background: var(--gray-pressed); }
    .lightbox-nav:hover:not(:disabled) { background: var(--gray-soft); border-color: var(--border-strong); }
    .lightbox-action:hover { background: var(--green); color: var(--surface); }
    .lightbox-action.is-remove:hover { background: var(--primary); color: var(--surface); }
}

@media (max-width: 600px) {
    .lightbox { padding: 72px 12px calc(12px + env(safe-area-inset-bottom)); gap: 12px; }
    .lightbox-bar { width: 100%; gap: 12px; }
    .lightbox-action { flex: 1; max-width: 320px; }
    /* Стрелки не перекрывают текст карточки — уходят в нижнюю строку по краям */
    .lightbox-stage { position: static; }
    .lightbox-nav {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom));
        transform: none;
    }
    .lightbox-prev { left: 12px; }
    .lightbox-next { right: 12px; }
    .lightbox.has-nav .lightbox-bar { padding: 0 56px; }
}


/* 9. Окно прогресса генерации PDF
   ========================================================================== */

.progress-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-progress);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
}
.progress-modal[hidden] { display: none; }
.progress-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
    padding: 24px 28px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
}
.progress-title {
    font-size: 15px;
    font-weight: 600;
}
.progress-counter {
    color: var(--muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.progress-bar {
    height: 10px;
    border-radius: var(--radius-pill);
    background: #efece9;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.progress-fill {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--primary);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, .22) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .22) 50%,
        rgba(255, 255, 255, .22) 75%,
        transparent 75%,
        transparent
    );
    background-size: 16px 16px;
    box-shadow: 0 0 6px rgba(177, 59, 59, .35);
    overflow: hidden;
    animation: progress-stripes 1s linear infinite;
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
}
.progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: progress-shine 1.6s ease-in-out infinite;
}
@keyframes progress-stripes {
    from { background-position: 0 0; }
    to   { background-position: 16px 0; }
}
@keyframes progress-shine {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(150%); }
    100% { transform: translateX(150%); }
}


/* 10. Баннер cookie
   ========================================================================== */

.consent {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: var(--z-consent);
    width: min(560px, calc(100% - 32px));
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .14);
}
.consent-text {
    flex: 1;
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
}
.consent-text a { color: var(--text); text-underline-offset: 2px; }
.consent-text a:hover { color: var(--primary); }
.consent-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.consent .btn { white-space: nowrap; }

@media (max-width: 600px) {
    .consent {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: calc(100% - 24px);
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
    body:has(.mobile-bar) .consent { bottom: calc(var(--mobile-bar-h, 70px) + 8px); } /* над нижней панелью */
    .consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .consent .btn { min-height: 40px; font-size: 14px; }
}


/* 11. Страницы: донат, контакты, политика конфиденциальности
   ========================================================================== */

.donate-layout {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}
.donate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 720px;
    padding: 40px 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .04);
    text-align: center;
}
.donate-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.donate-card p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}
.donate-frame {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
}
.donate-frame iframe {
    max-width: 100%;
    border: none;
}
.donate-note { margin-top: 8px; font-size: 13px; }
.donate-note a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.donate-note a:hover { color: var(--primary); border-color: var(--primary); }

.contacts-email {
    margin: 8px 0;
    font-size: 18px;
    font-weight: 500;
}
.contacts-email a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.contacts-email a:hover { border-color: var(--primary); }

/* Политика: та же карточка, но текст по левому краю и тёмный */
.privacy-card { align-items: stretch; gap: 0; text-align: left; }
.privacy-card .donate-title { margin-bottom: 8px; text-align: center; }
.privacy-card .privacy-updated {
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
.privacy-card p,
.privacy-card li {
    max-width: none;
    margin: 0 0 12px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
}
.privacy-card li { margin: 4px 0; }
.privacy-card h3 {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 600;
}
.privacy-card ul { margin: 0 0 12px; padding-left: 20px; }
.privacy-card a { color: var(--text); text-underline-offset: 2px; }
.privacy-card a:hover { color: var(--primary); }

@media (max-width: 600px) {
    .donate-layout { padding: 20px 12px; }
    .donate-card { padding: 24px 16px; }
    .donate-title { font-size: 22px; }
}