:root {
    color-scheme: light;

    /* Единственный источник палитры продукта — токены лендинга.
       Страничные стили не объявляют собственных цветов, а читают эти
       переменные, поэтому смена бренда правится здесь и нигде больше. */
    --lp-ink: #17233d;
    --lp-ink-strong: #0b1220;
    --lp-ink-alt: #172033;
    --lp-muted: #667489;
    --lp-slate-950: #0f172a;
    --lp-slate-800: #253044;
    --lp-slate-700: #334155;
    --lp-slate-600: #475569;
    --lp-slate-500: #64748b;
    --lp-slate-400: #94a3b8;
    --lp-slate-300: #cbd5e1;
    --lp-slate-200: #e2e8f0;
    --lp-slate-100: #eef2f7;
    --lp-slate-50: #f8fafc;
    --lp-line: #dfe6f1;
    --lp-blue: #2f67c9;
    --lp-blue-dark: #203c82;
    --lp-blue-hover: #2458b5;
    --lp-blue-ink: #1e3a8a;
    --lp-blue-strong: #1e40af;
    --lp-blue-line: #bfdbfe;
    --lp-blue-line-soft: #c9dcff;
    --lp-blue-soft: #eff6ff;
    --lp-navy: #14223f;
    --lp-navy-deep: #0e1830;
    --lp-orange: #ffbf58;
    --lp-orange-hover: #f2a82e;
    --lp-orange-soft: #ffd28a;
    --lp-teal: #18a7ad;
    --lp-teal-alt: #16a2ad;
    --lp-teal-light: #83c9c1;
    --lp-teal-line: #5eead4;
    --lp-teal-soft: #f0fdfa;
    --lp-lime: #cdf36d;
    --lp-coral: #ff7a64;
    --lp-white: #fff;
    --lp-soft: #f8fbff;
    --lp-warm-soft: #fffaf1;
    --lp-cool-soft: #f1fbff;
    --lp-blue-tint: #e8f0fd;
    --lp-blue-tint-strong: #d3e2fa;
    --lp-page: #f2f5fb;
    --lp-on-navy: #d9e4f6;
    --lp-on-navy-muted: #c9d6e8;
    --lp-shadow-header: 0 14px 34px color-mix(in srgb, var(--lp-slate-950) 12%, transparent);
    --lp-shadow-soft: 0 12px 28px color-mix(in srgb, var(--lp-navy) 8%, transparent);
    --lp-shadow: 0 18px 42px color-mix(in srgb, var(--lp-navy) 9%, transparent);
    --lp-shadow-raised: 0 18px 48px color-mix(in srgb, var(--lp-slate-950) 24%, transparent);
    --lp-shadow-strong: 0 22px 60px color-mix(in srgb, var(--lp-navy) 22%, transparent);
    --lp-shadow-overlay: 0 30px 80px color-mix(in srgb, var(--lp-slate-950) 28%, transparent);
    --lp-shadow-accent: 0 14px 26px color-mix(in srgb, var(--lp-blue) 22%, transparent);
    --lp-shadow-accent-strong: 0 20px 42px color-mix(in srgb, var(--lp-blue) 20%, transparent);
    --lp-ring-selected: 0 0 0 2px color-mix(in srgb, var(--lp-blue) 16%, transparent);
    --lp-ring-selected-soft: 0 0 0 2px color-mix(in srgb, var(--lp-blue) 12%, transparent);
    --lp-ring-hairline: 0 0 0 1px color-mix(in srgb, var(--lp-slate-400) 36%, transparent);
    --lp-ring-hairline-inverse: 0 0 0 1px color-mix(in srgb, var(--lp-white) 78%, transparent);
    --lp-ring-inset-accent: 0 0 0 1px var(--page-accent) inset;

    /* Геометрия и типографика */
    --ui-radius-xs: 3px;
    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 14px;
    --ui-radius-pill: 999px;
    --ui-radius-round: 50%;
    --ui-radius-sm-top: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    --ui-font: "Segoe UI", Tahoma, sans-serif;

    /* Статусы */
    --lp-ok: #166534;
    --lp-ok-strong: #15803d;
    --lp-ok-bg: #f0fdf4;
    --lp-ok-bg-strong: #dcfce7;
    --lp-ok-line: #86efac;
    --lp-warn: #92400e;
    --lp-warn-strong: #854d0e;
    --lp-warn-bg: #fffbeb;
    --lp-warn-bg-soft: #fefce8;
    --lp-warn-line: #fcd34d;
    --lp-error: #991b1b;
    --lp-error-strong: #b91c1c;
    --lp-error-bg: #fff1f2;
    --lp-error-bg-strong: #fee2e2;
    --lp-error-line: #fca5a5;
    --ui-ok: var(--lp-ok);
    --ui-ok-bg: var(--lp-ok-bg);
    --ui-ok-line: var(--lp-ok-line);
    --ui-warn: var(--lp-warn);
    --ui-warn-bg: var(--lp-warn-bg);
    --ui-warn-line: var(--lp-warn-line);
    --ui-error: var(--lp-error);
    --ui-error-bg: var(--lp-error-bg);
    --ui-error-line: var(--lp-error-line);

    /* Прикладные алиасы: под этими именами палитру читают cabinet.css,
       admin.css, auth.css, legal.css и index.css. */
    --app-bg: var(--lp-page);
    --app-surface: var(--lp-white);
    --app-surface-muted: var(--lp-soft);
    --app-text: var(--lp-ink);
    --app-muted: var(--lp-muted);
    --app-line: var(--lp-line);
    --app-accent: var(--lp-blue);
    --app-accent-hover: var(--lp-blue-dark);
    --app-lime: var(--lp-teal);
    --app-amber: var(--lp-orange);
    --app-dark-action: var(--lp-navy);
    --app-dark-action-hover: var(--lp-navy-deep);
    --app-shadow: var(--lp-shadow);
    --app-focus: var(--lp-blue);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--ui-font);
    color: var(--app-text);
    background: var(--app-bg);
}

