/*
 * CashFlow Online — стилі сайту: токени дизайн-системи (CSS-змінні) і компоненти. Без фреймворків.
 *
 * Опис і правила вживання — docs/DESIGN.md; живі приклади — внутрішня сторінка /_design.
 * Вбудовані стилі в HTML забороняє Content-Security-Policy (style-src 'self'), тож усе — тут
 * (стилі самої вітрини /_design — окремо, у design.css).
 *
 * Тема — світла. Темна лише для екрана гри: клас .theme-game перевизначає семантичні токени.
 * Кольори — hex у межах sRGB, підібрані під логотип (рішення власника 06.11): синя шкала містить його кольори
 * (кільце #0299f2 → #0160e0, напис — основний колір, темно-синій #001734), відтінок OKLCH 258;
 * нейтральні сірі злегка тоновані тим самим відтінком; золото гри #f0c040 — акцент для грошей і цифр.
 * Контраст пар токенів перевіряє tests/DesignTokensTest.php і показує /_design.
 *
 * Перший блок :root нижче — джерело токенів для перевірки (App\Design\Tokens): значення кольорів у ньому —
 * лише hex або var(--…); вкладених блоків усередині немає.
 */

/* 1. Шрифти: власні копії woff2 (OFL 1.1; ліцензії поруч — fonts/manrope/OFL.txt, fonts/unbounded/OFL.txt).
      Набори знаків як у Google Fonts: браузер завантажує лише ті файли, знаки з яких є на сторінці. */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/unbounded/unbounded-cyrillic-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/unbounded/unbounded-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/unbounded/unbounded-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/unbounded/unbounded-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Токени ------------------------------------------------------------------------------------------- */

:root {
    /* Базові кольори (primitive). У шаблонах і компонентах не вживати — лише через семантичні нижче. */
    --blue-50: #f4f8fe;
    --blue-100: #e4eefe;
    --blue-200: #c7ddff;
    --blue-300: #95c2ff;
    --blue-400: #0299f2;
    --blue-500: #0160e0;
    --blue-600: #0152bc;
    --blue-700: #064398;
    --blue-800: #043677;
    --blue-900: #072b55;
    --blue-925: #032042;
    --blue-950: #001734;

    --neutral-0: #fdfdfe;
    --neutral-25: #f5f8fc;
    --neutral-50: #eff2f7;
    --neutral-100: #e5eaf1;
    --neutral-200: #d7dde5;
    --neutral-300: #c2c9d4;
    --neutral-400: #9ba2ad;
    --neutral-500: #757d88;
    --neutral-600: #5e6671;
    --neutral-700: #424b59;
    --neutral-800: #28313f;
    --neutral-900: #121c2b;
    --neutral-950: #060f1e;

    --gold-50: #fff7e8;
    --gold-100: #ffedca;
    --gold-200: #fddd9c;
    --gold-300: #f8cc6c;
    --gold-400: #f0c040;
    --gold-500: #d6a20a;
    --gold-600: #b08505;
    --gold-700: #8b640f;
    --gold-800: #6c4c0e;
    --gold-900: #4e350c;

    --green-50: #eafbee;
    --green-100: #d1f6d9;
    --green-200: #abe9bb;
    --green-300: #85e3a0;
    --green-500: #259f56;
    --green-600: #158445;
    --green-700: #0e6936;
    --green-800: #104f29;

    --amber-50: #fff5eb;
    --amber-100: #ffe9d0;
    --amber-200: #ffd4a3;
    --amber-300: #ffbc63;
    --amber-500: #e78c08;
    --amber-600: #c86f00;
    --amber-700: #9b540c;
    --amber-800: #773f12;

    --red-50: #fff2f1;
    --red-100: #ffe4e1;
    --red-200: #ffcac5;
    --red-300: #fe8b87;
    --red-500: #de3b3d;
    --red-600: #c3222a;
    --red-700: #a31c22;
    --red-800: #7c1d1e;

    /* Семантичні кольори — світла тема. */
    --color-bg: var(--neutral-25);
    --color-surface: var(--neutral-0);
    --color-surface-sunken: var(--neutral-50);
    --color-surface-muted: var(--neutral-100);
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-border-input: var(--neutral-500);
    --color-text: var(--neutral-900);
    --color-text-muted: var(--neutral-600);
    --color-heading: var(--neutral-950);
    --color-link: var(--blue-600);
    --color-link-hover: var(--blue-700);

    --color-primary: var(--blue-600);
    --color-primary-hover: var(--blue-700);
    --color-primary-active: var(--blue-800);
    --color-on-primary: var(--neutral-0);
    --color-primary-soft: var(--blue-100);
    --color-primary-soft-hover: var(--blue-50);
    --color-on-primary-soft: var(--blue-700);
    --color-focus: var(--blue-600);
    --color-focus-halo: var(--blue-200);

    --color-accent: var(--gold-400);
    --color-accent-strong: var(--gold-600);
    --color-accent-soft: var(--gold-50);
    --color-accent-soft-border: var(--gold-200);
    --color-on-accent-soft: var(--gold-800);
    --color-money: var(--gold-700);

    --color-info-bg: var(--blue-50);
    --color-info-border: var(--blue-200);
    --color-info-icon: var(--blue-600);
    --color-info-text: var(--blue-700);
    --color-success-bg: var(--green-50);
    --color-success-border: var(--green-200);
    --color-success-icon: var(--green-600);
    --color-success-text: var(--green-800);
    --color-warning-bg: var(--amber-50);
    --color-warning-border: var(--amber-200);
    --color-warning-icon: var(--amber-600);
    --color-warning-text: var(--amber-800);
    --color-danger: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-on-danger: var(--neutral-0);
    --color-danger-bg: var(--red-50);
    --color-danger-border: var(--red-200);
    --color-danger-icon: var(--red-600);
    --color-danger-text: var(--red-700);

    --color-disabled-bg: var(--neutral-100);
    --color-disabled-text: var(--neutral-500);
    --color-disabled-border: var(--neutral-200);
    --color-live: var(--green-500);
    --color-overlay: rgba(6, 15, 30, 0.56);

    /* Типографіка. Manrope — текст і інтерфейс; Unbounded — h1, h2, великі заголовки, назва продукту. */
    --font-text: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Unbounded", "Manrope", "Segoe UI", system-ui, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5625rem;
    --fs-h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
    --fs-h1: clamp(1.625rem, 1.15rem + 1.9vw, 2.375rem);
    --fs-app-h1: 2rem;
    --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
    --lh-tight: 1.12;
    --lh-heading: 1.22;
    --lh-snug: 1.35;
    --lh-base: 1.6;
    --fw-regular: 450;
    --fw-medium: 560;
    --fw-semibold: 650;
    --fw-bold: 750;
    --fw-display: 500;
    --measure: 68ch;

    /* Відступи — крок 4 px. */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* Радіуси. */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* Тіні: м'які, тоновані синьо-сірим; помітна тінь — лише у вікна. */
    --shadow-xs: 0 1px 2px rgba(18, 28, 43,0.06);
    --shadow-sm: 0 1px 2px rgba(18, 28, 43,0.04), 0 2px 6px rgba(18, 28, 43,0.04);
    --shadow-md: 0 2px 4px rgba(18, 28, 43,0.04), 0 12px 24px -8px rgba(18, 28, 43,0.12);
    --shadow-lg: 0 8px 16px -4px rgba(18, 28, 43,0.08), 0 32px 64px -16px rgba(18, 28, 43,0.28);

    /* Рух: анімуються лише transform і opacity (і кольори при наведенні), без пружин і відскоків. */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Шари. */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-dialog: 400;
    --z-toast: 500;

    /* Розмітка. */
    --container-max: 1200px;
    --container-narrow: 680px;
    --sidebar-width: 264px;
    --header-height: 72px;
    --gutter: clamp(16px, 4vw, 32px);
}

