/* ═══════════════════════════════════════════════════════════════════════
   Panorama UI — спільна дизайн-система (п. 26/27 ACTION-PLAN)
   Візуальна мова головної сторінки (тема panorama-2): теплий білий/айворі,
   графітовий текст, бордові основні дії, м'яке золото, м'які тіні, Inter.

   ПРАВИЛО ІЗОЛЯЦІЇ: тут немає жодного глобального селектора елементів
   (body, button, input, a, h1…). Лише :root-токени з префіксом --pg-,
   класи .pg-* та атрибути [data-pg-*]. Підключення цього файлу на будь-якій
   сторінці нічого не змінює, доки розмітка не використовує класи .pg-*.

   Документація: docs/DESIGN-SYSTEM.md · взірець: docs/design-system/index.html
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. ТОКЕНИ ───────────────────────────── */
:root {
    /* Кольори — значення з головної (style.css / promo-landing.css теми) */
    --pg-bg: #FBFAF7;                 /* Warm White — фон сторінки */
    --pg-bg-alt: #F7F1EA;             /* Ivory — альтернативні секції */
    --pg-bg-warm: #FAF7F2;            /* блок переваг */
    --pg-bg-hero: linear-gradient(135deg, #FFFFFF 0%, #FBFAF7 48%, #F7F1EA 100%);
    --pg-bg-founder: linear-gradient(135deg, #FFF8F2 0%, #F7EEE7 55%, #F1E4D8 100%);
    --pg-bg-cta: linear-gradient(135deg, #07111D 0%, #4A0718 58%, #8A102A 100%);
    --pg-surface: #FFFFFF;            /* картки, модалки, поля */
    --pg-surface-raised: #FFFFFF;     /* те саме + тінь */
    --pg-surface-sunken: #F7F4EF;     /* вкладені блоки (опис тарифу) */
    --pg-surface-hover: #FBFAF7;      /* hover рядка/пункту (як audience) */
    --pg-header-bg: rgba(251, 250, 247, 0.82);
    --pg-header-bg-scrolled: rgba(251, 250, 247, 0.95);

    --pg-text: #101828;               /* Deep Graphite */
    --pg-text-muted: #667085;         /* Slate Gray (4.8:1 на #FBFAF7) */
    --pg-text-subtle: #7B8496;        /* плейсхолдери, неважливі підписи */
    --pg-text-on-primary: #FFFFFF;
    --pg-text-on-gold: #2D2016;       /* текст бейджа «Популярний» */
    --pg-link: #8A102A;
    --pg-link-hover: #5F071A;

    --pg-border: #E8E1D8;             /* Warm Border */
    --pg-border-light: #F0E9E1;       /* Light Border */
    --pg-border-input: #B5A794;       /* межа полів — помітніша для 40+ */
    --pg-border-input-hover: #9C8E7C;

    --pg-primary: #8A102A;            /* Burgundy */
    --pg-primary-hover: #6F0C21;
    --pg-primary-deep: #5F071A;       /* Deep Burgundy */
    --pg-primary-soft: rgba(138, 16, 42, 0.06);
    --pg-primary-soft-2: rgba(138, 16, 42, 0.10);

    --pg-gold: #D6A85A;               /* Soft Gold — іконки, межі, бейджі */
    --pg-gold-hover: #C89643;
    --pg-gold-light: #E8C783;         /* Champagne Gold */
    --pg-gold-soft: rgba(214, 168, 90, 0.10);   /* підкладка іконки */
    --pg-gold-soft-2: rgba(214, 168, 90, 0.18);
    --pg-gold-line: rgba(214, 168, 90, 0.55);   /* hover-межа FAQ / featured */
    --pg-gold-text: #8A6420;          /* золотий ТЕКСТ на світлому (5.3:1) */
    --pg-gold-gradient: linear-gradient(135deg, #E8C783 0%, #D6A85A 100%);
    --pg-accent-gradient: linear-gradient(90deg, #D6A85A, #8A102A);

    --pg-success: #2F7D4F;
    --pg-success-soft: #EEF6F0;
    --pg-success-line: #B9D9C4;
    --pg-warning: #9A6514;
    --pg-warning-soft: #FDF6E7;
    --pg-warning-line: #EBCF95;
    --pg-danger: #B42318;
    --pg-danger-hover: #912018;
    --pg-danger-soft: #FDF0EE;
    --pg-danger-line: #F1C0B8;
    --pg-info: #2E5A88;
    --pg-info-soft: #EFF4F9;
    --pg-info-line: #BED0E4;

    --pg-focus-color: rgba(138, 16, 42, 0.55);
    --pg-focus-ring: 0 0 0 2px var(--pg-surface), 0 0 0 5px var(--pg-focus-color);
    --pg-input-ring: 0 0 0 4px rgba(138, 16, 42, 0.12);
    --pg-backdrop: rgba(16, 24, 40, 0.42);

    /* Типографіка — Inter (тема вже підключає Google Fonts 400–700).
       Аудиторія 40+: основний текст 17 px, жодного тексту дрібніше 14 px. */
    --pg-font: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pg-fs-xs: 13px;     /* бейджі, підписи */
    --pg-fs-sm: 14px;     /* навігація, допоміжний */
    --pg-fs-md: 16px;     /* основний текст */
    --pg-fs-lg: 18px;     /* назва пункту (homepage 18–19) */
    --pg-fs-xl: 20px;     /* H3 */
    --pg-fs-2xl: 24px;    /* H2 малий / заголовок модалки на мобільному */
    --pg-fs-3xl: clamp(28px, 3.5vw, 40px);  /* заголовок секції (homepage) */
    --pg-fs-4xl: clamp(34px, 4.5vw, 48px);  /* hero H1 (homepage) */
    --pg-fs-btn: 15px;
    --pg-lh-tight: 1.08;
    --pg-lh-heading: 1.18;
    --pg-lh-snug: 1.3;
    --pg-lh-body: 1.6;
    --pg-fw-regular: 400;
    --pg-fw-medium: 500;
    --pg-fw-semibold: 600;
    --pg-fw-bold: 700;
    --pg-tracking-tight: -0.02em;
    --pg-tracking-display: -0.03em;
    --pg-tracking-caps: 0.06em;

    /* Радіуси (кнопки на головній — 12 px, картки — 20 px) */
    --pg-radius-xs: 6px;
    --pg-radius-sm: 10px;
    --pg-radius-md: 12px;
    --pg-radius-lg: 16px;
    --pg-radius-xl: 20px;
    --pg-radius-2xl: 28px;
    --pg-radius-pill: 999px;

    /* Тіні */
    --pg-shadow-xs: 0 2px 8px rgba(16, 24, 40, 0.04);
    --pg-shadow-sm: 0 4px 16px rgba(16, 24, 40, 0.06);
    --pg-shadow-md: 0 16px 48px rgba(16, 24, 40, 0.10);
    --pg-shadow-lg: 0 24px 80px rgba(16, 24, 40, 0.16);
    --pg-shadow-hover: 0 24px 64px rgba(16, 24, 40, 0.14);
    --pg-shadow-glow-primary: 0 12px 28px rgba(138, 16, 42, 0.22);
    --pg-shadow-glow-gold: 0 12px 28px rgba(214, 168, 90, 0.24);
    --pg-shadow-featured: 0 24px 80px rgba(138, 16, 42, 0.18);
    --pg-shadow-header: 0 4px 12px rgba(138, 16, 42, 0.18);

    /* Відступи (крок 4 px) */
    --pg-space-1: 4px;
    --pg-space-2: 8px;
    --pg-space-3: 12px;
    --pg-space-4: 16px;
    --pg-space-5: 20px;
    --pg-space-6: 24px;
    --pg-space-7: 28px;
    --pg-space-8: 32px;
    --pg-space-10: 40px;
    --pg-space-12: 48px;
    --pg-space-14: 56px;
    --pg-space-16: 64px;
    --pg-space-24: 96px;
    --pg-container: 1180px;
    --pg-hit: 44px;                   /* мінімальна ціль натискання */

    /* Шари. Кімната вже має шари до ~300000 (банер зв'язку), тож наші
       плаваючі шари — вище; повноекранні режими (2147483000+) — ще вище. */
    --pg-z-sticky: 100;
    --pg-z-dropdown: 2000100;
    --pg-z-overlay: 2000200;
    --pg-z-modal: 2000300;
    --pg-z-sheet: 2000300;
    --pg-z-toast: 2000500;
    --pg-z-banner: 2000600;
    --pg-z-tooltip: 2000700;

    /* Рух. Тривалості 120/180/240/360/480 мс; криві. */
    --pg-dur-1: 120ms;    /* мікро: колір, межа */
    --pg-dur-2: 180ms;    /* hover, натискання */
    --pg-dur-3: 240ms;    /* стандарт: перемикачі, вкладки, тости */
    --pg-dur-4: 360ms;    /* модалки, шторки, зміна висоти */
    --pg-dur-5: 480ms;    /* великі переходи (кроки майстра, поява секцій) */
    --pg-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --pg-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);   /* = крива головної */
    --pg-ease-decelerate: cubic-bezier(0.22, 1, 0.36, 1);
    --pg-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --pg-ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);    /* легкий «пружний» доводчик */
    --pg-shift-sm: 8px;   /* зсув при появі дрібних елементів */
    --pg-shift-md: 16px;  /* модалка, тост */
    --pg-shift-lg: 32px;  /* перехід між кроками */
    --pg-scale-in: 0.97;
}

/* Скорочений рух: тривалості → майже 0, без зсувів і масштабу.
   0.01ms (не 0), щоб transitionend усе ще спрацьовував. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --pg-dur-1: 0.01ms;
        --pg-dur-2: 0.01ms;
        --pg-dur-3: 0.01ms;
        --pg-dur-4: 0.01ms;
        --pg-dur-5: 0.01ms;
        --pg-shift-sm: 0px;
        --pg-shift-md: 0px;
        --pg-shift-lg: 0px;
        --pg-scale-in: 1;
    }
}
[data-pg-motion="reduce"] {
    --pg-dur-1: 0.01ms;
    --pg-dur-2: 0.01ms;
    --pg-dur-3: 0.01ms;
    --pg-dur-4: 0.01ms;
    --pg-dur-5: 0.01ms;
    --pg-shift-sm: 0px;
    --pg-shift-md: 0px;
    --pg-shift-lg: 0px;
    --pg-scale-in: 1;
}

/* Темний варіант — із темних секцій головної (відео, підвал, тарифи-dark).
   Основний вигляд — СВІТЛИЙ; темний лише для окремих поверхонь (тло дошки). */
[data-pg-theme="dark"] {
    --pg-bg: #07111D;
    --pg-bg-alt: #0D1A26;
    --pg-bg-warm: #0D1A26;
    --pg-bg-hero: linear-gradient(135deg, #07111D 0%, #0D1A26 55%, #111827 100%);
    --pg-surface: #0F1E2C;
    --pg-surface-raised: #142636;
    --pg-surface-sunken: #0A1622;
    --pg-surface-hover: #152A3B;
    --pg-header-bg: rgba(7, 17, 29, 0.82);
    --pg-header-bg-scrolled: rgba(7, 17, 29, 0.94);
    --pg-text: #F5F1EA;
    --pg-text-muted: #A7B0BD;
    --pg-text-subtle: #8792A2;
    --pg-link: #E8C783;
    --pg-link-hover: #FFFFFF;
    --pg-border: rgba(255, 255, 255, 0.12);
    --pg-border-light: rgba(255, 255, 255, 0.08);
    --pg-border-input: rgba(255, 255, 255, 0.28);
    --pg-border-input-hover: rgba(255, 255, 255, 0.42);
    --pg-primary: #8A102A;
    --pg-primary-hover: #A3163A;
    --pg-primary-deep: #5F071A;
    --pg-primary-soft: rgba(229, 107, 133, 0.10);
    --pg-primary-soft-2: rgba(229, 107, 133, 0.16);
    --pg-gold-text: #E8C783;
    --pg-gold-soft: rgba(214, 168, 90, 0.12);
    --pg-gold-soft-2: rgba(214, 168, 90, 0.20);
    --pg-success: #6CC08F;
    --pg-success-soft: rgba(108, 192, 143, 0.10);
    --pg-success-line: rgba(108, 192, 143, 0.35);
    --pg-warning: #F0B65A;
    --pg-warning-soft: rgba(240, 182, 90, 0.10);
    --pg-warning-line: rgba(240, 182, 90, 0.35);
    --pg-danger: #F08C8C;
    --pg-danger-hover: #F4A3A3;
    --pg-danger-soft: rgba(240, 140, 140, 0.10);
    --pg-danger-line: rgba(240, 140, 140, 0.35);
    --pg-info: #8FB4E0;
    --pg-info-soft: rgba(143, 180, 224, 0.10);
    --pg-info-line: rgba(143, 180, 224, 0.35);
    --pg-focus-color: rgba(232, 199, 131, 0.85);
    --pg-input-ring: 0 0 0 4px rgba(232, 199, 131, 0.18);
    --pg-backdrop: rgba(3, 8, 14, 0.62);
    --pg-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.24);
    --pg-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28);
    --pg-shadow-md: 0 16px 48px rgba(0, 0, 0, 0.32);
    --pg-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.40);
    --pg-shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.38);
    color-scheme: dark;
}