main {
    flex: 1 0 auto;
}

.app-header {
    /* Навигация тёмная на всех страницах: раньше этот вид жил в
       .landing-public-page .app-header и лендинг перекрашивал общую шапку
       под себя. Теперь это база, а страницы её не переопределяют. */
    --app-focus: var(--lp-orange);
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.78rem max(1rem, calc((100vw - 1680px) / 2));
    border-bottom: 0;
    background: var(--lp-navy);
    box-shadow: var(--lp-shadow-header);
}

.app-brand {
    color: var(--lp-white);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--app-text);
    text-decoration: none;
    min-width: 0;
}

.app-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ui-radius-sm);
    background: var(--lp-orange);
    color: var(--lp-navy);
    font-weight: 800;
}

.app-brand strong,
.app-brand small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-brand strong {
    color: var(--lp-white);
    font-size: 0.95rem;
}

.app-brand small {
    color: var(--lp-on-navy-muted);
    font-size: 0.78rem;
    margin-top: 0.08rem;
}

.app-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.app-nav a,
.app-nav button {
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--lp-on-navy);
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    padding: 0.52rem 0.72rem;
}

.app-nav .app-nav-section-link {
    padding-inline: 0.6rem;
}

.app-nav a:hover,
.app-nav button:hover {
    border-color: color-mix(in srgb, var(--lp-white) 28%, transparent);
    background: color-mix(in srgb, var(--lp-white) 10%, transparent);
    color: var(--lp-white);
}

.app-nav a:focus-visible,
.app-nav button:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 2px;
}

.app-nav .app-primary-action {
    border-color: var(--lp-orange);
    background: var(--lp-orange);
    color: var(--lp-navy);
}

.app-nav .app-primary-action:hover {
    border-color: var(--lp-orange-hover);
    background: var(--lp-orange-hover);
    color: var(--lp-navy);
}

/* Светлая кнопка на тёмной шапке. Раньше это был navy-на-navy: кнопка
   «Выйти» на лендинге сливалась с фоном шапки. */
.app-nav .app-secondary-action,
.app-nav a:not(.app-nav-section-link):not(.app-primary-action) {
    border-color: color-mix(in srgb, var(--lp-white) 20%, transparent);
    background: var(--lp-white);
    color: var(--lp-navy);
}

.app-nav .app-secondary-action:hover,
.app-nav a:not(.app-nav-section-link):not(.app-primary-action):hover {
    border-color: color-mix(in srgb, var(--lp-white) 20%, transparent);
    background: var(--lp-blue-tint);
    color: var(--lp-navy);
}

.app-user-name {
    color: var(--lp-navy);
    font-size: 0.9rem;
    font-weight: 700;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav form {
    margin: 0;
}

.app-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--lp-line);
    background: var(--lp-slate-50);
}

.app-footer-inner {
    width: min(1720px, 100%);
    min-height: clamp(84px, 9vw, 112px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 3vw, 3rem);
}