/* Темна тема — лише екран гри (темно-синє тло) і брендова панель. Перевизначає тільки семантичні токени. */
.theme-game,
.panel-brand {
    color-scheme: dark;
    --color-bg: var(--blue-950);
    --color-surface: var(--blue-925);
    --color-surface-sunken: var(--blue-950);
    --color-surface-muted: #142d4a;
    --color-border: #2a3e57;
    --color-border-strong: #475d77;
    --color-border-input: #738aa6;
    --color-text: #eef2f8;
    --color-text-muted: #a5b2c3;
    --color-heading: #eef2f8;
    --color-link: var(--blue-300);
    --color-link-hover: var(--blue-200);

    --color-primary: var(--blue-500);
    --color-primary-hover: #0f6ee8;
    --color-primary-active: var(--blue-600);
    --color-on-primary: var(--neutral-0);
    --color-primary-soft: #0e305a;
    --color-primary-soft-hover: #142d4a;
    --color-on-primary-soft: var(--blue-300);
    --color-focus: var(--gold-400);
    --color-focus-halo: #214c88;

    --color-accent: var(--gold-400);
    --color-accent-strong: var(--gold-400);
    --color-accent-soft: #33270c;
    --color-accent-soft-border: #644c10;
    --color-on-accent-soft: var(--gold-200);
    --color-money: var(--gold-400);

    --color-info-bg: #0e305a;
    --color-info-border: #214c88;
    --color-info-icon: var(--blue-300);
    --color-info-text: var(--blue-300);
    --color-success-bg: #112d1a;
    --color-success-border: #205431;
    --color-success-icon: var(--green-300);
    --color-success-text: var(--green-300);
    --color-warning-bg: #38240f;
    --color-warning-border: #69441c;
    --color-warning-icon: var(--amber-300);
    --color-warning-text: var(--amber-300);
    --color-danger: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-on-danger: var(--neutral-0);
    --color-danger-bg: #3f1917;
    --color-danger-border: #7a3430;
    --color-danger-icon: var(--red-300);
    --color-danger-text: var(--red-300);

    --color-disabled-bg: #142d4a;
    --color-disabled-text: #738aa6;
    --color-disabled-border: #2a3e57;
    --color-live: var(--green-300);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 24px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.6);

    background-color: var(--color-bg);
    color: var(--color-text);
}

/* 3. Основа --------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    font-kerning: normal;
    /* Manrope підміняє «->» і «--» стрілкою й тире — вимкнено, щоб текст лишався таким, як написано. */
    font-variant-ligatures: no-contextual;
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--color-heading);
    text-wrap: balance;
}

h1,
.h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
}

h2,
.h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-display);
    line-height: var(--lh-heading);
    letter-spacing: -0.015em;
}

h3,
.h3 {
    font-family: var(--font-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: -0.005em;
}

h4,
.h4 {
    font-family: var(--font-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.display {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: var(--fw-display);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--color-heading);
    text-wrap: balance;
}

.lead {
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: var(--measure);
}

.eyebrow {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    color: var(--color-on-primary-soft);
}

a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

::selection {
    background: var(--blue-200);
    color: var(--neutral-950);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Атрибут hidden ховає елемент і тоді, коли клас задає йому display (наприклад, помилка поля — flex). */
[hidden] {
    display: none !important;
}

ul[class],
ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
}

hr,
.divider {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--color-border);
}

strong,
b {
    font-weight: var(--fw-bold);
}

small {
    font-size: var(--fs-sm);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: var(--z-toast);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
    transform: none;
    color: var(--color-on-primary);
}

/* Службові класи */

.container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.flow > * + * {
    margin-block-start: var(--flow-space, var(--space-md));
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stack--xs {
    gap: var(--space-xs);
}

.stack--lg {
    gap: var(--space-lg);
}

.stack--xl {
    gap: var(--space-xl);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--space-lg);
}

.prose {
    max-width: var(--measure);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-sm {
    font-size: var(--fs-sm);
}

.num {
    font-variant-numeric: tabular-nums;
}

/* Короткі значення, які не можна розривати: дата й час, сума, телефон. */
.nowrap {
    white-space: nowrap;
}

.money {
    color: var(--color-money);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 4. Компоненти ----------------------------------------------------------------------------------------- */

/* Іконка зі спрайта: колір — від тексту поруч. */
.icon {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.icon--sm {
    width: 16px;
    height: 16px;
}

.icon--lg {
    width: 24px;
    height: 24px;
}

.icon--xl {
    width: 32px;
    height: 32px;
}

.icon--spin {
    animation: spin 0.9s linear infinite;
}

/* Лого: знак + назва продукту (app.name). */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-heading);
    text-decoration: none;
}

.brand:hover {
    color: var(--color-heading);
}

/* Логотип: унизу файлу прозорий запас (23 px із 224), тож від'ємний відступ центрує видиму частину в шапці. */
.brand__logo {
    display: block;
    flex: none;
    width: auto;
    max-width: none;
    height: 40px;
    margin-bottom: -4px;
}

.brand--sm .brand__logo {
    height: 32px;
    margin-bottom: -3px;
}

/* Кнопки: головна (одна на екран), другорядна, небезпечна, посилання; розміри sm і lg; лише іконка. */
.btn {
    --btn-bg: var(--color-surface);
    --btn-fg: var(--color-text);
    --btn-border: var(--color-border-strong);
    --btn-bg-hover: var(--color-surface-sunken);
    --btn-border-hover: var(--color-border-input);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 8px 20px;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    color: var(--btn-fg);
}

.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    --btn-bg: var(--color-primary);
    --btn-fg: var(--color-on-primary);
    --btn-border: var(--color-primary);
    --btn-bg-hover: var(--color-primary-hover);
    --btn-border-hover: var(--color-primary-hover);
    box-shadow: var(--shadow-xs);
}

.btn--primary:active {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.btn--danger {
    --btn-bg: var(--color-danger);
    --btn-fg: var(--color-on-danger);
    --btn-border: var(--color-danger);
    --btn-bg-hover: var(--color-danger-hover);
    --btn-border-hover: var(--color-danger-hover);
}

.btn--link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-link);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.btn--link:hover {
    background: none;
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
}

.btn--link:active {
    transform: none;
}

.btn--icon {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-bg-hover: var(--color-surface-muted);
    --btn-border-hover: transparent;
    min-width: 44px;
    padding: 0;
}

.btn--sm {
    min-height: 36px;
    padding: 6px 14px;
    font-size: var(--fs-sm);
}

.btn--sm.btn--icon {
    min-width: 36px;
    padding: 0;
}

.btn--lg {
    min-height: 52px;
    padding: 10px 28px;
    font-weight: var(--fw-bold);
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn--sm .icon {
    width: 18px;
    height: 18px;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
    --btn-bg: var(--color-disabled-bg);
    --btn-fg: var(--color-disabled-text);
    --btn-border: var(--color-disabled-border);
    --btn-bg-hover: var(--color-disabled-bg);
    --btn-border-hover: var(--color-disabled-border);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn--link:disabled,
.btn--link[aria-disabled="true"] {
    background: none;
    color: var(--color-disabled-text);
    text-decoration: none;
}

.btn[aria-busy="true"] {
    cursor: progress;
}

/* Поля форм: підпис над полем, підказка й помилка під ним; помилка — текстом та іконкою, не лише кольором. */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
}

.field__optional {
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
}

.field__hint {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.field__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-danger-text);
}

.field__error .icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--color-danger-icon);
}