/* ───────────────────────── 2. ОСНОВА / ТИПОГРАФІКА ───────────────────────── */
/* .pg-root — «острів» дизайн-системи: шрифт, колір, box-sizing лише всередині. */
.pg-root {
    font-family: var(--pg-font);
    font-size: var(--pg-fs-md);
    line-height: var(--pg-lh-body);
    color: var(--pg-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.pg-root *,
.pg-root *::before,
.pg-root *::after { box-sizing: border-box; }
.pg-root[data-pg-theme],
.pg-surface-bg { background: var(--pg-bg); color: var(--pg-text); }

.pg-container { max-width: var(--pg-container); margin-inline: auto; padding-inline: var(--pg-space-6); }
@media (max-width: 768px) { .pg-container { padding-inline: var(--pg-space-5); } }

.pg-display { font-size: var(--pg-fs-4xl); font-weight: var(--pg-fw-bold); line-height: var(--pg-lh-tight); letter-spacing: var(--pg-tracking-display); color: var(--pg-text); margin: 0; }
.pg-h1 { font-size: var(--pg-fs-3xl); font-weight: var(--pg-fw-bold); line-height: var(--pg-lh-heading); letter-spacing: var(--pg-tracking-tight); color: var(--pg-text); margin: 0; }
.pg-h2 { font-size: var(--pg-fs-2xl); font-weight: var(--pg-fw-bold); line-height: 1.2; letter-spacing: var(--pg-tracking-tight); color: var(--pg-text); margin: 0; }
.pg-h3 { font-size: var(--pg-fs-xl); font-weight: var(--pg-fw-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--pg-text); margin: 0; }
.pg-h4 { font-size: var(--pg-fs-lg); font-weight: var(--pg-fw-semibold); line-height: var(--pg-lh-snug); color: var(--pg-text); margin: 0; }
.pg-accent { color: var(--pg-primary); }
.pg-text { font-size: var(--pg-fs-md); line-height: var(--pg-lh-body); color: var(--pg-text); margin: 0; }
.pg-lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--pg-text-muted); margin: 0; }
.pg-muted { color: var(--pg-text-muted); }
.pg-small { font-size: var(--pg-fs-sm); line-height: 1.5; color: var(--pg-text-muted); }
.pg-eyebrow {           /* «ОНЛАЙН-ПЛАТФОРМА…» над заголовком hero */
    display: inline-flex; align-items: center; gap: var(--pg-space-2);
    font-size: var(--pg-fs-xs); font-weight: var(--pg-fw-semibold);
    letter-spacing: var(--pg-tracking-caps); text-transform: uppercase;
    color: var(--pg-gold-text); background: var(--pg-gold-soft);
    border: 1px solid rgba(214, 168, 90, 0.30);
    padding: 6px 14px; border-radius: var(--pg-radius-pill);
}
.pg-overline { font-size: var(--pg-fs-xs); font-weight: var(--pg-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-gold-text); }
.pg-link {
    color: var(--pg-link); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 3px; text-decoration-color: rgba(138, 16, 42, 0.35);
    transition: color var(--pg-dur-2) ease, text-decoration-color var(--pg-dur-2) ease;
    border-radius: 4px;
}
.pg-link:hover { color: var(--pg-link-hover); text-decoration-color: currentColor; }
.pg-link:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.pg-divider { height: 1px; border: 0; background: var(--pg-border); margin: var(--pg-space-6) 0; }
.pg-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Медіа: НІКОЛИ не розтягувати зображення/відео — лише contain/cover зі збереженням пропорцій. */
.pg-media { display: block; max-width: 100%; height: auto; }
.pg-media--contain { width: 100%; height: 100%; object-fit: contain; }
.pg-media--cover { width: 100%; height: 100%; object-fit: cover; }
.pg-media-frame {         /* UI-скрін/відео як на hero: радіус 20, м'яка тінь */
    border-radius: var(--pg-radius-xl); overflow: hidden;
    box-shadow: var(--pg-shadow-lg); border: 1px solid rgba(16, 24, 40, 0.08);
    background: #0D1A26;
}

/* Іконка в м'якій золотій підкладці (кроки, переваги, аудиторія) */
.pg-icon-badge {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: var(--pg-radius-pill);
    background: var(--pg-gold-soft); color: var(--pg-gold);
    transition: background var(--pg-dur-3) var(--pg-ease-emphasized), transform var(--pg-dur-3) var(--pg-ease-emphasized);
}
.pg-icon-badge svg { width: 24px; height: 24px; }
.pg-icon-badge--lg { width: 64px; height: 64px; }
.pg-icon-badge--lg svg { width: 30px; height: 30px; }
.pg-icon-badge--primary { background: var(--pg-primary-soft-2); color: var(--pg-primary); }
:hover > .pg-icon-badge--hoverable, .pg-icon-badge--hoverable:hover { background: var(--pg-gold-soft-2); transform: translateY(-2px); }

/* Спільна анімація спінера */
@keyframes pg-spin { to { transform: rotate(360deg); } }
@keyframes pg-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pg-indeterminate { from { transform: translateX(-100%) scaleX(0.4); } to { transform: translateX(250%) scaleX(0.4); } }
@keyframes pg-fade-in { from { opacity: 0; } to { opacity: 1; } }

.pg-spinner {
    display: inline-block; width: 20px; height: 20px; flex-shrink: 0;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: pg-spin 0.7s linear infinite; opacity: 0.85;
}