.app-footer strong,
.app-footer span,
.app-footer small {
    display: block;
}

.app-footer strong {
    font-size: 0.98rem;
}

.app-footer span {
    margin-top: 0.18rem;
    color: var(--app-muted);
    font-size: 0.86rem;
}

.app-footer small {
    margin-top: 0.34rem;
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.app-footer nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.35rem;
}

.app-footer a {
    color: var(--app-text);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    padding: 0.2rem 0;
}

.app-footer a:hover {
    color: var(--app-accent-hover);
    text-decoration: underline;
}

.app-footer a:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 2px;
}

.cookie-consent {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 1rem;
    align-items: center;
    width: min(680px, calc(100vw - 2rem));
    border: 1px solid color-mix(in srgb, var(--lp-ink) 16%, transparent);
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--lp-white) 96%, transparent);
    box-shadow: var(--lp-shadow-strong);
    padding: 1rem;
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent strong,
.cookie-consent p {
    display: block;
    margin: 0;
}

.cookie-consent p {
    margin-top: 0.25rem;
    color: var(--app-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.cookie-consent[data-cookie-consent-state="declined"] p::after {
    content: " Сейчас cookies отклонены, поэтому вход и регистрация отключены.";
    color: var(--ui-error);
    font-weight: 700;
}

.cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
}

.cookie-consent button {
    min-height: 2.35rem;
    border: 1px solid var(--app-accent);
    border-radius: var(--ui-radius);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0.5rem 0.75rem;
}

.cookie-consent button:first-child {
    background: var(--app-accent);
    color: var(--lp-white);
}

.cookie-consent button:last-child {
    background: var(--lp-white);
    color: var(--app-accent);
}

.cookie-consent-form-notice {
    margin: 0 0 0.75rem;
    border: 1px solid var(--ui-warn-line);
    border-radius: var(--ui-radius);
    background: var(--lp-warn-bg-soft);
    color: var(--lp-warn-strong);
    padding: 0.65rem 0.75rem;
    font-size: 0.88rem;
    line-height: 1.4;
}

.cookie-consent-form-notice p {
    margin: 0;
}

.cookie-consent-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.cookie-consent-form-actions button {
    min-height: 2.25rem;
    border: 1px solid var(--app-accent);
    border-radius: var(--ui-radius);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0.45rem 0.7rem;
}

.cookie-consent-form-actions button:first-child {
    background: var(--app-accent);
    color: var(--lp-white);
}

.cookie-consent-form-actions button:last-child {
    background: var(--lp-white);
    color: var(--app-accent);
}

.cookie-consent-dialog {
    width: min(460px, calc(100vw - 2rem));
    border: 1px solid color-mix(in srgb, var(--lp-ink) 16%, transparent);
    border-radius: var(--ui-radius);
    background: var(--lp-white);
    box-shadow: var(--lp-shadow-strong);
    color: var(--app-text);
    padding: 1.25rem;
}

.cookie-consent-dialog::backdrop {
    background: color-mix(in srgb, var(--lp-ink) 42%, transparent);
}

.cookie-consent-dialog h2,
.cookie-consent-dialog p {
    margin: 0;
}

.cookie-consent-dialog h2 {
    padding-right: 2rem;
    font-size: 1.25rem;
    line-height: 1.25;
}

.cookie-consent-dialog p {
    margin-top: 0.75rem;
    color: var(--app-muted);
    line-height: 1.5;
}

.cookie-consent-dialog-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--lp-ink) 14%, transparent);
    border-radius: var(--ui-radius);
    background: var(--lp-white);
    color: var(--app-muted);
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

.cookie-consent-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cookie-consent-dialog-actions button {
    min-height: 2.4rem;
    border: 1px solid var(--app-accent);
    border-radius: var(--ui-radius);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0.55rem 0.8rem;
}

.cookie-consent-dialog-actions button:first-child {
    background: var(--app-accent);
    color: var(--lp-white);
}

.cookie-consent-dialog-actions button:last-child {
    background: var(--lp-white);
    color: var(--app-accent);
}

.cookie-consent-reopen {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 20;
    min-height: 2.35rem;
    border: 1px solid var(--app-accent);
    border-radius: var(--ui-radius);
    background: var(--lp-white);
    color: var(--app-accent);
    box-shadow: var(--lp-shadow-soft);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0.5rem 0.75rem;
}

.cookie-consent-reopen[hidden] {
    display: none;
}