.input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-base);
    line-height: 1.4;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.input:hover {
    border-color: var(--color-text-muted);
}

.input:focus {
    border-color: var(--color-focus);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px var(--color-focus-halo);
}

.input[aria-invalid="true"] {
    border-color: var(--color-danger);
}

.input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--color-danger-border);
}

.input:disabled {
    border-color: var(--color-disabled-border);
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

textarea.input {
    min-height: 120px;
    resize: vertical;
}

.select {
    position: relative;
}

.select .input {
    padding-right: 44px;
    appearance: none;
    cursor: pointer;
}

.select__icon {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--color-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.check {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.check input[aria-invalid="true"] {
    outline: 2px solid var(--color-danger);
    outline-offset: 2px;
}

.check__label {
    line-height: 1.5;
}

/* Картка: суцільна тонка рамка, легка тінь, без кольорових смуг з одного боку. */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
}

.card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-heading);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card__meta-item .icon {
    width: 18px;
    height: 18px;
}

.card__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.card--interactive {
    transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.card--interactive:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

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

.card--sunken {
    background: var(--color-surface-sunken);
    box-shadow: none;
}

/* Повідомлення: тло й іконка за типом, рамка навколо — без смуг. */
.alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-sm);
    padding: var(--space-md) 20px;
    border: 1px solid var(--alert-border);
    border-radius: var(--radius-lg);
    background: var(--alert-bg);
    color: var(--color-text);
}

.alert__icon {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--alert-icon);
}

.alert__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.alert__title {
    font-weight: var(--fw-bold);
    color: var(--color-heading);
}

.alert--info {
    --alert-bg: var(--color-info-bg);
    --alert-border: var(--color-info-border);
    --alert-icon: var(--color-info-icon);
}

.alert--success {
    --alert-bg: var(--color-success-bg);
    --alert-border: var(--color-success-border);
    --alert-icon: var(--color-success-icon);
}

.alert--warning {
    --alert-bg: var(--color-warning-bg);
    --alert-border: var(--color-warning-border);
    --alert-icon: var(--color-warning-icon);
}

.alert--danger {
    --alert-bg: var(--color-danger-bg);
    --alert-border: var(--color-danger-border);
    --alert-icon: var(--color-danger-icon);
}

/* Бейджі: статуси гри (заплановано, йде зараз, завершено, не відбулася) і загальні тони. */
.badge {
    --badge-bg: var(--color-surface-muted);
    --badge-fg: var(--color-text-muted);
    --badge-dot: var(--color-text-muted);
    --badge-border: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 10px;
    border: 1px solid var(--badge-border);
    border-radius: var(--radius-full);
    background: var(--badge-bg);
    color: var(--badge-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    white-space: nowrap;
}

.badge__dot {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--badge-dot);
}

.badge--brand {
    --badge-bg: var(--color-primary-soft);
    --badge-fg: var(--color-on-primary-soft);
    --badge-dot: var(--color-primary);
}

.badge--success {
    --badge-bg: var(--color-success-bg);
    --badge-fg: var(--color-success-text);
    --badge-dot: var(--color-live);
    --badge-border: var(--color-success-border);
}

.badge--warning {
    --badge-bg: var(--color-warning-bg);
    --badge-fg: var(--color-warning-text);
    --badge-dot: var(--color-warning-icon);
    --badge-border: var(--color-warning-border);
}

.badge--danger {
    --badge-bg: var(--color-danger-bg);
    --badge-fg: var(--color-danger-text);
    --badge-dot: var(--color-danger-icon);
    --badge-border: var(--color-danger-border);
}

.badge--outline {
    --badge-bg: transparent;
    --badge-border: var(--color-border-strong);
}

.badge--live .badge__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--badge-dot);
    animation: ping 1.8s var(--ease-out) infinite;
}

/* Таблиці: числа праворуч і моноширинними цифрами; на вузькому екрані рядок стає блоком «підпис — значення». */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
}