/* ───────────────────────────── 3. КНОПКИ ───────────────────────────── */
.pg-btn {
    --pg-btn-bg: var(--pg-surface);
    --pg-btn-fg: var(--pg-text);
    --pg-btn-border: var(--pg-border);
    --pg-btn-bg-hover: var(--pg-surface-hover);
    --pg-btn-border-hover: var(--pg-border);
    --pg-btn-shadow-hover: var(--pg-shadow-sm);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pg-space-2);
    min-height: 44px; padding: var(--pg-space-2) var(--pg-space-5);
    font-family: var(--pg-font); font-size: var(--pg-fs-btn); font-weight: var(--pg-fw-semibold);
    line-height: 1.2; letter-spacing: 0; text-align: center; text-decoration: none;
    white-space: normal; text-wrap: balance; /* довгі українські підписи переносяться, а не вилазять за екран */
    color: var(--pg-btn-fg); background: var(--pg-btn-bg);
    border: 1px solid var(--pg-btn-border); border-radius: var(--pg-radius-md);
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--pg-dur-3) var(--pg-ease-emphasized),
        border-color var(--pg-dur-3) var(--pg-ease-emphasized),
        box-shadow var(--pg-dur-3) var(--pg-ease-emphasized),
        transform var(--pg-dur-3) var(--pg-ease-emphasized),
        color var(--pg-dur-2) ease, opacity var(--pg-dur-2) ease;
}
.pg-btn:hover { background: var(--pg-btn-bg-hover); border-color: var(--pg-btn-border-hover); box-shadow: var(--pg-btn-shadow-hover); color: var(--pg-btn-fg); transform: translateY(-1px); text-decoration: none; }
.pg-btn:active { transform: translateY(0); box-shadow: none; transition-duration: var(--pg-dur-1); }
.pg-btn:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.pg-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.pg-btn--primary {
    --pg-btn-bg: var(--pg-primary); --pg-btn-fg: var(--pg-text-on-primary); --pg-btn-border: var(--pg-primary);
    --pg-btn-bg-hover: var(--pg-primary-hover); --pg-btn-border-hover: var(--pg-primary-hover);
    --pg-btn-shadow-hover: var(--pg-shadow-glow-primary);
}
.pg-btn--secondary {     /* золота обвідка, як «Дізнатись більше →» */
    --pg-btn-bg: transparent; --pg-btn-fg: var(--pg-text); --pg-btn-border: var(--pg-gold);
    --pg-btn-bg-hover: rgba(214, 168, 90, 0.08); --pg-btn-border-hover: var(--pg-gold-hover);
    --pg-btn-shadow-hover: none;
}
.pg-btn--ghost {         /* як посилання навігації в шапці */
    --pg-btn-bg: transparent; --pg-btn-fg: var(--pg-text); --pg-btn-border: transparent;
    --pg-btn-bg-hover: var(--pg-primary-soft); --pg-btn-border-hover: transparent; --pg-btn-shadow-hover: none;
}
.pg-btn--ghost:hover { color: var(--pg-primary); transform: none; }
[data-pg-theme="dark"] .pg-btn--ghost:hover { color: var(--pg-gold-light); }
.pg-btn--danger {
    --pg-btn-bg: var(--pg-danger); --pg-btn-fg: #FFFFFF; --pg-btn-border: var(--pg-danger);
    --pg-btn-bg-hover: var(--pg-danger-hover); --pg-btn-border-hover: var(--pg-danger-hover);
    --pg-btn-shadow-hover: 0 12px 28px rgba(180, 35, 24, 0.22);
}
[data-pg-theme="dark"] .pg-btn--danger { --pg-btn-fg: #2A0A0A; }
.pg-btn--danger-outline {
    --pg-btn-bg: transparent; --pg-btn-fg: var(--pg-danger); --pg-btn-border: var(--pg-danger-line);
    --pg-btn-bg-hover: var(--pg-danger-soft); --pg-btn-border-hover: var(--pg-danger); --pg-btn-shadow-hover: none;
}
.pg-btn--light {         /* на темному / бордовому тлі */
    --pg-btn-bg: #FFFFFF; --pg-btn-fg: #8A102A; --pg-btn-border: #FFFFFF;
    --pg-btn-bg-hover: rgba(255, 255, 255, 0.90); --pg-btn-border-hover: #FFFFFF;
    --pg-btn-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.24);
}
.pg-btn--gold {          /* фінальний CTA */
    --pg-btn-bg: var(--pg-gold-gradient); --pg-btn-fg: #101828; --pg-btn-border: var(--pg-gold);
    --pg-btn-bg-hover: var(--pg-gold-gradient); --pg-btn-border-hover: var(--pg-gold-hover);
    --pg-btn-shadow-hover: var(--pg-shadow-glow-gold);
}
.pg-btn--sm { min-height: 36px; padding: 6px var(--pg-space-4); font-size: var(--pg-fs-sm); border-radius: var(--pg-radius-sm); }
.pg-btn--lg { min-height: 50px; padding: var(--pg-space-3) var(--pg-space-7); font-size: var(--pg-fs-md); }
.pg-btn--block { display: flex; width: 100%; }
.pg-btn--nowrap { white-space: nowrap; }
@media (max-width: 480px) { .pg-btn--lg { padding-inline: var(--pg-space-6); } }
.pg-btn:disabled,
.pg-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
/* Завантаження: текст лишається на місці (ширина не стрибає), зверху — спінер */
.pg-btn.is-loading,
.pg-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.pg-btn.is-loading > *,
.pg-btn[aria-busy="true"] > * { visibility: hidden; }
.pg-btn.is-loading::after,
.pg-btn[aria-busy="true"]::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
    border: 2px solid var(--pg-btn-fg); border-right-color: transparent; border-radius: 50%;
    animation: pg-spin 0.7s linear infinite;
}
.pg-btn-group { display: flex; flex-wrap: wrap; gap: var(--pg-space-3); align-items: center; }
@media (max-width: 480px) { .pg-btn-group--stack-mobile { flex-direction: column; align-items: stretch; } }

/* Іконкова кнопка: ≥44×44 */
.pg-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--pg-hit); height: var(--pg-hit); padding: 0;
    color: var(--pg-text); background: transparent; border: 1px solid transparent;
    border-radius: var(--pg-radius-md); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--pg-dur-2) ease, color var(--pg-dur-2) ease, border-color var(--pg-dur-2) ease, transform var(--pg-dur-2) var(--pg-ease-emphasized), box-shadow var(--pg-dur-2) ease;
}
.pg-icon-btn svg { width: 22px; height: 22px; }
.pg-icon-btn:hover { background: var(--pg-primary-soft); color: var(--pg-primary); }
[data-pg-theme="dark"] .pg-icon-btn:hover { color: var(--pg-gold-light); }
.pg-icon-btn:active { transform: scale(0.96); }
.pg-icon-btn:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.pg-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pg-icon-btn--outline { border-color: var(--pg-border); background: var(--pg-surface); }
.pg-icon-btn--outline:hover { border-color: var(--pg-gold-line); background: var(--pg-surface); }
.pg-icon-btn--round { border-radius: var(--pg-radius-pill); }
.pg-icon-btn--lg { width: 56px; height: 56px; }
.pg-icon-btn--lg svg { width: 26px; height: 26px; }
.pg-icon-btn--primary { background: var(--pg-primary); color: #FFFFFF; border-color: var(--pg-primary); }
.pg-icon-btn--primary:hover { background: var(--pg-primary-hover); color: #FFFFFF; box-shadow: var(--pg-shadow-glow-primary); }
.pg-icon-btn[aria-pressed="true"] { background: var(--pg-primary-soft-2); color: var(--pg-primary); border-color: rgba(138, 16, 42, 0.25); }

/* ───────────────────────────── 4. ПОЛЯ ───────────────────────────── */
.pg-field { display: flex; flex-direction: column; gap: var(--pg-space-2); margin: 0 0 var(--pg-space-5); min-width: 0; }
.pg-label { font-size: var(--pg-fs-sm); font-weight: var(--pg-fw-semibold); color: var(--pg-text); line-height: 1.35; }
.pg-label__req { color: var(--pg-primary); margin-left: 2px; }
.pg-hint { font-size: var(--pg-fs-sm); color: var(--pg-text-muted); line-height: 1.45; margin: 0; }
.pg-error-text { font-size: var(--pg-fs-sm); color: var(--pg-danger); line-height: 1.45; margin: 0; display: flex; gap: 6px; align-items: flex-start; }

.pg-input,
.pg-select,
.pg-textarea {
    display: block; width: 100%; min-height: 44px; margin: 0;
    padding: 10px 14px;
    font-family: var(--pg-font); font-size: var(--pg-fs-md); line-height: 1.4; color: var(--pg-text);
    background: var(--pg-surface); border: 1px solid var(--pg-border-input); border-radius: var(--pg-radius-md);
    box-shadow: none; appearance: none; -webkit-appearance: none;
    transition: border-color var(--pg-dur-2) ease, box-shadow var(--pg-dur-3) var(--pg-ease-emphasized), background-color var(--pg-dur-2) ease;
}
.pg-input::placeholder,
.pg-textarea::placeholder { color: var(--pg-text-subtle); opacity: 1; }
.pg-input:hover,
.pg-select:hover,
.pg-textarea:hover { border-color: var(--pg-border-input-hover); }
.pg-input:focus,
.pg-select:focus,
.pg-textarea:focus { outline: none; border-color: var(--pg-primary); box-shadow: var(--pg-input-ring); background: var(--pg-surface); }
[data-pg-theme="dark"] .pg-input:focus,
[data-pg-theme="dark"] .pg-select:focus,
[data-pg-theme="dark"] .pg-textarea:focus { border-color: var(--pg-gold-light); }
.pg-input:disabled,
.pg-select:disabled,
.pg-textarea:disabled { background: var(--pg-surface-sunken); color: var(--pg-text-muted); cursor: not-allowed; border-color: var(--pg-border); }
.pg-input[aria-invalid="true"],
.pg-select[aria-invalid="true"],
.pg-textarea[aria-invalid="true"],
.pg-field--error .pg-input,
.pg-field--error .pg-select,
.pg-field--error .pg-textarea { border-color: var(--pg-danger); }
.pg-field--error .pg-input:focus,
.pg-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12); }
.pg-textarea { min-height: 120px; resize: vertical; line-height: var(--pg-lh-body); }
.pg-select {
    padding-right: 44px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A102A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 14px;
}
[data-pg-theme="dark"] .pg-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E8C783' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.pg-input-group { position: relative; display: flex; align-items: center; }
.pg-input-group > .pg-input { padding-right: 52px; }
.pg-input-group > .pg-icon-btn { position: absolute; right: 2px; }