/* ------------------------------------------------------------------ *
 * Общие компоненты оболочки.
 * Кабинет, запуск генерации, админка, авторизация и юридические
 * страницы собираются из этих классов, а не из собственных копий
 * карточек и кнопок. Всё окрашивается токенами из :root.
 * ------------------------------------------------------------------ */

/* Компоненты задают display, поэтому браузерное [hidden] без этой строки
   перестаёт их прятать — а кабинет и запуск генерации прячут ими блоки. */
.ui-card[hidden],
.ui-btn[hidden],
.ui-badge[hidden],
.ui-empty[hidden],
.ui-notice[hidden],
.ui-field[hidden],
.ui-pager[hidden],
.ui-section-head[hidden],
/* .ui-picker-empty задаёт display: grid, и без этой строки её [hidden] не
   срабатывал: абзац «Вы ещё не использовали ни одного изображения» висел под
   непустой сеткой, а JS, который честно ставил hidden, ничего не менял. */
.ui-picker-empty[hidden] {
    display: none;
}

.ui-card {
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.ui-card--flat {
    box-shadow: none;
}

.ui-card--muted {
    background: var(--app-surface-muted);
}

.ui-card--accent {
    border-color: transparent;
    background: var(--lp-navy);
    color: var(--lp-white);
}

.ui-card--accent .ui-section-head h2,
.ui-card--accent .ui-section-head h3 {
    color: var(--lp-white);
}

.ui-card--accent .ui-section-head p,
.ui-card--accent .ui-muted {
    color: var(--lp-on-navy);
}

.ui-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.ui-section-head h1,
.ui-section-head h2,
.ui-section-head h3 {
    margin: 0;
    color: var(--app-text);
    line-height: 1.2;
}

.ui-section-head p {
    margin: 0.25rem 0 0;
    color: var(--app-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.ui-muted {
    color: var(--app-muted);
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius-pill);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.24rem 0.6rem;
    white-space: nowrap;
}

.ui-badge--ok {
    border-color: var(--ui-ok-line);
    background: var(--ui-ok-bg);
    color: var(--ui-ok);
}

.ui-badge--warn {
    border-color: var(--ui-warn-line);
    background: var(--ui-warn-bg);
    color: var(--ui-warn);
}

.ui-badge--error {
    border-color: var(--ui-error-line);
    background: var(--ui-error-bg);
    color: var(--ui-error);
}

.ui-badge--accent {
    border-color: transparent;
    background: var(--lp-orange);
    color: var(--lp-navy);
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: var(--app-surface);
    color: var(--app-text);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    padding: 0.55rem 0.9rem;
}

.ui-btn:hover {
    border-color: var(--lp-slate-400);
    background: var(--app-surface-muted);
}

.ui-btn:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 2px;
}

.ui-btn--primary {
    border-color: transparent;
    background: var(--app-accent);
    color: var(--lp-white);
}

.ui-btn--primary:hover {
    border-color: transparent;
    background: var(--app-accent-hover);
}

.ui-btn--accent {
    border-color: transparent;
    background: var(--lp-orange);
    color: var(--lp-navy);
}

.ui-btn--accent:hover {
    border-color: transparent;
    background: var(--lp-orange-hover);
}

.ui-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--app-accent);
}

.ui-btn--ghost:hover {
    border-color: var(--app-line);
    background: var(--app-surface-muted);
}

.ui-btn--danger {
    border-color: var(--ui-error-line);
    background: var(--ui-error-bg);
    color: var(--ui-error);
}

.ui-btn[disabled],
.ui-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.ui-btn[disabled]:hover,
.ui-btn[aria-disabled="true"]:hover {
    border-color: var(--app-line);
    background: var(--app-surface);
}

.ui-btn[data-loading="true"] {
    cursor: progress;
    opacity: 0.75;
}

.ui-btn[data-loading="true"]::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--ui-radius-round);
    animation: ui-spin 0.8s linear infinite;
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-btn[data-loading="true"]::before {
        animation: none;
    }
}

.ui-empty {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    border: 1px dashed var(--app-line);
    border-radius: var(--ui-radius-lg);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    text-align: center;
    padding: 1.35rem 1rem;
}

.ui-notice {
    margin: 0;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: var(--app-surface-muted);
    color: var(--app-text);
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 0.6rem 0.75rem;
}

.ui-notice--ok {
    border-color: var(--ui-ok-line);
    background: var(--ui-ok-bg);
    color: var(--ui-ok);
}

.ui-notice--warn {
    border-color: var(--ui-warn-line);
    background: var(--ui-warn-bg);
    color: var(--ui-warn);
}