.table thead th {
    background: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.table tbody td {
    border-bottom: 1px solid var(--color-border);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table .num {
    text-align: right;
    white-space: nowrap;
}

.table__primary {
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
}

.table__secondary {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.table__actions {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .table--stack,
    .table--stack tbody,
    .table--stack tr {
        display: block;
        width: 100%;
    }

    .table--stack tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .table--stack tr:last-child {
        border-bottom: 0;
    }

    .table--stack td,
    .table--stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-md);
        padding: 4px 0;
        border: 0;
        text-align: right;
    }

    .table--stack td::before {
        content: attr(data-label);
        flex: none;
        max-width: 50%;
        color: var(--color-text-muted);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        text-align: left;
    }

    .table--stack td.table__cell-title {
        display: block;
        padding-bottom: 8px;
        text-align: left;
    }

    .table--stack td.table__cell-title::before,
    .table--stack td.table__actions::before {
        content: none;
    }

    .table--stack td.table__actions {
        justify-content: flex-start;
        padding-top: 10px;
    }
}

/* Вікно (нативний <dialog>): лише коли інакше ніяк — наприклад, підтвердження незворотної дії. */
.dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
}

.dialog[open] {
    animation: dialog-in var(--duration-slow) var(--ease-out);
}

.dialog::backdrop {
    background: var(--color-overlay);
    animation: fade-in var(--duration-base) var(--ease-out);
}

.dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-lg) 0;
}

.dialog__title {
    font-family: var(--font-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}

.dialog__close {
    margin: -8px -12px 0 0;
}

.dialog__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg) 0;
}

.dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
}

.dialog--static {
    position: static;
    display: block;
    width: 100%;
    max-width: 560px;
    animation: none;
}

@media (max-width: 479px) {
    /* На телефоні кнопки вікна — одна під одною на всю ширину, у порядку розмітки: головна дія — остання, ближче до пальця. */
    .dialog__foot {
        flex-direction: column;
    }

    .dialog__foot .btn {
        width: 100%;
    }
}

/* Порожній стан: що тут буде і одна дія, щоб це з'явилось. */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}

.empty--boxed {
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-2xs);
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
}

.empty__icon .icon {
    width: 26px;
    height: 26px;
}

.empty__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-heading);
}

.empty__text {
    max-width: 46ch;
    color: var(--color-text-muted);
}

.empty__action {
    margin-top: var(--space-xs);
}

/* Кроки «1-2-3»: виконано, поточний, попереду. На вузькому екрані — вертикально. */
.steps {
    display: flex;
    gap: var(--space-sm);
}

.steps__item {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-text-muted);
    font-weight: var(--fw-semibold);
}

.steps__item:last-child {
    flex: 0 1 auto;
}

.steps__item:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-border-strong);
}

.steps__marker {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.steps__marker .icon {
    width: 18px;
    height: 18px;
}

.steps__label {
    min-width: 0;
    line-height: var(--lh-snug);
}

.steps__item--done {
    color: var(--color-text);
}

.steps__item--done .steps__marker {
    border-color: var(--color-primary-soft);
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
}

.steps__item--done:not(:last-child)::after {
    background: var(--color-primary);
}

.steps__item--current {
    color: var(--color-heading);
}

.steps__item--current .steps__marker {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 0 0 4px var(--color-focus-halo);
}

@media (max-width: 599px) {
    .steps {
        flex-direction: column;
        gap: 0;
    }

    .steps__item,
    .steps__item:last-child {
        position: relative;
        flex: none;
        padding-bottom: 20px;
    }

    .steps__item:last-child {
        padding-bottom: 0;
    }

    .steps__item:not(:last-child)::after {
        position: absolute;
        top: 36px;
        bottom: 4px;
        left: 15px;
        width: 2px;
        height: auto;
        min-width: 0;
    }
}

/* Плашка «гра лише для комп'ютера або ноутбука»: тепле тло, іконка ноутбука; показувати рано й повторювати. */
.device-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 20px;
    border: 1px solid var(--color-accent-soft-border);
    border-radius: var(--radius-lg);
    background: var(--color-accent-soft);
    color: var(--color-text);
}

.device-note__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-on-accent-soft);
    box-shadow: inset 0 0 0 1px var(--color-accent-soft-border);
}

.device-note__icon .icon {
    width: 28px;
    height: 28px;
}

.device-note__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.device-note__title {
    font-weight: var(--fw-bold);
    color: var(--color-heading);
}

.device-note--compact {
    gap: var(--space-sm);
    padding: 10px 14px;
    border-radius: var(--radius-md);
}

.device-note--compact .device-note__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.device-note--compact .device-note__icon .icon {
    width: 20px;
    height: 20px;
}

.device-note--compact .device-note__title {
    font-size: var(--fs-sm);
}

@media (max-width: 479px) {
    /* Довгий текст на телефоні: іконка — на рівні заголовка, а не посередині блоку. */
    .device-note {
        align-items: start;
    }
}

/* Навігація кабінету й адмінки: активний пункт — заливка, не смуга. */
.side-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-weight: var(--fw-semibold);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.side-nav__link .icon {
    color: var(--color-text-muted);
    transition: color var(--duration-fast) var(--ease-out);
}

.side-nav__link:hover {
    background: var(--color-surface-muted);
    color: var(--color-heading);
}

.side-nav__link[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
}

.side-nav__link[aria-current="page"] .icon {
    color: var(--color-primary);
}

.side-nav__sep {
    height: 1px;
    margin: var(--space-xs) 0;
    background: var(--color-border);
}

.side-nav__form {
    margin: 0;
}

/* Хлібні крихти: переносяться, а не обрізаються. */
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumbs__item .icon {
    width: 16px;
    height: 16px;
    color: var(--color-border-input);
}

.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