/* Прапорець і радіо: сам input має клас .pg-checkbox / .pg-radio; обгортка .pg-check — ціль ≥44 px */
.pg-check {
    display: flex; align-items: flex-start; gap: var(--pg-space-3);
    min-height: var(--pg-hit); padding: 10px 0; cursor: pointer;
    font-size: var(--pg-fs-md); line-height: 1.4; color: var(--pg-text);
}
.pg-check__text { padding-top: 1px; }
.pg-check__hint { display: block; font-size: var(--pg-fs-sm); color: var(--pg-text-muted); margin-top: 2px; }
.pg-checkbox,
.pg-radio {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; cursor: pointer;
    width: 24px; height: 24px; display: inline-grid; place-content: center;
    background: var(--pg-surface); border: 1.5px solid var(--pg-border-input);
    transition: background-color var(--pg-dur-2) ease, border-color var(--pg-dur-2) ease, box-shadow var(--pg-dur-2) ease;
}
.pg-checkbox { border-radius: 7px; }
.pg-radio { border-radius: 50%; }
.pg-checkbox::before {
    content: ''; width: 14px; height: 14px; background: #FFFFFF;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scale(0); transition: transform var(--pg-dur-3) var(--pg-ease-spring);
}
.pg-radio::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; transform: scale(0); transition: transform var(--pg-dur-3) var(--pg-ease-spring); }
.pg-checkbox:hover,
.pg-radio:hover { border-color: var(--pg-primary); }
.pg-checkbox:checked,
.pg-radio:checked { background: var(--pg-primary); border-color: var(--pg-primary); }
.pg-checkbox:checked::before,
.pg-radio:checked::before { transform: scale(1); }
.pg-checkbox:indeterminate { background: var(--pg-primary); border-color: var(--pg-primary); }
.pg-checkbox:indeterminate::before { -webkit-mask: none; mask: none; width: 12px; height: 2.5px; border-radius: 2px; transform: scale(1); }
.pg-checkbox:focus-visible,
.pg-radio:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.pg-checkbox:disabled,
.pg-radio:disabled { opacity: 0.45; cursor: not-allowed; }

/* Перемикач (switch): <input type="checkbox" role="switch" class="pg-switch"> */
.pg-switch {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; cursor: pointer; position: relative;
    width: 52px; height: 30px; border-radius: var(--pg-radius-pill);
    background: #D9D2C8; border: 0;
    transition: background-color var(--pg-dur-3) var(--pg-ease-standard), box-shadow var(--pg-dur-2) ease;
}
[data-pg-theme="dark"] .pg-switch { background: rgba(255, 255, 255, 0.20); }
.pg-switch::before {
    content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.22);
    transition: transform var(--pg-dur-3) var(--pg-ease-spring), width var(--pg-dur-2) var(--pg-ease-standard);
}
.pg-switch:active::before { width: 28px; }
.pg-switch:checked { background: var(--pg-primary); }
.pg-switch:checked::before { transform: translateX(22px); }
.pg-switch:checked:active::before { transform: translateX(18px); }
.pg-switch:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.pg-switch:disabled { opacity: 0.45; cursor: not-allowed; }
/* Рядок налаштування з перемикачем праворуч (як «Розмити фон») */
.pg-switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pg-space-4);
    min-height: 48px; padding: 10px var(--pg-space-4);
    background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md);
    cursor: pointer; transition: border-color var(--pg-dur-2) ease, background-color var(--pg-dur-2) ease;
}
.pg-switch-row:hover { border-color: var(--pg-gold-line); }
.pg-switch-row__label { font-weight: var(--pg-fw-semibold); }

/* Повзунок: <input type="range" class="pg-range">; заповнення — змінна --pg-fill (ставить panorama-motion.js).
   Висота елемента 44 px — уся смуга є ціллю натискання; повзунок 28 px. */
.pg-range {
    --pg-fill: 50%;
    appearance: none; -webkit-appearance: none; display: block; width: 100%; height: var(--pg-hit);
    margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
.pg-range::-webkit-slider-runnable-track {
    height: 8px; border-radius: var(--pg-radius-pill);
    background: linear-gradient(to right, var(--pg-primary) 0 var(--pg-fill), #E6DED3 var(--pg-fill) 100%);
}
[data-pg-theme="dark"] .pg-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--pg-gold) 0 var(--pg-fill), rgba(255, 255, 255, 0.16) var(--pg-fill) 100%); }
.pg-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
    background: #FFFFFF; border: 2px solid var(--pg-primary);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18);
    transition: transform var(--pg-dur-2) var(--pg-ease-emphasized), box-shadow var(--pg-dur-2) ease;
}
.pg-range::-moz-range-track { height: 8px; border-radius: var(--pg-radius-pill); background: #E6DED3; }
.pg-range::-moz-range-progress { height: 8px; border-radius: var(--pg-radius-pill); background: var(--pg-primary); }
[data-pg-theme="dark"] .pg-range::-moz-range-track { background: rgba(255, 255, 255, 0.16); }
[data-pg-theme="dark"] .pg-range::-moz-range-progress { background: var(--pg-gold); }
.pg-range::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--pg-primary);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18);
    transition: transform var(--pg-dur-2) var(--pg-ease-emphasized), box-shadow var(--pg-dur-2) ease;
}
[data-pg-theme="dark"] .pg-range::-webkit-slider-thumb { border-color: var(--pg-gold); }
[data-pg-theme="dark"] .pg-range::-moz-range-thumb { border-color: var(--pg-gold); }
.pg-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px var(--pg-primary-soft-2), 0 2px 8px rgba(16, 24, 40, 0.18); }
.pg-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.pg-range:hover::-moz-range-thumb { box-shadow: 0 0 0 8px var(--pg-primary-soft-2), 0 2px 8px rgba(16, 24, 40, 0.18); }
.pg-range:focus-visible { outline: none; }
.pg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pg-surface), 0 0 0 6px var(--pg-focus-color); }
.pg-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--pg-surface), 0 0 0 6px var(--pg-focus-color); }
.pg-range:disabled { opacity: 0.45; cursor: not-allowed; }
/* Повзунок із кнопками «−/+» і значенням словами (як у налаштуваннях відео) */
.pg-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--pg-space-3); }
.pg-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pg-space-3); margin-bottom: var(--pg-space-1); }
.pg-slider__value { font-weight: var(--pg-fw-semibold); color: var(--pg-primary); font-variant-numeric: tabular-nums; }
[data-pg-theme="dark"] .pg-slider__value { color: var(--pg-gold-light); }

/* Сегментований перемикач: перший дочірній — .pg-segmented__thumb, далі label > input[type=radio] + span.
   Кількість варіантів — style="--pg-seg-count: 3". Повзун їде під обраний варіант (до 5 варіантів). */
.pg-segmented {
    --pg-seg-count: 2; --pg-seg-index: 0;
    position: relative; display: grid; grid-template-columns: repeat(var(--pg-seg-count), minmax(0, 1fr));
    gap: 0; padding: 4px; min-height: 44px;
    background: var(--pg-surface-sunken); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md);
    isolation: isolate;
}
.pg-segmented__thumb {
    position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
    width: calc((100% - 8px) / var(--pg-seg-count));
    background: var(--pg-surface); border-radius: calc(var(--pg-radius-md) - 3px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.08);
    border: 1px solid rgba(214, 168, 90, 0.45);
    transform: translateX(calc(var(--pg-seg-index) * 100%));
    transition: transform var(--pg-dur-4) var(--pg-ease-emphasized);
}
[data-pg-theme="dark"] .pg-segmented__thumb { background: var(--pg-surface-raised); }
.pg-segmented:has(> :nth-child(3) input:checked) { --pg-seg-index: 1; }
.pg-segmented:has(> :nth-child(4) input:checked) { --pg-seg-index: 2; }
.pg-segmented:has(> :nth-child(5) input:checked) { --pg-seg-index: 3; }
.pg-segmented:has(> :nth-child(6) input:checked) { --pg-seg-index: 4; }
.pg-segmented__item { position: relative; display: flex; cursor: pointer; min-width: 0; }
.pg-segmented__item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pg-segmented__item span {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--pg-hit);
    padding: 0 var(--pg-space-3); border-radius: calc(var(--pg-radius-md) - 3px);
    font-size: var(--pg-fs-sm); font-weight: var(--pg-fw-semibold); color: var(--pg-text-muted); text-align: center;
    transition: color var(--pg-dur-3) ease;
}
.pg-segmented__item:hover span { color: var(--pg-text); }
.pg-segmented__item input:checked + span { color: var(--pg-primary); }
[data-pg-theme="dark"] .pg-segmented__item input:checked + span { color: var(--pg-gold-light); }
.pg-segmented__item input:focus-visible + span { box-shadow: var(--pg-focus-ring); }

/* ───────────────────────────── 5. ВКЛАДКИ ───────────────────────────── */
.pg-tabs__list {
    display: flex; gap: var(--pg-space-1); overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--pg-border); margin: 0 0 var(--pg-space-6); padding: 0;
}
.pg-tabs__list::-webkit-scrollbar { display: none; }
.pg-tab {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--pg-space-2);
    min-height: 44px; padding: 0 var(--pg-space-4); margin: 0;
    font-family: var(--pg-font); font-size: var(--pg-fs-md); font-weight: var(--pg-fw-medium); color: var(--pg-text-muted);
    background: transparent; border: 0; border-radius: var(--pg-radius-sm) var(--pg-radius-sm) 0 0; cursor: pointer;
    text-decoration: none; transition: color var(--pg-dur-2) ease, background-color var(--pg-dur-2) ease;
}
.pg-tab::after {
    content: ''; position: absolute; left: var(--pg-space-3); right: var(--pg-space-3); bottom: -1px; height: 2px;
    border-radius: 2px; background: var(--pg-gold); transform: scaleX(0); transform-origin: center;
    transition: transform var(--pg-dur-4) var(--pg-ease-emphasized);
}
.pg-tab:hover { color: var(--pg-primary); background: var(--pg-primary-soft); }
.pg-tab[aria-selected="true"],
.pg-tab.is-active { color: var(--pg-text); font-weight: var(--pg-fw-semibold); }
.pg-tab[aria-selected="true"]::after,
.pg-tab.is-active::after { transform: scaleX(1); }
.pg-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pg-focus-color); }
.pg-tab__count { font-size: var(--pg-fs-xs); font-weight: var(--pg-fw-bold); padding: 1px 8px; border-radius: var(--pg-radius-pill); background: var(--pg-gold-soft); color: var(--pg-gold-text); }
.pg-tabs__panel { animation: pg-fade-in var(--pg-dur-3) var(--pg-ease-standard); }
.pg-tabs__panel[hidden] { display: none; }