.ui-notice--error {
    border-color: var(--ui-error-line);
    background: var(--ui-error-bg);
    color: var(--ui-error);
}

.ui-field {
    display: grid;
    gap: 0.32rem;
    font-weight: 700;
}

.ui-field input,
.ui-field select,
.ui-field textarea {
    width: 100%;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font: inherit;
    font-weight: 400;
    padding: 0.62rem 0.72rem;
}

.ui-field input:focus-visible,
.ui-field select:focus-visible,
.ui-field textarea:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 1px;
}

.ui-field-hint {
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.4;
}

.ui-modal {
    width: min(560px, calc(100vw - 2rem));
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--lp-shadow-strong);
    color: var(--app-text);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.ui-modal::backdrop {
    background: color-mix(in srgb, var(--lp-navy) 45%, transparent);
}

.ui-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Модалка выбора плитками — один вид для всех списков сохранённых
   материалов. Разметку даёт макрос partials/_picker_modal.html. */
.ui-picker-modal {
    width: min(1080px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--lp-shadow-strong);
    color: var(--app-text);
    padding: clamp(0.85rem, 2vw, 1.15rem);
}

.ui-picker-modal::backdrop,
.ui-lightbox::backdrop {
    background: color-mix(in srgb, var(--lp-navy) 54%, transparent);
}

.ui-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ui-picker-head h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.2;
}

.ui-picker-search {
    width: 100%;
    min-height: 2.5rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font: inherit;
    padding: 0.55rem 0.7rem;
}

.ui-picker-search:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 1px;
}

.ui-picker-grid {
    display: grid;
    /* auto-fill, а не auto-fit: единственная плитка должна остаться плиткой,
       а не растянуться на всю ширину модалки. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    max-height: min(64vh, 720px);
    overflow: auto;
    padding: 0.1rem 0.2rem 0.2rem;
}

.ui-picker-tile {
    position: relative;
    min-width: 0;
}

.ui-picker-tile[hidden] {
    display: none;
}

.ui-picker-tile > .asset-card,
.ui-picker-tile > label,
.ui-picker-tile > div {
    height: 100%;
}

/* Кнопка увеличения лежит поверх плитки, но рядом с <label>, а не внутри:
   иначе клик по ней заодно выбирал бы материал. */
.ui-picker-zoom {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--lp-white) 92%, transparent);
    color: var(--app-text);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
}

.ui-picker-zoom:hover {
    border-color: var(--app-accent);
    background: var(--lp-white);
    color: var(--app-accent);
}

.ui-picker-zoom:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 2px;
}

.ui-picker-zoom[hidden] {
    display: none;
}

/* Удаление материала из библиотеки. Лежит там же, где кнопка увеличения, и по
   той же причине снаружи <label>: клик по ней не должен выбирать материал. */
.ui-picker-remove {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--lp-white) 92%, transparent);
    color: var(--app-muted, var(--app-text));
    cursor: pointer;
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
}

.ui-picker-remove:hover {
    border-color: var(--ui-error);
    background: var(--lp-white);
    color: var(--ui-error);
}

.ui-picker-remove:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 2px;
}

.ui-picker-remove:disabled {
    opacity: 0.5;
    cursor: progress;
}

/* Счётчик «Сохранено X из N»: в шапке блока и в подвале модалки выбора. */
.library-usage {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
}

.library-usage--full {
    color: var(--ui-error);
    font-weight: 600;
}

/* Знак «?» с подсказкой (templates/partials/_help_tip.html). Открывается по
   наведению и по фокусу с клавиатуры. По умолчанию подсказка растёт вправо от
   знака; внутри .ui-help-anchor она привязана к ширине якоря и поэтому не
   вылезает за край экрана, где бы знак ни стоял. */
.ui-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.ui-help-anchor {
    position: relative;
}

.ui-help-anchor .ui-help {
    position: static;
}

.ui-help-trigger {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--lp-slate-300);
    border-radius: var(--ui-radius-round);
    background: var(--lp-slate-50);
    color: var(--lp-slate-700);
    cursor: help;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
}

.ui-help-trigger:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 2px;
}

.ui-help-bubble {
    position: absolute;
    z-index: 30;
    left: 0;
    top: calc(100% + 0.55rem);
    display: none;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2.5rem));
    border: 1px solid color-mix(in srgb, var(--lp-ink) 16%, transparent);
    border-radius: var(--ui-radius);
    background: var(--lp-ink-alt);
    color: var(--lp-white);
    padding: 0.58rem 0.68rem;
    box-shadow: var(--lp-shadow-raised);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
    text-transform: none;
    white-space: normal;
}