/* Пагінація: у вузькому місці (до 560 px завширшки) замість номерів — «Сторінка N з M». */
.pagination {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pagination__page,
.pagination__gap {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

.pagination__page {
    color: var(--color-text);
    text-decoration: none;
}

a.pagination__page:hover {
    background: var(--color-surface-muted);
    color: var(--color-heading);
}

.pagination__page[aria-current="page"] {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pagination__gap {
    color: var(--color-text-muted);
}

.pagination__step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

a.pagination__step:hover {
    background: var(--color-surface-sunken);
    color: var(--color-heading);
}

.pagination__step[aria-disabled="true"] {
    border-color: var(--color-disabled-border);
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
}

.pagination__summary {
    display: none;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

@container (max-width: 559px) {
    .pagination__pages {
        display: none;
    }

    .pagination__summary {
        display: block;
    }
}

@container (max-width: 419px) {
    .pagination__step {
        justify-content: center;
        min-width: 44px;
        padding: 0;
    }

    .pagination__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Аватар: фото або ініціали. */
.avatar {
    --avatar-size: 40px;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
    font-size: calc(var(--avatar-size) * 0.36);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    line-height: 1;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar--sm {
    --avatar-size: 32px;
}

.avatar--lg {
    --avatar-size: 48px;
}

.avatar--xl {
    --avatar-size: 72px;
}

/* Брендова панель: темно-синій логотипа з блакитним відсвітом його кільця. Одна на сторінку — лендинг, запрошення. */
.panel-brand {
    position: relative;
    overflow: hidden;
    padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(2, 153, 242, 0.2) 0%, rgba(2, 153, 242, 0) 46%),
        linear-gradient(160deg, var(--blue-900) 0%, var(--blue-925) 45%, var(--blue-950) 100%);
}

@media (max-width: 479px) {
    .panel-brand {
        padding: var(--space-xl) 20px;
    }
}

/* 5. Шаблони сторінок ------------------------------------------------------------------------------------ */

.page {
    display: flex;
    flex-direction: column;
}

.page > main {
    flex: 1 0 auto;
}

/* public: шапка з лого, меню, «Увійти» / «Спробувати безкоштовно»; підвал з документами й реквізитами. */
.site-header {
    position: relative;
    z-index: var(--z-sticky);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-height: var(--header-height);
}

.site-nav {
    display: none;
}

.site-nav__list {
    display: flex;
    gap: 4px;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover {
    background: var(--color-surface-muted);
    color: var(--color-heading);
}

.site-nav__link[aria-current="page"] {
    color: var(--color-primary);
}

.site-header__actions {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.site-menu {
    margin-left: auto;
}

.site-menu > summary {
    list-style: none;
}

.site-menu > summary::-webkit-details-marker {
    display: none;
}

.site-menu__close,
.site-menu[open] .site-menu__open {
    display: none;
}

.site-menu[open] .site-menu__close {
    display: inline-block;
}

.site-menu__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--gutter) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.site-menu__panel .site-nav__list {
    flex-direction: column;
}

.site-menu__panel .site-nav__link {
    display: flex;
    min-height: 44px;
}

.site-menu__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (max-width: 419px) {
    .site-menu__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-menu > summary {
        min-width: 44px;
        padding: 0;
    }
}

@media (min-width: 640px) {
    .site-header__actions {
        display: flex;
    }

    .site-menu {
        margin-left: 0;
    }

    .site-menu__actions {
        display: none;
    }
}

@media (min-width: 1200px) {
    .site-nav {
        display: block;
    }

    .site-menu {
        display: none;
    }
}

.site-main {
    padding-block: var(--space-2xl) var(--space-3xl);
}

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-2xl) var(--space-xl);
}

.site-footer__about {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 36ch;
}

.site-footer__title {
    margin-bottom: var(--space-sm);
    color: var(--color-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.site-footer__links {
    display: grid;
    gap: 6px var(--space-lg);
}

.site-footer__company {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
}

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

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-md);
    border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) {
    .site-footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

/* Повідомлення на всю сторінку (помилки, «сайт у розробці»). */
.page-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    max-width: 640px;
    padding-block: var(--space-xl);
}

.page-message__code {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-display);
    letter-spacing: 0.08em;
}

.page-message__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
}

.page-message__icon .icon {
    width: 26px;
    height: 26px;
}

/* Лендинг (/): перший екран на брендовій панелі, далі розділи з якорями для меню шапки. */
.landing {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

@media (min-width: 768px) {
    .landing {
        gap: var(--space-4xl);
    }
}

.landing-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    scroll-margin-top: var(--space-lg);
}

.landing-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: var(--measure);
}

.hero {
    display: grid;
    align-items: center;
    gap: var(--space-2xl);
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

.hero__note {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.hero__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    justify-self: center;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    margin: 0;
}

.hero__caption {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
    text-wrap: balance;
}

@media (max-width: 479px) {
    /* Телефон: головна дія першого екрана — на всю ширину. */
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 1024px) {
    .hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--space-3xl);
    }
}

/* Схема загальної сцени гри: ведучий ліворуч, по 5 гравців зверху й знизу, один праворуч, поле з колами в центрі. */
.table-scheme {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    gap: clamp(4px, 1.2vw, 10px);
}

.table-scheme__seat {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.table-scheme__seat .icon {
    width: 46%;
    height: 46%;
}

.table-scheme__seat--top {
    grid-row: 1;
}

.table-scheme__seat--bottom {
    grid-row: 3;
}

.table-scheme__seat--first {
    grid-column-start: 2;
}

.table-scheme__seat--host {
    grid-row: 2;
    grid-column: 1;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.table-scheme__seat--side {
    grid-row: 2;
    grid-column: 7;
}

.table-scheme__board {
    display: grid;
    place-items: center;
    grid-row: 2;
    grid-column: 2 / 7;
    aspect-ratio: 5 / 2.4;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(closest-side, rgba(2, 153, 242, 0.16), rgba(2, 153, 242, 0) 72%),
        var(--color-surface);
}

.table-scheme__board::before,
.table-scheme__board::after,
.table-scheme__logo {
    grid-area: 1 / 1;
}

/* Велике коло — золоте, мале — пунктиром усередині: як на полі гри. */
.table-scheme__board::before {
    content: "";
    height: 84%;
    aspect-ratio: 1;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
}

.table-scheme__board::after {
    content: "";
    height: 50%;
    aspect-ratio: 1;
    border: 2px dashed var(--color-link);
    border-radius: 50%;
}

.table-scheme__logo {
    width: 14%;
    height: auto;
    aspect-ratio: 1;
}

/* Як це працює: три кроки; на вузькому екрані — номер ліворуч від тексту. */
.how-steps {
    display: grid;
    gap: var(--space-lg);
}

.how-steps__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: var(--space-2xs) var(--space-md);
}

.how-steps__number {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.how-steps__text {
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .how-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-xl);
    }

    .how-steps__item {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }

    .how-steps__number {
        grid-row: auto;
    }
}

/* Що отримує ведучий: іконка, заголовок, текст — без карток, відступами. */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--space-xl) var(--space-lg);
}

.feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.feature__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-2xs);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
}

.feature__icon .icon {
    width: 24px;
    height: 24px;
}

.feature__title {
    font-size: 1.125rem;
}

.feature__text {
    color: var(--color-text-muted);
}

/* Тарифи: три картки, ціна — золотом (гроші). */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--space-lg);
}

.plan {
    gap: var(--space-sm);
}

.plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-xs);
}