/* ───────────────────────────── 6. КАРТКИ ───────────────────────────── */
.pg-card {
    position: relative; display: block;
    background: var(--pg-surface); color: var(--pg-text);
    border: 1px solid var(--pg-border); border-radius: var(--pg-radius-xl);
    box-shadow: var(--pg-shadow-xs); padding: var(--pg-space-8);
    transition: box-shadow var(--pg-dur-3) var(--pg-ease-emphasized), transform var(--pg-dur-3) var(--pg-ease-emphasized), border-color var(--pg-dur-3) ease;
}
.pg-card--flat { box-shadow: none; }
.pg-card--compact { padding: var(--pg-space-5); border-radius: var(--pg-radius-lg); }
.pg-card--sunken { background: var(--pg-surface-sunken); border-color: transparent; box-shadow: none; border-radius: var(--pg-radius-md); padding: var(--pg-space-4); }
.pg-card--interactive { cursor: pointer; text-decoration: none; }
.pg-card--interactive:hover { box-shadow: var(--pg-shadow-hover); transform: translateY(-2px); border-color: var(--pg-gold-line); }
.pg-card--interactive:active { transform: translateY(0); box-shadow: var(--pg-shadow-sm); }
.pg-card--interactive:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.pg-card--accent { overflow: hidden; }
.pg-card--accent::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 0 solid transparent; border-top-width: 3px; background: var(--pg-accent-gradient) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.pg-card--stripe { border-left: 3px solid var(--pg-primary); border-radius: var(--pg-radius-md); padding: var(--pg-space-4) var(--pg-space-5); }
.pg-card--featured { border: 2px solid var(--pg-gold); box-shadow: var(--pg-shadow-featured); }
.pg-card--selected { border-color: var(--pg-primary); box-shadow: 0 0 0 3px var(--pg-primary-soft-2), var(--pg-shadow-sm); }
.pg-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
.pg-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pg-space-4); margin-bottom: var(--pg-space-4); }
.pg-card__title { font-size: var(--pg-fs-lg); font-weight: var(--pg-fw-semibold); line-height: var(--pg-lh-snug); color: var(--pg-text); margin: 0; }
.pg-card__subtitle { font-size: var(--pg-fs-sm); color: var(--pg-text-muted); margin: 4px 0 0; }
.pg-card__body { color: var(--pg-text-muted); font-size: var(--pg-fs-md); line-height: var(--pg-lh-body); }
.pg-card__footer { display: flex; flex-wrap: wrap; gap: var(--pg-space-3); align-items: center; margin-top: var(--pg-space-6); padding-top: var(--pg-space-5); border-top: 1px solid var(--pg-border-light); }
.pg-card__media { margin: calc(-1 * var(--pg-space-8)) calc(-1 * var(--pg-space-8)) var(--pg-space-6); border-radius: var(--pg-radius-xl) var(--pg-radius-xl) 0 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--pg-bg-alt); }
.pg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
    .pg-card { padding: var(--pg-space-6) var(--pg-space-5); }
    .pg-card__media { margin: calc(-1 * var(--pg-space-6)) calc(-1 * var(--pg-space-5)) var(--pg-space-5); }
}
/* Ціна (тарифна картка) */
.pg-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: var(--pg-space-2) 0 var(--pg-space-5); }
.pg-price__value { font-size: 52px; font-weight: var(--pg-fw-bold); line-height: 1; letter-spacing: var(--pg-tracking-display); color: var(--pg-text); font-variant-numeric: tabular-nums; }
.pg-card--featured .pg-price__value { color: var(--pg-primary); }
.pg-price__unit { font-size: var(--pg-fs-lg); font-weight: var(--pg-fw-semibold); color: var(--pg-text-muted); }
.pg-card--featured .pg-price__unit { color: var(--pg-primary); }
/* Список з бордовими «галочками» (як у тарифах) */
.pg-checklist { list-style: none; margin: 0; padding: 0; }
.pg-checklist li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--pg-border-light); color: var(--pg-text-muted); line-height: 1.5; }
.pg-checklist li:last-child { border-bottom: 0; }
.pg-checklist li::before {
    content: ''; position: absolute; left: 2px; top: 15px; width: 18px; height: 18px; background: var(--pg-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg-grid { display: grid; gap: var(--pg-space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pg-grid-min, 280px)), 1fr)); }
.pg-stack { display: flex; flex-direction: column; gap: var(--pg-stack-gap, var(--pg-space-4)); }
.pg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pg-row-gap, var(--pg-space-3)); }

/* ───────────────────────────── 7. ЧИПИ / БЕЙДЖІ ───────────────────────────── */
.pg-badge {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 4px 12px; min-height: 26px;
    font-size: var(--pg-fs-xs); font-weight: var(--pg-fw-semibold); line-height: 1.2;
    border-radius: var(--pg-radius-pill); border: 1px solid transparent;
    background: var(--pg-gold-soft); color: var(--pg-gold-text); border-color: rgba(214, 168, 90, 0.30);
}
.pg-badge--gold { background: var(--pg-gold); color: var(--pg-text-on-gold); border-color: var(--pg-gold); font-weight: var(--pg-fw-bold); box-shadow: 0 4px 12px rgba(214, 168, 90, 0.35); }
.pg-badge--primary { background: var(--pg-primary); color: #FFFFFF; border-color: var(--pg-primary); }
.pg-badge--primary-soft { background: var(--pg-primary-soft); color: var(--pg-primary); border-color: rgba(138, 16, 42, 0.18); }
.pg-badge--neutral { background: var(--pg-surface-sunken); color: var(--pg-text-muted); border-color: var(--pg-border); }
.pg-badge--success { background: var(--pg-success-soft); color: var(--pg-success); border-color: var(--pg-success-line); }
.pg-badge--warning { background: var(--pg-warning-soft); color: var(--pg-warning); border-color: var(--pg-warning-line); }
.pg-badge--danger { background: var(--pg-danger-soft); color: var(--pg-danger); border-color: var(--pg-danger-line); }
.pg-badge--info { background: var(--pg-info-soft); color: var(--pg-info); border-color: var(--pg-info-line); }
[data-pg-theme="dark"] .pg-badge--primary-soft { color: #F3A9B9; }
.pg-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pg-badge--live .pg-badge__dot { animation: pg-pulse 2s var(--pg-ease-standard) infinite; }
@keyframes pg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pg-badge--discount { background: var(--pg-primary-soft); color: var(--pg-primary); border: 0; border-radius: var(--pg-radius-sm); font-weight: 800; padding: 6px 10px; }

/* Чип — інтерактивний (фільтр, вибір). aria-pressed / .is-selected — обраний. */
.pg-chip {
    display: inline-flex; align-items: center; gap: var(--pg-space-2); min-height: var(--pg-hit);
    padding: 0 18px; font-family: var(--pg-font); font-size: var(--pg-fs-sm); font-weight: var(--pg-fw-medium);
    color: var(--pg-text); background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-pill);
    cursor: pointer; text-decoration: none;
    transition: background-color var(--pg-dur-2) ease, border-color var(--pg-dur-2) ease, color var(--pg-dur-2) ease, transform var(--pg-dur-2) var(--pg-ease-emphasized);
}
.pg-chip:hover { border-color: var(--pg-gold-line); background: var(--pg-surface-hover); }
.pg-chip:active { transform: scale(0.97); }
.pg-chip:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.pg-chip[aria-pressed="true"],
.pg-chip.is-selected { background: var(--pg-primary); border-color: var(--pg-primary); color: #FFFFFF; }
.pg-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: -10px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; }
.pg-chip__remove:hover { background: rgba(16, 24, 40, 0.08); }
.pg-chip__swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.15); flex-shrink: 0; }

