/* =============================================================================
   PriceToShop — темы оформления
   =============================================================================

   ОПИСАНИЕ
   --------
   Слой поверх Bootstrap 5.3: цвета, шрифт, тени, радиусы и движение.
   Разметка от него не зависит (структура страниц — docs/UI_STANDARD.md).
   Тема выбирается переключателем «◐ Тема» в шапке, хранится в cookie
   `pts_theme` и ставится сервером в <html data-pts-theme="…"> (common/
   themes.py). Правила ниже написаны ОДИН раз на токенах `--pts-*`; тема —
   это только набор значений токенов (+ пара своих эффектов у Nova).

   ТЕМЫ
   ----
   • Aurora — светлая (по умолчанию). Спокойный «продуктовый» стиль для
     инструмента, в котором проводят часы: светлый холст с лёгким
     переливом, белые карточки с мягкой тенью, тёмная навигация с
     индиго-градиентом, один насыщенный акцент (индиго → фиолет). Цвет —
     только у действий и статусов, таблицы с тысячами строк не утомляют.

   • Aurora — тёмная. Та же композиция ночью: графитовый холст, чуть более
     светлые поверхности вместо теней, акцент осветлён (#818CF8) ради
     контраста, статусы — полупрозрачные «подсвеченные» плашки.

   • Nova — неон и стекло. Современная тёмная тема с движением:
     – медленно «дышащий» фон из трёх цветных пятен (северное сияние);
     – полупрозрачные «стеклянные» карточки с размытием подложки;
     – неоновый акцент бирюза → фиолет → розовый, свечение у кнопок и
       активных вкладок;
     – появление содержимого страницы с лёгким подъёмом, строки таблиц —
       каскадом; блик, пробегающий по основной кнопке при наведении.

   • Glass Light — матовое стекло. Светлая версия Nova в духе современных
     интерфейсов Apple: пастельные пятна (небо, роза, лимон, лаванда)
     медленно плывут за белыми полупрозрачными панелями с сильным
     размытием; светлая «стеклянная» навигация, крупные радиусы, синий →
     фиолетовый акцент, градиентный заголовок, те же микроанимации.

   • Midnight Terminal — для тех, кто живёт в консоли и работает с
     тысячами строк: моноширинный JetBrains Mono везде, фосфорно-зелёный
     на чёрном, янтарный для кода, почти квадратные углы, плотные
     таблицы, едва заметные строки развёртки ЭЛТ, мигающий курсор после
     заголовка («~/ поставщики▌»), свечение вместо теней.

   • Как в системе — Aurora светлая или тёмная по настройке ОС, меняется
     сама вслед за системой.

   ОБЩЕЕ
   -----
   • Шрифт Inter (вариативный, с кириллицей) — всегда; у Terminal —
     ещё свой шрифт (common/themes.py, грузится только для
     выбранной темы). В таблицах «табличные» цифры — колонки ровные.
   • Радиусы 10–16px, фокус — мягкое кольцо цвета акцента, кнопки при
     наведении приподнимаются на 1px.
   • Движение короткое (150–450 мс) и только там, где помогает понять, что
     произошло; `prefers-reduced-motion` выключает всю анимацию.
   • Контраст текста ≥ 4.5:1 во всех темах.

   КАК МЕНЯТЬ
   ----------
   Оттенки — только значения токенов в блоке нужной темы. Новая тема =
   новый блок `[data-pts-theme="имя"] { … }` + запись в common/themes.py
   (название, светлая/тёмная, шрифт) + образец `.theme-swatch-имя`.
   Переключатель берёт список тем с сервера — в JS ничего не добавлять.
   Отключить всё — убрать подключение этого файла в templates/base.html.

   ============================================================================= */

/* =========================== ТОКЕНЫ ТЕМ =================================== */