.ui-help-bubble::before {
    position: absolute;
    left: 0.5rem;
    top: -0.3rem;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--lp-ink-alt);
    content: "";
    transform: rotate(45deg);
}

.ui-help-anchor .ui-help-bubble {
    top: calc(100% + 0.4rem);
    max-width: min(22rem, 100%);
}

/* Внутри якоря подсказка не стоит под знаком, и стрелка указывала бы мимо. */
.ui-help-anchor .ui-help-bubble::before {
    display: none;
}

.ui-help-line {
    display: block;
}

.ui-help-line + .ui-help-line {
    margin-top: 0.4rem;
}

.ui-help:hover .ui-help-bubble,
.ui-help:focus-within .ui-help-bubble {
    display: block;
}

.launch-once-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.launch-once-note {
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

.launch-once-note[hidden] {
    display: none;
}

/* Лайтбокс: увеличенное превью выбранной плитки. */
.ui-picker-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--app-line);
}

.ui-picker-note {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
}

/* Пустое состояние стоит рядом с сеткой, а не среди плиток: общий фильтр
   перебирает только плитки, и абзац внутри role="list" он прятал как
   непопавшую плитку. */
.ui-picker-empty {
    display: grid;
    min-height: 9rem;
    place-items: center;
    margin: 0;
    border: 1px dashed var(--app-line);
    border-radius: var(--ui-radius);
    padding: 1rem;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.35;
}

/* Инлайн-сообщение внутри диалога: модалка накрывает страницу, и статус
   с основного экрана пользователю просто не видно. */
.ui-picker-status {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
}

.ui-picker-status.error {
    color: var(--ui-error);
}

.ui-picker-foot[hidden] {
    display: none;
}

.ui-lightbox {
    width: min(920px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--lp-shadow-strong);
    color: var(--app-text);
    padding: clamp(0.85rem, 2vw, 1.15rem);
}

.ui-lightbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ui-lightbox-head h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ui-lightbox-stage {
    display: grid;
    place-items: center;
    max-height: min(78vh, 820px);
    overflow: auto;
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: var(--app-surface-muted);
    padding: clamp(0.6rem, 1.5vw, 1rem);
}

/* Превью внутри лайтбокса освобождается от размеров плитки, но целиком
   помещается на экран: смотреть его со скроллом смысла нет. */
.ui-lightbox .ui-lightbox-stage > * {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 820px;
    height: auto;
    /* В плитке у обёртки превью фиксированные пропорции и высота — в
       лайтбоксе они оставляли бы пустые поля вокруг страницы. */
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    flex: none;
}

.ui-lightbox .ui-lightbox-stage .layout-page-canvas {
    position: relative;
    inset: auto;
    width: min(100%, calc(min(70vh, 720px) * var(--page-aspect, 1)));
    height: auto;
    aspect-ratio: var(--page-aspect, 1);
    max-height: min(70vh, 720px);
    margin: 0 auto;
}

.ui-lightbox .ui-lightbox-stage img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(70vh, 720px);
    margin: 0 auto;
    object-fit: contain;
}

.ui-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.ui-pager a,
.ui-pager button {
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    background: var(--app-surface);
    color: var(--app-text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    padding: 0.42rem 0.7rem;
}

.ui-pager a:hover,
.ui-pager button:hover {
    border-color: var(--lp-slate-400);
    background: var(--app-surface-muted);
}

.ui-pager a:focus-visible,
.ui-pager button:focus-visible {
    outline: 3px solid var(--app-focus);
    outline-offset: 2px;
}

.ui-pager-disabled {
    border: 1px solid var(--app-line);
    border-radius: var(--ui-radius);
    color: var(--app-muted);
    opacity: 0.6;
    padding: 0.42rem 0.7rem;
}

@media (max-width: 760px) {
    .app-header {
        display: grid;
        align-items: start;
        padding: 0.85rem 1rem;
    }

    .app-nav .app-nav-section-link {
        display: none;
    }

    .app-nav {
        justify-content: flex-start;
    }

    .app-footer-inner {
        display: grid;
        min-height: 0;
    }

    .app-footer nav {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .cookie-consent {
        left: 1rem;
        right: 1rem;
        grid-template-columns: 1fr;
    }

    .cookie-consent-actions {
        flex-wrap: wrap;
    }
}