/* ───────────────────────────── 8. АВАТАР ───────────────────────────── */
.pg-avatar {
    --pg-avatar-size: 44px; --pg-avatar-ring: transparent;
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--pg-avatar-size); height: var(--pg-avatar-size); border-radius: 50%;
    background: var(--pg-primary); color: #FFFFFF;
    font-size: calc(var(--pg-avatar-size) * 0.4); font-weight: var(--pg-fw-bold); line-height: 1; text-transform: uppercase;
    box-shadow: 0 0 0 2px var(--pg-surface), 0 0 0 4px var(--pg-avatar-ring);
}
.pg-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pg-avatar--sm { --pg-avatar-size: 32px; }
.pg-avatar--lg { --pg-avatar-size: 56px; }
.pg-avatar--xl { --pg-avatar-size: 80px; }
.pg-avatar--gold { background: var(--pg-gold-gradient); color: var(--pg-text); }
.pg-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--pg-text-subtle); border: 2px solid var(--pg-surface); }
.pg-avatar__status--online { background: #2FA45E; }
.pg-avatar__status--away { background: var(--pg-gold); }
.pg-avatar-stack { display: inline-flex; }
.pg-avatar-stack > .pg-avatar + .pg-avatar { margin-left: -10px; }

/* ───────────────────────────── 9. ТУЛТИП ───────────────────────────── */
/* <button data-pg-tooltip="Текст" data-pg-tooltip-pos="bottom">… */
[data-pg-tooltip] { position: relative; }
[data-pg-tooltip]::after {
    content: attr(data-pg-tooltip);
    position: absolute; z-index: var(--pg-z-tooltip); left: 50%; bottom: calc(100% + 10px);
    width: max-content; max-width: 260px; padding: 8px 12px;
    font-family: var(--pg-font); font-size: var(--pg-fs-sm); font-weight: var(--pg-fw-medium); line-height: 1.4;
    text-align: center; white-space: normal; text-transform: none; letter-spacing: 0;
    color: #FFFFFF; background: #101828; border-radius: var(--pg-radius-sm); box-shadow: var(--pg-shadow-sm);
    pointer-events: none; opacity: 0; transform: translate(-50%, 4px);
    transition: opacity var(--pg-dur-2) ease, transform var(--pg-dur-3) var(--pg-ease-emphasized);
}
[data-pg-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -4px); }
[data-pg-tooltip]:hover::after,
[data-pg-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; }
[data-pg-theme="dark"] [data-pg-tooltip]::after,
[data-pg-theme="dark"][data-pg-tooltip]::after { background: #F5F1EA; color: #101828; }

/* ───────────────────────────── 10. ПРОГРЕС / СКЕЛЕТОН / СПІНЕР ───────────────────────────── */
.pg-progress {
    --pg-progress: 0; position: relative; height: 8px; overflow: hidden;
    background: #EDE6DC; border-radius: var(--pg-radius-pill);
}
[data-pg-theme="dark"] .pg-progress { background: rgba(255, 255, 255, 0.12); }
.pg-progress__bar {
    position: absolute; inset: 0; border-radius: inherit; background: var(--pg-primary);
    transform-origin: left center; transform: scaleX(var(--pg-progress));
    transition: transform var(--pg-dur-4) var(--pg-ease-emphasized);
}
.pg-progress--gold .pg-progress__bar { background: var(--pg-gold-gradient); }
.pg-progress--success .pg-progress__bar { background: var(--pg-success); }
.pg-progress--lg { height: 12px; }
.pg-progress--indeterminate .pg-progress__bar { transform: none; width: 100%; animation: pg-indeterminate 1.4s var(--pg-ease-standard) infinite; transform-origin: left; }
.pg-progress-label { display: flex; justify-content: space-between; font-size: var(--pg-fs-sm); color: var(--pg-text-muted); margin-bottom: var(--pg-space-2); }

.pg-skeleton {
    position: relative; overflow: hidden; display: block;
    background: #EFE9E1; border-radius: var(--pg-radius-sm); min-height: 1em;
}
[data-pg-theme="dark"] .pg-skeleton { background: rgba(255, 255, 255, 0.08); }
.pg-skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: pg-shimmer 1.6s var(--pg-ease-standard) infinite;
}
[data-pg-theme="dark"] .pg-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
.pg-skeleton--text { height: 14px; margin: 8px 0; border-radius: 6px; }
.pg-skeleton--title { height: 24px; width: 60%; margin-bottom: 12px; }
.pg-skeleton--circle { border-radius: 50%; width: 44px; height: 44px; }
.pg-skeleton--block { height: 160px; border-radius: var(--pg-radius-lg); }

/* ───────────────────────────── 11. СТЕПЕР (майстри) ───────────────────────────── */
.pg-stepper { display: flex; align-items: center; justify-content: center; gap: var(--pg-space-3); list-style: none; margin: 0; padding: 0; counter-reset: pg-step; }
.pg-step { display: flex; align-items: center; gap: var(--pg-space-2); color: var(--pg-text-muted); font-size: var(--pg-fs-sm); font-weight: var(--pg-fw-medium); counter-increment: pg-step; min-width: 0; }
.pg-step:not(:last-child)::after {
    content: ''; display: block; width: 40px; height: 2px; margin-left: var(--pg-space-2); border-radius: 2px;
    background: linear-gradient(to right, var(--pg-gold) 50%, var(--pg-border) 50%) right / 200% 100% no-repeat;
    transition: background-position var(--pg-dur-5) var(--pg-ease-emphasized);
}
.pg-step.is-done:not(:last-child)::after { background-position: left; }
.pg-step__num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid var(--pg-border-input); background: var(--pg-surface); color: var(--pg-text-muted);
    font-size: var(--pg-fs-sm); font-weight: var(--pg-fw-bold); font-variant-numeric: tabular-nums;
    transition: background-color var(--pg-dur-3) ease, border-color var(--pg-dur-3) ease, color var(--pg-dur-3) ease, box-shadow var(--pg-dur-4) var(--pg-ease-emphasized);
}
.pg-step__num::before { content: counter(pg-step); }
.pg-step.is-current { color: var(--pg-text); font-weight: var(--pg-fw-semibold); }
.pg-step.is-current .pg-step__num { background: var(--pg-primary); border-color: var(--pg-primary); color: #FFFFFF; box-shadow: 0 0 0 4px var(--pg-primary-soft-2); }
.pg-step.is-done { color: var(--pg-text); }
.pg-step.is-done .pg-step__num { background: var(--pg-gold-soft-2); border-color: var(--pg-gold); color: var(--pg-gold-text); }
.pg-step.is-done .pg-step__num::before { content: '✓'; }
@media (max-width: 560px) {
    .pg-step:not(.is-current) .pg-step__label { display: none; }
    .pg-step:not(:last-child)::after { width: 20px; }
}

/* ───────────────────────────── 12. ПОРОЖНІЙ СТАН ───────────────────────────── */
.pg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--pg-space-3); padding: var(--pg-space-12) var(--pg-space-6); max-width: 520px; margin: 0 auto; }
.pg-empty__icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pg-gold-soft); color: var(--pg-gold); margin-bottom: var(--pg-space-2); }
.pg-empty__icon svg { width: 32px; height: 32px; }
.pg-empty__title { font-size: var(--pg-fs-xl); font-weight: var(--pg-fw-semibold); color: var(--pg-text); margin: 0; letter-spacing: -0.01em; }
.pg-empty__text { color: var(--pg-text-muted); margin: 0 0 var(--pg-space-3); line-height: var(--pg-lh-body); }

/* ───────────────────────────── 13. БАНЕР (сповіщення в потоці / зверху) ───────────────────────────── */
.pg-banner {
    --pg-banner-accent: var(--pg-info); --pg-banner-bg: var(--pg-info-soft); --pg-banner-line: var(--pg-info-line);
    display: flex; align-items: flex-start; gap: var(--pg-space-3);
    padding: var(--pg-space-4) var(--pg-space-5); border-radius: var(--pg-radius-md);
    background: var(--pg-banner-bg); border: 1px solid var(--pg-banner-line); border-left: 3px solid var(--pg-banner-accent);
    color: var(--pg-text); font-size: var(--pg-fs-md); line-height: 1.5;
}
.pg-banner__icon { flex-shrink: 0; color: var(--pg-banner-accent); margin-top: 1px; }
.pg-banner__icon svg { width: 22px; height: 22px; display: block; }
.pg-banner__body { flex: 1; min-width: 0; }
.pg-banner__title { font-weight: var(--pg-fw-semibold); margin: 0 0 2px; }
.pg-banner__text { margin: 0; color: var(--pg-text-muted); }
.pg-banner__actions { display: flex; gap: var(--pg-space-2); flex-wrap: wrap; margin-top: var(--pg-space-3); }
.pg-banner__close { margin: -10px -12px -10px 0; }
.pg-banner--success { --pg-banner-accent: var(--pg-success); --pg-banner-bg: var(--pg-success-soft); --pg-banner-line: var(--pg-success-line); }
.pg-banner--warning { --pg-banner-accent: var(--pg-gold); --pg-banner-bg: var(--pg-warning-soft); --pg-banner-line: var(--pg-warning-line); }
.pg-banner--danger { --pg-banner-accent: var(--pg-danger); --pg-banner-bg: var(--pg-danger-soft); --pg-banner-line: var(--pg-danger-line); }
.pg-banner--brand { --pg-banner-accent: var(--pg-primary); --pg-banner-bg: var(--pg-surface); --pg-banner-line: var(--pg-border); box-shadow: var(--pg-shadow-xs); }
/* Фіксований банер зверху (втрата зв'язку тощо): не зсуває верстку, в'їжджає зверху */
.pg-banner--top {
    position: fixed; z-index: var(--pg-z-banner); top: var(--pg-space-3); left: 50%;
    width: min(720px, calc(100% - 24px)); align-items: center;
    box-shadow: var(--pg-shadow-md); background: var(--pg-surface);
    transform: translate(-50%, calc(-100% - 24px)); opacity: 0; visibility: hidden;
    transition: transform var(--pg-dur-4) var(--pg-ease-emphasized), opacity var(--pg-dur-3) ease, visibility 0s linear var(--pg-dur-4);
}
.pg-banner--top.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform var(--pg-dur-4) var(--pg-ease-emphasized), opacity var(--pg-dur-3) ease, visibility 0s; }