.plan__amount {
    color: var(--color-money);
    font-size: 2.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.plan__unit {
    color: var(--color-text-muted);
}

.plan__terms {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.plan__terms li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}

.plan__terms .icon {
    margin-top: 4px;
    color: var(--color-success-icon);
}

/* Тариф нової гри (крок 8): варіанти — картки з радіокнопкою; обраний — фіолетове тло й рамка по всьому периметру. */
.tariff-choice {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tariff-choice__legend {
    margin-bottom: var(--space-xs);
    padding: 0;
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
}

.tariff-choice__option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
}

.tariff-choice__option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft-hover);
}

.tariff-choice__option input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--color-primary);
}

.tariff-choice__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tariff-choice__name {
    font-weight: var(--fw-semibold);
}

.tariff-choice__note {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* Вимоги: короткі пункти з іконками. */
.requirements {
    display: grid;
    gap: var(--space-md);
}

.requirements__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.requirements__item .icon {
    flex: none;
    margin-top: 2px;
    color: var(--color-on-primary-soft);
}

@media (min-width: 768px) {
    .requirements {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Часті питання: <details> працює без JavaScript; між питаннями — нейтральні лінії. */
.faq {
    max-width: 880px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.faq__item + .faq__item {
    border-top: 1px solid var(--color-border);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 56px;
    padding: var(--space-md) 20px;
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
    list-style: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question:hover {
    background: var(--color-surface-sunken);
}

.faq__question:focus-visible {
    outline-offset: -2px;
}

.faq__chevron {
    color: var(--color-text-muted);
    transition: transform var(--duration-base) var(--ease-out);
}

.faq__item[open] .faq__chevron {
    transform: rotate(180deg);
}

.faq__answer {
    max-width: var(--measure);
    padding: 0 20px var(--space-md);
    color: var(--color-text-muted);
}

/* Юридичні сторінки: заголовок і редакція, зміст (від 1024 px — колонкою ліворуч), текст шириною до 68 знаків. */
.legal {
    display: grid;
    gap: var(--space-xl);
}

.legal__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: var(--measure);
}

.legal__meta {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.legal__toc {
    padding: var(--space-md) 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    font-size: var(--fs-sm);
}

.legal__toc-title {
    margin-bottom: var(--space-xs);
    color: var(--color-heading);
    font-weight: var(--fw-bold);
}

.legal__toc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal__toc-list a {
    color: var(--color-text);
    text-decoration: none;
}

.legal__toc-list a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

.legal__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
    max-width: var(--measure);
}

.legal__body section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    scroll-margin-top: var(--space-lg);
}

.legal__body h2 {
    font-family: var(--font-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: -0.005em;
}

.legal__body ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding-left: 1.25em;
}

.legal__facts {
    display: grid;
    gap: var(--space-2xs) var(--space-lg);
    margin: 0;
}

.legal__facts dt {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.legal__facts dd {
    margin: 0 0 var(--space-xs);
}

@media (min-width: 640px) {
    .legal__facts {
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    }

    .legal__facts dd {
        margin: 0;
    }
}

@media (min-width: 1024px) {
    .legal--toc {
        grid-template-columns: 260px minmax(0, 1fr);
        align-items: start;
        column-gap: var(--space-2xl);
    }

    .legal--toc .legal__head {
        grid-column: 1 / -1;
    }

    .legal--toc .legal__toc {
        position: sticky;
        top: var(--space-lg);
        max-height: calc(100vh - 2 * var(--space-lg));
        overflow-y: auto;
    }
}

/* cabinet і admin: бокове меню від 1024 px; вужче — меню над вмістом, пункти переносяться. */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--gutter);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.app-sidebar__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
}

.app-sidebar .side-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.app-sidebar .side-nav__link {
    width: auto;
    min-height: 40px;
    padding: 8px 12px;
}

.app-sidebar .side-nav__sep {
    display: none;
}

.app-sidebar__account {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--fs-sm);
}

.app-sidebar__account-name {
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
    overflow-wrap: anywhere;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
}

.app-main__inner {
    width: 100%;
    max-width: 1120px;
}

@media (min-width: 1024px) {
    /* Тло колонки меню й лінія-розділювач малюються на всю висоту сторінки, хоч саме меню прилипає до вікна. */
    .app-shell {
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        background: linear-gradient(to right,
            var(--color-surface) 0, var(--color-surface) calc(var(--sidebar-width) - 1px),
            var(--color-border) calc(var(--sidebar-width) - 1px), var(--color-border) var(--sidebar-width),
            transparent var(--sidebar-width));
    }

    .app-sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        overflow-y: auto;
        gap: var(--space-xl);
        padding: var(--space-lg) var(--space-md);
        border-bottom: 0;
        background: transparent;
    }

    .app-sidebar__top {
        padding-inline: 4px;
    }

    .app-sidebar .side-nav__list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }

    .app-sidebar .side-nav__link {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
    }

    .app-sidebar .side-nav__sep {
        display: block;
    }

    .app-sidebar__account {
        margin-top: auto;
        padding: var(--space-sm) 12px 0;
    }

    .app-main {
        padding: var(--space-xl) clamp(24px, 3.2vw, 48px) var(--space-3xl);
    }
}

.page-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.page-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.page-head__title {
    font-size: var(--fs-h1);
}

.app-main .page-head__title {
    font-size: clamp(1.625rem, 1.2rem + 1.2vw, var(--fs-app-h1));
}

.page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.section + .section {
    margin-top: var(--space-2xl);
}

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
}

.section__title {
    font-family: var(--font-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: -0.005em;
}

.section__count {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* player: мінімальна шапка з фото й іменем тренера, без меню. */
.player-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.player-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--header-height);
}