/* Aurora — светлая (и «как в системе» при светлой ОС) */
:root,
[data-pts-theme="aurora"],
[data-pts-theme="system"] {
    --pts-font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --pts-accent: #4f46e5;
    --pts-accent-2: #7c3aed;
    --pts-accent-rgb: 79, 70, 229;
    --pts-accent-strong: #3730a3;
    --pts-accent-soft: #eef0ff;
    --pts-gradient: linear-gradient(135deg, var(--pts-accent) 0%, var(--pts-accent-2) 100%);
    --pts-on-accent: #ffffff;

    --pts-canvas: #f4f6fb;
    --pts-glow-1: rgba(124, 58, 237, .06);
    --pts-glow-2: rgba(79, 70, 229, .06);
    --pts-surface: #ffffff;
    --pts-surface-2: #f8f9fd;
    --pts-surface-hover: #f1f3f9;
    --pts-row-selected: #e7e9ff;
    --pts-ink: #0f172a;
    --pts-ink-2: #334155;
    --pts-muted: #64748b;
    --pts-line: #e6e9f2;
    --pts-line-strong: #d5daea;
    --pts-code-ink: #7c3aed;
    --pts-code-bg: #f5f3ff;

    --pts-font-heading: var(--pts-font);

    --pts-nav-bg: linear-gradient(100deg, #0b1020 0%, #1e1b4b 55%, #312e81 100%);
    --pts-nav-shadow: 0 6px 24px rgba(30, 27, 75, .25);
    --pts-nav-ink: rgba(255, 255, 255, .72);
    --pts-nav-ink-strong: #ffffff;
    --pts-nav-hover: rgba(255, 255, 255, .10);
    --pts-nav-line: rgba(255, 255, 255, .25);
    --pts-brand: linear-gradient(90deg, #fff 0%, #c7d2fe 100%);
    --pts-blobs: none;  /* анимированный фон из цветных пятен (Nova, Glass) */

    --pts-success-bg: #d1fae5; --pts-success-ink: #065f46; --pts-success-line: #a7f3d0;
    --pts-warning-bg: #fef3c7; --pts-warning-ink: #92400e; --pts-warning-line: #fde68a;
    --pts-danger-bg: #fee2e2;  --pts-danger-ink: #991b1b;  --pts-danger-line: #fecaca;
    --pts-info-bg: #e0f2fe;    --pts-info-ink: #075985;    --pts-info-line: #bae6fd;
    --pts-neutral-bg: #eef1f6; --pts-neutral-ink: #475569;

    --pts-radius: 14px;
    --pts-radius-sm: 10px;
    --pts-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
    --pts-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 10px 28px rgba(15, 23, 42, .10);
    --pts-accent-shadow: 0 4px 14px rgba(var(--pts-accent-rgb), .35);
    --pts-blur: none;
    --pts-motion: 1;  /* множитель длительности анимаций */
}

/* Aurora — тёмная (и «как в системе» при тёмной ОС) */
[data-pts-theme="aurora-dark"],
[data-pts-theme="system"][data-bs-theme="dark"] {
    --pts-accent: #818cf8;
    --pts-accent-2: #a78bfa;
    --pts-accent-rgb: 129, 140, 248;
    --pts-accent-strong: #c7d2fe;
    --pts-accent-soft: rgba(129, 140, 248, .10);
    --pts-on-accent: #0b0f19;

    --pts-canvas: #0b0f19;
    --pts-glow-1: rgba(167, 139, 250, .08);
    --pts-glow-2: rgba(99, 102, 241, .08);
    --pts-surface: #121826;
    --pts-surface-2: #161e2e;
    --pts-surface-hover: #1b2436;
    --pts-row-selected: rgba(129, 140, 248, .18);
    --pts-ink: #e5e7eb;
    --pts-ink-2: #cbd5e1;
    --pts-muted: #94a3b8;
    --pts-line: #232d42;
    --pts-line-strong: #33415c;
    --pts-code-ink: #c4b5fd;
    --pts-code-bg: rgba(167, 139, 250, .12);

    --pts-nav-bg: linear-gradient(100deg, #05070d 0%, #111133 60%, #1e1b4b 100%);
    --pts-nav-shadow: 0 1px 0 #1b2336, 0 8px 28px rgba(0, 0, 0, .45);

    --pts-success-bg: rgba(16, 185, 129, .14); --pts-success-ink: #6ee7b7; --pts-success-line: rgba(16, 185, 129, .35);
    --pts-warning-bg: rgba(245, 158, 11, .14); --pts-warning-ink: #fcd34d; --pts-warning-line: rgba(245, 158, 11, .35);
    --pts-danger-bg: rgba(239, 68, 68, .14);   --pts-danger-ink: #fca5a5;  --pts-danger-line: rgba(239, 68, 68, .35);
    --pts-info-bg: rgba(14, 165, 233, .14);    --pts-info-ink: #7dd3fc;    --pts-info-line: rgba(14, 165, 233, .35);
    --pts-neutral-bg: rgba(148, 163, 184, .14); --pts-neutral-ink: #cbd5e1;

    --pts-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
    --pts-shadow-hover: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .35);
    --pts-accent-shadow: 0 4px 18px rgba(var(--pts-accent-rgb), .30);
}

/* Nova — неон и стекло */
[data-pts-theme="nova"] {
    --pts-accent: #22d3ee;
    --pts-accent-2: #a855f7;
    --pts-accent-3: #ec4899;
    --pts-accent-rgb: 34, 211, 238;
    --pts-accent-strong: #a5f3fc;
    --pts-accent-soft: rgba(34, 211, 238, .09);
    --pts-gradient: linear-gradient(120deg, #22d3ee 0%, #a855f7 55%, #ec4899 100%);
    --pts-on-accent: #04111a;

    --pts-canvas: #06060f;
    --pts-surface: rgba(255, 255, 255, .045);
    --pts-surface-2: rgba(255, 255, 255, .06);
    --pts-surface-hover: rgba(255, 255, 255, .08);
    --pts-row-selected: rgba(168, 85, 247, .20);
    --pts-ink: #f1f5f9;
    --pts-ink-2: #dbe2ee;
    --pts-muted: #9aa4b8;
    --pts-line: rgba(255, 255, 255, .09);
    --pts-line-strong: rgba(255, 255, 255, .18);
    --pts-code-ink: #f0abfc;
    --pts-code-bg: rgba(236, 72, 153, .12);

    --pts-nav-bg: rgba(8, 8, 20, .55);
    --pts-nav-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 40px rgba(0, 0, 0, .35);

    --pts-success-bg: rgba(52, 211, 153, .14); --pts-success-ink: #6ee7b7; --pts-success-line: rgba(52, 211, 153, .35);
    --pts-warning-bg: rgba(251, 191, 36, .14); --pts-warning-ink: #fde68a; --pts-warning-line: rgba(251, 191, 36, .35);
    --pts-danger-bg: rgba(244, 63, 94, .15);   --pts-danger-ink: #fda4af;  --pts-danger-line: rgba(244, 63, 94, .38);
    --pts-info-bg: rgba(34, 211, 238, .13);    --pts-info-ink: #a5f3fc;    --pts-info-line: rgba(34, 211, 238, .35);
    --pts-neutral-bg: rgba(255, 255, 255, .08); --pts-neutral-ink: #cbd5e1;

    --pts-radius: 16px;
    --pts-radius-sm: 11px;
    --pts-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 40px rgba(0, 0, 0, .35);
    --pts-shadow-hover: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(34, 211, 238, .15);
    --pts-accent-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 6px 24px rgba(168, 85, 247, .35), 0 0 24px rgba(34, 211, 238, .25);
    --pts-blur: blur(14px) saturate(140%);
    --pts-motion: 1.35;
    --pts-brand: var(--pts-gradient);
    --pts-blobs:
        radial-gradient(28vmax 28vmax at 20% 30%, rgba(34, 211, 238, .22), transparent 60%),
        radial-gradient(32vmax 32vmax at 80% 20%, rgba(168, 85, 247, .22), transparent 60%),
        radial-gradient(30vmax 30vmax at 60% 85%, rgba(236, 72, 153, .16), transparent 60%);
}

/* Glass Light — матовое стекло на пастельном переливе (светлая) */
[data-pts-theme="glass"] {
    --pts-accent: #3b5bfd;
    --pts-accent-2: #a855f7;
    --pts-accent-rgb: 59, 91, 253;
    --pts-accent-strong: #2338c7;
    --pts-accent-soft: rgba(59, 91, 253, .08);
    --pts-gradient: linear-gradient(120deg, #3b82f6 0%, #6366f1 45%, #d946ef 100%);
    --pts-on-accent: #ffffff;

    --pts-canvas: #eef1fb;
    --pts-glow-1: transparent;
    --pts-glow-2: transparent;
    --pts-surface: rgba(255, 255, 255, .58);
    --pts-surface-2: rgba(255, 255, 255, .42);
    --pts-surface-hover: rgba(255, 255, 255, .75);
    --pts-row-selected: rgba(99, 102, 241, .14);
    --pts-ink: #111827;
    --pts-ink-2: #374151;
    --pts-muted: #5b6475;
    --pts-line: rgba(255, 255, 255, .75);
    --pts-line-strong: rgba(17, 24, 39, .12);
    --pts-code-ink: #7c3aed;
    --pts-code-bg: rgba(124, 58, 237, .08);

    --pts-nav-bg: rgba(255, 255, 255, .55);
    --pts-nav-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 8px 30px rgba(31, 41, 55, .08);
    --pts-nav-ink: #374151;
    --pts-nav-ink-strong: #111827;
    --pts-nav-hover: rgba(255, 255, 255, .7);
    --pts-nav-line: rgba(17, 24, 39, .12);
    --pts-nav-toggler-filter: invert(1);
    --pts-brand: linear-gradient(90deg, #1d4ed8 0%, #7c3aed 60%, #db2777 100%);
    --pts-blobs:
        radial-gradient(38vmax 38vmax at 15% 20%, rgba(96, 165, 250, .70), transparent 62%),
        radial-gradient(42vmax 42vmax at 85% 15%, rgba(244, 114, 182, .60), transparent 62%),
        radial-gradient(40vmax 40vmax at 70% 90%, rgba(250, 204, 21, .45), transparent 62%),
        radial-gradient(36vmax 36vmax at 25% 85%, rgba(167, 139, 250, .60), transparent 62%);

    --pts-success-bg: rgba(16, 185, 129, .12); --pts-success-ink: #047857; --pts-success-line: rgba(16, 185, 129, .35);
    --pts-warning-bg: rgba(245, 158, 11, .14); --pts-warning-ink: #92400e; --pts-warning-line: rgba(245, 158, 11, .35);
    --pts-danger-bg: rgba(239, 68, 68, .12);   --pts-danger-ink: #b91c1c;  --pts-danger-line: rgba(239, 68, 68, .35);
    --pts-info-bg: rgba(14, 165, 233, .12);    --pts-info-ink: #0369a1;    --pts-info-line: rgba(14, 165, 233, .35);
    --pts-neutral-bg: rgba(255, 255, 255, .7); --pts-neutral-ink: #374151;

    --pts-radius: 18px;
    --pts-radius-sm: 12px;
    --pts-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 32px rgba(31, 41, 55, .08);
    --pts-shadow-hover: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 44px rgba(31, 41, 55, .14);
    --pts-accent-shadow: 0 6px 20px rgba(99, 102, 241, .35);
    --pts-blur: blur(18px) saturate(160%);
    --pts-motion: 1.2;
}

/* Midnight Terminal — фосфор на чёрном, моноширинный, плотный */
[data-pts-theme="terminal"] {
    --pts-font: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
    --pts-font-heading: var(--pts-font);

    --pts-accent: #3ddc84;
    --pts-accent-2: #3ddc84;
    --pts-accent-rgb: 61, 220, 132;
    --pts-accent-strong: #8ff0b6;
    --pts-accent-soft: rgba(61, 220, 132, .08);
    --pts-gradient: linear-gradient(0deg, #3ddc84, #3ddc84);
    --pts-on-accent: #04110a;

    --pts-canvas: #050807;
    --pts-glow-1: transparent;
    --pts-glow-2: transparent;
    --pts-surface: #0a0f0c;
    --pts-surface-2: #0d1510;
    --pts-surface-hover: #111c15;
    --pts-row-selected: rgba(61, 220, 132, .16);
    --pts-ink: #d4f7dd;
    --pts-ink-2: #b4e3c1;
    --pts-muted: #6c8f78;
    --pts-line: #16261c;
    --pts-line-strong: #24402f;
    --pts-code-ink: #ffb000;
    --pts-code-bg: rgba(255, 176, 0, .10);

    --pts-nav-bg: #030504;
    --pts-nav-shadow: 0 1px 0 #1d3a28;
    --pts-nav-ink: #7fbf93;
    --pts-nav-ink-strong: #3ddc84;
    --pts-nav-hover: rgba(61, 220, 132, .10);
    --pts-nav-line: #24402f;
    --pts-nav-link-radius: 2px;
    --pts-brand: linear-gradient(90deg, #3ddc84, #3ddc84);

    --pts-success-bg: rgba(61, 220, 132, .12); --pts-success-ink: #3ddc84; --pts-success-line: rgba(61, 220, 132, .4);
    --pts-warning-bg: rgba(255, 176, 0, .12);  --pts-warning-ink: #ffb000; --pts-warning-line: rgba(255, 176, 0, .4);
    --pts-danger-bg: rgba(255, 85, 85, .12);   --pts-danger-ink: #ff6b6b; --pts-danger-line: rgba(255, 85, 85, .4);
    --pts-info-bg: rgba(94, 200, 255, .10);    --pts-info-ink: #7fd4ff; --pts-info-line: rgba(94, 200, 255, .35);
    --pts-neutral-bg: rgba(212, 247, 221, .07); --pts-neutral-ink: #9cc9aa;

    --pts-radius: 4px;
    --pts-radius-sm: 3px;
    --pts-shadow: none;
    --pts-shadow-hover: 0 0 0 1px rgba(61, 220, 132, .35);
    --pts-accent-shadow: 0 0 14px rgba(61, 220, 132, .35);
    --pts-motion: .8;
}

/* Bootstrap — через его же переменные, чтобы тема доходила и до
   компонентов, которых здесь нет явно. Для всех тем одинаково. */
[data-pts-theme] {
    --bs-body-font-family: var(--pts-font);
    --bs-body-color: var(--pts-ink);
    --bs-body-bg: var(--pts-canvas);
    --bs-tertiary-bg: var(--pts-canvas);
    --bs-secondary-bg: var(--pts-surface-2);
    --bs-secondary-color: var(--pts-muted);
    --bs-emphasis-color: var(--pts-ink);
    --bs-heading-color: var(--pts-ink);
    --bs-border-color: var(--pts-line);
    --bs-border-radius: var(--pts-radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--pts-radius);
    --bs-primary: var(--pts-accent);
    --bs-primary-rgb: var(--pts-accent-rgb);
    --bs-link-color: var(--pts-accent);
    --bs-link-color-rgb: var(--pts-accent-rgb);
    --bs-link-hover-color: var(--pts-accent-strong);
    --bs-link-hover-color-rgb: var(--pts-accent-rgb);
    --bs-focus-ring-color: rgba(var(--pts-accent-rgb), .25);
}

/* =========================== ОСНОВА ======================================= */

body {
    font-family: var(--pts-font);
    font-feature-settings: "cv11", "ss01";
    color: var(--pts-ink);
    background:
        radial-gradient(1200px 400px at 100% -10%, var(--pts-glow-1, transparent), transparent 60%),
        radial-gradient(900px 360px at -10% -10%, var(--pts-glow-2, transparent), transparent 60%),
        var(--pts-canvas) !important;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* У <body> класс bg-body-tertiary с !important — иначе он перебивает холст темы. */
body.bg-body-tertiary { background-color: var(--pts-canvas) !important; }

a { text-underline-offset: .2em; }
::selection { background: rgba(var(--pts-accent-rgb), .25); }
.text-muted, .form-text { color: var(--pts-muted) !important; }

/* Плавная смена цветов при переключении темы (класс ставит app.js). */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* Содержимое не растягивается на сверхшироких мониторах; навигация — в ту
   же ширину. Каталог (колонка категорий + таблица на 15 колонок) — шире. */
body > main.container-fluid,
body > .navbar > .container-fluid {
    max-width: 1680px;
    padding-inline: clamp(1rem, 2.5vw, 2.25rem);
}
body:has(#catalog-main) > main.container-fluid,
body:has(#catalog-main) > .navbar > .container-fluid { max-width: 2200px; }

/* Утилиты Bootstrap с жёстким белым/светлым фоном — на поверхности темы. */
.bg-white, .bg-light { background-color: var(--pts-surface) !important; }
.text-bg-light { background-color: var(--pts-neutral-bg) !important; color: var(--pts-neutral-ink) !important; }
.border { border-color: var(--pts-line) !important; }

/* =========================== НАВИГАЦИЯ ==================================== */

.navbar.bg-dark {
    background: var(--pts-nav-bg) !important;
    box-shadow: var(--pts-nav-shadow);
    padding-block: .55rem;
    backdrop-filter: var(--pts-blur);
    -webkit-backdrop-filter: var(--pts-blur);
}

.navbar-brand {
    font-family: var(--pts-font-heading);
    font-weight: 750;
    letter-spacing: -.02em;
    background: var(--pts-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Градиентный текст (background-clip: text) виден только внутри рамки
   элемента: хвосты букв справа (сжатый интервал) и верх
   прописных и надстрочных знаков (Й, Ё) обрезались. Запас по краям —
   padding, а отрицательный margin возвращает раскладку на место. */
.navbar-brand,
[data-pts-theme="nova"] .page-header h1,
[data-pts-theme="glass"] .page-header h1 {
    padding: .18em .3em .14em 0;
    margin-block: -.18em -.14em;
    margin-right: calc(1rem - .3em);  /* у .navbar-brand в Bootstrap отступ справа 1rem */
    line-height: 1.3;
}
[data-pts-theme="nova"] .page-header h1,
[data-pts-theme="glass"] .page-header h1 { margin-right: -.3em; }

.navbar-dark .navbar-nav .nav-link {
    border-radius: var(--pts-nav-link-radius, 999px);
    padding: .35rem .8rem;
    margin-inline: .1rem;
    color: var(--pts-nav-ink);
    transition: background-color .15s ease, color .15s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show {
    color: var(--pts-nav-ink-strong);
    background: var(--pts-nav-hover);
}

.navbar-dark .navbar-toggler-icon { filter: var(--pts-nav-toggler-filter, none); }
.navbar-dark .navbar-toggler { border-color: var(--pts-nav-line); }

/* Образцы тем в переключателе */
.theme-swatch {
    width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: none;
    border: 1px solid rgba(127, 127, 127, .35);
}
.theme-swatch-aurora { background: linear-gradient(135deg, #f4f6fb 50%, #4f46e5 50%); }
.theme-swatch-aurora-dark { background: linear-gradient(135deg, #0b0f19 50%, #818cf8 50%); }
.theme-swatch-nova { background: conic-gradient(#22d3ee, #a855f7, #ec4899, #22d3ee); }
.theme-swatch-glass { background: conic-gradient(#bfdbfe, #fbcfe8, #fde68a, #c7d2fe, #bfdbfe); }
.theme-swatch-terminal { background: radial-gradient(circle at 35% 35%, #3ddc84 0 28%, #07090a 30%); }
.theme-swatch-system { background: linear-gradient(90deg, #f4f6fb 50%, #0b0f19 50%); }

/* Заголовки — шрифт темы (у Terminal — моноширинный) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .modal-title { font-family: var(--pts-font-heading); }

/* =========================== ШАПКА, КАРТОЧКИ ============================== */

.page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.card {
    border: 1px solid var(--pts-line);
    border-radius: var(--pts-radius);
    background: var(--pts-surface);
    color: var(--pts-ink);
    box-shadow: var(--pts-shadow);
    backdrop-filter: var(--pts-blur);
    -webkit-backdrop-filter: var(--pts-blur);
}

.card-header {
    background: transparent;
    border-bottom-color: var(--pts-line);
    font-weight: 600;
}

.bulk-bar { border-color: rgba(var(--pts-accent-rgb), .22); }

/* =========================== ТАБЛИЦЫ ====================================== */

.table {
    --bs-table-color: var(--pts-ink);
    --bs-table-bg: var(--pts-surface);
    --bs-table-striped-color: var(--pts-ink);
    --bs-table-striped-bg: var(--pts-surface-2);
    --bs-table-hover-color: var(--pts-ink);
    --bs-table-hover-bg: var(--pts-accent-soft);
    --bs-table-border-color: var(--pts-line);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--pts-line);
    border-radius: var(--pts-radius);
    overflow: hidden;
    box-shadow: var(--pts-shadow);
    font-variant-numeric: tabular-nums;
    backdrop-filter: var(--pts-blur);
    -webkit-backdrop-filter: var(--pts-blur);
}

.table > thead th {
    background: var(--pts-surface-2);
    color: var(--pts-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pts-line);
    white-space: nowrap;
}

.table > tbody > tr > * { transition: background-color .12s ease; }
.table > tbody > tr:hover > * { background-color: var(--pts-accent-soft); }
.table > tbody > tr:has(.row-select:checked) > *,
.table > tbody > tr:has(.row-checkbox:checked) > * { background-color: var(--pts-row-selected); }
.table > :not(caption) > * > * { border-bottom-color: var(--pts-line); padding-block: .6rem; }

/* =========================== КНОПКИ ======================================= */

.btn {
    border-radius: var(--pts-radius-sm);
    font-weight: 550;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-color: var(--pts-on-accent);
    --bs-btn-bg: var(--pts-accent);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--pts-on-accent);
    --bs-btn-hover-bg: var(--pts-accent);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--pts-on-accent);
    --bs-btn-active-bg: var(--pts-accent-strong);
    background-image: var(--pts-gradient);
    background-size: 160% 100%;
    background-position: 0% 50%;
    box-shadow: var(--pts-accent-shadow);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover { background-position: 100% 50%; }

.btn-outline-primary {
    --bs-btn-color: var(--pts-accent);
    --bs-btn-border-color: rgba(var(--pts-accent-rgb), .45);
    --bs-btn-hover-color: var(--pts-on-accent);
    --bs-btn-hover-bg: var(--pts-accent);
    --bs-btn-hover-border-color: var(--pts-accent);
}

.btn-outline-secondary,
.btn-outline-light {
    --bs-btn-color: var(--pts-ink-2);
    --bs-btn-border-color: var(--pts-line-strong);
    --bs-btn-hover-bg: var(--pts-surface-hover);
    --bs-btn-hover-color: var(--pts-ink);
    --bs-btn-hover-border-color: var(--pts-line-strong);
    background: var(--pts-surface);
}

/* Кнопки на навигации — цветами навигации темы (светлая у Glass). */
.navbar .btn-outline-light {
    --bs-btn-color: var(--pts-nav-ink);
    --bs-btn-border-color: var(--pts-nav-line);
    --bs-btn-hover-bg: var(--pts-nav-hover);
    --bs-btn-hover-color: var(--pts-nav-ink-strong);
    --bs-btn-hover-border-color: var(--pts-nav-line);
    --bs-btn-active-bg: var(--pts-nav-hover);
    --bs-btn-active-color: var(--pts-nav-ink-strong);
    background: transparent;
}

.btn-outline-danger { --bs-btn-color: var(--pts-danger-ink); --bs-btn-border-color: var(--pts-danger-line); }
.btn-outline-success { --bs-btn-color: var(--pts-success-ink); --bs-btn-border-color: var(--pts-success-line); }
.btn-outline-warning { --bs-btn-color: var(--pts-warning-ink); --bs-btn-border-color: var(--pts-warning-line); }
.btn-outline-info { --bs-btn-color: var(--pts-info-ink); --bs-btn-border-color: var(--pts-info-line); }
.btn-link { text-decoration: none; }

/* =========================== ФОРМЫ ======================================== */

.form-control,
.form-select {
    color: var(--pts-ink);
    border-color: var(--pts-line-strong);
    border-radius: var(--pts-radius-sm);
    background-color: var(--pts-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--pts-muted); opacity: .8; }

.form-control:focus,
.form-select:focus {
    color: var(--pts-ink);
    background-color: var(--pts-surface);
    border-color: rgba(var(--pts-accent-rgb), .6);
    box-shadow: 0 0 0 .22rem rgba(var(--pts-accent-rgb), .16);
}

.form-label { font-weight: 550; color: var(--pts-ink-2); }
.form-check-input { background-color: var(--pts-surface); border-color: var(--pts-line-strong); }
.form-check-input:checked { background-color: var(--pts-accent); border-color: var(--pts-accent); }

/* =========================== ВКЛАДКИ, СПИСКИ ============================== */

.nav-tabs { border-bottom: 1px solid var(--pts-line); gap: .25rem; }

.nav-tabs .nav-link {
    position: relative;
    border: 0;
    color: var(--pts-muted);
    font-weight: 550;
    border-radius: 0;
    background: transparent;
}
/* Подчёркивание «вырастает» из центра */
.nav-tabs .nav-link::after {
    content: "";
    position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px;
    border-radius: 2px;
    background: var(--pts-gradient, var(--pts-accent));
    transition: left .25s ease, right .25s ease;
}
.nav-tabs .nav-link:hover { color: var(--pts-ink); }
.nav-tabs .nav-link:hover::after { left: 30%; right: 30%; }
.nav-tabs .nav-link.active { color: var(--pts-accent); background: transparent; }
.nav-tabs .nav-link.active::after { left: 0; right: 0; }

.nav-pills .nav-link { border-radius: 999px; color: var(--pts-ink-2); font-weight: 550; }
.nav-pills .nav-link.active {
    color: var(--pts-on-accent);
    background-image: var(--pts-gradient);
    box-shadow: var(--pts-accent-shadow);
}

.list-group-item {
    background: transparent;
    color: var(--pts-ink-2);
    border-color: var(--pts-line);
}
.list-group-item-action:hover { background: var(--pts-accent-soft); color: var(--pts-ink); }
.list-group-item.active {
    color: var(--pts-on-accent);
    background-image: var(--pts-gradient);
    border-color: transparent;
}

/* =========================== БЕЙДЖИ, АЛЕРТЫ =============================== */

.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; letter-spacing: .01em; }
.badge.text-bg-success { background-color: var(--pts-success-bg) !important; color: var(--pts-success-ink) !important; }
.badge.text-bg-secondary { background-color: var(--pts-neutral-bg) !important; color: var(--pts-neutral-ink) !important; }
.badge.text-bg-primary { background-color: var(--pts-accent-soft) !important; color: var(--pts-accent-strong) !important; }
.badge.text-bg-warning { background-color: var(--pts-warning-bg) !important; color: var(--pts-warning-ink) !important; }
.badge.text-bg-danger { background-color: var(--pts-danger-bg) !important; color: var(--pts-danger-ink) !important; }
.badge.text-bg-info { background-color: var(--pts-info-bg) !important; color: var(--pts-info-ink) !important; }
.badge.text-bg-dark { background-color: var(--pts-ink) !important; color: var(--pts-canvas) !important; }

.alert {
    border: 1px solid transparent;
    border-radius: var(--pts-radius);
    box-shadow: var(--pts-shadow);
    backdrop-filter: var(--pts-blur);
    -webkit-backdrop-filter: var(--pts-blur);
}
.alert-success { background: var(--pts-success-bg); border-color: var(--pts-success-line); color: var(--pts-success-ink); }
.alert-info    { background: var(--pts-info-bg);    border-color: var(--pts-info-line);    color: var(--pts-info-ink); }
.alert-warning { background: var(--pts-warning-bg); border-color: var(--pts-warning-line); color: var(--pts-warning-ink); }
.alert-danger,
.alert-error   { background: var(--pts-danger-bg);  border-color: var(--pts-danger-line);  color: var(--pts-danger-ink); }
.text-danger { color: var(--pts-danger-ink) !important; }
.text-success { color: var(--pts-success-ink) !important; }
.text-warning { color: var(--pts-warning-ink) !important; }

/* =========================== ПАГИНАЦИЯ, ОКНА, МЕЛОЧИ ====================== */

.pagination { gap: .25rem; }
.pagination .page-link {
    border-radius: var(--pts-radius-sm) !important;
    border-color: var(--pts-line);
    background: var(--pts-surface);
    color: var(--pts-ink-2);
}
.pagination .page-link:hover { background: var(--pts-accent-soft); color: var(--pts-accent); }
.pagination .page-item.disabled .page-link { background: transparent; color: var(--pts-muted); }

.modal-content,
.dropdown-menu {
    border: 1px solid var(--pts-line);
    border-radius: var(--pts-radius);
    box-shadow: var(--pts-shadow-hover);
}
.dropdown-item { border-radius: 8px; }
.dropdown-menu { padding: .35rem; }
.dropdown-item.active,
.dropdown-item:active { color: var(--pts-on-accent); background-color: var(--pts-accent); }

code { color: var(--pts-code-ink); background: var(--pts-code-bg); padding: .1em .35em; border-radius: 6px; }
hr { border-color: var(--pts-line); opacity: 1; }

/* =========================== ДВИЖЕНИЕ (все темы) ========================== */

@keyframes pts-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes pts-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Появление содержимого страницы — коротко и один раз. Конечное состояние
   transform: none, чтобы не ломать position: fixed у модальных окон. */
main > .page-header,
main > .nav-tabs,
main > form.card,
main > .alert { animation: pts-rise calc(.28s * var(--pts-motion)) ease-out both; }
main > .page-header { animation-delay: 0s; }
main > form.card { animation-delay: .04s; }
.table > tbody > tr { animation: pts-fade calc(.3s * var(--pts-motion)) ease-out both; }

/* =========================== СТЕКЛО (Nova, Glass Light) =================== */

/* Анимированный фон из размытых цветных пятен (цвета — токен --pts-blobs
   темы). Слой фиксирован за содержимым и не ловит клики. */
[data-pts-theme="nova"] body::before,
[data-pts-theme="glass"] body::before {
    content: "";
    position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
    background: var(--pts-blobs);
    filter: blur(20px);
    animation: pts-aurora 26s ease-in-out infinite alternate;
}
@keyframes pts-aurora {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg) scale(1.08); }
    100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(-6deg) scale(1.02); }
}
[data-pts-theme="nova"] body,
[data-pts-theme="glass"] body { background: var(--pts-canvas) !important; }

/* Липкая полупрозрачная навигация */
[data-pts-theme="nova"] .navbar,
[data-pts-theme="glass"] .navbar { position: sticky; top: 0; z-index: 1020; }

/* Бренд — переливающийся градиент */
[data-pts-theme="nova"] .navbar-brand,
[data-pts-theme="glass"] .navbar-brand {
    background-size: 200% 100%;
    animation: pts-shift 8s ease-in-out infinite alternate;
}
@keyframes pts-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Карточки приподнимаются и подсвечиваются при наведении */
[data-pts-theme="nova"] .card,
[data-pts-theme="glass"] .card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
[data-pts-theme="nova"] .card:hover,
[data-pts-theme="glass"] .card:hover { box-shadow: var(--pts-shadow-hover); }
[data-pts-theme="nova"] .card:hover { border-color: rgba(34, 211, 238, .22); }

/* Основная кнопка: пробегающий блик при наведении */
[data-pts-theme="nova"] .btn-primary::after,
[data-pts-theme="glass"] .btn-primary::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
[data-pts-theme="nova"] .btn-primary:hover::after,
[data-pts-theme="glass"] .btn-primary:hover::after { animation: pts-shine .7s ease-out; }
@keyframes pts-shine { to { left: 130%; } }

/* Строки таблиц — каскадом (первые 20; дальше — сразу, без задержки) */
[data-pts-theme="nova"] .table > tbody > tr,
[data-pts-theme="glass"] .table > tbody > tr { animation-name: pts-rise; }
.table > tbody > tr:nth-child(-n+20) { animation-delay: calc(var(--row-i, 0) * 18ms); }
.table > tbody > tr:nth-child(2)  { --row-i: 1; }
.table > tbody > tr:nth-child(3)  { --row-i: 2; }
.table > tbody > tr:nth-child(4)  { --row-i: 3; }
.table > tbody > tr:nth-child(5)  { --row-i: 4; }
.table > tbody > tr:nth-child(6)  { --row-i: 5; }
.table > tbody > tr:nth-child(7)  { --row-i: 6; }
.table > tbody > tr:nth-child(8)  { --row-i: 7; }
.table > tbody > tr:nth-child(9)  { --row-i: 8; }
.table > tbody > tr:nth-child(10) { --row-i: 9; }
.table > tbody > tr:nth-child(n+11):nth-child(-n+20) { --row-i: 10; }

/* =========================== NOVA — неон ================================== */

[data-pts-theme="nova"] .page-header h1 {
    background: linear-gradient(90deg, #fff 0%, #cffafe 40%, #e9d5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-pts-theme="nova"] .nav-tabs .nav-link.active { text-shadow: 0 0 18px rgba(34, 211, 238, .55); }
[data-pts-theme="nova"] .form-control:focus,
[data-pts-theme="nova"] .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .18), 0 0 22px rgba(168, 85, 247, .25);
}
[data-pts-theme="nova"] { scrollbar-color: rgba(168, 85, 247, .5) transparent; }

/* =========================== GLASS LIGHT ================================== */

[data-pts-theme="glass"] .page-header h1 {
    background: linear-gradient(90deg, #111827 0%, #3730a3 60%, #7e22ce 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-pts-theme="glass"] .table > thead th { background: rgba(255, 255, 255, .55); color: #4b5563; }
[data-pts-theme="glass"] .form-control,
[data-pts-theme="glass"] .form-select { background-color: rgba(255, 255, 255, .7); border-color: rgba(17, 24, 39, .10); }
[data-pts-theme="glass"] .dropdown-menu,
[data-pts-theme="glass"] .modal-content {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: var(--pts-blur);
    -webkit-backdrop-filter: var(--pts-blur);
}
[data-pts-theme="glass"] .navbar-brand { -webkit-text-fill-color: transparent; }

/* =========================== MIDNIGHT TERMINAL ============================ */

/* Строки развёртки ЭЛТ — едва заметные, поверх всего, не ловят клики */
[data-pts-theme="terminal"] body::after {
    content: "";
    position: fixed; inset: 0; z-index: 2000; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
}
[data-pts-theme="terminal"] body { font-size: .92rem; letter-spacing: -.01em; }
[data-pts-theme="terminal"] .page-header h1 {
    color: var(--pts-accent);
    text-shadow: 0 0 12px rgba(61, 220, 132, .45);
    text-transform: lowercase;
}
[data-pts-theme="terminal"] .page-header h1::before { content: "~/ "; color: var(--pts-muted); text-shadow: none; }
[data-pts-theme="terminal"] .page-header h1::after {
    content: "▌";
    margin-left: .15em;
    animation: pts-blink 1.1s steps(1) infinite;
}
@keyframes pts-blink { 50% { opacity: 0; } }
[data-pts-theme="terminal"] .navbar-brand::before { content: "> "; }
[data-pts-theme="terminal"] .table > :not(caption) > * > * { padding-block: .35rem; }
[data-pts-theme="terminal"] .table > thead th { color: var(--pts-accent); letter-spacing: .08em; }
[data-pts-theme="terminal"] .btn { text-transform: lowercase; letter-spacing: .02em; }
[data-pts-theme="terminal"] .btn:hover { transform: none; }
[data-pts-theme="terminal"] .btn-primary { background-image: none; }
[data-pts-theme="terminal"] .btn-primary:hover { box-shadow: 0 0 18px rgba(61, 220, 132, .55); }
[data-pts-theme="terminal"] .card { border-style: dashed; }
[data-pts-theme="terminal"] .badge { border-radius: 2px; }
[data-pts-theme="terminal"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.list-group-item) { text-decoration: underline dotted; }
[data-pts-theme="terminal"] .form-control:focus,
[data-pts-theme="terminal"] .form-select:focus { box-shadow: 0 0 0 1px var(--pts-accent), 0 0 12px rgba(61, 220, 132, .3); }
[data-pts-theme="terminal"] { scrollbar-color: #24402f transparent; }

/* =========================== ДОСТУПНОСТЬ ================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .btn:hover { transform: none; }
}