/* ───────────────────────────── 14. ШАПКА / НАВІГАЦІЯ ───────────────────────────── */
.pg-topbar {
    position: sticky; top: 0; z-index: var(--pg-z-sticky);
    display: flex; align-items: center; gap: var(--pg-space-4); min-height: 64px; padding: var(--pg-space-2) var(--pg-space-6);
    background: var(--pg-header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(232, 225, 216, 0.65);
    transition: background-color var(--pg-dur-3) var(--pg-ease-emphasized), border-color var(--pg-dur-3) ease, box-shadow var(--pg-dur-3) ease;
}
[data-pg-theme="dark"] .pg-topbar { border-bottom-color: var(--pg-border); }
.pg-topbar.is-scrolled { background: var(--pg-header-bg-scrolled); box-shadow: 0 4px 24px rgba(16, 24, 40, 0.06); }
.pg-topbar__brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: var(--pg-fw-bold); letter-spacing: var(--pg-tracking-tight); color: var(--pg-text); text-decoration: none; min-width: 0; }
.pg-topbar__brand img { height: 36px; width: auto; }
.pg-topbar__title { font-size: var(--pg-fs-lg); font-weight: var(--pg-fw-semibold); color: var(--pg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pg-topbar__spacer { flex: 1; }
.pg-topbar__actions { display: flex; align-items: center; gap: var(--pg-space-2); }
@media (max-width: 768px) { .pg-topbar { padding: var(--pg-space-2) var(--pg-space-4); min-height: 60px; } }
.pg-nav { display: flex; align-items: center; gap: var(--pg-space-1); list-style: none; margin: 0; padding: 0; }
.pg-nav-link {
    position: relative; display: inline-flex; align-items: center; gap: var(--pg-space-2); min-height: var(--pg-hit);
    padding: 0 var(--pg-space-3); border-radius: var(--pg-radius-sm);
    font-size: var(--pg-fs-sm); font-weight: var(--pg-fw-medium); color: var(--pg-text); text-decoration: none;
    transition: color var(--pg-dur-2) ease, background-color var(--pg-dur-2) ease;
}
.pg-nav-link:hover { color: var(--pg-primary); background: var(--pg-primary-soft); }
.pg-nav-link[aria-current="page"]::after,
.pg-nav-link.is-active::after { content: ''; position: absolute; left: var(--pg-space-3); right: var(--pg-space-3); bottom: 6px; height: 2px; border-radius: 2px; background: var(--pg-gold); }
.pg-nav-link:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
/* Бічне меню кабінету */
.pg-sidenav { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pg-sidenav .pg-nav-link { width: 100%; min-height: 44px; font-size: var(--pg-fs-md); padding: 0 var(--pg-space-4); }
.pg-sidenav .pg-nav-link[aria-current="page"],
.pg-sidenav .pg-nav-link.is-active { background: var(--pg-primary-soft-2); color: var(--pg-primary); font-weight: var(--pg-fw-semibold); }
.pg-sidenav .pg-nav-link[aria-current="page"]::after,
.pg-sidenav .pg-nav-link.is-active::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: var(--pg-primary); }

/* Список (рядки) — гравці, кімнати, історія */
.pg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pg-space-2); }
.pg-list-item {
    display: flex; align-items: center; gap: var(--pg-space-3); min-height: 52px; padding: var(--pg-space-2) var(--pg-space-3);
    background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md);
    transition: background-color var(--pg-dur-2) ease, border-color var(--pg-dur-2) ease, box-shadow var(--pg-dur-3) var(--pg-ease-emphasized);
}
.pg-list-item:hover { border-color: var(--pg-gold-line); }
.pg-list-item.is-active { border-color: var(--pg-gold); box-shadow: 0 0 0 3px var(--pg-gold-soft-2); }
.pg-list-item__main { flex: 1; min-width: 0; }
.pg-list-item__title { font-weight: var(--pg-fw-semibold); color: var(--pg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-list-item__meta { font-size: var(--pg-fs-sm); color: var(--pg-text-muted); }

/* Акордеон (FAQ головної) */
.pg-accordion { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md); overflow: hidden; transition: border-color var(--pg-dur-3) var(--pg-ease-emphasized); }
.pg-accordion:hover,
.pg-accordion.is-open { border-color: var(--pg-gold-line); }
.pg-accordion__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pg-space-3); width: 100%;
    min-height: 52px; padding: 14px 20px; margin: 0; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--pg-font); font-size: var(--pg-fs-md); font-weight: var(--pg-fw-semibold); color: var(--pg-text); line-height: 1.4;
    transition: color var(--pg-dur-2) ease;
}
.pg-accordion__trigger:hover { color: var(--pg-primary); }
.pg-accordion__trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pg-focus-color); }
.pg-accordion__chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--pg-text-muted); transition: transform var(--pg-dur-3) var(--pg-ease-emphasized); }
.pg-accordion.is-open .pg-accordion__chevron { transform: rotate(180deg); }
.pg-accordion__panel { overflow: hidden; }
.pg-accordion__panel[hidden] { display: none; }
.pg-accordion__content { padding: 0 20px 18px; color: var(--pg-text-muted); line-height: 1.65; }

/* ───────────────────────────── 15. МОДАЛКА ─────────────────────────────
   <div class="pg-modal" id="…" hidden>
     <div class="pg-modal__backdrop" data-pg-close></div>
     <div class="pg-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="…">
       <header class="pg-modal__header">…<button class="pg-icon-btn pg-modal__close" data-pg-close>×</button></header>
       <div class="pg-modal__body">…</div>
       <footer class="pg-modal__footer">…</footer>
     </div>
   </div>
   Відкривати PanoramaMotion.openModal(el): стан .is-open, вихід — .is-closing. */