.host {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.host__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.host__role {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.host__name {
    color: var(--color-heading);
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.player-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-block: var(--space-xl) var(--space-2xl);
}

.player-footer {
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.player-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
}

.player-footer a {
    color: var(--color-text-muted);
}

@media (max-width: 479px) {
    /* Вузький екран: у шапці гравця лише знак (partials/logo, compact), прозорого запасу в ньому немає. */
    .player-header .brand__logo {
        margin-bottom: 0;
    }
}

/* Вхід і реєстрація (етап 4): вузька колонка по центру, форма — картка; «або» між формою й Google. */
.auth {
    padding-block: var(--space-2xl) var(--space-3xl);
}

.auth__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
}

.auth__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.auth__head .lead {
    font-size: var(--fs-base);
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth__links {
    color: var(--color-text-muted);
}

/* Повідомлення над вмістом кабінету: плашка «Пошту не підтверджено», повідомлення після дії. */
.app-notices {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.verify-banner__form {
    margin-top: var(--space-xs);
}

/* Форма гри: дата й час — поруч від 480 px; рядок про тариф. */
.form__row {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 480px) {
    .form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    font-weight: var(--fw-semibold);
}

.form-note .icon {
    margin-top: 2px;
    color: var(--color-success-icon);
}

.game-form {
    max-width: 720px;
}

/* Сторінка гри: дата, пояс і статус під назвою; запрошення — посилання й текст ліворуч, QR праворуч. */
.game-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.invite-tools {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
}

@media (min-width: 1024px) {
    .invite-tools {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

.invite-tools__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

.copy-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.copy-row__input {
    flex: 1 1 260px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.copy-status {
    min-height: 1.5em;
    color: var(--color-success-text);
    font-weight: var(--fw-semibold);
}

.invite-text {
    min-height: 220px;
    line-height: 1.5;
}

.qr-box {
    align-items: center;
    margin: 0;
    text-align: center;
}

.qr {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    border-radius: var(--radius-sm);
}

.qr-box__caption {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-wrap: balance;
}

/* Профіль: розділи-картки один під одним; фото — аватар і форма поруч. */
.profile {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 760px;
}

.profile__section {
    gap: var(--space-lg);
}

.profile-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-lg);
}

.profile-photo__forms {
    flex: 1 1 260px;
    min-width: 0;
}

.profile-photo__upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.profile-photo__upload .field {
    width: 100%;
}

.input--file {
    padding: 8px 10px;
    cursor: pointer;
}

/* Запрошення гравця: брендова панель з грою й ведучим. */
.invite-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.invite-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    color: var(--color-text);
    font-size: var(--fs-base);
}

.invite-hero__meta .card__meta-item {
    gap: 8px;
}

.invite-hero__meta .icon {
    color: var(--color-accent);
}

.invite-hero__local {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.invite-host {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.invite-host__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.invite-host__role {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.invite-host__name {
    color: var(--color-heading);
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.invite-host__about {
    margin-top: var(--space-xs);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Коротке повторне нагадування про мережі біля кнопки — у парі з компактною плашкою «лише комп'ютер». */
.network-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 14px;
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
}

.network-note__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-warning-icon);
}

.network-note__text {
    color: var(--color-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

/* Плашка «цей браузер застарілий» (partials/browser-outdated): видно лише в браузері без одиниць cqw — Safari до 16,
   Chrome до 105, Firefox до 110. Працює без скрипта. У кабінеті вона стоїть над вмістом, тому потрібен відступ знизу. */
.browser-outdated {
    display: none;
}

@supports not (width: 1cqw) {
    .browser-outdated {
        display: block;
    }

    .app-main__inner > .browser-outdated {
        margin-bottom: var(--space-lg);
    }
}

/* Кнопка-форма в ряду кнопок (наприклад «Почати» на сторінці гри): форма не ламає ряд. */
.inline-form {
    display: inline-flex;
    margin: 0;
}

/* Перевірка пристрою й кімната очікування (етап 5в): перегляд камери, рівень звуку, перелік перевірок. */
.media-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
}

.media-preview__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.media-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.media-preview__empty .icon {
    width: 32px;
    height: 32px;
}

.device-check__media {
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .device-check__media {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }
}

.level-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.level-meter__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.level-meter__label .icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
}

.level-meter__track {
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
}

.level-meter__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--color-live);
    transition: width 80ms linear;
}

.check-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
}

.check-item + .check-item {
    border-top: 1px solid var(--color-border);
}

.check-item__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-on-primary-soft);
}

.check-item__icon .icon {
    width: 20px;
    height: 20px;
}

.check-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.check-item__title {
    color: var(--color-heading);
    font-weight: var(--fw-bold);
}

.check-item__text {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

@media (max-width: 479px) {
    /* На вузькому екрані стан перевірки — під текстом, а не праворуч. */
    .check-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .check-item__state {
        grid-column: 2;
    }
}

.waiting-room {
    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .waiting-room {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
}

.waiting-room__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.waiting-room__title .icon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

/* Телефон (етап 5в): попередження на весь екран, без шапки й підвалу. */
.page--gate .player-main {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    padding-block: var(--space-xl);
}

.phone-gate {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.phone-gate__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--color-accent-soft-border);
    border-radius: var(--radius-lg);
    background: var(--color-accent-soft);
    color: var(--color-on-accent-soft);
}

.phone-gate__icon .icon {
    width: 34px;
    height: 34px;
}

.phone-gate__title {
    color: var(--color-heading);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
}

.phone-gate__lead {
    color: var(--color-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
}

.phone-gate__game,
.phone-gate__more {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.phone-gate__form {
    gap: var(--space-md);
}

/* Кнопки під повідомленням на всю сторінку (наприклад, «Переглянути свої результати» на «Гру завершено»). */
.page-message__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Звіт гри для розбору (етап 6): проведення, зведена таблиця, картки гравців з переліками помилок. */
.report-head__title {
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
}

.report-run__meta {
    margin-top: calc(-1 * var(--space-xs));
}

.report-pair {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.report-pair__label {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}

.report-note {
    max-width: var(--measure);
}

.report-players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
    gap: var(--space-lg);
    align-items: start;
}

.report-figures {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.report-figures caption {
    padding-bottom: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: left;
}

.report-figures th,
.report-figures td {
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-weight: var(--fw-regular);
}

.report-figures thead th {
    color: var(--color-text-muted);
    font-weight: var(--fw-semibold);
}

.report-figures tbody th {
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
}

.report-figures .num {
    padding-left: var(--space-md);
    text-align: right;
    white-space: nowrap;
}

.report-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.report-block__title {
    color: var(--color-heading);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
}

.report-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.report-list__kind {
    display: inline-block;
    margin-right: 4px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.7;
    white-space: nowrap;
}

/* Результати гравця (етап 6): лише власні цифри й підсумок кожного проведення. */
.results-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.results-head__title {
    font-size: var(--fs-h1);
    overflow-wrap: anywhere;
}

.results-head__player {
    font-size: var(--fs-lg);
}

.results-facts {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
}

.results-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: var(--space-sm);
}

.results-facts dt {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.results-facts dd {
    margin: 0;
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
    overflow-wrap: anywhere;
}

.results-open {
    display: flex;
}

/* Відгук про гру під звітом (етап 7): оцінка й коментар, обидва необов'язкові; на папері не друкується. */
.report-feedback__form {
    max-width: 640px;
}

/* Плашка входу власника від імені тренера й банери новин над кабінетом (етап 7). */
.impersonation-banner__form {
    margin-top: var(--space-sm);
}

.news-banner__text {
    white-space: pre-line;
}

/* Довідка (етап 7): /help і «Допомога» в кабінеті — зміст і розділи для тренера й гравців. */
.help-page {
    padding-block: var(--space-xl) var(--space-3xl);
}

.help-page__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: var(--measure);
    margin-bottom: var(--space-xl);
}

.help {
    display: grid;
    gap: var(--space-xl);
}

.help__toc {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.help__toc-title {
    margin-bottom: var(--space-xs);
    color: var(--color-heading);
    font-weight: var(--fw-bold);
}

.help__toc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.help__toc-group {
    margin-top: var(--space-xs);
    font-weight: var(--fw-semibold);
}

.help__toc-item {
    padding-left: var(--space-md);
}

.help__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
}

.help__part {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    scroll-margin-top: var(--space-lg);
}

.help__part h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
}

.help__part > ol,
.help__part > ul:not(.requirements) {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding-left: 1.25rem;
}

@media (min-width: 1200px) {
    .help {
        grid-template-columns: 240px minmax(0, 1fr);
        align-items: start;
    }

    .help__toc {
        position: sticky;
        top: var(--space-lg);
    }
}

/* Адмінка власника (етап 7): числа-плитки, воронка, фільтри, факти «назва — значення», нотатки, форми керування. */
/* Не більше 4 плиток у ряд (і на 1024 px поруч з меню): мінімальна ширина колонки — чверть ряду, але не менше 150 px;
   неповний ряд розтягується на всю ширину (auto-fit). */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(150px, (100% - 3 * var(--space-md)) / 4 - 1px)), 1fr));
    gap: var(--space-md);
    padding: 0;
    list-style: none;
}