.pg-modal {
    position: fixed; inset: 0; z-index: var(--pg-z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: var(--pg-space-6); overflow: hidden;
    font-family: var(--pg-font); color: var(--pg-text);
}
.pg-modal[hidden] { display: none; }
.pg-modal *, .pg-modal *::before, .pg-modal *::after { box-sizing: border-box; }
.pg-modal__backdrop {
    position: absolute; inset: 0; background: var(--pg-backdrop);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity var(--pg-dur-4) var(--pg-ease-standard);
}
.pg-modal__dialog {
    position: relative; display: flex; flex-direction: column;
    width: min(var(--pg-modal-w, 560px), 100%); max-height: min(88vh, 100%); max-height: min(88dvh, 100%);
    background: var(--pg-surface); color: var(--pg-text);
    border: 1px solid var(--pg-border-light); border-radius: var(--pg-radius-xl);
    box-shadow: var(--pg-shadow-lg);
    opacity: 0; transform: translateY(var(--pg-shift-md)) scale(var(--pg-scale-in));
    transition: opacity var(--pg-dur-3) var(--pg-ease-standard), transform var(--pg-dur-4) var(--pg-ease-emphasized);
    will-change: transform, opacity;
}
.pg-modal--sm { --pg-modal-w: 440px; }
.pg-modal--lg { --pg-modal-w: 760px; }
.pg-modal--xl { --pg-modal-w: 1040px; }
.pg-modal.is-open .pg-modal__backdrop { opacity: 1; }
.pg-modal.is-open .pg-modal__dialog { opacity: 1; transform: none; }
/* Вихід — швидше й прискорено (речі зникають швидше, ніж з'являються) */
.pg-modal.is-closing .pg-modal__backdrop { opacity: 0; transition-duration: var(--pg-dur-3); }
.pg-modal.is-closing .pg-modal__dialog {
    opacity: 0; transform: translateY(calc(var(--pg-shift-md) / 2)) scale(var(--pg-scale-in));
    transition: opacity var(--pg-dur-2) var(--pg-ease-accelerate), transform var(--pg-dur-3) var(--pg-ease-accelerate);
}
.pg-modal__header { display: flex; align-items: flex-start; gap: var(--pg-space-3); padding: var(--pg-space-6) var(--pg-space-6) var(--pg-space-2) var(--pg-space-8); }
.pg-modal__heading { flex: 1; min-width: 0; padding-top: 6px; }
.pg-modal__title { font-size: var(--pg-fs-xl); font-weight: var(--pg-fw-bold); line-height: 1.25; letter-spacing: -0.01em; color: var(--pg-text); margin: 0; }
.pg-modal__subtitle { font-size: var(--pg-fs-md); color: var(--pg-text-muted); margin: 6px 0 0; }
.pg-modal__close { margin: 0 -6px 0 0; flex-shrink: 0; }
.pg-modal__body { padding: var(--pg-space-4) var(--pg-space-8) var(--pg-space-6); overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.pg-modal__footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pg-space-3);
    padding: var(--pg-space-5) var(--pg-space-8) var(--pg-space-6); border-top: 1px solid var(--pg-border-light);
}
.pg-modal__footer--between { justify-content: space-between; }
/* Контейнер, висоту якого анімує PanoramaMotion.animateHeight / swap */
.pg-auto-height { overflow: hidden; }
@media (max-width: 600px) {
    /* На телефоні модалка «сідає» знизу, як шторка */
    .pg-modal { align-items: flex-end; padding: 0; }
    .pg-modal__dialog {
        width: 100%; max-height: 92vh; max-height: 92dvh;
        border-radius: var(--pg-radius-2xl) var(--pg-radius-2xl) 0 0; border-bottom: 0;
        transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .pg-modal.is-closing .pg-modal__dialog { transform: translateY(40px); }
    .pg-modal__header { padding: var(--pg-space-5) var(--pg-space-4) var(--pg-space-2) var(--pg-space-5); }
    .pg-modal__body { padding: var(--pg-space-3) var(--pg-space-5) var(--pg-space-5); }
    .pg-modal__footer { padding: var(--pg-space-4) var(--pg-space-5); }
    .pg-modal__footer > .pg-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-modal__dialog, .pg-modal.is-closing .pg-modal__dialog { transform: none; }
}

/* ───────────────────────────── 16. ШТОРКА (bottom sheet) ───────────────────────────── */
.pg-sheet { position: fixed; inset: 0; z-index: var(--pg-z-sheet); display: flex; align-items: flex-end; justify-content: center; font-family: var(--pg-font); color: var(--pg-text); }
.pg-sheet[hidden] { display: none; }
.pg-sheet *, .pg-sheet *::before, .pg-sheet *::after { box-sizing: border-box; }
.pg-sheet__backdrop { position: absolute; inset: 0; background: var(--pg-backdrop); opacity: 0; transition: opacity var(--pg-dur-4) var(--pg-ease-standard); }
.pg-sheet__panel {
    --pg-sheet-drag: 0px;
    position: relative; display: flex; flex-direction: column; width: min(640px, 100%);
    max-height: 90vh; max-height: 90dvh;
    background: var(--pg-surface); border-radius: var(--pg-radius-2xl) var(--pg-radius-2xl) 0 0;
    box-shadow: 0 -12px 48px rgba(16, 24, 40, 0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(calc(100% + 24px));
    transition: transform var(--pg-dur-4) var(--pg-ease-emphasized);
    touch-action: pan-y; will-change: transform;
}
.pg-sheet.is-open .pg-sheet__backdrop { opacity: 1; }
.pg-sheet.is-open .pg-sheet__panel { transform: translateY(var(--pg-sheet-drag)); }
.pg-sheet.is-closing .pg-sheet__backdrop { opacity: 0; transition-duration: var(--pg-dur-3); }
.pg-sheet.is-closing .pg-sheet__panel { transform: translateY(calc(100% + 24px)); transition: transform var(--pg-dur-3) var(--pg-ease-accelerate); }
.pg-sheet.is-dragging .pg-sheet__panel { transition: none; }
.pg-sheet__handle {
    display: flex; justify-content: center; align-items: center; height: 32px; flex-shrink: 0;
    cursor: grab; touch-action: none; border: 0; background: transparent; width: 100%; padding: 0;
}
.pg-sheet__handle::before { content: ''; width: 44px; height: 5px; border-radius: 3px; background: #D9D2C8; }
[data-pg-theme="dark"] .pg-sheet__handle::before { background: rgba(255, 255, 255, 0.25); }
.pg-sheet__header { display: flex; align-items: center; gap: var(--pg-space-3); padding: 0 var(--pg-space-4) var(--pg-space-2) var(--pg-space-6); touch-action: none; }
.pg-sheet__title { flex: 1; font-size: var(--pg-fs-xl); font-weight: var(--pg-fw-bold); margin: 0; letter-spacing: -0.01em; }
.pg-sheet__body { padding: var(--pg-space-2) var(--pg-space-6) var(--pg-space-6); overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

/* Блокування прокрутки під модалкою (ставить panorama-motion.js на <html>) */
.pg-scroll-lock { overflow: hidden !important; padding-right: var(--pg-scrollbar-w, 0px) !important; }

/* ───────────────────────────── 17. ТОСТИ ───────────────────────────── */
.pg-toast-stack {
    position: fixed; z-index: var(--pg-z-toast); right: var(--pg-space-6); bottom: var(--pg-space-6);
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--pg-space-3);
    width: min(420px, calc(100% - 32px)); pointer-events: none;
    font-family: var(--pg-font);
}
@media (max-width: 600px) { .pg-toast-stack { left: 50%; right: auto; bottom: calc(var(--pg-space-4) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); align-items: stretch; } }
.pg-toast {
    --pg-toast-accent: var(--pg-primary);
    pointer-events: auto; position: relative; box-sizing: border-box;
    display: flex; align-items: flex-start; gap: var(--pg-space-3); width: 100%;
    padding: 12px 8px 12px 16px; min-height: 52px;
    color: var(--pg-text); background: var(--pg-surface);
    border: 1px solid var(--pg-border); border-left: 3px solid var(--pg-toast-accent); border-radius: var(--pg-radius-md);
    box-shadow: var(--pg-shadow-md);
    font-size: var(--pg-fs-md); line-height: 1.45;
    opacity: 0; transform: translateY(var(--pg-shift-md)) scale(0.98);
    transition: opacity var(--pg-dur-3) var(--pg-ease-standard), transform var(--pg-dur-4) var(--pg-ease-emphasized);
}
.pg-toast.is-open { opacity: 1; transform: none; }
.pg-toast.is-closing { opacity: 0; transform: translateX(var(--pg-shift-lg)); transition: opacity var(--pg-dur-2) var(--pg-ease-accelerate), transform var(--pg-dur-3) var(--pg-ease-accelerate); }
.pg-toast--success { --pg-toast-accent: var(--pg-success); }
.pg-toast--warning { --pg-toast-accent: var(--pg-gold); }
.pg-toast--danger { --pg-toast-accent: var(--pg-danger); }
.pg-toast--info { --pg-toast-accent: var(--pg-info); }
.pg-toast__icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; background: var(--pg-toast-accent); -webkit-mask: var(--pg-toast-icon); mask: var(--pg-toast-icon); }
.pg-toast { --pg-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.pg-toast--success { --pg-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pg-toast--warning { --pg-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.pg-toast--danger { --pg-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pg-toast__msg { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.pg-toast__action { flex-shrink: 0; align-self: center; min-height: 40px; padding: 0 12px; font-size: var(--pg-fs-sm); }
.pg-toast__close { flex-shrink: 0; align-self: center; width: 40px; height: 40px; color: var(--pg-text-muted); }
.pg-toast__close::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Смужка часу, що лишився (зупиняється при наведенні) */
.pg-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0 0 var(--pg-radius-md) 0; background: var(--pg-toast-accent); opacity: 0.35; transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .pg-toast__timer { opacity: 0; } }

/* ───────────────────────────── 18. ПЕРЕХОДИ (swap / flip / поява) ───────────────────────────── */
/* PanoramaMotion.swap(): старий і новий вміст у .pg-swap-pane, контейнер анімує висоту */
.pg-swap-pane { transition: opacity var(--pg-dur-3) var(--pg-ease-standard), transform var(--pg-dur-4) var(--pg-ease-emphasized); }
.pg-swap-pane.is-leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.pg-swap-pane.is-leaving { transition: opacity var(--pg-dur-2) var(--pg-ease-accelerate), transform var(--pg-dur-3) var(--pg-ease-accelerate); }
.pg-swap-pane.from-forward { opacity: 0; transform: translateX(var(--pg-shift-lg)); }
.pg-swap-pane.from-back { opacity: 0; transform: translateX(calc(-1 * var(--pg-shift-lg))); }
.pg-swap-pane.from-fade { opacity: 0; transform: translateY(var(--pg-shift-sm)); }
.pg-swap-pane.to-forward { opacity: 0; transform: translateX(calc(-1 * var(--pg-shift-lg) / 2)); }
.pg-swap-pane.to-back { opacity: 0; transform: translateX(calc(var(--pg-shift-lg) / 2)); }
.pg-swap-pane.to-fade { opacity: 0; }
/* Поява елементів: [data-pg-reveal] + клас .is-visible (ставить код екрана, напр. IntersectionObserver).
   Якщо .is-visible ніхто не поставить, елемент лишиться невидимим — використовувати лише разом із кодом. */
[data-pg-reveal] { opacity: 0; transform: translateY(var(--pg-shift-md)); transition: opacity var(--pg-dur-5) var(--pg-ease-emphasized), transform var(--pg-dur-5) var(--pg-ease-emphasized); }
[data-pg-reveal].is-visible { opacity: 1; transform: none; }
/* Під час активної зміни розміру вікна (onResizeSmooth) — без transition, щоб не «гумувати» */
.pg-is-resizing,
.pg-is-resizing * { transition-duration: 0s !important; transition-delay: 0s !important; }

/* === Cabinets (Phase C) === */
/* Компоненти кабінетів (п. 26/27, фаза C). Шкіра старих сторінок панелі — panorama-games/assets/css/admin-styles.css. */
/* М'яка бордова кнопка (другорядна дія поруч з основною: «Додати колоду», «Повторити») */
.pg-btn--soft {
    --pg-btn-bg: var(--pg-primary-soft); --pg-btn-fg: var(--pg-primary); --pg-btn-border: transparent;
    --pg-btn-bg-hover: var(--pg-primary-soft-2); --pg-btn-border-hover: transparent; --pg-btn-shadow-hover: none;
}
.pg-btn--soft:hover { color: var(--pg-primary-hover); }
/* Заголовок сторінки кабінету: золотий значок + заголовок + підзаголовок, праворуч — дії */
.pg-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pg-space-4); flex-wrap: wrap; margin: 0 0 var(--pg-space-8); }
.pg-page-head__main { display: flex; align-items: center; gap: var(--pg-space-4); min-width: 0; }
.pg-page-head__text { min-width: 0; }
.pg-page-head__title { overflow-wrap: anywhere; }
.pg-page-head__lead { margin-top: 6px; }
@media (max-width: 600px) { .pg-page-head { margin-bottom: var(--pg-space-6); } .pg-page-head__main { gap: var(--pg-space-3); } }
/* === /Cabinets (Phase C) === */

/* === Site pages (Phase D) === */
/* Публічні сторінки сайту (вхід, каталог, гра, профіль, демо, статичні) для аудиторії 40+: увесь допоміжний текст ≥16 px.
   Вмикається класом .pg-site на «острові» .pg-root; кімнату й кабінети не змінює. */
.pg-site .pg-label,
.pg-site .pg-hint,
.pg-site .pg-error-text,
.pg-site .pg-small,
.pg-site .pg-card__subtitle,
.pg-site .pg-badge,
.pg-site .pg-chip,
.pg-site .pg-btn--sm { font-size: 16px; }
.pg-site .pg-eyebrow,
.pg-site .pg-overline { font-size: 16px; letter-spacing: 0.06em; }
/* === /Site pages (Phase D) === */

/* === Icons (Phase D) === */
/* Лінійна іконка (\Panorama\Icons::svg / panorama_icon): контур currentColor, розмір від шрифту. */
.pg-ico { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.22em; stroke: currentColor; }
.pg-ico--sm { width: 1em; height: 1em; vertical-align: -0.14em; }
.pg-ico--lg { width: 1.5em; height: 1.5em; vertical-align: -0.3em; }
/* Іконка + підпис у рядок (заголовки секцій, вкладки, пункти меню) */
.pg-ico-label { display: inline-flex; align-items: center; gap: 0.5em; }
.pg-ico-label > .pg-ico { color: var(--pg-gold-text); }
/* === /Icons (Phase D) === */