/* Скидання списків ul[class] сильніше за один клас і обнуляє відступ .stats — тому відступ задано через ul.stats.
   Плитки на початку сторінки відділені від наступного розділу; у розділі (stats--compact) відступи дає сам розділ. */
ul.stats {
    margin: 0 0 var(--space-xl);
}

ul.stats--compact {
    margin-bottom: 0;
}

.stat,
.funnel__step {
    gap: 4px;
    padding: var(--space-md) var(--space-lg);
}

.stat__label {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.stat__value {
    color: var(--color-heading);
    font-size: 1.75rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.stat__note {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.funnel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.filters .field {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 360px;
}

/* Фільтри всередині розділу (під його заголовком) — відступ до таблиці дає сам розділ. */
.section > .filters {
    margin-bottom: 0;
}

.filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.facts {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
}

.facts > div {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--space-sm);
}

.facts dt {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.facts dd {
    margin: 0;
    color: var(--color-heading);
    overflow-wrap: anywhere;
}

.facts__text {
    white-space: pre-line;
}

@media (max-width: 479px) {
    .facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

.admin-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: var(--space-xl) var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.admin-columns > .section + .section {
    margin-top: 0;
}

.admin-form,
.admin-panel,
.admin-note-form {
    max-width: 760px;
}

.admin-form + .admin-form {
    margin-top: var(--space-md);
}

/* Поля в ряд вирівняно знизу: підпис, що переноситься на два рядки, не зсуває поле нижче за сусідні. */
.admin-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    align-items: end;
    gap: var(--space-md);
}

.admin-form__title {
    overflow-wrap: anywhere;
}

.notes {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notes__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.notes__item:last-child {
    border-bottom: 0;
}

.notes__meta {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.notes__body {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.plain-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-break {
    overflow-wrap: anywhere;
}

.admin-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cluster--tight {
    gap: 6px;
}

/* Широкі таблиці адмінки: у вузькому місці (до 860 px завширшки — наприклад, при вікні 1024 px поруч з меню) рядок стає
   блоком «підпис — значення», як .table--stack на телефоні, — без горизонтальної прокрутки. */
.table-wrap--wide {
    container-type: inline-size;
}

@container (max-width: 860px) {
    .table--wide thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .table--wide,
    .table--wide tbody,
    .table--wide tr {
        display: block;
        width: 100%;
    }

    .table--wide tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .table--wide tr:last-child {
        border-bottom: 0;
    }

    .table--wide td,
    .table--wide tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-md);
        padding: 4px 0;
        border: 0;
        text-align: right;
    }

    .table--wide td::before {
        content: attr(data-label);
        flex: none;
        max-width: 50%;
        color: var(--color-text-muted);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        text-align: left;
    }

    .table--wide td.table__cell-title {
        display: block;
        padding-bottom: 8px;
        text-align: left;
    }

    .table--wide td.table__cell-title::before,
    .table--wide td.table__actions::before {
        content: none;
    }

    .table--wide td.table__actions {
        justify-content: flex-start;
        padding-top: 10px;
    }
}

/* Друк звіту (етап 6, «Надрукувати»): лише вміст — без меню, кнопок і повідомлень; кожне проведення з нової сторінки;
   картка гравця й рядок таблиці не розриваються між сторінками. */
@media print {
    @page {
        margin: 14mm 12mm;
    }

    html {
        font-size: 87.5%;
    }

    body {
        background: #ffffff;
    }

    .skip-link,
    .app-sidebar,
    .app-notices,
    .page-head__actions,
    .breadcrumbs,
    .player-header,
    .player-footer,
    .report-feedback {
        display: none !important;
    }

    .app-shell {
        display: block;
        background: none;
    }

    .app-main,
    .app-main__inner {
        max-width: none;
        padding: 0;
    }

    .page-head {
        margin-bottom: var(--space-lg);
    }

    .card,
    .table-wrap {
        box-shadow: none;
    }

    /* На папері прокрутки немає: зведена таблиця вміщається в ширину аркуша — дрібніший шрифт, вужчі відступи,
       заголовки колонок (і числових теж) переносяться на два рядки. */
    .table-wrap {
        overflow: visible;
    }

    .report-table {
        font-size: var(--fs-sm);
    }

    .report-table th,
    .report-table td {
        padding: 8px 6px;
    }

    .report-table thead th,
    .report-table thead th.num {
        white-space: normal;
        vertical-align: bottom;
    }

    .section + .section {
        margin-top: 0;
    }

    .report-run {
        break-before: page;
    }

    .report-run:first-of-type {
        break-before: auto;
    }

    .report-players {
        display: block;
    }

    .report-player {
        margin-top: var(--space-md);
        break-inside: avoid;
    }

    .report-table tr {
        break-inside: avoid;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .badge--live .badge__dot::after {
        animation: none;
    }
}

/* 6. Рух ---------------------------------------------------------------------------------------------------- */

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

@keyframes ping {
    from {
        transform: scale(1);
        opacity: 0.55;
    }

    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    /* Індикатор завантаження лишається: це сигнал, а не прикраса. */
    .icon--spin {
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
    }
}