:root {
    --font-family-base: Inter, Helvetica, sans-serif;
    --font-size-text: 14px;
    --font-size-h1: 25px;
    --font-size-h2: 21px;
    --font-size-h3: 17px;
    --font-size-h4: 15px;
    --font-size-h5: 14px;
    --color-page-bg: #f3f7fc;
    --color-surface: #ffffff;
    --color-surface-muted: #f9f9f9;
    --color-surface-hover: #fcfcfd;
    --color-text: #071437;
    --color-heading: #071437;
    --color-text-muted: #64708a;
    --color-placeholder: #8490a6;
    --color-link: #336699;
    --color-link-hover: #db253a;
    --color-border: #dbdfe9;
    --color-border-soft: #f1f1f4;
    --color-border-strong: #c4cada;
    --color-focus: rgba(77, 143, 200, 0.25);
    /* Primary ближе к navy бренда (#071437), чтобы синие CTA кабинета
       не проигрывали жёлтому «Купить билеты» (#f7c917) в общем chrome. */
    --color-primary: #2d6fa8;
    --color-primary-border: #245a8a;
    --color-primary-hover: #245a8a;
    --color-secondary: #f1f1f4;
    --color-success: #24a36f;
    --color-danger: #e83248;
    --color-warning: #ff9900;
    --color-chrome-bg: #eef1f8;
    /* Радиусы и тень карточки выровнены под Metronic 8 demo1:
       --bs-border-radius-sm 0.425rem, --bs-border-radius 0.475rem,
       --bs-border-radius-lg 0.625rem (карточка), --bs-border-radius-xl 1rem,
       --bs-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03). */
    --radius-sm: 0.425rem;
    --radius-md: 0.475rem;
    --radius-lg: 0.625rem;
    --radius-xl: 1rem;
    --shadow-card: 0 3px 4px 0 rgba(0, 0, 0, 0.03);
    /* Объём CTA без градиента: мягкая тень + «полка» снизу. */
    --shadow-btn: 0 1px 0 rgba(7, 20, 55, 0.12), 0 2px 8px rgba(7, 20, 55, 0.14);
    --shadow-btn-hover: 0 1px 0 rgba(7, 20, 55, 0.14), 0 4px 12px rgba(7, 20, 55, 0.18);
    --shadow-btn-active: 0 1px 2px rgba(7, 20, 55, 0.16);
    --control-height: 34px;
    --button-text-transform: uppercase;
    --button-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    --button-padding: 2px 12px;
    --button-padding-lg: 6px 14px;
    --breadcrumb-margin: 0 0 20px;
    --breadcrumb-padding: 10px 0;
    --breadcrumb-font-size: 14px;
    --breadcrumb-separator: "-";
    --flash-error-bg: #fdeef1;
    --flash-error-border: #e83248;
    --flash-success-bg: #e5f9f0;
    --flash-success-border: #24a36f;
    --tooltip-bg: var(--color-surface);
    --tooltip-color: var(--color-text);
    --tooltip-padding: 4px 8px;
    --tooltip-arrow-color: var(--tooltip-bg);
    /* ==========================================================
       Палитра Metronic 8 (адаптировано к нашему неймингу: без `bs`).
       Используется в стилях кнопок (.btn-*), форм (валидация, фокус)
       и pill-лейблов (subtle-фоны / text-emphasis).
       ========================================================== */

    /* Базовая палитра (только используемые токены) */
    --color-black: #000000;
    --color-white: #ffffff;

    /* Серые тона */
    --color-gray-100: #f9f9f9;
    --color-gray-200: #f1f1f4;
    --color-gray-300: #dbdfe9;
    --color-gray-400: #c4cada;
    --color-gray-500: #99a1b7;
    --color-gray-600: #78829d;
    --color-gray-700: #4b5675;
    --color-gray-800: #252f4a;
    --color-gray-900: #071437;

    /* Семантические цвета — основа для кнопок (.btn-*) и алёртов */
    --color-info: #6b7fd7;

    /* Text emphasis — насыщенный текст для пастельных лейблов/кнопок */
    --color-primary-text-emphasis: #1f5788;
    --color-success-text-emphasis: #177a52;
    --color-info-text-emphasis: #4a59b0;
    --color-warning-text-emphasis: #252218;
    --color-danger-text-emphasis: #c41e32;

    /* Subtle backgrounds — пастельные фоны для лейблов/чипов/нотификаций */
    --color-primary-bg-subtle: #e3f2fc;
    --color-success-bg-subtle: #e5f9f0;
    --color-info-bg-subtle: #eef2ff;
    --color-warning-bg-subtle: #fff4e5;
    --color-danger-bg-subtle: #fdeef1;

    /* Subtle borders — пара к subtle-фонам */
    --color-primary-border-subtle: #b3d4ef;
    --color-success-border-subtle: #a8e8cc;
    --color-info-border-subtle: #c5cff5;
    --color-warning-border-subtle: #ffd199;
    --color-danger-border-subtle: #f8b8c4;

    /* Body / поверхности */
    --color-body-bg: #ffffff;
    --color-body-color: var(--color-text);

    /* Focus ring (Bootstrap-совместимый) */
    --focus-ring-width: 0.25rem;
    --focus-ring-color: var(--color-focus);
    --focus-ring-shadow: color-mix(in srgb, var(--focus-ring-color) 25%, transparent);

    /* Валидация форм */
    --color-form-valid: #24a36f;
    --color-form-valid-border: #24a36f;
    --color-form-invalid: #e83248;
    --color-form-invalid-border: #e83248;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-text);
    color: var(--color-text);
    background: var(--color-page-bg);
    margin: 0;
    padding: 0;
}

html[data-theme="dark"] {
    --color-page-bg: #0e1018;
    --color-surface: #171926;
    --color-surface-muted: #1e2030;
    --color-surface-hover: #252838;
    --color-text: #f0eef8;
    --color-heading: #ffffff;
    --color-text-muted: #9896b0;
    --color-placeholder: #9896b0;
    --color-border: rgba(94, 176, 255, 0.14);
    --color-border-soft: rgba(94, 176, 255, 0.08);
    --color-border-strong: rgba(94, 176, 255, 0.22);
    --color-link: #5eb0ff;
    --color-link-hover: #7ec2ff;
    --color-focus: rgba(94, 176, 255, 0.25);
    --color-primary: #5eb0ff;
    --color-primary-border: #4a9de8;
    --color-primary-hover: #7ec2ff;
    --color-success: #3ecf9a;
    --color-danger: #ff7085;
    --color-warning: #ffd23f;
    --color-info: #95a4ff;
    --shadow-card: none;
    --flash-error-bg: rgba(232, 50, 72, 0.16);
    --flash-error-border: #ff7085;
    --flash-success-bg: rgba(36, 163, 111, 0.16);
    --flash-success-border: #3ecf9a;
    /* === Тёмная палитра Metronic 8 (без `bs`) === */
    --color-body-bg: #15171c;
    --color-body-color: #f5f5f5;
    --color-secondary: #252f4a;

    /* Семантические text-emphasis в тёмной теме — ярче, чтобы pastel-кнопки читались */
    --color-primary-text-emphasis: #c5e4ff;
    --color-success-text-emphasis: #9af0d0;
    --color-info-text-emphasis: #c8d2ff;
    --color-warning-text-emphasis: #ffe9a0;
    --color-danger-text-emphasis: #ffb3be;

    /* Subtle backgrounds в тёмной теме — заметнее на #171926 */
    --color-primary-bg-subtle: rgba(94, 176, 255, 0.24);
    --color-success-bg-subtle: rgba(62, 207, 154, 0.24);
    --color-info-bg-subtle: rgba(149, 164, 255, 0.24);
    --color-warning-bg-subtle: rgba(255, 210, 63, 0.18);
    --color-danger-bg-subtle: rgba(255, 112, 133, 0.22);

    /* Subtle borders */
    --color-primary-border-subtle: rgba(94, 176, 255, 0.55);
    --color-success-border-subtle: rgba(62, 207, 154, 0.55);
    --color-info-border-subtle: rgba(149, 164, 255, 0.5);
    --color-warning-border-subtle: rgba(255, 210, 63, 0.5);
    --color-danger-border-subtle: rgba(255, 112, 133, 0.55);

    /* Валидация форм — мягче в тёмной теме */
    --color-form-valid: #75b798;
    --color-form-valid-border: #75b798;
    --color-form-invalid: #ea868f;
    --color-form-invalid-border: #ea868f;

    --color-chrome-bg: #12121f;

    /* Серые тона — для settings-channel и прочих блоков на var(--color-gray-*).
       600–800 светлее, иначе secondary-кнопки (текст gray-700) почти невидимы. */
    --color-gray-100: #1e2030;
    --color-gray-200: #252838;
    --color-gray-300: rgba(160, 180, 220, 0.28);
    --color-gray-400: #7a849c;
    --color-gray-500: #a8a6bc;
    --color-gray-600: #c4c2d4;
    --color-gray-700: #e0def0;
    --color-gray-800: #f5f4fa;
}

/* Спецверсия для посетителей с ограниченными возможностями:
   увеличенный шрифт, высокий контраст, подчёркнутые ссылки. */
html[data-a11y="on"] {
    --font-size-text: 17px;
    --font-size-h1: 33px;
    --font-size-h2: 27px;
    --font-size-h3: 21px;
    --font-size-h4: 19px;
    --font-size-h5: 17px;
    --breadcrumb-font-size: 17px;
    --control-height: 44px;
    --button-padding-lg: 10px 20px;
    --shadow-card: none;
    --a11y-toolbar-bg: #000000;
    --a11y-toolbar-fg: #ffffff;
    --a11y-toolbar-border: #ffffff;
    --a11y-toolbar-btn-bg: #000000;
    --a11y-toolbar-btn-fg: #ffffff;
    --a11y-toolbar-btn-hover-bg: #222222;
    --a11y-toolbar-btn-active-bg: #ffffff;
    --a11y-toolbar-btn-active-fg: #000000;
}

html[data-a11y="on"][data-theme="light"] {
    --color-page-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f5f5f5;
    --color-surface-hover: #eeeeee;
    --color-text: #000000;
    --color-heading: #000000;
    --color-text-muted: #222222;
    --color-placeholder: #333333;
    --color-link: #0000cc;
    --color-link-hover: #cc0000;
    --color-border: #000000;
    --color-border-soft: #666666;
    --color-border-strong: #000000;
    --color-focus: #ff9900;
    --color-chrome-bg: #ffffff;
    --color-body-bg: #ffffff;
    --color-body-color: #000000;
    --tooltip-bg: #000000;
    --tooltip-color: #ffffff;
    /* Пастель Metronic в спецверсии даёт низкий контраст — белый фон + жёсткий бордер. */
    --color-primary: #0000cc;
    --color-primary-border: #000000;
    --color-primary-hover: #0000cc;
    --color-secondary: #eeeeee;
    --color-success: #006600;
    --color-danger: #cc0000;
    --color-warning: #996600;
    --color-info: #0000cc;
    --color-primary-text-emphasis: #0000cc;
    --color-success-text-emphasis: #006600;
    --color-info-text-emphasis: #0000cc;
    --color-warning-text-emphasis: #000000;
    --color-danger-text-emphasis: #cc0000;
    --color-primary-bg-subtle: #ffffff;
    --color-success-bg-subtle: #ffffff;
    --color-info-bg-subtle: #ffffff;
    --color-warning-bg-subtle: #ffffff;
    --color-danger-bg-subtle: #ffffff;
    --color-primary-border-subtle: #000000;
    --color-success-border-subtle: #000000;
    --color-info-border-subtle: #000000;
    --color-warning-border-subtle: #000000;
    --color-danger-border-subtle: #cc0000;
    --flash-error-bg: #ffffff;
    --flash-error-border: #cc0000;
    --flash-success-bg: #ffffff;
    --flash-success-border: #006600;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #000000;
    --color-gray-600: #222222;
    --color-gray-700: #000000;
}

html[data-a11y="on"][data-theme="dark"] {
    --color-page-bg: #000000;
    --color-surface: #000000;
    --color-surface-muted: #141414;
    --color-surface-hover: #1f1f1f;
    --color-text: #ffffff;
    --color-heading: #ffffff;
    --color-text-muted: #e8e8e8;
    --color-placeholder: #cccccc;
    --color-link: #ffff66;
    --color-link-hover: #ffcc00;
    --color-border: #ffffff;
    --color-border-soft: #ffffff;
    --color-border-strong: #ffffff;
    --color-focus: #ff9900;
    --color-chrome-bg: #000000;
    --color-body-bg: #000000;
    --color-body-color: #ffffff;
    --color-primary: #8ec8ff;
    --color-primary-border: #ffffff;
    --color-primary-hover: #a8d8ff;
    --color-primary-border-subtle: #ffffff;
    --color-success-border-subtle: #ffffff;
    --color-info-border-subtle: #ffffff;
    --color-warning-border-subtle: #ffffff;
    --color-danger-border-subtle: #ffffff;
    --color-form-valid-border: #ffffff;
    --color-form-invalid-border: #ffffff;
    --tooltip-bg: #ffffff;
    --tooltip-color: #000000;
    --flash-error-bg: #400010;
    --flash-error-border: #ff8a9c;
    --flash-success-bg: #003d24;
    --flash-success-border: #80f0c0;
    --color-gray-100: #141414;
    --color-gray-200: #1f1f1f;
    --color-gray-300: #ffffff;
    --color-gray-400: #cccccc;
    --color-gray-500: #e8e8e8;
    --color-primary-bg-subtle: #001e3d;
    --color-success-bg-subtle: #003d24;
    --color-info-bg-subtle: #1a1040;
    --color-warning-bg-subtle: #221c00;
    --color-danger-bg-subtle: #400010;
    --color-primary-text-emphasis: #8ec8ff;
    --color-success-text-emphasis: #80f0c0;
    --color-info-text-emphasis: #c0caff;
    --color-warning-text-emphasis: #ffe566;
    --color-danger-text-emphasis: #ffb3be;
    --color-success: #80f0c0;
    --color-danger: #ff8a9c;
    --color-warning: #ffe566;
    --color-info: #c0caff;
    --a11y-toolbar-bg: #ffffff;
    --a11y-toolbar-fg: #000000;
    --a11y-toolbar-border: #000000;
    --a11y-toolbar-btn-bg: #ffffff;
    --a11y-toolbar-btn-fg: #000000;
    --a11y-toolbar-btn-hover-bg: #dddddd;
    --a11y-toolbar-btn-active-bg: #000000;
    --a11y-toolbar-btn-active-fg: #ffffff;
}

html[data-a11y="on"][data-a11y-font="small"] {
    --font-size-text: 15px;
    --font-size-h1: 27px;
    --font-size-h2: 23px;
    --font-size-h3: 19px;
    --font-size-h4: 17px;
    --font-size-h5: 15px;
    --breadcrumb-font-size: 15px;
    --control-height: 40px;
}

html[data-a11y="on"][data-a11y-font="large"] {
    --font-size-text: 21px;
    --font-size-h1: 41px;
    --font-size-h2: 33px;
    --font-size-h3: 25px;
    --font-size-h4: 23px;
    --font-size-h5: 21px;
    --breadcrumb-font-size: 21px;
    --control-height: 48px;
}

html[data-a11y="on"] body {
    font-size: var(--font-size-text);
    line-height: 1.5;
}

html[data-a11y="on"] a:not(.btn):not([class*="btn-"]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

html[data-a11y="on"] *:focus-visible {
    outline: 3px solid var(--color-focus) !important;
    outline-offset: 2px !important;
}

html[data-a11y="on"] .btn,
html[data-a11y="on"] button,
html[data-a11y="on"] input,
html[data-a11y="on"] select,
html[data-a11y="on"] textarea {
    min-height: var(--control-height);
}

/* Топбар компактный (38–40px): глобальный min-height:44px для button
   раздувает аватар / тему / язык / a11y → «балаган» (и RU, и HE). */
html[data-a11y="on"] .topbar {
    height: 40px;
}

html[data-a11y="on"] .topbar-inner {
    height: 100%;
    align-items: center;
}

html[data-a11y="on"] .topbar button,
html[data-a11y="on"] .topbar .btn {
    min-height: 0 !important;
}

html[data-a11y="on"] .topbar-right {
    gap: 10px;
    align-items: center;
}

html[data-a11y="on"] .topbar-right .topbar-icon-btn,
html[data-a11y="on"] .page-shell .topbar-right .dash-account-trigger {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
}

html[data-a11y="on"] .page-shell .topbar-right .dash-account-trigger--avatar .dash-account-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

html[data-a11y="on"] .topbar .lang-switch {
    display: inline-flex;
    align-items: stretch;
    height: 28px;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    background: var(--color-surface-muted);
    overflow: hidden;
    box-shadow: none;
}

html[data-a11y="on"] .topbar .lang-btn {
    min-height: 0 !important;
    width: 36px;
    height: auto;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    box-shadow: none !important;
}

html[data-a11y="on"] .topbar-sep {
    align-self: center;
    width: 1px;
    height: 16px;
    margin: 0;
    background: var(--color-border-soft);
    opacity: 0.75;
}

/* Активная спецверсия: контрастный круг, не жёлтый «как тема». */
html[data-a11y="on"] .topbar-a11y-btn,
html[data-a11y="on"] .topbar-a11y-btn:hover,
html[data-a11y="on"] .topbar-a11y-btn.is-active {
    color: #ffffff !important;
    background: #000000 !important;
}

html[data-a11y="on"][data-theme="dark"] .topbar-a11y-btn,
html[data-a11y="on"][data-theme="dark"] .topbar-a11y-btn:hover,
html[data-a11y="on"][data-theme="dark"] .topbar-a11y-btn.is-active {
    color: #000000 !important;
    background: #ffffff !important;
}

/* Контрастные поверхности: алерты, pastel-кнопки, билет, карточки деталей. */
html[data-a11y="on"] .alert-surface {
    border-width: 2px;
    border-color: var(--color-border);
    background: var(--color-surface);
}

html[data-a11y="on"] .btn,
html[data-a11y="on"] .odetails-hero__qr-label {
    background-image: none;
    font-size: var(--font-size-text);
}

html[data-a11y="on"] .orders-table__action {
    background-image: none;
}

html[data-a11y="on"] .btn-light-primary,
html[data-a11y="on"] .btn-light-secondary,
html[data-a11y="on"] .btn-light-success,
html[data-a11y="on"] .btn-light-info,
html[data-a11y="on"] .btn-light-warning,
html[data-a11y="on"] .btn-light-danger {
    border-width: 2px;
    border-color: currentColor;
    background: var(--color-surface);
}

html[data-a11y="on"] .ui-label {
    border: 2px solid currentColor;
    background: var(--color-surface);
}

html[data-a11y="on"] .odetails-hero {
    border: 2px solid var(--color-border);
    border-inline-start: 4px solid var(--color-primary);
    box-shadow: none;
}

html[data-a11y="on"] .odetails-card {
    border: 2px solid var(--color-border);
    box-shadow: none;
}

html[data-a11y="on"] .odetails-change-alert__btn.btn-light-danger,
html[data-a11y="on"] .odetails-change-alert__btn.btn-light-success {
    background: var(--color-surface);
    border-width: 2px;
    border-color: currentColor;
}

html[data-a11y="on"] .topbar-social {
    border-radius: 50%;
    border-color: var(--color-border);
}

html[data-a11y="on"] .header-buy-link {
    border: 2px solid #000000;
    color: #000000;
}

html[data-a11y="on"][data-theme="dark"] .header-buy-link {
    border-color: #ffffff;
    color: #000000;
}

html[data-a11y="on"] *,
html[data-a11y="on"] *::before,
html[data-a11y="on"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Тёмная спецверсия: белые контрастные бордеры (в т.ч. color-mix в карточках). */
html[data-a11y="on"][data-theme="dark"] :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    table,
    th,
    td,
    .form-panel,
    .dash-hero,
    .orders-table,
    .settings-channel,
    .settings-allset,
    .settings-pending,
    .settings-pending-banner,
    .settings-profile-card,
    .alert-surface,
    .odetails-hero,
    .odetails-card,
    .topbar,
    .site-header,
    .dash-account-panel,
    .theme-toggle-menu,
    .lang-switch-menu,
    .dash-filter,
    .dash-filter__chip,
    .god-mode-banner,
    .ocancel-receipt,
    .login-hero > .form-panel
) {
    border-color: #ffffff;
}

/* Светлая спецверсия: чёрные бордеры на ключевых поверхностях. */
html[data-a11y="on"][data-theme="light"] :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    table,
    th,
    td,
    .form-panel,
    .dash-hero,
    .orders-table,
    .settings-channel,
    .settings-profile-card,
    .alert-surface,
    .odetails-hero,
    .odetails-card,
    .topbar,
    .site-header,
    .dash-account-panel,
    .dash-filter,
    .ocancel-receipt,
    .login-hero > .form-panel
) {
    border-color: #000000;
}

html[data-a11y="on"][data-theme="light"] .odetails-hero {
    border-inline-start-color: var(--color-primary);
}

html[data-a11y="on"][data-theme="light"] .alert-surface--danger {
    border-color: var(--color-danger);
}

html[data-a11y="on"][data-theme="light"] .alert-surface--success {
    border-color: var(--color-success);
}

ul,
ol,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

dl,
dd,
dt {
    line-height: 1.3em;
    padding: 0;
    margin: 0;
}

dd,
dt {
    margin-bottom: 4px;
}

table {
    empty-cells: show;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--font-size-text);
}

form,
input {
    margin: 0;
    padding: 0;
}

input,
select,
textarea,
a {
    outline: 0;
}

a:active,
a:focus,
a:focus-visible,
button:active,
button:focus,
button:focus-visible,
.btn:active,
.btn:focus,
.btn:focus-visible {
    outline: 0;
    box-shadow: none;
}

a:active,
a:focus,
a:focus-visible {
    color: var(--color-link);
    text-decoration: none;
}

a img,
:link img,
:visited img {
    border: none;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
    line-height: 1.3em;
    color: var(--color-heading);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

h5 {
    font-size: var(--font-size-h5);
}

p {
    padding: 0;
    margin: 0 0 10px;
    line-height: 1.3em;
    font-size: var(--font-size-text) !important;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}

.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-shell > main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 28px 36px;
    box-sizing: border-box;
    flex: 1 0 auto;
}


.breadcrumbs {
    margin: var(--breadcrumb-margin);
    padding: var(--breadcrumb-padding);
    color: var(--color-text-muted);
    font-size: var(--breadcrumb-font-size);
}

.breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

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

.breadcrumbs li + li::before {
    content: var(--breadcrumb-separator);
    color: var(--color-placeholder);
}

.breadcrumbs a {
    color: var(--color-link);
}

/* Стек системных уведомлений: по центру экрана (горизонталь + вертикаль). */
.flash-stack {
    position: fixed;
    inset: 0;
    z-index: 215;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    margin: 0;
    box-sizing: border-box;
    /* Затемнение фона — алерт читается поверх страницы. */
    background: color-mix(in srgb, #0f1423 42%, transparent);
    /* Клики по оверлею не уходят в страницу; плашки сами кликабельны. */
    pointer-events: auto;
}

.flash-stack > .flash {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: min(100%, 580px);
    margin-bottom: 0;
    padding: 40px 56px 40px 40px;
    box-sizing: border-box;
    text-align: start;
    font-size: 16px;
    font-weight: 600;
    border: 15px solid var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 48px rgba(15, 20, 35, 0.28);
    animation: flashSlideIn 0.2s ease-out;
}

/* Поверх оверлея цветная кромка .flash.success/.error сливается с фоном —
   у центрированных плашек оставляем только толстую белую рамку. */
.flash-stack > .flash.success,
.flash-stack > .flash.error {
    border: 15px solid var(--color-white);
}

[dir="rtl"] .flash-stack > .flash {
    padding: 40px 40px 40px 56px;
}

@keyframes flashSlideIn {
    from { transform: translateY(-10px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.god-mode-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-warning-bg-subtle);
    margin-bottom: 12px;
}

.god-mode-banner form {
    margin: 0;
}

.god-mode-switch {
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-muted);
    padding: 10px;
    margin-bottom: 12px;
}

.god-mode-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.god-mode-form label {
    margin: 0;
}

.god-mode-form input[type="text"] {
    width: 190px;
}

.flash {
    position: relative;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
}

/* Кнопка-крестик внутри плашки. Без обводки и фона: цвет наследует от
   .flash.success/.error через currentColor, чтобы не плодить per-вариант стили. */
.flash__close {
    position: absolute;
    inset-inline-end: 12px;
    top: 12px;
    transform: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.flash__close:hover,
.flash__close:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
    outline: none;
}

.flash__close i {
    font-size: 15px;
    line-height: 1;
}

.flash__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    margin-top: 0;
    line-height: 1;
    font-size: 37px;
}

.flash__icon .fad {
    width: 1em;
    height: 1em;
}

.flash__message {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
}

.flash.error {
    color: var(--color-danger);
    background: var(--flash-error-bg);
    border-inline-start: 3px solid var(--flash-error-border);
}

.flash.success {
    color: var(--color-success);
    background: var(--flash-success-bg);
    border-inline-start: 3px solid var(--flash-success-border);
}

.panel {
    margin-bottom: 20px;
}

.page-title {
    font-size: 17px;
}

.panel-header h2,
.empty-state h3 {
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 0 5px;
}

.intro-panel {
    margin-bottom: 14px;
}

.settings-page {
    /* Раньше страница была ограничена 920px и выглядела уже остальных.
       Теперь занимает всю ширину `main` (1400px), как dashboard/details/editor. */
    width: 100%;
}

.settings-profile-card {
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 24px 30px 30px;
    background: var(--color-surface);
    /* Тот же мягкий бордер, что у `.dash-orders` на главной, чтобы карточки
       выглядели единообразно (на белом фоне почти сливается). */
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* Акцент-карточка профиля: голубой бордер + лёгкий градиент в стиле
   `.settings-channel--primary` и `.dash-hero`. */
.settings-profile-card--accent {
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
            color-mix(in srgb, var(--color-primary) 2%, transparent) 60%,
            rgba(255, 255, 255, 0) 100%),
        var(--color-surface);
}

/* ---------- Hero-блок «Профиль»: аватар + имя + мета ---------- */
.settings-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.settings-profile__avatar {
    flex: 0 0 auto;
    inline-size: 72px;
    block-size: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
}

.settings-profile__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.settings-profile__name {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
    word-break: break-word;
}

.settings-profile__name-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.settings-profile__name-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.settings-profile__name-head .settings-profile__name {
    min-width: 0;
    flex: 1 1 auto;
}

.settings-profile__toggle-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
}

.settings-profile__toggle-btn > i {
    font-size: 15px;
}

.settings-profile__toggle-btn [data-icon-cancel] {
    display: none;
}

.settings-profile__name-row[data-row-mode="edit"] .settings-profile__toggle-btn [data-icon-edit] {
    display: none;
}

.settings-profile__name-row[data-row-mode="edit"] .settings-profile__toggle-btn [data-icon-cancel] {
    display: inline-block;
}

.settings-profile__name-row[data-row-mode="edit"] [data-view] {
    display: none;
}

.settings-profile__toggle-btn:hover,
.settings-profile__toggle-btn:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.settings-profile__name-edit {
    display: none;
}

.settings-profile__name-row[data-row-mode="edit"] .settings-profile__name-edit {
    display: block;
}

.settings-profile__name-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-profile__name-input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-heading);
    font-size: 17px;
    font-weight: 600;
}

.settings-profile__name-save {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
    border-radius: var(--radius-md);
    background: var(--color-success-bg-subtle);
    color: var(--color-success-text-emphasis);
    cursor: pointer;
}

.settings-profile__name-save:hover,
.settings-profile__name-save:focus-visible {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.settings-profile__name-save:disabled {
    opacity: 0.6;
    cursor: default;
}

.settings-profile__name-msg {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.settings-profile__name-msg[data-tone="error"] {
    color: var(--color-danger-text-emphasis, #b42318);
}

.settings-profile__name-msg[data-tone="success"] {
    color: var(--color-success-text-emphasis);
}

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

.settings-profile__meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--color-text-muted);
}

.settings-profile__meta li i {
    inline-size: 18px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 15px;
}

.settings-profile__meta li strong {
    font-weight: 600;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}

.settings-profile-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.settings-profile-card__title {
    margin: 0;
    padding: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
    text-transform: none;
}

.settings-profile-card__edit,
.btn.settings-profile-card__edit {
    text-transform: none;
    font-weight: 600;
    padding: var(--button-padding-lg);
    text-shadow: none;
}

/* Цветные лейблы: светлый фон + насыщенный текст */
.ui-label {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}

/* Pill-лейблы используют subtle-палитру: фон + text-emphasis. */
.ui-label--green {
    background: var(--color-success-bg-subtle);
    color: var(--color-success-text-emphasis);
}

.ui-label--red {
    background: var(--color-danger-bg-subtle);
    color: var(--color-danger-text-emphasis);
}

.ui-label--blue {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
}

.ui-label--yellow {
    background: var(--color-warning-bg-subtle);
    color: var(--color-warning-text-emphasis);
}

.ui-label--purple {
    background: var(--color-info-bg-subtle);
    color: var(--color-info-text-emphasis);
}

.settings-profile-card__alert {
    margin-top: 20px;
    margin-bottom: 0;
}

.settings-profile-card__edit-link {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--color-link);
    cursor: pointer;
    text-decoration: none;
}

.settings-profile-card__edit-link:hover {
    color: var(--color-link-hover);
}

/* ---------- Settings — каналы (новая структура) ---------- */

.settings-page__subtitle {
    margin: 6px 0 18px;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 760px;
}

/* Крупный бейдж «всё готово» в шапке карточки контактов: pill с иконкой,
   выраженный успехом — выделяется на фоне обычных pill'ов `.ui-label`. */
.settings-allset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-success-bg-subtle);
    color: var(--color-success-text-emphasis);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid color-mix(in srgb, var(--color-success) 28%, transparent);
}

.settings-allset__icon { font-size: 16px; }
.settings-allset__text { white-space: nowrap; }

.settings-profile-card__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Заголовок карточки + статус-бейдж — в одной горизонтали.
   flex-wrap оставляем, чтобы на узких экранах бейдж переехал под заголовок. */
.settings-profile-card__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.settings-card__subtitle {
    margin: 0;
    line-height: 1.5;
}

.settings-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 18px;
    padding-top: 10px;
}

/* База блока канала — нейтральный «неактивный» вид: светлый серый
   с голубым оттенком (gray-200 / gray-300). Подходит для состояний
   empty/pending — пользователь сразу видит, что часть не подтверждена. */
.settings-channel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 22px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-gray-200);
}

/* Primary канал — всегда верифицирован, голубоватый акцент. */
.settings-channel--primary {
    background: var(--color-surface);
    border-color: var(--color-primary);
    border-inline-start: 6px solid var(--color-primary);
}

.settings-channel--login-selected {
    position: relative;
    overflow: visible;
}

.settings-channel__login-badge {
    position: absolute;
    top: 0;
    inset-inline-end: 22px;
    z-index: 2;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.settings-channel--verified {
    background: var(--color-surface);
    border-color: var(--color-info);
    border-inline-start: 6px solid var(--color-info);
}
.settings-channel--verified .settings-channel__icon {
    background: transparent;
    color: var(--color-info);
}

.settings-channel--warning {
    background: var(--color-surface);
    border-color: var(--color-warning);
    border-inline-start: 6px solid var(--color-warning);
}
.settings-channel--warning .settings-channel__icon {
    background: transparent;
    color: var(--color-warning);
}

/* Бейдж на жёлтой карточке: белый фон и бордер — иначе сливается с фоном канала. */
.settings-channel--warning .ui-label--yellow {
    background: var(--color-warning-bg-subtle);
    color: var(--color-warning-text-emphasis);
    border: 1px solid var(--color-warning-border-subtle);
}

.settings-channel--empty {
    border-style: dashed;
}

.settings-channel__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-channel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-size: 23px;
    flex-shrink: 0;
}

.settings-channel__head-text {
    min-width: 0;
}

.settings-channel__name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-channel__role {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* `__view` сам по себе block-обёртка — задаём колоночный flex с явным
   gap, чтобы значение / бейджи / кнопки не слипались по вертикали. */
.settings-channel__view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-channel__value {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-heading);
    word-break: break-word;
}

.settings-channel__value--empty {
    color: var(--color-text-muted);
    font-weight: 500;
    font-style: italic;
}

/* Строка «значение + кнопка изменить» в одной горизонтали.
   На узких экранах кнопка переезжает под значение через flex-wrap. */
.settings-channel__value-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.settings-channel__value-row .settings-channel__value {
    flex: 1 1 auto;
    min-width: 0;
}
.settings-channel__value-row .settings-channel__actions {
    margin-top: 0;
}

.settings-channel__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.settings-channel__actions {
    margin-top: auto;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.settings-channel__btn-link {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--color-link);
    cursor: pointer;
    text-decoration: none;
}

.settings-channel__btn-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.settings-channel__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.settings-why {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 18px 0 0;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent);
    color: var(--color-text);
}

.settings-why__icon {
    font-size: 45px;
    color: var(--color-success);
    line-height: 1;
    flex-shrink: 0;
}

.settings-why__body {
    min-width: 0;
}

.settings-why__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
}

.settings-why__list {
    margin: 6px 0 0;
    padding-inline-start: 18px;
    list-style: disc;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.settings-why__list li {
    margin: 0;
    padding: 0 0 2px;
}

.settings-pending {
    margin: 14px 0 0;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
    border: 1px solid var(--color-warning);
    border-inline-start: 6px solid var(--color-warning);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Объединённый баннер pending: подзаголовок + «код отправлен на …»
   под шапкой карточки, над блоками каналов. */
.settings-pending-banner {
    margin-top: 4px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
    border: 1px solid var(--color-warning);
    border-inline-start: 6px solid var(--color-warning);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.settings-pending-banner__icon {
    font-size: 41px;
    color: var(--color-warning);
    line-height: 1;
    flex-shrink: 0;
}

.settings-pending-banner__icon.ki-duotone .path1:before,
.settings-pending-banner__icon.ki-duotone .path2:before {
    color: var(--color-warning);
}

.settings-pending-banner__body {
    min-width: 0;
}

.settings-pending-banner__lead {
    margin: 0 0 6px;
    font-size: 21px !important;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}

.settings-pending-banner__detail {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.45;
    color: var(--color-text);
}

.settings-pending__icon {
    font-size: 41px;
    color: var(--color-warning);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.settings-pending__icon.ki-duotone .path1:before,
.settings-pending__icon.ki-duotone .path2:before {
    color: var(--color-warning);
}

.settings-pending__text {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.45;
    color: var(--color-text);
}

.settings-edit-pane[hidden] {
    display: none;
}

.settings-edit-pane__title {
    margin: 0 0 12px;
    padding: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    color: var(--color-heading);
}

/* ---------- Settings: модальный визард доп. канала ----------
   Двухшаговый визард в `<dialog class="settings-channel-dialog">`:
   прогресс «Шаг N из 2», поле с label, primary-кнопка на всю ширину. */

.settings-channel-dialog {
    box-sizing: border-box;
    width: min(480px, calc(100% - 32px));
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    color: var(--color-body-color);
}

.settings-channel-dialog::backdrop {
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
}

.settings-channel-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.settings-channel-dialog__title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
}

.settings-channel-dialog__body {
    padding: 18px 22px 0;
}

/* Круглая кнопка-крестик: «Закрыть визард», теперь живёт в шапке диалога. */
.settings-channel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 15px;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.settings-channel__close:hover,
.settings-channel__close:focus-visible {
    background: var(--color-surface-muted);
    color: var(--color-heading);
    border-color: var(--color-text-muted);
    outline: none;
}

/* Pane visibility внутри визарда — селектор не привязан к конкретному
   контейнеру, чтобы работать и в диалоге, и в любом будущем месте. */
[data-current-step="value"] .settings-edit-pane[data-pane="code"],
[data-current-step="code"]  .settings-edit-pane[data-pane="value"] {
    display: none;
}

/* ---------- Settings: прогресс визарда (вариант A) ----------
   Текст «Шаг N из 2» + тонкая полоска; состояние — `data-current-step` на dialog. */
.settings-dialog-progress {
    margin: 0 0 18px;
}

.settings-dialog-progress__text {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.settings-dialog-progress__text--code {
    display: none;
}

[data-current-step="code"] .settings-dialog-progress__text--value {
    display: none;
}

[data-current-step="code"] .settings-dialog-progress__text--code {
    display: block;
}

.settings-dialog-progress__track {
    height: 4px;
    border-radius: 999px;
    background: var(--color-border-soft);
    overflow: hidden;
}

.settings-dialog-progress__fill {
    display: block;
    height: 100%;
    width: 50%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width 180ms ease;
}

[data-current-step="code"] .settings-dialog-progress__fill {
    width: 100%;
}

.settings-dialog-hint {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.settings-edit-form__label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
}

.settings-edit-form__input--code {
    text-align: center;
    letter-spacing: 0.28em;
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.settings-dialog-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 20px -22px 0;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.settings-dialog-footer__primary {
    width: 100%;
    justify-content: center;
}

.settings-dialog-footer__cancel,
.settings-dialog-footer__link {
    margin: 0;
    padding: 4px 8px;
    border: none;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.settings-dialog-footer__cancel:hover,
.settings-dialog-footer__cancel:focus-visible,
.settings-dialog-footer__link:hover,
.settings-dialog-footer__link:focus-visible {
    color: var(--color-heading);
    outline: none;
}

.settings-channel-dialog .settings-edit-form {
    margin: 0;
}

.settings-channel-dialog .form-panel {
    margin-top: 0;
}

/* ---------- Inline-форма визарда (settings-edit-form) ----------
   Label над полем, инпут на всю ширину, footer с primary-кнопкой. */
.settings-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-edit-form__field {
    display: block;
    width: 100%;
}

.settings-edit-form__input {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    display: block;
}

.settings-channel-dialog .settings-edit-form__input {
    width: 100%;
    max-width: none;
}

.settings-edit-form__caption {
    margin: 0;
}

.settings-suggest {
    display: grid;
    gap: 10px;
}

.settings-suggest__list {
    display: grid;
    gap: 8px;
    margin: 0;
}

/* Специфичность выше `.action-chip`: иначе muted-фон и inline-block
   перебивают белый фон и вертикальное выравнивание radio+текст. */
.settings-suggest__list .settings-suggest__chip.action-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-body-color);
    line-height: 1.35;
    cursor: pointer;
}

.settings-suggest__list .settings-suggest__chip.action-chip:hover {
    background: var(--color-surface-hover);
}

.settings-suggest__list .settings-suggest__chip.action-chip:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
}

.settings-suggest__list .settings-suggest__chip.action-chip input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    align-self: center;
    width: 16px;
    height: 16px;
}

.settings-suggest__list .settings-suggest__chip.action-chip > span {
    min-width: 0;
    line-height: 1.35;
}

/* Скрываем визуально, но оставляем доступным скринридерам. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Модификатор `.form-actions--center` — центрируем ряд кнопок (включая
   подтверждение/закрытие в инлайн-визарде). */
.form-actions--center {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.settings-channel .btn > i,
.settings-channel__close > i {
    line-height: 1;
}

/* Мобильная вёрстка страницы настроек (≤640px). */
@media (max-width: 640px) {
    .settings-page .dash-hero {
        margin-bottom: 16px;
        padding: 16px 14px;
    }

    .settings-page .dash-hero__title {
        font-size: 23px;
    }

    .settings-page .dash-hero__breadcrumbs {
        font-size: 13px;
    }

    .settings-profile-card {
        padding: 16px 14px 18px;
        margin-bottom: 14px;
    }

    .settings-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .settings-profile__avatar {
        inline-size: 64px;
        block-size: 64px;
        font-size: 27px;
    }

    .settings-profile__name {
        font-size: 19px;
    }

    .settings-profile__meta {
        align-items: center;
        width: 100%;
    }

    .settings-profile__meta li {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 10px;
    }

    .settings-profile-card__title {
        font-size: 17px;
    }

    .settings-profile-card__title-row {
        gap: 8px;
    }

    .settings-allset {
        padding: 6px 10px;
        font-size: 13px;
    }

    .settings-allset__text {
        white-space: normal;
    }

    .settings-channels {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 14px;
    }

    .settings-channel {
        padding: 16px 14px;
        gap: 12px;
    }

    .settings-channel__value-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .settings-channel__value-row .settings-channel__actions {
        width: 100%;
    }

    .settings-channel__value-row .settings-channel__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .settings-channel__badges {
        gap: 8px;
    }

    .settings-why {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 14px;
        padding: 14px;
        gap: 10px;
    }

    .settings-pending,
    .settings-pending-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px;
    }

    .settings-channel-dialog {
        width: calc(100% - 20px);
        max-height: calc(100dvh - 24px);
    }

    .settings-channel-dialog__header {
        padding: 14px 16px;
    }

    .settings-channel-dialog__body {
        padding: 14px 16px 0;
    }

    .settings-channel-dialog .settings-dialog-footer {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
    }
}

.hero-copy {
    padding: 0;
}

.lead,
.caption,
.meta-label {
    color: var(--color-text-muted);
}

.field-grid > div,
.field-grid-single > div {
    margin-bottom: 10px;
}

.form-panel {
    margin-top: 15px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--font-size-text);
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
    border-color: var(--focus-ring-color);
    outline: 0;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-shadow);
}

select {
    width: 100px;
    padding: 6px 10px;
    min-height: var(--control-height);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
select,
textarea {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    min-height: var(--control-height);
    padding: 6px 10px;
    font: inherit;
    color: var(--color-body-color);
    background: var(--color-body-bg);
    box-sizing: border-box;
}

/* Состояния валидации форм (совместимо с Bootstrap `.is-valid` / `.is-invalid`). */
.is-valid,
.was-validated :valid:not(:placeholder-shown) {
    border-color: var(--color-form-valid-border) !important;
}
.is-valid:focus,
.was-validated :valid:not(:placeholder-shown):focus {
    border-color: var(--color-form-valid-border) !important;
    box-shadow: 0 0 0 var(--focus-ring-width)
        color-mix(in srgb, var(--color-form-valid) 25%, transparent) !important;
}

.is-invalid,
.was-validated :invalid:not(:placeholder-shown) {
    border-color: var(--color-form-invalid-border) !important;
}
.is-invalid:focus,
.was-validated :invalid:not(:placeholder-shown):focus {
    border-color: var(--color-form-invalid-border) !important;
    box-shadow: 0 0 0 var(--focus-ring-width)
        color-mix(in srgb, var(--color-form-invalid) 25%, transparent) !important;
}

.valid-feedback {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-form-valid);
}

.invalid-feedback {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-form-invalid);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
    width: 250px;
    max-width: 100%;
}

.form-actions {
    margin-top: 10px;
}

.btn {
    color: var(--color-white);
    border-radius: var(--radius-sm) !important;
    text-transform: var(--button-text-transform);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    display: inline-block;
    padding: var(--button-padding);
    line-height: 32px;
    position: relative;
    border: 0;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 400;
    transition: var(--button-transition);
}

/* Верхний регистр задан --button-text-transform. Кегль один на все такие кнопки. */
.btn,
.odetails-hero__qr-label {
    font-size: 14px;
}

/* Кнопки действий: общий кегль и отступы. Цвет задают .btn-*. */
.odetails-action,
.odetails-change-alert__btn,
.odetails-session-cancelled__btn {
    padding: 9px 16px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}

.btn i.fad {
    font-size: 14px;
}

a.btn {
    text-decoration: none;
    text-align: center;
}

/* Solid-кнопки: цветной фон + белый текст. */
.btn-primary {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
    text-shadow: 0 1px 1px var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

.btn-secondary:hover {
    color: var(--color-gray-700);
    background-color: var(--color-gray-300);
}

.btn-danger {
    background-color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.btn-danger:hover {
    background-color: var(--color-danger-text-emphasis);
    border-color: var(--color-danger-text-emphasis);
    color: var(--color-white);
}

.btn-info {
    background-color: var(--color-info);
    border: 1px solid var(--color-info);
}

.btn-info:hover {
    background-color: var(--color-info-text-emphasis);
    border-color: var(--color-info-text-emphasis);
    color: var(--color-white);
}

.btn-success {
    background-color: var(--color-success);
    border: 1px solid var(--color-success);
}

.btn-success:hover {
    background-color: var(--color-success-text-emphasis);
    border-color: var(--color-success-text-emphasis);
    color: var(--color-white);
}

/* Кнопки действий: сплошная заливка и белый текст.
   Категории: primary / success / info / warning / danger.
   Warning-action fill — #e67e22 (читаемее чистого --color-warning на CTA).
   Чипы фильтров и статусов остаются на subtle-токенах. */
.btn-light-primary,
.btn-light-secondary,
.btn-light-success,
.btn-light-info,
.btn-light-warning,
.btn-light-danger {
    text-shadow: none;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-light-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.btn-light-primary:hover,
.btn-light-primary:focus-visible {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
    border-color: var(--color-primary-hover);
}

.btn-light-secondary {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-700);
    color: var(--color-white);
}
.btn-light-secondary:hover,
.btn-light-secondary:focus-visible {
    background-color: var(--color-gray-800);
    color: var(--color-white);
    border-color: var(--color-gray-800);
}

.btn-light-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}
.btn-light-success:hover,
.btn-light-success:focus-visible {
    background-color: var(--color-success-text-emphasis);
    color: var(--color-white);
    border-color: var(--color-success-text-emphasis);
}

.btn-light-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-white);
}
.btn-light-info:hover,
.btn-light-info:focus-visible {
    background-color: var(--color-info-text-emphasis);
    color: var(--color-white);
    border-color: var(--color-info-text-emphasis);
}

.btn-light-warning {
    background-color: #e67e22;
    border-color: #d97706;
    color: var(--color-white);
}
.btn-light-warning:hover,
.btn-light-warning:focus-visible {
    background-color: #d97706;
    color: var(--color-white);
    border-color: #c26a1a;
}

.btn-light-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-white);
}
.btn-light-danger:hover,
.btn-light-danger:focus-visible {
    background-color: var(--color-danger-text-emphasis);
    color: var(--color-white);
    border-color: var(--color-danger-text-emphasis);
}

/* Тёмная тема: pastel-кнопки с видимым бордером и светлым текстом. */
html[data-theme="dark"] .btn-light-primary,
html[data-theme="dark"] .btn-light-secondary,
html[data-theme="dark"] .btn-light-success,
html[data-theme="dark"] .btn-light-info,
html[data-theme="dark"] .btn-light-warning,
html[data-theme="dark"] .btn-light-danger {
    border-color: currentColor;
}

html[data-theme="dark"] .btn-light-primary {
    background-color: var(--color-primary-bg-subtle);
    border-color: var(--color-primary-border-subtle);
    color: var(--color-primary-text-emphasis);
}

html[data-theme="dark"] .btn-light-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
    color: var(--color-gray-800);
    text-shadow: none;
}

html[data-theme="dark"] .btn-light-secondary:hover,
html[data-theme="dark"] .btn-light-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

html[data-theme="dark"] .btn-light-success {
    background-color: var(--color-success-bg-subtle);
    border-color: var(--color-success-border-subtle);
    color: var(--color-success-text-emphasis);
}

html[data-theme="dark"] .btn-light-info {
    background-color: var(--color-info-bg-subtle);
    border-color: var(--color-info-border-subtle);
    color: var(--color-info-text-emphasis);
}

html[data-theme="dark"] .btn-light-warning {
    background-color: var(--color-warning-bg-subtle);
    border-color: var(--color-warning-border-subtle);
    color: var(--color-warning-text-emphasis);
}

html[data-theme="dark"] .btn-light-danger {
    background-color: var(--color-danger-bg-subtle);
    border-color: var(--color-danger-border-subtle);
    color: var(--color-danger-text-emphasis);
}

html[data-theme="dark"] .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #f0eef8;
    text-shadow: none;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

/* CTA — solid + тень (без градиента). Пастель — у pills/фильтров/статусов. */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-light-primary,
.btn-light-secondary,
.btn-light-success,
.btn-light-info,
.btn-light-warning,
.btn-light-danger {
    box-shadow: var(--shadow-btn);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-success:hover,
.btn-success:focus-visible,
.btn-danger:hover,
.btn-danger:focus-visible,
.btn-info:hover,
.btn-info:focus-visible,
.btn-light-primary:hover,
.btn-light-primary:focus-visible,
.btn-light-secondary:hover,
.btn-light-secondary:focus-visible,
.btn-light-success:hover,
.btn-light-success:focus-visible,
.btn-light-info:hover,
.btn-light-info:focus-visible,
.btn-light-warning:hover,
.btn-light-warning:focus-visible,
.btn-light-danger:hover,
.btn-light-danger:focus-visible {
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-danger:active,
.btn-info:active,
.btn-light-primary:active,
.btn-light-secondary:active,
.btn-light-success:active,
.btn-light-info:active,
.btn-light-warning:active,
.btn-light-danger:active {
    box-shadow: var(--shadow-btn-active);
    transform: translateY(0);
}

html[data-theme="dark"] .odetails-hero__qr {
    background: var(--color-success-bg-subtle);
    border-color: var(--color-success-border-subtle);
    color: var(--color-success-text-emphasis);
}

html[data-theme="dark"] .odetails-hero__qr:hover,
html[data-theme="dark"] .odetails-hero__qr:focus-visible {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

html[data-theme="dark"] .odetails-hero__qr:hover i.fad,
html[data-theme="dark"] .odetails-hero__qr:focus-visible i.fad,
html[data-theme="dark"] .odetails-hero__qr:hover .odetails-hero__qr-label,
html[data-theme="dark"] .odetails-hero__qr:focus-visible .odetails-hero__qr-label {
    color: #ffffff;
}

.orders-table,
.tbl-detail {
    width: 100%;
    border-collapse: collapse;
}

.orders-table th,
.tbl-detail th {
    background: var(--color-border-soft);
    padding: 5px 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: calc(var(--font-size-text) - 3px);
    font-weight: normal;
    border-right: 2px solid var(--color-surface);
    text-align: start;
}

/* У иврита нет капители: uppercase уменьшает глифы. Держим обычный кегль. */
html[dir="rtl"] .orders-table th,
html[dir="rtl"] .orders-table--clean thead th,
html[dir="rtl"] .tbl-detail th,
html[dir="rtl"] .i18n-editor__table th {
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
}

.orders-table td,
.tbl-detail td {
    padding: 5px 10px;
    border-right: 2px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: top;
}

.orders-table td:last-child,
.tbl-detail td:last-child {
    border-right: 0;
}

.orders-table-compact .orders-col-id {
    width: 40px;
}

.orders-link-cell {
    max-width: 170px;
    text-align: start;
}

.orders-title-cell {
    word-break: break-word;
}

/* ---------- Dashboard: Hero ---------- */

.dash-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 24px 28px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(47, 77, 184, 0.06) 0%, rgba(62, 99, 221, 0.04) 60%, rgba(255, 255, 255, 0) 100%),
        var(--color-surface);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-card);
}

.dash-hero__heading {
    min-width: 0;
    flex: 1 1 320px;
}

.dash-hero__title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
    text-transform: none;
}

.dash-hero__sub {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Крошки внутри hero-плашки: chevron-разделитель `›` вместо тире,
   акцентная жирная ссылка-возврат, тонкая серая текущая страница.
   От заголовка отделены отступом 16px. */
.dash-hero__breadcrumbs {
    --breadcrumb-separator: "\203A";
    /* +10px к существующему margin-bottom: 6px у .dash-hero__title = 16px. */
    margin: 10px 0 0;
    padding: 0;
    font-size: 15px;
}

.dash-hero__breadcrumbs ol {
    gap: 10px;
}

.dash-hero__breadcrumbs li + li::before {
    color: var(--color-text-muted);
    font-weight: 600;
}

.dash-hero__breadcrumbs a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
}

.dash-hero__breadcrumbs a:hover,
.dash-hero__breadcrumbs a:focus-visible {
    text-decoration: underline;
}

.dash-hero__breadcrumbs [aria-current="page"] {
    color: var(--color-text-muted);
    font-weight: 400;
}

.dash-hero__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dash-hero__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    text-shadow: none;
    font-weight: 600;
}

.dash-hero__action i {
    font-size: 15px;
}

.dash-zikuy-alert.alert-surface--success {
    margin: 0 0 20px;
    --zikuy: #298e7c;
    background: color-mix(in srgb, var(--zikuy) 6%, var(--color-surface));
    border-color: var(--zikuy);
    border-inline-start: 6px solid var(--zikuy);
}

.dash-zikuy-alert.alert-surface--success .alert-surface__title,
.dash-zikuy-alert.alert-surface--success .alert-surface__text {
    color: var(--color-text);
}

.dash-zikuy-alert.alert-surface--success .alert-surface__icon,
.dash-zikuy-alert.alert-surface--success .alert-surface__icon .far.fa-wallet,
.dash-zikuy-alert.alert-surface--success .alert-surface__icon .fal.fa-wallet,
.dash-zikuy-alert.alert-surface--success .alert-surface__icon .fad.fa-wallet,
.dash-zikuy-alert.alert-surface--success .alert-surface__icon .fas.fa-wallet {
    color: var(--zikuy);
    --fa-primary-color: var(--zikuy);
    --fa-secondary-color: var(--zikuy);
}

html[data-a11y="on"][data-theme="light"] .dash-zikuy-alert.alert-surface--success {
    border-color: var(--zikuy);
}

/* ---------- Dashboard: KPI ---------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}

.kpi-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 16px;
    /* Компенсируем более толстую (3px) акцентную сторону border-inline-start,
       чтобы контент карточки не сдвигался относительно соседних карточек.
       Используем logical property, чтобы в RTL компенсация уходила к нужной стороне. */
    padding-inline-start: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-inline-start: 3px solid var(--kpi-accent-stripe, var(--kpi-accent));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    --kpi-accent: var(--color-primary-text-emphasis);
    --kpi-accent-stripe: var(--color-primary);
    --kpi-accent-bg: var(--color-primary-bg-subtle);
}

.kpi-card--blue {
    --kpi-accent: var(--color-primary-text-emphasis);
    --kpi-accent-stripe: var(--color-primary);
    --kpi-accent-bg: var(--color-primary-bg-subtle);
}

.kpi-card--purple {
    --kpi-accent: var(--color-info-text-emphasis);
    --kpi-accent-stripe: var(--color-info);
    --kpi-accent-bg: var(--color-info-bg-subtle);
}

.kpi-card--green {
    --kpi-accent: var(--color-success-text-emphasis);
    --kpi-accent-stripe: var(--color-success);
    --kpi-accent-bg: var(--color-success-bg-subtle);
}

.kpi-card--neutral {
    --kpi-accent: var(--color-gray-600);
    --kpi-accent-stripe: var(--color-gray-500);
    --kpi-accent-bg: var(--color-gray-200);
}

.kpi-card--quiet {
    opacity: 0.72;
}

.kpi-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--kpi-accent-bg);
    color: var(--kpi-accent);
    font-size: 23px;
    flex-shrink: 0;
}

.kpi-card__body {
    min-width: 0;
    flex: 1;
}

.kpi-card__title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kpi-accent);
}

.kpi-card__value {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-heading);
}

.kpi-card__unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-inline-start: 2px;
}

.kpi-card__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.kpi-card__cta {
    align-self: center;
    margin-inline-start: auto;
    margin-top: 6px;
    padding: 6px 12px;
    border: 1px solid var(--kpi-accent);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--kpi-accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.kpi-card__cta:hover {
    background: var(--kpi-accent);
    color: #fff;
}

/* ---------- Dashboard: единая таблица с фильтрами ---------- */

.dash-orders {
    /* Унифицировано с .kpi-card: те же фон, бордер, радиус и тень карточки,
       чтобы блок заказов визуально входил в общий «карточный» стиль дэшборда. */
    padding: 22px 24px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.dash-orders__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* Sticky-шапка со списком фильтров: при длинной таблице остаётся
       видимой и кликабельной во время прокрутки.
       top=0 — топбар не sticky, фильтры прилипают к верху viewport.
       Отрицательные `margin` + `padding` растягивают фон до краёв карточки
       `.dash-orders`, чтобы строки таблицы не просвечивали под фильтрами. */
    position: sticky;
    top: 0;
    z-index: 4;
    margin: -22px -24px 14px;
    /* padding-top с запасом: бейджи фильтров выступают вверх на ~13px. */
    padding: 16px 24px 12px;
    overflow: visible;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
    /* Фон шапки доходит до краёв карточки. Без своего радиуса он
       закрывает скругление `.dash-orders` и верхние углы выглядят срезанными.
       overflow остаётся visible: бейджи фильтров выступают за кнопку. */
    border-start-start-radius: calc(var(--radius-lg) - 1px);
    border-start-end-radius: calc(var(--radius-lg) - 1px);
}

/* Подвал «Показать ещё N»: центрированная кнопка под таблицей заказов.
   JS управляет видимостью блока и счётчиком (см. initDashboardFilters):
   когда в активном фильтре нет скрытых строк — ставит `hidden`. */
.dash-orders__more {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
/* Перебиваем `display: flex` выше: HTML-атрибут `hidden` сам по себе ставит
   `display: none`, но flex имеет более высокую специфичность. */
.dash-orders__more[hidden] {
    display: none;
}
.dash-orders__more-btn {
    padding: 10px 20px;
    gap: 8px;
}
.dash-orders__more-count {
    margin-inline-start: 2px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* Начальный CSS-collapse: серверный рендер показывает первые 25 строк,
   остальные скрыты до выполнения JS — чтобы не было flash из 500 строк
   до момента инициализации. JS снимает атрибут при первом взаимодействии
   и далее управляет видимостью атрибутом `hidden` на `<tr>`. */
.dash-orders[data-collapsed="1"] tbody > tr[data-filter-group]:nth-of-type(n+26) {
    display: none;
}

.dash-orders__heading {
    min-width: 0;
    flex: 0 0 auto;
}

.dash-orders__title {
    margin: 0;
    padding: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    color: var(--color-heading);
}

/* Вторая строка: статус-табы + поиск + даты.
   Без overflow-x: иначе overflow-y тоже станет auto и обрежет бейджи. */
.dash-orders__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    min-width: 0;
    width: 100%;
    overflow: visible;
    padding-top: 12px; /* место под бейджи count */
}

.dash-orders__tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 0 0 auto;
    min-width: 0;
}

.dash-orders__search {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    margin: 0;
}

.dash-orders__search-icon {
    position: absolute;
    inset-inline-start: 10px;
    color: var(--color-text-muted);
    font-size: 13px;
    pointer-events: none;
}

.dash-orders__search input {
    width: 100%;
    height: 32px;
    padding: 0 30px 0 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
}

.dash-orders__search input::-webkit-search-decoration,
.dash-orders__search input::-webkit-search-cancel-button,
.dash-orders__search input::-webkit-search-results-button,
.dash-orders__search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

html[dir="rtl"] .dash-orders__search input {
    padding: 0 30px 0 30px;
}

.dash-orders__search input:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 1px;
}

.dash-orders__search-clear {
    position: absolute;
    inset-inline-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
    font-size: 12px;
}

.dash-orders__search-clear:hover,
.dash-orders__search-clear:focus-visible {
    color: var(--color-heading);
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}

html[data-theme="dark"] .dash-orders__search-clear:hover,
html[data-theme="dark"] .dash-orders__search-clear:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.dash-orders__search-clear[hidden] {
    display: none !important;
}

.dash-orders__dates {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.dash-orders__date {
    margin: 0;
    position: relative;
}

.dash-orders__date-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 118px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    text-align: start;
}

.dash-orders__date-trigger:hover {
    border-color: var(--color-primary-border-subtle, var(--color-border));
}

.dash-orders__date-trigger:focus-visible,
.dash-orders__date-trigger[aria-expanded="true"] {
    outline: 2px solid var(--color-link, var(--color-primary));
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.dash-orders__date-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-orders__date-text.is-placeholder {
    color: var(--color-text-muted);
}

.dash-orders__date-trigger > i {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 14px;
}

.dash-orders__dates-sep {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1;
}

/* Кастомный календарь фильтров дат на дашборде. */
.dash-datepicker {
    position: absolute;
    z-index: 80;
    width: 292px;
    padding: 12px;
    border: 1px solid var(--color-border-soft, var(--color-border));
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
}

.dash-datepicker.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dash-datepicker__header {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dash-datepicker__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-heading, var(--color-text));
}

.dash-datepicker__pick {
    max-width: 100%;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.dash-datepicker__pick:hover,
.dash-datepicker__pick:focus-visible,
.dash-datepicker__pick.is-active {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
}

.dash-datepicker__nav-btn .far {
    display: block;
    font-size: 13px;
    line-height: 1;
}

.dash-datepicker__nav {
    display: inline-flex;
    gap: 4px;
}

.dash-datepicker__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.dash-datepicker__nav-btn:hover,
.dash-datepicker__nav-btn:focus-visible {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
    border-color: var(--color-primary-border-subtle);
}

.dash-datepicker__weekdays,
.dash-datepicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dash-datepicker__weekday {
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-muted);
}

.dash-datepicker__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.dash-datepicker__day:hover:not(:disabled):not(.is-selected) {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
}

.dash-datepicker__day.is-outside {
    color: var(--color-text-muted);
    opacity: 0.55;
}

.dash-datepicker__day.is-today:not(.is-selected) {
    border-color: var(--color-primary-border-subtle);
    color: var(--color-primary-text-emphasis);
    font-weight: 700;
}

.dash-datepicker__day.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.dash-datepicker__day:disabled {
    opacity: 0.35;
    cursor: default;
}

.dash-datepicker.is-months .dash-datepicker__weekdays,
.dash-datepicker.is-months .dash-datepicker__grid,
.dash-datepicker.is-years .dash-datepicker__weekdays,
.dash-datepicker.is-years .dash-datepicker__grid {
    display: none;
}

.dash-datepicker__choices[hidden] {
    display: none;
}

.dash-datepicker__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-height: 220px;
    align-content: start;
}

.dash-datepicker__choice {
    min-height: 40px;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.dash-datepicker__choice:hover,
.dash-datepicker__choice:focus-visible {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
}

.dash-datepicker__choice.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.dash-datepicker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-soft, var(--color-border));
}

.dash-datepicker__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--color-primary-border-subtle);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dash-datepicker__action:hover,
.dash-datepicker__action:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.dash-datepicker__action--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.dash-datepicker__action--ghost:hover,
.dash-datepicker__action--ghost:focus-visible {
    background: var(--color-surface-muted, var(--color-surface));
    border-color: var(--color-border);
    color: var(--color-text);
}

.dash-filters {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 0; /* запас справа под бейджи */
    margin: 0;
    margin-inline-start: auto;
    flex: 0 0 auto;
    overflow: visible;
}

/* Кнопка-лейбл: цвета задаются модификаторами через CSS-переменные. */
.dash-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--dash-filter-bg, var(--color-surface-muted));
    color: var(--dash-filter-color, var(--color-text-muted));
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dash-filter[hidden] {
    display: none;
}

.dash-filter:hover {
    border-color: var(--dash-filter-color, var(--color-border));
}

.dash-filter:focus-visible {
    outline: 2px solid var(--dash-filter-color, var(--color-link));
    outline-offset: 2px;
}

.dash-filter.is-active {
    border-color: var(--dash-filter-color, var(--color-link));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.dash-filter__label {
    text-transform: none;
}

/* Крестик-сброс — виден только у активной кнопки (кроме «Все»).
   Слот под крестик зарезервирован всегда (visibility вместо display:none),
   чтобы ширина кнопки не менялась при выборе и верстка не прыгала. */
.dash-filter__clear {
    display: inline-flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-inline-start: 2px;
    border-radius: 999px;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}

.dash-filter.is-active .dash-filter__clear {
    visibility: visible;
}

.dash-filter__clear:hover,
.dash-filter__clear:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
    outline: none;
}

html[data-theme="dark"] .dash-filter__clear:hover,
html[data-theme="dark"] .dash-filter__clear:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

/* Бейдж выступает за верхнюю кромку кнопки. */
.dash-filter__count {
    position: absolute;
    top: -13px;
    inset-inline-end: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--dash-filter-color, var(--color-link));
    color: #fff;
    font-size: 11px;
    font-weight: 300;
    box-shadow: 0 0 0 2px var(--color-surface);
    pointer-events: none;
}

/* Цветовые модификаторы — палитра ui-label, чтобы фильтр совпадал
   со статусом в колонке. */
/* Цветовые модификаторы фильтров привязаны к общесистемной семантической
   палитре (Metronic-style subtle/emphasis), а не к собственным переменным
   лейблов. Так фильтры и `.ui-label--*` синхронизированы по цвету. */
.dash-filter--blue {
    --dash-filter-bg: var(--color-primary-bg-subtle);
    --dash-filter-color: var(--color-primary-text-emphasis);
}

.dash-filter--red {
    --dash-filter-bg: var(--color-danger-bg-subtle);
    --dash-filter-color: var(--color-danger-text-emphasis);
}

.dash-filter--green {
    --dash-filter-bg: var(--color-success-bg-subtle);
    --dash-filter-color: var(--color-success-text-emphasis);
}

.dash-filter--purple {
    --dash-filter-bg: var(--color-info-bg-subtle);
    --dash-filter-color: var(--color-info-text-emphasis);
}

.dash-filter--yellow {
    --dash-filter-bg: var(--color-warning-bg-subtle);
    --dash-filter-color: var(--color-warning-text-emphasis);
}

.dash-filter--neutral {
    --dash-filter-bg: var(--color-surface-muted);
    --dash-filter-color: var(--color-text-muted);
}

.dash-filter--neutral.is-active {
    --dash-filter-color: var(--color-heading);
}

.dash-orders__empty {
    margin: 18px 0 6px;
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-md);
}

.dash-orders__empty-text {
    margin: 0;
}

.dash-orders__empty-clear {
    margin-top: 12px;
}

.dash-orders__empty-clear[hidden] {
    display: none !important;
}

/* ---------- i18n editor ----------
   Карточка-контейнер в стиле .dash-orders: белый фон, мягкий бордер,
   тень. Внутри — тулбар с поиском и широкая таблица переводов. */
.i18n-editor {
    padding: 18px 20px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.i18n-editor__toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 14px;
}

.i18n-editor__search {
    position: relative;
    flex: 1 1 320px;
    max-width: 480px;
    display: inline-flex;
    align-items: center;
}

.i18n-editor__search i {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--color-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.i18n-editor__search input {
    width: 100%;
    padding-inline-start: 32px;
    border: 2px solid #548dd5;
}

/* Таблица переводов: ровные ячейки, никакого «полосатого» фона. */
.i18n-editor__table {
    table-layout: auto;
    background: var(--color-surface);
}

.i18n-editor__table th {
    background: var(--color-surface-muted);
  font-weight: 600;
  text-align: center;
  padding:8px;
}
.i18n-editor__table input{width:100%}

/* Колонка ключей сжимается по содержимому, длинные ключи переносятся
   по точкам/дефисам, чтобы строка не растягивала всю таблицу. */
.i18n-editor__col-key {
    width: 1%;
    white-space: nowrap;
}

.i18n-editor__key {
    min-width: 200px;
    max-width: 250px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Инпуты переводов — на всю ширину ячейки. */
.i18n-editor__input {
    width: 100%;
    box-sizing: border-box;
}

.i18n-editor__empty {
    margin: 12px 0 0;
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border-soft);
    border-radius: var(--radius-md);
}

/* Двухколоночный layout: слева — форма с таблицей, справа — алфавитный
   навигатор. На узких экранах алфавит уезжает под форму. */
.i18n-editor__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.i18n-editor__form {
    min-width: 0;
}

/* Sticky-сайдбар с буквами A–Z (или любыми первыми символами ключей).
   Верх привязан к высоте топбара, плюс небольшой отступ. */
.i18n-editor__alphabet {
    position: sticky;
    top: 56px;
    align-self: start;
    padding: 8px 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    min-width: 32px;
    max-height: calc(100vh - 80px);
    overflow: auto;
}

.i18n-editor__alphabet ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.i18n-editor__alphabet li {
    display: block;
}

.i18n-editor__alphabet a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.i18n-editor__alphabet a:hover,
.i18n-editor__alphabet a:focus,
.i18n-editor__alphabet a.is-active,
.i18n-editor__alphabet a[aria-current="true"] {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
}

@media (max-width: 768px) {
    .i18n-editor__layout {
        grid-template-columns: 1fr;
    }

    .i18n-editor__alphabet {
        position: static;
        order: -1;
        max-height: none;
        overflow: visible;
    }

    .i18n-editor__alphabet ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Плавающая кнопка «наверх»: появляется JS-ом по скроллу.
   Закреплена у нижнего правого угла, в RTL — у левого. */
.scroll-to-top {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border-soft);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}

.scroll-to-top:hover,
.scroll-to-top:focus {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
    outline: none;
}

.scroll-to-top[hidden] {
    display: none;
}

/* Модификатор «чистого» оформления — применяется только на дашборде. */
.orders-table--clean {
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.orders-table--clean th,
.orders-table--clean td {
    border-right: none;
    background: transparent;
}

.orders-table--clean thead th {
    padding: 10px 14px;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 1px solid var(--color-border-soft);
}

.orders-table--clean tbody td {
    padding: 14px 14px;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: top;
    font-size: 15px;
}

.orders-table--clean tbody tr[hidden] {
    display: none;
}

.orders-table--clickable tbody tr {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.orders-table--clickable tbody tr:hover,
.orders-table--clickable tbody tr:focus-within {
    background: var(--color-surface-muted);
}

.orders-table--clickable tbody tr:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: -2px;
}

.orders-table--clean .orders-table__id {
    color: var(--color-heading);
    font-size: 14px;
}

.orders-table--clean .orders-table__id-value {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-heading);
}


/* Стек «дата + время» в ячейке сеанса: дата сверху, время — на второй строке. */
.orders-table--clean .orders-table__cell-stack {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3;
}

/* На иврите «ДД.ММ.ГГГГ ЧЧ:ММ» читается слева направо: сначала дата, потом время. */
[dir="rtl"] .datetime-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.orders-table--clean .orders-table__cell-time {
    display: block;
    font-size: 13px;
}

/* Колонка «Дата сеанса» — крупнее даты заказа: для будущих заказов это главная информация. */
.orders-table--clean .orders-table__seance {
    color: var(--color-heading);
    font-size: 16px;
    white-space: nowrap;
}

.orders-table--clean .orders-table__seance-date,
.orders-table--clean .orders-table__seance-time {
    display: block;
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-heading);
}

.orders-table--clean .orders-table__seance-time {
    margin-top: 2px;
}

/* Дата сеанса красная при изменении (--changed) и при отмене (--cancelled).
   Класс --changed вешается и на изменение, и на отмену (см. dashboard/index.html). */
.orders-table--clean .orders-table__seance--changed,
.orders-table--clean .orders-table__seance--cancelled {
    color: var(--color-danger);
}

.orders-table--clean .orders-table__seance--changed .orders-table__cell-icon,
.orders-table--clean .orders-table__seance--changed .orders-table__seance-date,
.orders-table--clean .orders-table__seance--changed .orders-table__seance-time,
.orders-table--clean .orders-table__seance--cancelled .orders-table__cell-icon,
.orders-table--clean .orders-table__seance--cancelled .orders-table__seance-date,
.orders-table--clean .orders-table__seance--cancelled .orders-table__seance-time {
    color: var(--color-danger);
}

.orders-table--clean .orders-table__seance--changed .orders-table__cell-icon.fad,
.orders-table--clean .orders-table__seance--cancelled .orders-table__cell-icon.fad {
    --fa-primary-color: var(--color-danger);
    --fa-secondary-color: var(--color-danger);
}

.orders-table__seance--changed,
.orders-table__seance--cancelled {
    cursor: help;
}

/* Плашка над названием: --warning (изменение) / --danger (отмена сеанса). */
.orders-table__session-change {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0 0 6px;
    text-align: start;
}

.orders-table__session-change--plate {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 8px;
    padding: 6px 12px;
    border-radius: 8px;
}

.orders-table__session-change--warning {
    background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
}

.orders-table__session-change--danger {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.orders-table__session-change--plate .orders-table__session-warning,
.orders-table__session-change--plate .orders-table__session-warning-link {
    font-size: 14px;
    font-weight: 700;
}

/* Текст плашки изменения — красный, как раньше; фон остаётся warning. */
.orders-table__session-change--warning .orders-table__session-attention,
.orders-table__session-change--warning .orders-table__session-warning,
.orders-table__session-change--warning .orders-table__session-warning-link {
    color: var(--color-danger);
}

.orders-table__session-change--warning .orders-table__session-attention i {
    --fa-primary-color: var(--color-danger);
    --fa-secondary-color: var(--color-danger);
}

.orders-table__session-change--danger .orders-table__session-attention,
.orders-table__session-change--danger .orders-table__session-warning,
.orders-table__session-change--danger .orders-table__session-warning-link {
    color: var(--color-danger);
}

.orders-table__session-change--danger .orders-table__session-attention i {
    --fa-primary-color: var(--color-danger);
    --fa-secondary-color: var(--color-danger);
}

.orders-table__session-attention {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.orders-table__session-attention i {
    font-size: 13px;
}

.orders-table__session-warning {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.orders-table__session-warning-link {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    white-space: nowrap;
}

.orders-table__session-change--warning .orders-table__session-warning-link:hover,
.orders-table__session-change--warning .orders-table__session-warning-link:focus-visible {
    color: var(--color-danger);
}

.orders-table__session-change--danger .orders-table__session-warning-link:hover,
.orders-table__session-change--danger .orders-table__session-warning-link:focus-visible {
    color: var(--color-danger);
}

/* Активный заказ: тёмный заголовок + сильная ссылка на анонс. */
.orders-table--clean .orders-table__show {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
    text-align: start;
}

.orders-table--clean .orders-table__show a {
    color: var(--color-primary);
    text-decoration: none;
}

.orders-table--clean .orders-table__show a:hover,
.orders-table--clean .orders-table__show a:focus-visible {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Архив (прошедший сеанс): один светлый muted на весь текстовый ряд. */
.orders-table--clean .orders-table__show--past,
.orders-table--clean .orders-table__show--past a,
.orders-table--clean .orders-table__show--past a:hover,
.orders-table--clean .orders-table__show--past a:focus-visible {
    color: var(--color-gray-500);
    text-decoration: none;
}

.orders-table--clean tr.orders-table__row--past .orders-table__id-value,
.orders-table--clean tr.orders-table__row--past .orders-table__seance,
.orders-table--clean tr.orders-table__row--past .orders-table__seance .orders-table__cell-icon,
.orders-table--clean tr.orders-table__row--past .orders-table__seance .orders-table__seance-date,
.orders-table--clean tr.orders-table__row--past .orders-table__seance .orders-table__seance-time,
.orders-table--clean tr.orders-table__row--past .orders-table__venue,
.orders-table--clean tr.orders-table__row--past .orders-table__order-date {
    color: var(--color-gray-500);
}

.orders-table--clean tr.orders-table__row--past .orders-table__seance .orders-table__cell-icon.fad,
.orders-table--clean tr.orders-table__row--past .orders-table__venue i {
    --fa-primary-color: var(--color-gray-500);
    --fa-secondary-color: var(--color-gray-500);
    color: var(--color-gray-500);
}

.orders-table--clean .orders-table__venue {
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.orders-table--clean .orders-table__venue i {
    font-size: 14px;
    color: var(--color-placeholder);
}

/* Дата заказа — тот же кегль, что у сеанса, но muted: вторичная к дате сеанса. */
.orders-table--clean .orders-table__order-date {
    font-size: 16px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.orders-table--clean .orders-table__order-date .orders-table__cell-icon {
    margin-top: 4px;
}
.orders-col-link{width:150px}

/* ---------- Empty-state с иллюстрацией ---------- */

.dash-empty {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 32px 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    flex-wrap: wrap;
}

.dash-empty__illustration {
    flex-shrink: 0;
    width: 200px;
    height: auto;
    max-width: 100%;
}

.dash-empty__body {
    flex: 1 1 280px;
    min-width: 0;
}

.dash-empty__title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 19px;
    font-weight: 600;
    text-transform: none;
    color: var(--color-heading);
}

.dash-empty__text {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.dash-empty__body .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    text-shadow: none;
    font-weight: 600;
}

/* Скрываем визуально, оставляем для скринридеров (заголовок столбца действий). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

.orders-table--clean .orders-table__cell-muted {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.orders-table--clean .orders-table__cell-icon {
    margin-inline-end: 1px;
    font-size: 14px;
    color: var(--color-placeholder);
    margin-top: 4px;
    vertical-align: top;
}


.orders-table--clean .orders-table__status .ui-label {
    font-size: 13px;
    padding: 5px 10px;
}

.orders-table--clean .orders-table__action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 9px 16px;
    border: 1px solid var(--color-primary-border);
    border-bottom-color: var(--color-primary-hover);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    background-image: none;
    box-shadow: var(--shadow-btn);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: start;
    text-decoration: none;
    color: var(--color-white);
    white-space: nowrap;
    word-break: break-word;
    transition: var(--button-transition);
    margin-bottom: 5px;
}

.orders-table--clean .orders-table__action:hover,
.orders-table--clean .orders-table__action:focus-visible {
    text-decoration: none;
    background-color: var(--color-primary-hover);
    background-image: none;
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-1px);
    color: var(--color-white);
}

.orders-table--clean .orders-table__action:active {
    box-shadow: var(--shadow-btn-active);
    transform: translateY(0);
}

.orders-table--clean .orders-table__action i {
    flex: 0 0 1.1em;
    width: 1.1em;
    text-align: center;
    font-size: 13px;
}

.orders-table--clean .orders-table__action--decide {
    white-space: normal;
    height: auto;
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    line-height: 1.25;
    background-color: #e67e22;
    background-image: none;
    border-color: #d97706;
    border-bottom-color: #c26a1a;
    color: var(--color-white);
}

.orders-table--clean .orders-table__action--decide:hover,
.orders-table--clean .orders-table__action--decide:focus-visible {
    background-color: #d97706;
    background-image: none;
    border-color: #c26a1a;
    color: var(--color-white);
}

.orders-table--clean .orders-table__action--decide i {
    color: var(--color-white);
}

.orders-table--clean .orders-table__decide-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.25;
    text-align: start;
}

.orders-table--clean .orders-table__decide-line {
    display: block;
    white-space: nowrap;
}

/* Дополнительная meta-строка в колонке ID используется только на мобильном:
   на десктопе остаётся прежняя табличная раскладка (отдельные колонки). */
.orders-table__id-row {
    display: block;
}
.orders-table__status-inline,
.orders-table__id-sub {
    display: none;
}

/* RTL: стрелка «Подробнее» смотрит в обратную сторону. */
[dir="rtl"] .orders-table--clean .orders-table__action--details i.fa-arrow-right:before {
    content: "\f060";
}

.orders-table--clean .orders-table__action--pay,
.orders-table--clean .orders-table__action--tickets {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
    border-bottom-color: var(--color-success-text-emphasis);
}

.orders-table--clean .orders-table__action--pay:hover,
.orders-table--clean .orders-table__action--pay:focus-visible,
.orders-table--clean .orders-table__action--tickets:hover,
.orders-table--clean .orders-table__action--tickets:focus-visible {
    color: var(--color-white);
    background-color: var(--color-success-text-emphasis);
    border-color: var(--color-success-text-emphasis);
}

.orders-table--clean .orders-table__action--tickets.is-pending {
    color: var(--color-text-muted);
    background-color: transparent;
    background-image: none;
    border-color: currentColor;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
    opacity: 0.85;
}

.orders-table--clean .orders-table__action--tickets.is-pending i {
    color: inherit;
}

.orders-table__tickets-pending {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 220px;
}

.orders-table__tickets-hint {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--color-text-muted);
}

.orders-table__tickets-when {
    display: block;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.orders-table--clean .orders-table__action--cancel {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    border-bottom-color: var(--color-danger-text-emphasis);
}

.orders-table--clean .orders-table__action--cancel:hover,
.orders-table--clean .orders-table__action--cancel:focus-visible {
    color: var(--color-white);
    background-color: var(--color-danger-text-emphasis);
    border-color: var(--color-danger-text-emphasis);
}

.orders-table--clean .orders-table__action--refund {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    border-bottom-color: var(--color-danger-text-emphasis);
}

.orders-table--clean .orders-table__action--refund:hover,
.orders-table--clean .orders-table__action--refund:focus-visible {
    color: var(--color-white);
    background-color: var(--color-danger-text-emphasis);
    border-color: var(--color-danger-text-emphasis);
}

.orders-table--clean .session-warning {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #d97706;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.empty-state {
    padding: 10px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-soft);
    margin-bottom: 10px;
}

/*
 * Алерты: .alert-surface--with-ki + ki-verify в .alert-surface__icon;
 * без --with-ki — щит с галочкой в ::before (те же цвета).
 */
.alert-surface {
    box-sizing: border-box;
    position: relative;
    margin: 0 0 16px;
    padding: 16px 18px;
    padding-inline-start: 64px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.alert-surface--with-ki {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
}

.alert-surface--with-ki::before {
    content: none;
    display: none;
}

.alert-surface__icon {
    flex-shrink: 0;
    font-size: 41px;
    line-height: 1;
}

.alert-surface__icon i {
    display: block;
}

.alert-surface:not(.alert-surface--with-ki)::before {
    content: "";
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.alert-surface__content {
    min-width: 0;
}

.alert-surface--with-ki .alert-surface__content {
    flex: 1;
}

.alert-surface__title {
    margin: 0 0 10px;
    padding: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}

/* Глобальный p { font-size: 14px !important } иначе сжимает заголовок плашки. */
p.alert-surface__title {
    font-size: 21px !important;
}

p.alert-surface__text {
    font-size: 16px !important;
}

.alert-surface__text {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-text);
}

.alert-surface__title b {
    font-weight: 800;
}

/* primary / info — синий */
.alert-primary,
.alert-surface--primary,
.alert-surface--info {
    color: var(--color-primary-text-emphasis);
    border-color: var(--color-primary);
    background-color: var(--color-primary-bg-subtle);
}

.alert-primary .alert-surface__title,
.alert-surface--primary .alert-surface__title,
.alert-surface--info .alert-surface__title {
    color: var(--color-primary-text-emphasis);
}

.alert-primary .alert-surface__text,
.alert-surface--primary .alert-surface__text,
.alert-surface--info .alert-surface__text {
    color: var(--color-primary-text-emphasis);
}

.alert-primary .alert-surface__icon,
.alert-surface--primary .alert-surface__icon,
.alert-surface--info .alert-surface__icon {
    font-size: 53px;
    color: var(--color-primary);
}

.alert-primary .alert-surface__icon .path1:before,
.alert-primary .alert-surface__icon .path2:before,
.alert-primary .alert-surface__icon .path3:before,
.alert-surface--primary .alert-surface__icon .path1:before,
.alert-surface--primary .alert-surface__icon .path2:before,
.alert-surface--primary .alert-surface__icon .path3:before,
.alert-surface--info .alert-surface__icon .path1:before,
.alert-surface--info .alert-surface__icon .path2:before,
.alert-surface--info .alert-surface__icon .path3:before,
.alert-primary .alert-surface__icon .ki-information-3 .path1:before,
.alert-primary .alert-surface__icon .ki-information-3 .path2:before,
.alert-primary .alert-surface__icon .ki-information-3 .path3:before,
.alert-surface--primary .alert-surface__icon .ki-information-3 .path1:before,
.alert-surface--primary .alert-surface__icon .ki-information-3 .path2:before,
.alert-surface--primary .alert-surface__icon .ki-information-3 .path3:before,
.alert-surface--info .alert-surface__icon .ki-information-3 .path1:before,
.alert-surface--info .alert-surface__icon .ki-information-3 .path2:before,
.alert-surface--info .alert-surface__icon .ki-information-3 .path3:before,
.alert-surface--info .alert-surface__icon .ki-verify .path1:before,
.alert-surface--info .alert-surface__icon .ki-verify .path2:before {
    color: var(--color-primary);
}

.alert-primary .alert-surface__icon .path1:before,
.alert-primary .alert-surface__icon .ki-information-3 .path1:before,
.alert-surface--primary .alert-surface__icon .path1:before,
.alert-surface--primary .alert-surface__icon .ki-information-3 .path1:before,
.alert-surface--info .alert-surface__icon .path1:before,
.alert-surface--info .alert-surface__icon .ki-information-3 .path1:before,
.alert-surface--info .alert-surface__icon .ki-verify .path1:before {
    opacity: 0.35;
}

.alert-primary .alert-surface__icon .path2:before,
.alert-primary .alert-surface__icon .path3:before,
.alert-primary .alert-surface__icon .ki-information-3 .path2:before,
.alert-primary .alert-surface__icon .ki-information-3 .path3:before,
.alert-surface--primary .alert-surface__icon .path2:before,
.alert-surface--primary .alert-surface__icon .path3:before,
.alert-surface--primary .alert-surface__icon .ki-information-3 .path2:before,
.alert-surface--primary .alert-surface__icon .ki-information-3 .path3:before,
.alert-surface--info .alert-surface__icon .path2:before,
.alert-surface--info .alert-surface__icon .path3:before,
.alert-surface--info .alert-surface__icon .ki-information-3 .path2:before,
.alert-surface--info .alert-surface__icon .ki-information-3 .path3:before,
.alert-surface--info .alert-surface__icon .ki-verify .path2:before {
    opacity: 1;
}

.alert-primary:not(.alert-surface--with-ki)::before,
.alert-surface--primary:not(.alert-surface--with-ki)::before,
.alert-surface--info:not(.alert-surface--with-ki)::before {
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='15' fill='%234d8fc8' opacity='0.35'/%3E%3Ccircle cx='24' cy='24' r='15' fill='none' stroke='%234d8fc8' stroke-width='2'/%3E%3Cpath fill='none' stroke='%234d8fc8' stroke-width='3' stroke-linecap='round' d='M24 15v3M24 22v13'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .alert-primary,
html[data-theme="dark"] .alert-surface--primary,
html[data-theme="dark"] .alert-surface--info {
    border-color: var(--color-primary-border-subtle);
}

/* success — зелёный */
.alert-surface--success {
    background: var(--color-success-bg-subtle);
    border-color: var(--color-success-border-subtle);
}

.alert-surface--success .alert-surface__title {
    color: var(--color-success-text-emphasis);
}

.alert-surface--success .alert-surface__text {
    color: var(--color-success-text-emphasis);
}

.alert-surface--success .alert-surface__icon {
    font-size: 53px;
    color: var(--color-success);
}

.alert-surface--success .alert-surface__icon .ki-verify .path1:before {
    color: var(--color-success);
    opacity: 0.35;
}

.alert-surface--success .alert-surface__icon .ki-verify .path2:before {
    color: var(--color-success);
    opacity: 1;
}

.alert-surface--success .alert-surface__icon .far.fa-wallet,
.alert-surface--success .alert-surface__icon .fal.fa-wallet,
.alert-surface--success .alert-surface__icon .fad.fa-wallet,
.alert-surface--success .alert-surface__icon .fas.fa-wallet {
    color: var(--color-success);
}

.alert-surface--success:not(.alert-surface--with-ki)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%2324a36f' opacity='0.35' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4z'/%3E%3Cpath fill='%2324a36f' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4zm-2 28.2-6.2-6.2 2.8-2.8 3.4 3.4 8.4-8.4 2.8 2.8-11.2 11.2z'/%3E%3C/svg%3E");
}

/* warning — жёлтый */
.alert-warning,
.alert-surface--warning {
    color: var(--color-warning-text-emphasis);
    border-color: var(--color-warning-border-subtle);
    background-color: var(--color-warning-bg-subtle);
}

.alert-warning .alert-surface__title,
.alert-surface--warning .alert-surface__title {
    color: var(--color-warning-text-emphasis);
}

.alert-warning .alert-surface__text,
.alert-surface--warning .alert-surface__text {
    color: var(--color-warning-text-emphasis);
}

.alert-warning .alert-surface__icon,
.alert-surface--warning .alert-surface__icon {
    font-size: 53px;
    color: var(--color-warning);
}

.alert-warning .alert-surface__icon .path1:before,
.alert-warning .alert-surface__icon .path2:before,
.alert-surface--warning .alert-surface__icon .path1:before,
.alert-surface--warning .alert-surface__icon .path2:before,
.alert-warning .alert-surface__icon .ki-verify .path1:before,
.alert-warning .alert-surface__icon .ki-verify .path2:before,
.alert-surface--warning .alert-surface__icon .ki-verify .path1:before,
.alert-surface--warning .alert-surface__icon .ki-verify .path2:before {
    color: var(--color-warning);
}

.alert-warning .alert-surface__icon .path1:before,
.alert-warning .alert-surface__icon .ki-verify .path1:before,
.alert-surface--warning .alert-surface__icon .path1:before,
.alert-surface--warning .alert-surface__icon .ki-verify .path1:before {
    opacity: 0.35;
}

.alert-warning .alert-surface__icon .path2:before,
.alert-warning .alert-surface__icon .ki-verify .path2:before,
.alert-surface--warning .alert-surface__icon .path2:before,
.alert-surface--warning .alert-surface__icon .ki-verify .path2:before {
    opacity: 1;
}

.alert-warning:not(.alert-surface--with-ki)::before,
.alert-surface--warning:not(.alert-surface--with-ki)::before {
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23ff9900' opacity='0.35' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4z'/%3E%3Cpath fill='%23ff9900' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4zm-2 28.2-6.2-6.2 2.8-2.8 3.4 3.4 8.4-8.4 2.8 2.8-11.2 11.2z'/%3E%3C/svg%3E");
}

/* danger — красный */
.alert-surface--danger {
    background: var(--color-danger-bg-subtle);
    border-color: var(--color-danger-border-subtle);
}

.alert-surface--danger .alert-surface__title {
    color: var(--color-danger-text-emphasis);
}

.alert-surface--danger .alert-surface__text {
    color: var(--color-danger-text-emphasis);
}

.alert-surface--danger .alert-surface__icon .ki-verify .path1:before {
    color: var(--color-danger);
    opacity: 0.35;
}

.alert-surface--danger .alert-surface__icon .ki-verify .path2:before {
    color: var(--color-danger);
    opacity: 1;
}

.alert-surface--danger:not(.alert-surface--with-ki)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23e83248' opacity='0.35' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4z'/%3E%3Cpath fill='%23e83248' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4zm-2 28.2-6.2-6.2 2.8-2.8 3.4 3.4 8.4-8.4 2.8 2.8-11.2 11.2z'/%3E%3C/svg%3E");
}

/* purple — фиолетовый */
.alert-surface--purple {
    background: var(--color-info-bg-subtle);
    border-color: var(--color-info-border-subtle);
}

.alert-surface--purple .alert-surface__title {
    color: var(--color-info-text-emphasis);
}

.alert-surface--purple .alert-surface__text {
    color: var(--color-info-text-emphasis);
}

.alert-surface--purple .alert-surface__icon .ki-verify .path1:before {
    color: var(--color-info);
    opacity: 0.35;
}

.alert-surface--purple .alert-surface__icon .ki-verify .path2:before {
    color: var(--color-info);
    opacity: 1;
}

.alert-surface--purple:not(.alert-surface--with-ki)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%236b7fd7' opacity='0.35' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4z'/%3E%3Cpath fill='%236b7fd7' d='M24 4 6 10v12c0 11 7.6 21.3 18 24 10.4-2.7 18-13 18-24V10L24 4zm-2 28.2-6.2-6.2 2.8-2.8 3.4 3.4 8.4-8.4 2.8 2.8-11.2 11.2z'/%3E%3C/svg%3E");
}

/* Сообщения: белый фон и цветная кромка сбоку, как у плашки изменения сеанса. */
.alert-surface--primary,
.alert-surface--info,
.alert-surface--success,
.alert-surface--warning,
.alert-surface--danger,
.alert-surface--purple {
    background: var(--color-surface);
    color: var(--color-text);
}

.alert-surface--primary,
.alert-surface--info {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    border-color: var(--color-primary);
    border-inline-start: 6px solid var(--color-primary);
}

.alert-surface--success {
    background: color-mix(in srgb, var(--color-success) 6%, var(--color-surface));
    border-color: var(--color-success);
    border-inline-start: 6px solid var(--color-success);
}

.alert-surface--warning {
    background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
    border-color: var(--color-warning);
    border-inline-start: 6px solid var(--color-warning);
}

.alert-surface--danger {
    background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
    border-color: var(--color-danger);
    border-inline-start: 6px solid var(--color-danger);
}

.alert-surface--purple {
    background: color-mix(in srgb, var(--color-info) 6%, var(--color-surface));
    border-color: var(--color-info);
    border-inline-start: 6px solid var(--color-info);
}

.alert-surface--primary .alert-surface__title,
.alert-surface--info .alert-surface__title,
.alert-surface--success .alert-surface__title,
.alert-surface--warning .alert-surface__title,
.alert-surface--danger .alert-surface__title,
.alert-surface--purple .alert-surface__title,
.alert-surface--primary .alert-surface__text,
.alert-surface--info .alert-surface__text,
.alert-surface--success .alert-surface__text,
.alert-surface--warning .alert-surface__text,
.alert-surface--danger .alert-surface__text,
.alert-surface--purple .alert-surface__text {
    color: var(--color-text);
}

html[data-theme="dark"] .alert-surface--primary,
html[data-theme="dark"] .alert-surface--info {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    border-color: var(--color-primary);
    border-inline-start: 6px solid var(--color-primary);
    color: var(--color-text);
}

.action-list {
    margin: 0;
}

.action-chip {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 3px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    line-height: normal;
}

.action-chip:hover {
    background: var(--color-surface-hover);
}

button.action-chip {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    margin: 0 8px 8px 0;
    text-align: inherit;
}

button.action-chip:disabled {
    cursor: default;
    opacity: 0.75;
}


/* Login page: explanatory panel + white auth card */
.login-hero {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    column-gap: 40px;
    align-items: center;
    padding: 36px;
    border-radius: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.login-hero > .hero-copy {
    grid-column: 1;
    grid-row: 1;
    border: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Иврит: grid зеркалит колонки, auto-margin выталкивает текст за правый край. */
html[dir="rtl"] .login-hero {
    box-sizing: border-box;
    width: 100%;
}

html[dir="rtl"] .login-hero > .hero-copy {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-self: stretch;
}

.login-hero .hint-list {
    display: inline-block;
    text-align: start;
}

.login-hero > .form-panel {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 50px;
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    height: auto;
}

.login-hero .hero-copy h1 {
    font-size: 23px;
    line-height: 1;
    margin: 0 0 20px;
}

.login-hero .lead {
    color: var(--color-text);
    font-size: 21px !important;
    line-height: 1.45;
    margin: 0 0 22px;
}

.login-hero .hint-list li {
    list-style-type: square;
    list-style-position: inside;
    padding-bottom: 7px;
    font-size: 17px;
    color: var(--color-text-muted);
}

.login-hero > .form-panel > .flash,
.login-hero > .form-panel > .login-form-error {
    border-radius: var(--radius-sm);
    margin: 0 0 16px;
}

.login-field-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.login-channel-mask {
    font-variant-numeric: tabular-nums;
}

.login-hero > .form-panel > form {
    margin-top: 0;
}

.login-hero label {
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--color-text-muted);
}

.login-hero input[type="text"],
.login-hero input[type="email"],
.login-hero input[type="password"],
.login-hero select,
.login-hero .action-chip,
.login-hero .form-actions {
    width: 100%;
    max-width: none;
}

.login-hero input[type="text"],
.login-hero input[type="email"],
.login-hero input[type="password"],
.login-hero select {
    height: 52px;
    padding: 0 16px;
    color: var(--color-text);
}

/* Toggle «телефон / email»: радиус как у инпута, актив — лёгкая заливка. */
.login-auth-switch {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 52px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    overflow: hidden;
    direction: ltr;
    box-sizing: border-box;
}

.login-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    border-inline-end: 1px solid var(--color-gray-300);
    color: var(--color-text-muted);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.login-auth-btn:last-child {
    border-inline-end: 0;
}

.login-auth-btn.active,
.login-auth-btn[aria-current="true"] {
    color: var(--color-primary-text-emphasis, var(--color-primary));
    background: var(--color-primary-bg-subtle);
    box-shadow: none;
    font-weight: 700;
}

.login-auth-btn:hover:not(.active):not([aria-current="true"]) {
    color: var(--color-link);
    background: var(--color-surface-muted);
}

html[data-theme="dark"] .login-auth-switch {
    background: var(--color-surface);
    border-color: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .login-auth-btn {
    color: #c8d4ef;
    border-inline-end-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .login-auth-btn.active,
html[data-theme="dark"] .login-auth-btn[aria-current="true"] {
    color: #ffffff;
    background: var(--color-primary-bg-subtle);
    box-shadow: none;
}

html[data-theme="dark"] .login-auth-btn:hover:not(.active):not([aria-current="true"]) {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.login-hero input[type="text"]::placeholder,
.login-hero input[type="email"]::placeholder,
.login-hero input[type="password"]::placeholder {
    color: var(--color-placeholder);
}

.login-hero select {
    padding: 0 16px;
}

.login-hero .field-grid > div,
.login-hero .field-grid-single > div {
    margin-bottom: 16px;
}

.login-hero label .fad {
    margin-inline-end: 8px;
    color: var(--color-text-muted);
    font-size: 15px;
}

.login-hero .form-actions {
    margin-top: 12px;
}

.login-hero .btn {
    width: 100%;
    line-height: 1.15;
    text-transform: none;
    text-shadow: none;
    min-height: 52px;
    padding: var(--button-padding-lg);
}

.login-hero .form-actions > .btn-primary {
    font-size: max(17px, var(--font-size-text));
}

.login-hero .btn .fas {
    margin-inline-end: 8px;
    font-size: 15px;
}

.otp-verify {
    text-align: center;
}

input.otp-code-input {
    font-size: 21px;
  }

.otp-illustration {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-illustration .fal,
.otp-illustration .far,
.otp-illustration .fad {
    font-size: 71px;
    color: var(--color-link);
}

.otp-title {
    font-size: 23px;
    line-height: 1.15;
    margin-bottom: 8px;
}

.otp-subtitle {
    margin: 0 0 16px;
    color: var(--color-text-muted);
    font-size: 16px !important;
    line-height: 1.45;
}

.otp-six-digit-hint {
    color: var(--color-text-muted);
    text-align: left;
    margin-top: 30px;
}

.otp-form {
    margin-top: 20px;
}

.otp-code-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 18px;
}

.otp-code-input {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    color: var(--color-text);
}

.otp-code-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-focus);
}

/* Общий инпут логина задаёт width:100% и padding 16px. В узкой ячейке цифра обрезается. */
.login-hero input.otp-code-input {
    width: 54px;
    max-width: 54px;
    height: 54px;
    padding: 0;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    line-height: 1;
}

.otp-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
}

.otp-alert {
    margin: 0;
    width: 100%;
    text-align: start;
    box-sizing: border-box;
}

.otp-submit {
    width: 100%;
    min-width: 160px;
    padding-left: 18px;
    padding-right: 18px;
}

.otp-submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.otp-submit [data-submit-spinner][hidden] {
    display: none;
}

.otp-form[aria-busy="true"] .otp-submit[disabled] {
    opacity: 1;
    cursor: progress;
}

.otp-resend-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin-top: 12px;
}

.otp-resend-prompt {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.45;
}

.otp-resend {
    margin-top: 0;
}

.otp-resend .btn-secondary {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-link);
    font-size: 15px;
    font-weight: normal;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
}

.otp-resend .btn-secondary:hover,
.otp-resend .btn-secondary:focus-visible {
    color: var(--color-link-hover);
    background: transparent;
    text-decoration: underline;
}

.otp-resend .btn-secondary i {
    margin-inline-end: 6px;
}

@media (max-width: 520px) {
    .otp-code-inputs {
        gap: 6px;
    }

    .login-hero input.otp-code-input {
        width: auto;
        max-width: none;
        height: 46px;
        font-size: 19px;
    }
}


.login-hero .action-list {
    margin: 0 0 8px;
}

.login-hero .action-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

html[dir="rtl"] .login-hero .action-chip .mono,
html[dir="rtl"] .login-channel-mask .mono {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

.login-hero .login-change-document {
    margin-top: 16px;
    text-align: center;
}

.login-hero > .form-panel > form.login-change-document {
    margin-top: 16px;
}

.login-hero .login-change-document .btn-secondary {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-secondary);
    color: var(--color-gray-700);
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
}

.login-hero .login-change-document .btn-secondary:hover,
.login-hero .login-change-document .btn-secondary:focus-visible {
    color: var(--color-gray-700);
    background: var(--color-gray-300);
    text-decoration: none;
}

html[data-theme="dark"] .login-hero .login-change-document .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: #f0eef8;
}

html[data-theme="dark"] .login-hero .login-change-document .btn-secondary:hover,
html[data-theme="dark"] .login-hero .login-change-document .btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.login-hero form + form .form-actions {
    margin-top: 6px;
    text-align: right;
}

.login-hero form + form .btn-secondary {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-link);
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
}

.login-hero form + form .btn-secondary:hover {
    color: var(--color-link-hover);
    background: transparent;
    text-decoration: underline;
}

/* Global topbar/header/footer (base.html) */
.topbar-stack {
    position: relative;
    z-index: 220;
}

.topbar-stack .topbar {
    position: static;
    top: auto;
}

.a11y-toolbar {
    display: none;
    background: var(--a11y-toolbar-bg);
    color: var(--a11y-toolbar-fg);
    border-bottom: 2px solid var(--a11y-toolbar-border);
}

html[data-a11y="on"] .a11y-toolbar {
    display: block;
}

.a11y-toolbar__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.a11y-toolbar__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.a11y-font-size-toggle {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--a11y-toolbar-border);
    border-radius: 4px;
    overflow: hidden;
}

.a11y-font-size-btn {
    box-sizing: border-box;
    min-width: 48px;
    min-height: 44px;
    margin: 0;
    padding: 6px 14px;
    border: 0;
    border-inline-end: 2px solid var(--a11y-toolbar-border);
    background: var(--a11y-toolbar-btn-bg);
    color: var(--a11y-toolbar-btn-fg);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

.a11y-font-size-btn:last-child {
    border-inline-end: 0;
}

.a11y-font-size-btn:hover {
    background: var(--a11y-toolbar-btn-hover-bg);
}

.a11y-font-size-btn.is-active,
.a11y-font-size-btn[aria-pressed="true"] {
    background: var(--a11y-toolbar-btn-active-bg);
    color: var(--a11y-toolbar-btn-active-fg);
}

.a11y-font-size-btn__glyph--small {
    font-size: 15px;
}

.a11y-font-size-btn__glyph--normal {
    font-size: 19px;
}

.a11y-font-size-btn__glyph--large {
    font-size: 25px;
}

.topbar {
    height: 38px;
    background: var(--color-chrome-bg);
    border-bottom: 1px solid var(--color-border-soft);
}

.topbar-inner,
.header-inner,
.footer-inner,
.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 28px;
    box-sizing: border-box;
}

.topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    direction: ltr;
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-social {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-text-muted);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.topbar-social:hover {
    color: var(--color-link);
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.topbar-social-svg {
    display: block;
}

html[data-theme="dark"] .topbar-social {
    color: #c8d4ef;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

html[data-theme="dark"] .topbar-social:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}

.tooltip {
    --bs-tooltip-bg: var(--tooltip-bg);
    --bs-tooltip-color: var(--tooltip-color);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-arrow-width: 0.8rem;
    --bs-tooltip-arrow-height: 0.4rem;
    position: absolute;
    z-index: 1080;
    display: block;
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    opacity: 0;
    pointer-events: none;
}

.tooltip .tooltip-inner {
    padding: var(--tooltip-padding);
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}

.tooltip.show {
    opacity: var(--bs-tooltip-opacity);
}

.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: var(--bs-tooltip-arrow-width);
    height: var(--bs-tooltip-arrow-height);
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
    bottom: calc(-1 * var(--bs-tooltip-arrow-height));
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    top: -1px;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
    border-top-color: var(--tooltip-arrow-color);
}

.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
    left: calc(-1 * var(--bs-tooltip-arrow-height));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    right: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
    border-right-color: var(--tooltip-arrow-color);
}

.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
    top: calc(-1 * var(--bs-tooltip-arrow-height));
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
    border-bottom-color: var(--tooltip-arrow-color);
}

.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
    right: calc(-1 * var(--bs-tooltip-arrow-height));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    left: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
    border-left-color: var(--tooltip-arrow-color);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.topbar-logout-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.topbar-logout-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.topbar-logout-btn .far {
    font-size: 13px;
}

.topbar-logout-btn:hover,
.topbar-logout-btn:focus-visible {
    color: var(--color-link);
    border-color: var(--color-link);
    background: var(--color-surface);
}

/* Кнопки с иконками в правой части топбара: один размер и типографика */
.topbar-right .topbar-icon-btn,
.page-shell .topbar-right .dash-account-trigger {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 0;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.topbar-right .topbar-icon-btn:hover {
    color: var(--color-link);
    background: var(--color-surface-hover);
}

.topbar-theme-btn[data-theme-current="light"],
.topbar-a11y-btn {
    color: #b78b00;
    background: #fff8d8;
}

.topbar-theme-btn[data-theme-current="light"]:hover,
.topbar-a11y-btn:hover {
    color: #8a6d00;
    background: #fff3bf;
}

.topbar-theme-btn[data-theme-current="dark"],
html[data-theme="dark"] .topbar-a11y-btn {
    color: #c8d4ef;
    background: rgba(255, 255, 255, 0.08);
}

.topbar-theme-btn[data-theme-current="dark"]:hover,
html[data-theme="dark"] .topbar-a11y-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.topbar-a11y-btn__icon {
    font-size: 19px;
    line-height: 1;
    display: block;
    position: relative;
}

/* Активная спецверсия: та же кнопка, что тема, плюс перечёркивание иконки */
.topbar-a11y-btn.is-active .topbar-a11y-btn__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
}

.lang-switch {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    overflow: hidden;
    flex-shrink: 0;
    direction: ltr;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    min-height: 22px;
    padding: 2px 0;
    border: 0;
    color: var(--color-text-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lang-btn.active,
.lang-btn[aria-current="true"] {
    color: #ffffff;
    background: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary-border);
}

.lang-btn:hover:not(.active):not([aria-current="true"]) {
    color: var(--color-link);
    background: var(--color-surface);
}

html[data-theme="dark"] .lang-switch {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .lang-btn {
    color: #c8d4ef;
}

html[data-theme="dark"] .lang-btn.active,
html[data-theme="dark"] .lang-btn[aria-current="true"] {
    color: #ffffff;
    background: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary-border);
}

html[data-theme="dark"] .lang-btn:hover:not(.active):not([aria-current="true"]) {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.page-shell .topbar-right .dash-account-trigger{
  color: var(--color-link);
  font-size: 27px;
  background: transparent;
}

/* Вариант триггера с аватаром-инициалами: размер символов и центрирование
   задаются здесь, чтобы не конфликтовать с правилом font-size: 27px выше
   (оно нужно дефолтной иконке ki-profile-circle). */
.page-shell .topbar-right .dash-account-trigger--avatar {
    font-size: 12px;
}

.page-shell .topbar-right .dash-account-trigger--avatar .dash-account-avatar {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-link);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    /* Цифры из ТЗ как fallback-инициал смотрятся опрятнее с моно-стилем. */
    font-variant-numeric: tabular-nums;
}

.page-shell .topbar .dash-account-dropdown:hover .dash-account-trigger--avatar .dash-account-avatar,
.page-shell .topbar .dash-account-dropdown:focus-within .dash-account-trigger--avatar .dash-account-avatar {
    filter: brightness(0.95);
}

.topbar-sep {
    width: 1px;
    height: 10px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Topbar: меню аккаунта (base.html + dashboard/index.html) */
.page-shell .topbar-stack {
    z-index: 220;
}

.page-shell .topbar .dash-topbar-account-wrap {
    position: relative;
    flex-shrink: 0;
}

.page-shell .topbar .dash-account-dropdown {
    position: relative;
    display: inline-flex;
    z-index: 1;
}

.page-shell .topbar .dash-account-dropdown:hover,
.page-shell .topbar .dash-account-dropdown:focus-within {
    z-index: 210;
}

.page-shell .topbar .dash-account-dropdown:hover .dash-account-trigger,
.page-shell .topbar .dash-account-dropdown:focus-within .dash-account-trigger {
    color: var(--color-link);
}

.page-shell .topbar .dash-account-panel {
    position: absolute;
    inset-inline-end: 0;
    top: 100%;
    /* Фиксируем ширину панели: иначе при раскрытии админ-формы (god-mode)
       панель «играет» по ширине, что выглядит как прыгающее меню. */
    width: min(92vw, 300px);
    margin: 0;
    padding: 0;
    max-height: calc(100dvh - 54px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Топбар остаётся LTR, поэтому без этого меню на иврите прилипает влево. */
html[dir="rtl"] .page-shell .topbar .dash-account-panel {
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] .page-shell .topbar .dash-account-god-input {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .page-shell .topbar .dash-account-theme-toggle,
html[dir="rtl"] .page-shell .topbar .dash-account-lang-toggle {
    direction: ltr;
}

.page-shell .topbar .dash-account-dropdown:hover .dash-account-panel,
.page-shell .topbar .dash-account-dropdown:focus-within .dash-account-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.page-shell .topbar .dash-account-panel-header {
    position: relative;
    margin: 0;
    padding: 0;
    color: #fff;
    background: var(--color-primary);
}

html[data-theme="dark"] .page-shell .topbar .dash-account-panel-header {
    background: var(--color-primary-hover);
}

/*.page-shell .topbar .dash-account-panel-header-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.2) 1px, transparent 1.5px),
        radial-gradient(circle at 62% 42%, rgba(255, 255, 255, 0.12) 1px, transparent 1.4px),
        radial-gradient(circle at 88% 72%, rgba(255, 255, 255, 0.1) 1px, transparent 1.3px),
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 38%,
            transparent 62%
        ),
        repeating-linear-gradient(
            -18deg,
            transparent,
            transparent 11px,
            rgba(255, 255, 255, 0.045) 11px,
            rgba(255, 255, 255, 0.045) 12px
        );
    background-size:
        22px 22px,
        26px 26px,
        18px 18px,
        100% 100%,
        100% 100%;
}*/

.page-shell .topbar .dash-account-panel-header-inner {
    position: relative;
    z-index: 1;
    padding: 16px 14px 14px;
}

.page-shell .topbar .dash-account-panel-title {
    margin: 0 0 17px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    font-size: 14px;
}

/* Вторичные строки в шапке выпадашки (привязка кабинета, доступный зикуй).
   Единый стиль для всех таких подписей: маленькая приглушённая иконка слева,
   серо-белый текст, выделенное значение в конце. Все строки выглядят
   одинаково — без отдельных «плашек», как обычные подписи поверх tинта. */
.page-shell .topbar .dash-account-panel-line {
    margin: 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.4;
}

.page-shell .topbar .dash-account-panel-line:last-of-type {
    margin-bottom: 12px;
}

.page-shell .topbar .dash-account-panel-line__icon {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.page-shell .topbar .dash-account-panel-line__value {
    color: #fff;
    font-weight: 600;
}

.page-shell .topbar .dash-account-panel-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-shell .topbar .dash-account-panel-meta-row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 10px 12px;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.35;
}

.page-shell .topbar .dash-account-panel-meta-label {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
    white-space: nowrap;
}

.page-shell .topbar .dash-account-panel-meta-value {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    text-align: end;
    word-break: break-word;
}

.page-shell .topbar .dash-account-actions {
    list-style: none;
    margin: 0;
    padding: 6px 0 8px;
}

.page-shell .topbar .dash-account-actions li {
    margin: 0;
}

.page-shell .topbar .dash-account-logout-form {
    display: flex;
    margin: 0;
    padding: 6px 14px 8px;
}

html[dir="ltr"] .page-shell .topbar .dash-account-logout-form {
    justify-content: flex-end;
}

html[dir="rtl"] .page-shell .topbar .dash-account-logout-form {
    justify-content: flex-start;
}

.page-shell .topbar .dash-account-logout-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: inherit;
    line-height: 1.35;
    color: var(--color-link);
    cursor: pointer;
    text-decoration: none;
}

.page-shell .topbar .dash-account-logout-link .far {
    flex-shrink: 0;
    width: 1.2em;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: inherit;
}

.page-shell .topbar .dash-account-logout-link:hover {
    color: var(--color-link-hover);
    background: none;
}

html[dir="rtl"] .page-shell .topbar .dash-account-logout-link {
    flex-direction: row-reverse;
}

.page-shell .topbar .dash-account-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 5px 14px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.page-shell .topbar .dash-account-menu-link .dash-account-menu-ki {
    flex-shrink: 0;
    font-size: 17px;
    line-height: 1;
    color: inherit;
}

.page-shell .topbar .dash-account-menu-link .dash-account-menu-ki i {
    display: block;
}

.page-shell .topbar .dash-account-menu-link .far {
    width: 1.2em;
    flex-shrink: 0;
    text-align: center;
    font-size: 17px;
    line-height: 1;
    color: inherit;
}

.page-shell .topbar .dash-account-actions-logout {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.page-shell .topbar .dash-account-menu-link:hover {
    color: var(--color-link);
    background: var(--color-surface-muted);
}

.page-shell .topbar .dash-account-actions-prefs {
    margin-top: 4px;
    padding: 10px 14px 8px;
    border-top: 1px solid var(--color-border);
}

/* Админ-секция в выпадающем меню учётной записи: редактор переводов и вход
   в чужой кабинет (god-mode). Видна только админам — условие в шаблоне. */
.page-shell .topbar .dash-account-actions-admin {
    margin-top: 4px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--color-border);
}

.page-shell .topbar .dash-account-admin-title {
    padding: 2px 14px 6px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.75;
}

.page-shell .topbar .dash-account-god {
    margin: 0;
}

.page-shell .topbar .dash-account-god > summary {
    list-style: none;
    cursor: pointer;
}

.page-shell .topbar .dash-account-god > summary::-webkit-details-marker {
    display: none;
}

.page-shell .topbar .dash-account-god[open] > summary {
    color: var(--color-link);
}

.page-shell .topbar .dash-account-god-form {
    margin: 6px 14px 4px;
    padding: 0;
    border: 0;
    background: transparent;
}

.page-shell .topbar .dash-account-god-row {
    display: flex;
    align-items: stretch;
    /* Инпут LTR (теудат), кнопка справа. Иначе в RTL-меню logical-радиусы
       считаются от direction инпута и скругления оказываются с чужой стороны. */
    direction: ltr;
}

.page-shell .topbar .dash-account-god-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    /* Склейка с кнопкой справа: плоская правая сторона. */
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 14px;
}

.page-shell .topbar .dash-account-god-submit {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--color-link);
    /* Вплотную к инпуту слева: без левого бордера и без левых радиусов. */
    border-left-width: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-link);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: var(--button-transition);
}

.page-shell .topbar .dash-account-god-submit:hover {
    filter: brightness(0.95);
}

.page-shell .topbar .dash-account-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}

.page-shell .topbar .dash-account-pref-row:last-child {
    margin-bottom: 0;
}

.page-shell .topbar .dash-account-pref-label {
    color: var(--color-text-muted);
}

.page-shell .topbar .dash-account-pref-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.page-shell .topbar .dash-account-theme-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--button-transition);
}

.page-shell .topbar .dash-account-theme-btn:hover {
    color: var(--color-link);
    border-color: var(--color-link);
    background: var(--color-surface-muted);
}

.page-shell .topbar .dash-account-theme-btn.is-active {
    color: var(--color-link);
    border-color: var(--color-link);
    background: var(--color-surface-muted);
}

.page-shell .topbar .dash-account-theme-btn .theme-toggle-ki--option {
    font-size: 16px;
}

.page-shell .topbar .dash-account-lang-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--button-transition);
}

.page-shell .topbar .dash-account-lang-btn:hover {
    color: var(--color-link);
    border-color: var(--color-link);
    background: var(--color-surface-muted);
}

.page-shell .topbar .dash-account-lang-btn.is-active {
    color: var(--color-link);
    border-color: var(--color-link);
    background: var(--color-surface-muted);
}

.theme-toggle-current,
.lang-switch-current {
    display: none;
}

.theme-toggle-wrap {
    position: relative;
    display: inline-flex;
    z-index: 1;
}

.theme-toggle-wrap:hover,
.theme-toggle-wrap:focus-within {
    z-index: 210;
}

.theme-toggle-trigger:hover {   
    color: var(--color-link);
}

.lang-switch-wrap {
    position: relative;
    display: inline-flex;
    z-index: 1;
}

.lang-switch-wrap:hover,
.lang-switch-wrap:focus-within {
    z-index: 210;
}

.lang-switch-trigger:hover {
    color: var(--color-link);
}

.lang-switch-menu {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    margin: 0;
    padding: 6px 0 4px;
    min-width: 168px;
    list-style: none;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.lang-switch-wrap:hover .lang-switch-menu,
.lang-switch-wrap:focus-within .lang-switch-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.lang-switch-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    line-height: 1.25;
    color: var(--color-text);
    text-align: start;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switch-option:hover {
    color: var(--color-link);
}

.lang-switch-option.is-active {
    color: var(--color-link);
}

.theme-toggle-menu {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    margin: 0;
    padding: 6px 0 4px;
    min-width: 168px;
    list-style: none;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.theme-toggle-wrap:hover .theme-toggle-menu,
.theme-toggle-wrap:focus-within .theme-toggle-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.theme-toggle-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    line-height: 1.25;
    color: var(--color-text);
    text-align: start;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle-option:hover {
    color: var(--color-link);
}

.theme-toggle-option.is-active {
    color: var(--color-link);
}

.theme-toggle-option .far {
    width: 1em;
    text-align: center;
    flex-shrink: 0;
}

.theme-toggle-ki,
.lang-switch-ki,
.topbar-social-ki,
.dash-account-trigger-ki {
    flex-shrink: 0;
    color: inherit;
    line-height: 1;
}

.topbar-icon-btn .theme-toggle-ki {
    font-size: 19px;
}

.theme-toggle-ki--trigger,
.lang-switch-ki--trigger,
.dash-account-trigger-ki {
    font-size: 23px;
}

.theme-toggle-ki--option {
    font-size: 17px;
}

.theme-toggle-ki i,
.lang-switch-ki i,
.topbar-social-ki i,
.dash-account-trigger-ki i {
    display: block;
}

.site-header {
    height: 68px;
    /* См. комментарий у .topbar — обрамление страницы держим на одном тоне. */
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    /* site-header больше НЕ фиксирован при прокрутке — sticky перенесён
       на .topbar, где живёт меню учётной записи. */
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.header-buy-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #f8c300, #d9a800);
    color: #0e0b2a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.header-buy-link:hover,
.header-buy-link:focus-visible {
    opacity: 0.9;
    color: #0e0b2a;
    text-decoration: none;
}

.header-buy-link i {
    font-size: 15px;
    line-height: 1;
}

.logo {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0;
}

.logo-icon {
    font-size: 55px;
    display: block;
    line-height: 1;
    width: auto;
    height: auto;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.logo-sub {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #36699c;
    opacity: 0.8;
}

.logo-name {
    display: block;
    margin: 0;
    font-size: 23px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #36699c;
    line-height: 1;
}

.logo-name span {
    color: #36699c;
}

.bravoFontIcon.fulllogo:before {
    color: #36699c;
}

.bravoFontIcon.fulllogo:after {
    color: #f8c300;
}

.header-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: end;
    flex-shrink: 0;
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
    color: #36699c;
    text-decoration: none;
    white-space: nowrap;
}

html[data-theme="dark"] .header-phone {
    color: var(--color-link);
}

.header-hours {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

html[dir="rtl"] .header-contact {
    align-items: flex-start;
    text-align: start;
}

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    background: var(--color-chrome-bg);
}

.site-footer .logo-icon {
    font-size: 39px;
}

.footer-inner {
    padding: 28px 28px 18px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 18px 28px;
    flex-wrap: nowrap;
}

.footer-tagline {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.65;
    min-width: 0;
}

.footer-tagline a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 600;
}

.footer-tagline a:hover {
    color: var(--color-warning);
}

.footer-bottom {
    border-top: 1px solid var(--color-border-soft);
    padding: 14px 28px;
    font-size: 13px;
    color: var(--color-text-muted);
}


@media (max-width: 800px) {
    * {
        box-sizing: border-box;
    }

    .topbar {
        height: auto;
        min-height: 38px;
    }

    .topbar-inner,
    .header-inner,
    .footer-inner,
    .footer-bottom {
        max-width: none;
        padding: 0 12px;
    }

    .topbar-inner {
        flex-wrap: wrap;
        row-gap: 6px;
        padding-top: 6px;
        padding-bottom: 6px;
        height: auto;
    }

    .topbar-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px 10px;
    }

    html[dir="rtl"] .topbar-right {
        justify-content: flex-start;
    }

    .header-inner {
        flex-wrap: wrap;
        height: auto;
        min-height: 68px;
        padding-top: 8px;
        padding-bottom: 8px;
        gap: 12px;
    }

    /* Контент шапки переносится на вторую строку — снимаем жёсткую
       высоту, иначе телефон «вылетает» из header и наезжает на баннер. */
    .site-header {
        height: auto;
        min-height: 68px;
    }

    .header-right {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 10px;
        order: 1;
        flex-wrap: wrap;
    }

    .header-buy-link {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* Телефон — отдельная строка на всю ширину под логотипом. */
    .header-contact {
        flex: 1 1 100%;
        width: 100%;
        align-items: flex-start;
        text-align: start;
        order: 2;
    }

    html[dir="rtl"] .header-contact {
        align-items: flex-end;
        text-align: end;
    }

    .logo {
        order: 0;
    }

    .header-phone {
        font-size: 14px;
    }

    .header-hours {
        white-space: normal;
        line-height: 1.4;
    }

    .logo-icon {
        font-size: 45px;
    }

    .logo-sub {
        font-size: 11px;
    }

    .logo-name {
        font-size: 18px;
    }

    .footer-inner {
        padding-top: 28px;
        padding-bottom: 18px;
    }

    .footer-brand {
        gap: 14px 18px;
    }

    body.page-shell > main {
        padding: 12px 12px 24px;
    }

    .header-side {
        width: 100%;
        justify-content: flex-start;
        margin: 8px 0 0;
    }

    .session-pill {
        width: 100%;
    }

    .orders-table,
    .tbl-detail {
        display: block;
        clear: both;
    }

    .god-mode-form {
        display: block;
    }

    .god-mode-form input[type="text"] {
        width: 100%;
        margin: 6px 0 8px;
    }

    .orders-table thead,
    .tbl-detail thead {
        display: none;
    }

    .orders-table tbody,
    .orders-table tr,
    .tbl-detail tbody,
    .tbl-detail tr {
        display: block;
    }

    .orders-table td,
    .tbl-detail td,
    .tbl-detail th {
        display: block;
        width: 100%;
        border-right: 0;
        /* start — не left: иначе в RTL (иврит) тексты карточек уезжают влево. */
        text-align: start;
    }

}

/* Мобильный/планшетный кегль только в <main>.
   .topbar, .site-header, .site-footer — без изменений. */
@media (max-width: 1040px) {
    .page-shell > main {
        --font-size-text: 16px;
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 19px;
        --font-size-h4: 17px;
        --font-size-h5: 16px;
        --breadcrumb-font-size: 15px;
        font-size: 16px;
    }

    .page-shell > main .btn,
    .page-shell > main .odetails-hero__qr-label {
        font-size: 15px;
    }

    .page-shell > main .orders-table--clean .orders-table__seance,
    .page-shell > main .orders-table--clean .orders-table__seance-date,
    .page-shell > main .orders-table--clean .orders-table__seance-time,
    .page-shell > main .orders-table--clean .orders-table__order-date {
        font-size: 17px;
    }

    .page-shell > main .orders-table--clean .orders-table__show {
        font-size: 17px;
    }

    .page-shell > main .orders-table--clean .orders-table__venue {
        font-size: 15px;
    }

    .page-shell > main .orders-table--clean .orders-table__action {
        font-size: 15px;
    }

    .page-shell > main .orders-table--clean .orders-table__status .ui-label {
        font-size: 14px;
    }

    .page-shell > main .orders-table__session-change--plate .orders-table__session-warning,
    .page-shell > main .orders-table__session-attention {
        font-size: 15px;
    }

    .page-shell > main .dash-filter {
        font-size: 15px;
    }

    .page-shell > main .odetails-hero__sum {
        font-size: 30px;
    }

    .page-shell > main .odetails-payment__total-value {
        font-size: 27px;
    }

    .page-shell > main .odetails-list__value,
    .page-shell > main .odetails-card__action-title {
        font-size: 16px;
    }
}

@media (max-width: 1040px) {
    /* Таблица заказов не помещается в колонку уже с 1040px.
       Карточки включают display:flex на строке, поэтому таблицу
       снимаем с table-layout здесь, а не только с 800px. */
    .dash-orders .orders-table--clean,
    .dash-orders .orders-table--clean tbody {
        display: block;
    }

    .dash-orders .orders-table--clean thead {
        display: none;
    }

    .dash-orders .orders-table--clean tbody td {
        display: block;
        width: 100%;
        border-right: 0;
        text-align: start;
    }

    /* ============================================================
       Главная: список заказов карточками до 1040px.
       Разметку таблицы не меняем — клик по строке, фильтры и
       «показать ещё» завязаны на <tr>/<td>/[hidden].
       ============================================================ */

    /* Контейнер: уже боковые отступы; sticky-шапку держим в синхроне,
       чтобы её фон тянулся до краёв карточки. */
    .dash-orders {
        padding: 16px 14px 14px;
    }
    .dash-orders__header {
        margin: -16px -14px 12px;
        padding: 14px 14px 10px;
        gap: 8px;
        overflow: visible;
    }
    .dash-orders__toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 10px;
        overflow: visible;
        padding-top: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .dash-filters {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        padding: 0 8px 0 0;
        margin-inline-start: 0;
        overflow: visible;
        box-sizing: border-box;
    }
    .dash-filter {
        flex: 0 0 auto;
        padding: 5px 12px;
        max-width: 100%;
    }
    .dash-orders__tools {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        margin-inline-start: 0;
        gap: 8px;
        box-sizing: border-box;
    }
    .dash-orders__search {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .dash-orders__dates {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        gap: 6px;
        box-sizing: border-box;
    }
    .dash-orders__date {
        flex: 1 1 0;
        min-width: 0;
    }
    .dash-orders__date-trigger {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
    .dash-orders__dates-sep {
        flex: 0 0 auto;
    }

    /* Строка → карточка с цветной полоской статуса слева. */
    .dash-orders .orders-table--clean tbody tr {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid var(--color-border-soft);
        border-inline-start: 4px solid var(--orders-card-stripe, var(--color-border-soft));
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        box-shadow: var(--shadow-card);
    }
    .dash-orders .orders-table--clean tbody tr[data-status="unpaid"]    { --orders-card-stripe: var(--color-info); }
    .dash-orders .orders-table--clean tbody tr[data-status="future"]    { --orders-card-stripe: var(--color-primary); }
    .dash-orders .orders-table--clean tbody tr[data-status="cancelled"] { --orders-card-stripe: var(--color-danger); }
    .dash-orders .orders-table--clean tbody tr[data-status="processed"] { --orders-card-stripe: var(--color-success); }
    /* Скрытые фильтром строки: возвращаем display:none поверх flex. */
    .dash-orders .orders-table--clean tbody tr[hidden] {
        display: none;
    }
    .dash-orders .orders-table--clean tbody td {
        padding: 3px;
        text-align: start;
    }

    .dash-orders .orders-table--clean .orders-table__show,
    .dash-orders .orders-table--clean .orders-table__venue,
    .dash-orders .orders-table--clean .orders-table__seance,
    .dash-orders .orders-table--clean .orders-table__id-sub {
        text-align: start;
    }

    /* Верх карточки: «Заказ №…» + статус-бейдж в строку, дата заказа ниже. */
    .dash-orders .orders-table--clean .orders-table__id {
        order: 1;
        padding-inline-end: 0;
    }
    .dash-orders .orders-table--clean .orders-table__id-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .dash-orders .orders-table--clean .orders-table__id-value {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-heading);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dash-orders .orders-table--clean .orders-table__status-inline {
        display: inline-flex;
        flex: 0 0 auto;
    }
    .dash-orders .orders-table--clean .orders-table__id-sub {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        font-size: 13px;
        color: var(--color-text-muted);
    }
    /* Отдельные колонки статуса и даты заказа на мобилке не нужны —
       данные перенесены в верх карточки. */
    .dash-orders .orders-table--clean td.orders-table__status,
    .dash-orders .orders-table--clean td.orders-table__order-date {
        display: none;
    }

    /* Тело карточки: название → сеанс одной строкой. */
    .dash-orders .orders-table--clean .orders-table__title  { order: 2; }
    .dash-orders .orders-table--clean .orders-table__seance { order: 3; }
    .dash-orders .orders-table--clean .orders-table__seance .orders-table__cell-stack {
        display: inline-flex;
        gap: 2px 8px;
        line-height: 1.25;
    }
    /* Действия: одна строка на всю ширину, кнопки по контенту с переносом. */
    .dash-orders .orders-table--clean .orders-link-cell {
        max-width: none;
    }
    .dash-orders .orders-table--clean .orders-table__actions {
        order: 4;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .dash-orders .orders-table--clean .orders-table__action {
        display: inline-flex;
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }
    .dash-orders .orders-table--clean .orders-table__tickets-pending {
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (max-width: 800px) {
    .login-hero {
        grid-template-columns: 1fr;
        margin: 0;
        padding: 8px 0 24px;
        column-gap: 0;
        row-gap: 18px;
        border-radius: 0;
    }

    .login-hero .hero-copy {
        margin-top: 0;
        max-width: 520px;
    }

    .login-hero .hero-copy h1 {
        font-size: 27px;
        line-height: 1.12;
        margin-bottom: 12px;
    }

    .login-hero .lead {
        font-size: 16px !important;
        line-height: 1.45;
        margin-bottom: 12px;
    }

    .login-hero .hint-list li {
        font-size: 14px;
        padding-bottom: 8px;
    }

    .login-hero label {
        font-size: 14px;
    }

    .login-hero input[type="text"],
    .login-hero input[type="email"],
    .login-hero input[type="password"],
    .login-hero select {
        height: 48px;
        padding: 0 14px;
    }

    .login-auth-switch {
        height: 48px;
    }

    .login-auth-btn {
        font-size: 14px;
    }
}

@media (max-width: 1200px) {

    .login-hero {
        column-gap: 28px;
        padding: 28px;
    }
}

@media (max-width: 1200px) {
    .login-hero {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 18px;
        justify-items: center;
        width: 100%;
        min-width: 0;
    }

    .login-hero > .form-panel,
    .login-hero .hero-copy {
        grid-column: auto;
        min-width: 0;
        max-width: 100%;
    }

    /* Заголовок выше формы на узких экранах (раньше form-panel был grid-row: 1). */
    .login-hero .hero-copy {
        grid-row: 1;
        text-align: center;
        order: 1;
    }

    .login-hero > .form-panel {
        grid-row: 2;
        box-sizing: border-box;
        width: min(520px, 100%);
        order: 2;
    }
}

@media (max-width: 600px) {
    .login-hero > .form-panel {
        padding: 18px 16px;
    }
}

/* Узкий телефон (~450px): топбар, выпадающие меню, баннер god-mode. */
@media (max-width: 480px) {
    .a11y-toolbar__inner {
        flex-direction: column;
        align-items: stretch;
        padding: 8px 12px;
        gap: 8px;
    }

    .a11y-font-size-toggle {
        width: 100%;
    }

    .a11y-font-size-btn {
        flex: 1 1 0;
    }

    .topbar-sep {
        display: none;
    }

    .topbar-inner {
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .topbar-right {
        flex-wrap: wrap;
        gap: 4px;
        margin-inline-start: auto;
        max-width: 100%;
    }

    .topbar-right .topbar-icon-btn,
    .page-shell .topbar-right .dash-account-trigger {
        width: 26px;
        height: 26px;
        font-size: 17px;
    }

    .topbar-a11y-btn__icon {
        font-size: 17px;
    }

    .lang-btn {
        width: 30px;
        min-height: 20px;
        font-size: 11px;
    }

    .page-shell .topbar-right .dash-account-trigger--avatar .dash-account-avatar {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    /* Выпадающие панели — fixed, чтобы не обрезались и не уезжали за край. */
    .page-shell .topbar .dash-account-dropdown:hover .dash-account-panel,
    .page-shell .topbar .dash-account-dropdown:focus-within .dash-account-panel {
        position: fixed;
        top: 42px;
        inset-inline: 12px;
        width: auto;
        max-width: none;
        z-index: 250;
    }

    .theme-toggle-wrap:hover .theme-toggle-menu,
    .theme-toggle-wrap:focus-within .theme-toggle-menu,
    .lang-switch-wrap:hover .lang-switch-menu,
    .lang-switch-wrap:focus-within .lang-switch-menu {
        position: fixed;
        top: 42px;
        inset-inline-end: 12px;
        inset-inline-start: auto;
        width: min(220px, calc(100vw - 24px));
        min-width: 0;
        z-index: 250;
    }

    html[dir="rtl"] .theme-toggle-wrap:hover .theme-toggle-menu,
    html[dir="rtl"] .theme-toggle-wrap:focus-within .theme-toggle-menu,
    html[dir="rtl"] .lang-switch-wrap:hover .lang-switch-menu,
    html[dir="rtl"] .lang-switch-wrap:focus-within .lang-switch-menu {
        inset-inline-start: 12px;
        inset-inline-end: auto;
    }

    .header-hours {
        font-size: 11px;
    }

    /* Переносим контакты, если логотип, телефон и кнопка не помещаются рядом. */
    .header-inner {
        flex-wrap: wrap;
        min-height: 52px;
        padding-top: 6px;
        padding-bottom: 6px;
        gap: 8px;
    }

    .site-header {
        min-height: 52px;
    }

    .header-right {
        flex-wrap: wrap;
        flex: 1 1 240px;
        gap: 6px;
        order: 0;
        min-width: 0;
    }

    html[data-a11y="on"] .topbar,
    html[data-a11y="on"] .topbar-inner {
        height: auto;
        min-height: 40px;
    }

    html[data-a11y="on"] .topbar-right {
        gap: 4px;
    }

    .header-buy-link {
        padding: 5px 8px;
        font-size: 12px;
        gap: 4px;
    }

    .header-buy-link i {
        font-size: 13px;
    }

    .header-contact {
        flex: 0 1 auto;
        width: auto;
        order: 0;
        min-width: 0;
    }

    .header-phone {
        font-size: 13px;
        white-space: nowrap;
    }

    /* Часы на узком экране дают второй ряд без пользы. */
    .header-hours {
        display: none;
    }

    .logo-icon {
        font-size: 37px;
    }

    .logo-sub {
        font-size: 10px;
    }

    .logo-name {
        font-size: 16px;
    }

    .dash-orders__header {
        padding: 12px 12px 8px;
        gap: 8px;
        overflow: visible;
    }

    .dash-orders__toolbar {
        padding-top: 12px;
    }

    .dash-orders__title {
        font-size: 21px;
    }

    .dash-filter {
        padding: 4px 10px;
        font-size: 12px;
        gap: 4px;
    }

    .god-mode-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }

    .god-mode-banner .btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .site-header .logo-icon {
        font-size: 33px;
    }

    .site-footer .logo-icon {
        font-size: 35px;
    }

    .logo-name {
        font-size: 15px;
    }

    .logo-sub {
        font-size: 9px;
    }

    .header-buy-link {
        padding: 4px 7px;
        font-size: 11px;
    }

    .header-phone {
        font-size: 12px;
    }

    .login-hero > .form-panel {
        padding: 16px 14px;
    }
}

/* ---------- Font Awesome 5 Pro Duotone (поддержка двухслойных глифов) ----------

   Поставляемый fontawesome.css содержит только @font-face и одиночный :before
   для всех иконок. Из-за этого `.fad ...` рисовал лишь primary-слой, и иконки
   выглядели «обрезанными» (палочка вместо билета, тонкие штрихи и т. п.).

   Добавляем стандартный FA Pro механизм по их CSS-only схеме:
     1. Сам <i> — inline-block с фиксированным «иконочным» боксом 1.25em × 1em.
     2. Оба слоя (:before primary, :after secondary) — absolute внутри этого
        бокса с одинаковыми координатами, чтобы налагаться друг на друга и
        центроваться (text-align: center).
     3. vertical-align: -0.125em — стандартное смещение FA для выравнивания
        иконки по baseline текста (как у .far/.fal раньше).

   Secondary content в FA Pro — это primary codepoint, увеличенный на 0x100000
   (т. е. `\10` + основной hex). Перечисляем только те иконки, которые реально
   используются в проекте, чтобы не тащить весь набор. */
.fad {
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    text-align: center;
}

.fad:before,
.fad:after {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.fad:before {
    color: var(--fa-primary-color, currentColor);
    opacity: var(--fa-primary-opacity, 1);
}

.fad:after {
    color: var(--fa-secondary-color, currentColor);
    opacity: var(--fa-secondary-opacity, 0.4);
}

/* Используемые в проекте duotone-иконки (dashboard + login). При добавлении
   новой `fad fa-...` нужно прописать здесь её secondary content. */
.fad.fa-ticket-alt:after     { content: "\10f3ff"; }
.fad.fa-wallet:after         { content: "\10f555"; }
.fad.fa-receipt:after        { content: "\10f543"; }
.fad.fa-file-invoice:after   { content: "\10f571"; }
.fad.fa-calendar-alt:after          { content: "\10f073"; }
.fad.fa-calendar-check:after        { content: "\10f274"; }
.fad.fa-calendar-exclamation:after  { content: "\10f334"; }
.fad.fa-map-marker-alt:after { content: "\10f3c5"; }
.fad.fa-clock:after          { content: "\10f017"; }
.fad.fa-arrow-right:after    { content: "\10f061"; }
.fad.fa-coins:after          { content: "\10f51e"; }
.fad.fa-ban:after            { content: "\10f05e"; }
.fad.fa-id-card:after        { content: "\10f2c2"; }
.fad.fa-shield-alt:after     { content: "\10f3ed"; }
.fad.fa-headset:after        { content: "\10f590"; }
.fad.fa-city:after           { content: "\10f64f"; }
.fad.fa-user:after           { content: "\10f007"; }
.fad.fa-phone:after          { content: "\10f095"; }
.fad.fa-envelope:after       { content: "\10f0e0"; }
.fad.fa-chevron-down:after   { content: "\10f078"; }
.fad.fa-mobile-alt:after     { content: "\10f3cd"; }
.fad.fa-user-edit:after      { content: "\10f4ff"; }
.fad.fa-paper-plane:after    { content: "\10f1d8"; }
.fad.fa-qrcode:after         { content: "\10f029"; }
.fad.fa-pen:after            { content: "\10f304"; }
.fad.fa-times:after          { content: "\10f00d"; }
.fad.fa-times-circle:after   { content: "\10f057"; }
.fad.fa-check:after          { content: "\10f00c"; }
.fad.fa-check-double:after   { content: "\10f560"; }
.fad.fa-plus:after           { content: "\10f067"; }
.fad.fa-layer-plus:after     { content: "\10f5ff"; }
.fad.fa-lightbulb-on:after   { content: "\10f672"; }
.fad.fa-shield-check:after   { content: "\10f2f7"; }
.fad.fa-credit-card:after    { content: "\10f09d"; }
.fad.fa-check-circle:after   { content: "\10f058"; }
.fad.fa-exclamation-circle:after { content: "\10f06a"; }
.fad.fa-info-circle:after    { content: "\10f05a"; }
.fad.fa-bullhorn:after       { content: "\10f0a1"; }

/* RTL: стрелка «Детали» отзеркаливается. Меняем оба слоя duotone. */
[dir="rtl"] .orders-table--clean .orders-table__action--details i.fas.fa-arrow-right:before,
[dir="rtl"] .orders-table--clean .orders-table__action--details i.fad.fa-arrow-right:before {
    content: "\f060";
}
[dir="rtl"] .orders-table--clean .orders-table__action--details i.fad.fa-arrow-right:after {
    content: "\10f060";
}

/* ============================================================
   Order change-confirm page (новый дизайн в стиле дашборда)
   Шапка → hero → инфо-блок «нажатие ≠ возврат» → сравнение «Было / Стало»
   → две CTA-карточки → сводка по заказу. См. orders/change_confirm.html.
   ============================================================ */

.ochange-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Hero ----------
   Страница подтверждения изменений переиспользует hero-«билет» с деталей
   заказа (`.odetails-hero`). Кастомизируется только акцент-полоса —
   жёлтая вместо синей, как сигнал «требуется решение пользователя». */

/* Модификатор `.odetails-hero--warning`: жёлтой остаётся только
   акцент-полоса слева, фон плашки — обычный белый (как у деталей). */
.odetails-hero.odetails-hero--warning {
    border-inline-start-color: var(--color-warning);
    background: var(--color-surface);
}

/* Модификатор `.odetails-hero--muted`: нейтральный серый акцент без
   цветного градиента. На странице отмены заказа красный оставлен только
   за зоной и кнопкой отмены, поэтому hero держим спокойным. */
.odetails-hero.odetails-hero--muted {
    border-inline-start-color: var(--color-border-strong);
}

/* Строка «новая дата + метка изменения» — только на change-confirm.
   Без заливки-плашки: дата выводится цельным цветом, а сам факт правки
   обозначает компактный лейбл `.ui-label`. */
.odetails-hero__date-changed {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.35;
}

.odetails-hero__date-changed i.fad {
    color: var(--color-text-muted);
    font-size: 17px;
}

.odetails-hero__date-changed-value {
    font-weight: 700;
    color: var(--color-text);
    align-self: end;
}

/* Бейдж «Изменена» рядом с датой в meta. */
.odetails-hero__meta .odetails-hero__date-changed-label {
    margin-inline-start: 8px;
    vertical-align: middle;
}

/* Кнопки решения в корешке hero (change-confirm): справа от итого. */
.odetails-hero__decision-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-inline-start: auto;
}

.odetails-hero__decision-form {
    margin: 0;
}

.odetails-hero__decision-support {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    color: var(--color-text);
}

.odetails-hero__decision-support i {
    color: var(--color-info);
    font-size: 19px;
}

/* Старый decision-блок с собственной перфорацией — больше не используем. */
.odetails-hero__decision {
    display: none;
}

@media (max-width: 640px) {
    .odetails-hero__decision-btns {
        width: 100%;
        margin-inline-start: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .odetails-hero__decision-form {
        width: 100%;
    }

    .odetails-hero__decision-btns .odetails-action {
        width: 100%;
        justify-content: center;
    }

    .odetails-hero__decision-support {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Информационный блок «нажатие ≠ возврат» ---------- */
.ochange-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: var(--color-info-bg-subtle, rgba(13, 110, 253, 0.08));
    border: 1px solid var(--color-info, #0d6efd);
    color: var(--color-heading);
}

.ochange-info__icon {
    color: var(--color-info, #0d6efd);
    font-size: 23px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.ochange-info p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- Сравнение сеансов: «было / стало» ---------- */
.ochange-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 720px) {
    .ochange-compare {
        grid-template-columns: 1fr;
    }
    .ochange-compare__arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}

.ochange-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 22px 24px;
}

.ochange-card--was {
    border-color: color-mix(in srgb, var(--color-text-muted) 30%, transparent);
    background: var(--color-surface-muted);
}

.ochange-card--now {
    border-color: var(--color-warning, #ff9900);
    box-shadow: 0 0 0 1px var(--color-warning, #ff9900) inset, var(--shadow-card);
}

.ochange-card__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-soft);
}

.ochange-card--now .ochange-card__label {
    color: var(--color-warning-text-emphasis, #b88500);
    background: var(--color-warning-bg-subtle, rgba(245, 196, 0, 0.18));
    border-color: var(--color-warning, #ff9900);
}

.ochange-card__title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-heading);
}

.ochange-card--was .ochange-card__title {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.ochange-card__meta {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ochange-card__meta i {
    color: var(--color-placeholder);
}

.ochange-card--now .ochange-card__meta i {
    color: var(--color-warning, #ff9900);
}

.ochange-compare__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: var(--color-warning, #ff9900);
}

/* ---------- Что делать?: две альтернативы (CTA) с разделителем «или» ----------
   Раскладка: при двух кнопках — `1fr · auto · 1fr`, чтобы карточки оказались
   симметричными верхнему сравнению «Было / Стало». При одной карточке
   падает в стандартный auto-fit grid. */
.ochange-decision {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.ochange-decision--paired {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
}

/* Разделитель «или» между двумя CTA: вертикальная пунктирная линия со
   светлым плашко-текстом по центру, чтобы было понятно, что это альтернатива,
   а не последовательность. */
.ochange-decision__divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
}

.ochange-decision__divider::before {
    content: '';
    position: absolute;
    inset-block: 12px;
    inset-inline-start: 50%;
    width: 0;
    border-inline-start: 1px dashed var(--color-border);
}

.ochange-decision__divider-text {
    position: relative;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

@media (max-width: 720px) {
    .ochange-decision--paired {
        grid-template-columns: 1fr;
    }
    .ochange-decision__divider {
        min-height: 28px;
    }
    /* На мобильном разделитель становится горизонтальной полосой. */
    .ochange-decision__divider::before {
        inset-block: 50%;
        inset-inline: 12px;
        width: auto;
        height: 0;
        border-inline-start: 0;
        border-top: 1px dashed var(--color-border);
    }
    /* Карточки сложились в столбец — CTA растягиваем на всю ширину. */
    .ochange-action__cta {
        width: 100%;
    }
    .ochange-action__cta .btn,
    a.ochange-action__cta {
        width: 100%;
        justify-content: center;
    }
}

.ochange-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.ochange-action__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ochange-action__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.ochange-action--accept .ochange-action__icon {
    background: var(--color-success-bg-subtle, rgba(80, 205, 137, 0.18));
    color: var(--color-success-text-emphasis, #2f9762);
}

.ochange-action--refund .ochange-action__icon {
    background: var(--color-danger-bg-subtle, rgba(241, 65, 108, 0.14));
    color: var(--color-danger-text-emphasis, #d4380d);
}

.ochange-action--support .ochange-action__icon {
    background: var(--color-info-bg-subtle, rgba(13, 110, 253, 0.08));
    color: var(--color-info, #0d6efd);
}

.ochange-action__title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
}

.ochange-action__text {
    margin: 0;
    font-size: 16px !important;
    color: var(--color-text);
    line-height: 1.45;
}

.ochange-action__cta {
    margin-top: auto;
    align-self: flex-start;
}

/* ---------- Сводка по заказу (вертикальный столбец строк label / value) ----------
   В отличие от предыдущего grid-варианта здесь сознательно один столбец:
   каждая строка — отдельная пара «название поля → значение», разделена
   тонким пунктиром. Сделано так, чтобы реквизиты «читались сверху вниз»,
   как лента деталей билета. */
.ochange-summary {
    padding: 20px 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.ochange-summary__heading {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
    text-transform: none;
}

.ochange-summary__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.ochange-summary__item {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 4px 18px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-border-soft);
}

.ochange-summary__item:last-child {
    border-bottom: 0;
}

.ochange-summary__label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}

.ochange-summary__value {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-heading);
    word-break: break-word;
    align-self: center;
}

@media (max-width: 560px) {
    /* Узкий экран: складываем label/value в две строки, label сверху. */
    .ochange-summary__item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ============================================================
   Order details page (новый дизайн в стиле дашборда)
   ============================================================ */

.odetails-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.odetails-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main order"
        "body body"
        "foot foot";
    gap: 16px 24px;
    padding: 24px 32px 24px 28px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border-inline-start: 4px solid var(--color-primary);
    overflow: visible;
    box-sizing: border-box;
}

/* Билет-стайл: полукруги по бокам — по вертикали в середине «тела» билета,
   не привязаны к пунктирной перфорации корешка.
   Позиция и бордер — через logical properties, иначе в RTL «дырки»
   вылезают наружу (бордер оказывается с внешней стороны круга). */
.odetails-hero::before,
.odetails-hero::after {
    content: "";
    position: absolute;
    top: 42%;
    width: 22px;
    height: 22px;
    background: var(--color-page-bg);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
    box-sizing: border-box;
}

.odetails-hero::before {
    inset-inline-start: -11px;
    border-inline-end: 2px solid color-mix(in srgb, #5f6d7e 55%, transparent);
}

.odetails-hero::after {
    inset-inline-end: -11px;
    border-inline-start: 2px solid color-mix(in srgb, #5f6d7e 55%, transparent);
}

/* Без корешка насечки всё равно оставляем — это форма билета. */

.odetails-hero__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.odetails-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 8px;
}

.odetails-hero__title-row .ui-label {
    flex: 0 0 auto;
    align-self: center;
}

.odetails-hero__title {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
    word-break: break-word;
}

.odetails-hero__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 17px;
    color: var(--color-text-muted);
}

p.odetails-hero__meta {
    font-size: 17px !important;
}

.odetails-hero__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.odetails-hero__meta i.fad {
    color: var(--color-text-muted);
    font-size: 17px;
}

/* Список билетов слева + купонные кнопки справа по краю карточки. */
.odetails-hero__body {
    grid-area: body;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 0;
    width: 100%;
    min-width: 0;
}

.odetails-hero__order-id {
    grid-area: order;
    justify-self: end;
    align-self: start;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-text);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* מס׳ — иврит, не чёрное начертание цифр номера. */
.odetails-hero__order-mark {
    font-weight: 700;
    letter-spacing: 0;
}

.odetails-hero__side-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
    gap: 8px;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    margin-inline-start: auto;
    box-sizing: border-box;
}

.odetails-hero__side-actions .odetails-action,
.odetails-hero__side-actions .action-dropdown-toggle {
    display: inline-flex;
    width: 100%;
    justify-content: flex-start;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Шеврон у правого края кнопки, а не вплотную к тексту. */
.odetails-hero__side-actions .action-dropdown-toggle .odetails-action__chevron {
    margin-inline-start: auto;
    padding-inline-start: 12px;
}

.odetails-hero__side-actions .odetails-action-dropdown {
    width: 100%;
    position: relative;
}

.odetails-hero__side-actions .odetails-action-dropdown[open] {
    z-index: 40;
}

.odetails-hero__sum {
    font-size: 27px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.odetails-hero__sum small {
    margin-inline-start: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.odetails-hero__sum .money-amount--symbol small,
.odetails-payment__total-value .money-amount--symbol small,
.ocancel-receipt__amount-value .money-amount--symbol small {
    margin-inline-start: 0;
    margin-inline-end: 4px;
}

.money-amount--symbol {
    unicode-bidi: isolate;
}

/* QR под списком мест — success, чтобы отличать от синих купонных кнопок. */
.odetails-hero__qr {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--color-success-bg-subtle);
    border: 1px solid var(--color-success-border-subtle);
    color: var(--color-success-text-emphasis);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.odetails-hero__qr:hover,
.odetails-hero__qr:focus-visible {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
    text-decoration: none;
}

.odetails-hero__qr:hover i.fad,
.odetails-hero__qr:focus-visible i.fad,
.odetails-hero__qr:hover .odetails-hero__qr-label,
.odetails-hero__qr:focus-visible .odetails-hero__qr-label {
    color: var(--color-white);
}

.odetails-hero__qr i.fad {
    font-size: 19px;
    color: var(--color-success);
}

.odetails-hero__qr-label {
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-success-text-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.odetails-hero__tickets-cta .odetails-hero__qr {
    margin-top: 0;
}

.odetails-hero__tickets-hint {
    margin: 0;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.odetails-hero__tickets-when {
    display: inline;
    margin: 0;
    margin-inline-start: 0.35em;
    color: var(--color-text);
    font-weight: 500;
}

/* Места — на белом фоне, без синей плашки и пунктирной рамки. */
.odetails-hero__tickets {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    color: var(--color-text);
}

.odetails-hero__tickets-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    width: fit-content;
    max-width: 100%;
}

.odetails-hero__tickets-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}

.odetails-hero__tickets-item i.fad {
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.9;
}

.odetails-hero__tickets-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.01em;
}

.odetails-hero__tickets-summary {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    word-break: break-word;
}

/* Корешок: итого слева, отмена справа. */
.odetails-hero__actions {
    grid-area: foot;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-top: 12px;
    padding-top: 22px;
    border-top: 2px dashed var(--color-border);
}

.odetails-hero__total {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px 10px;
    min-width: 0;
    text-align: start;
}

.odetails-hero__total-label {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.odetails-hero__total-tickets {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
}

.odetails-hero__total-sep {
    color: var(--color-text-muted);
    font-weight: 500;
}

.odetails-hero__cancel {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* ----- Жёлтая плашка «сеанс изменён» на странице деталей -----
   Слева: заголовок, «старая → новая», подсказка.
   Справа: кнопки принять / отменить (по ширине контента). */
.odetails-change-alert {
    position: relative;
    height: auto;
    overflow: visible;
}

/* Белый фон и жёлтая кромка. Общий warning-фон почти белый и гасит текст. */
.odetails-change-alert.alert-surface--warning {
    background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
    border-color: var(--color-warning, #ff9900);
    border-inline-start: 6px solid var(--color-warning, #ff9900);
    color: var(--color-text);
}

.odetails-change-alert.alert-surface--warning .odetails-change-alert__title,
.odetails-change-alert.alert-surface--warning .alert-surface__text {
    color: var(--color-text);
}

.odetails-change-alert.alert-surface--warning .alert-surface__text {
    font-size: 16px;
    line-height: 1.45;
}

.odetails-change-alert__title {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}

.odetails-change-alert__title::first-letter {
    text-transform: uppercase;
}

.odetails-change-alert .alert-surface__content {
    padding-inline-end: 0;
}

.odetails-change-alert__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
}

.odetails-change-alert__main {
    flex: 1 1 14rem;
    min-width: 0;
}

.odetails-change-alert__diff {
    margin: 0 0 10px;
    padding: 6px 12px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #252218;
    background: #ff990066;
    border-radius: 8px;
}

.odetails-change-alert__old {
    color: var(--color-text-muted);
    text-decoration: none;
}

.odetails-change-alert__arrow {
    font-size: 16px;
    color: #252218;
    --fa-primary-color: #252218;
    --fa-secondary-color: #252218;
    line-height: 1;
}

/* На иврите «было» справа, «стало» слева — стрелка смотрит на новое. */
[dir="rtl"] .odetails-change-alert__arrow.fas.fa-arrow-right:before,
[dir="rtl"] .odetails-change-alert__arrow.fad.fa-arrow-right:before {
    content: "\f060";
}
[dir="rtl"] .odetails-change-alert__arrow.fad.fa-arrow-right:after {
    content: "\10f060";
}

.odetails-change-alert__new {
    color: #252218;
    font-size: 16px;
    font-weight: 800;
}

.odetails-change-alert__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
    flex: 0 1 18rem;
    min-width: 0;
    max-width: 100%;
    width: min(18rem, 100%);
    box-sizing: border-box;
}

.odetails-change-alert__form {
    display: flex;
    margin: 0;
    width: 100%;
    min-width: 0;
}

.odetails-change-alert__btn {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 720px) {
    /* Щит ::before по top:50% «висит» в пустоте при колонке текст+кнопка. */
    .odetails-change-alert.alert-surface:not(.alert-surface--with-ki)::before {
        top: 16px;
        transform: none;
    }

    .odetails-change-alert {
        padding-top: 14px;
        padding-bottom: 14px;
        height: auto;
        min-height: 0;
    }

    .odetails-change-alert__layout {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        height: auto;
        min-height: 0;
    }

    /* flex-basis: 14rem в колонке раздувает блок текста до ~224px. */
    .odetails-change-alert__main {
        flex: 0 1 auto;
    }

    .odetails-change-alert__actions {
        justify-content: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .odetails-change-alert__form,
    .odetails-change-alert__btn {
        width: 100%;
        max-width: none;
    }
}

/* ----- Красная плашка «сеанс отменён» (ToCancel=5) ----- */
.odetails-session-cancelled .alert-surface__title,
.odetails-session-cancelled .alert-surface__text {
    color: var(--color-danger);
}

.odetails-session-cancelled__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
}

.odetails-session-cancelled__main {
    flex: 1 1 14rem;
    min-width: 0;
}

.odetails-session-cancelled__actions {
    display: flex;
    flex: 0 1 auto;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    /* Щит ::before по top:50% «висит» в пустоте, когда текст и кнопка в колонку. */
    .odetails-session-cancelled.alert-surface:not(.alert-surface--with-ki)::before {
        top: 16px;
        transform: none;
    }

    .odetails-session-cancelled {
        padding-top: 14px;
        padding-bottom: 14px;
        height: auto;
        min-height: 0;
    }

    .odetails-session-cancelled__layout {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        height: auto;
        min-height: 0;
    }

    /* flex-basis: 14rem в колонке раздувает блок текста до ~224px — отсюда «дыра». */
    .odetails-session-cancelled__main {
        flex: 0 1 auto;
    }

    .odetails-session-cancelled__actions {
        justify-content: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .odetails-session-cancelled__btn {
        width: 100%;
        max-width: none;
    }
}

.odetails-action__chevron {
    margin-inline-start: 4px;
    font-size: 12px !important;
    opacity: 0.75;
}

/* Без rotate: при open меняем глиф на chevron-up на месте. */
.odetails-action-dropdown[open] .odetails-action__chevron::before,
.odetails-card__action-dropdown[open] .odetails-action__chevron::before {
    content: "\f077";
}

/* Скрываем дефолтный треугольник <summary> */
.odetails-action-dropdown > summary {
    list-style: none;
}

.odetails-action-dropdown > summary::-webkit-details-marker {
    display: none;
}

/* Меню dropdown'а действий */
.odetails-action-dropdown {
    position: relative;
}

/* Универсальные стили выпадающего меню любого `.action-dropdown` —
   и в hero, и в шапках карточек. Раньше правило висело только на
   `.odetails-action-dropdown` и поэтому в карточках (`.odetails-card__action-dropdown`)
   меню вываливалось в поток вместо overlay. */
.action-dropdown > .action-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 1000;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Hero: купонный popover открывается влево — правый край = правый край кнопки.
   Специфичность выше `.action-dropdown > .action-dropdown-menu`, иначе
   `inset-inline-start: 0` выталкивает меню за край экрана. */
.odetails-hero__side-actions .action-dropdown > .action-dropdown-menu.coupon-popover {
    inset-inline-start: auto;
    inset-inline-end: 0;
    left: auto;
    right: 0;
    width: min(320px, calc(100vw - 48px));
    min-width: 0;
    max-width: min(320px, calc(100vw - 48px));
    box-sizing: border-box;
}

[dir="rtl"] .odetails-hero__side-actions .action-dropdown > .action-dropdown-menu.coupon-popover {
    left: 0;
    right: auto;
}

.action-dropdown > .action-dropdown-menu form {
    margin: 0;
}

.odetails-dropdown-item {
    align-items: center;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
}

.odetails-dropdown-item i.fad {
    color: var(--color-text-muted);
    font-size: 15px;
}

.odetails-dropdown-item:hover,
.odetails-dropdown-item:focus-visible {
    background: var(--color-surface-hover);
}

.coupon-popover {
    padding: 14px !important;
    gap: 10px !important;
    box-sizing: border-box;
}

/* Шапка popover-а: лэйбл «Язык купона» + pill-toggle. */
.coupon-popover__lang-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.coupon-popover__lang-label {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Pill-toggle языка — цветной вариант: активная кнопка primary с белым текстом. */
.coupon-popover__lang {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.coupon-popover__lang-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 12px;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.coupon-popover__lang-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.coupon-popover__lang-btn.is-active {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* --- Маршрут (email или телефон): без рамки/фона, только внутренние элементы. --- */
.coupon-popover__channel {
    display: block;
    width: 100%;
    margin: 0;
}

/* Input-group: иконка-аффикс + инпут + submit-кнопка в одной плашке. */
.coupon-popover__group {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.coupon-popover__group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Левый аффикс с иконкой канала. */
.coupon-popover__contact-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 10px;
    color: var(--color-text-muted);
    font-size: 17px;
}

.coupon-popover__contact-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    appearance: none;
    border: 0 !important;
    box-shadow: none;
    background: transparent;
}

.coupon-popover__contact-input:focus,
.coupon-popover__contact-input:focus-visible {
    border: 0;
    box-shadow: none;
    outline: none;
}

/* Правая submit-кнопка, приклеенная к инпуту. Без вертикальной линии —
   отделена от инпута только цветным фоном. */
.coupon-popover__send {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    min-inline-size: 44px;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.coupon-popover__send:hover,
.coupon-popover__send:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
    outline: none;
}

/* Разделитель между каналами купона больше не используем. */

/* KPI strip — переиспользует .kpi-card из дашборда */
.odetails-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Сетка для трёх карточек: сеанс / оплата / получатель */
.odetails-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

@media (max-width: 1024px) {
    .odetails-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Базовая карточка с заголовком */
.odetails-card {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 22px 24px;
}

/* Карточка с открытым dropdown'ом поднимается над соседями по сетке,
   чтобы её всплывающее меню не перекрывалось box-shadow соседних карточек. */
.odetails-card:has(.odetails-card__action-dropdown[open]) {
    z-index: 50;
}

/* Внутри узких колонок списки сворачиваем в одну колонку,
   чтобы лейблы/значения не ломались по две штуки в строке. */
.odetails-cards-grid .odetails-list {
    grid-template-columns: 1fr;
}

.odetails-card__title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

/* Шапка карточки: слева иконка + заголовок, справа — кнопка действия.
   Wrap разрешён: подсказка в кнопке важнее однострочности. */
.odetails-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.odetails-card__heading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.odetails-card__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    border-radius: 10px;
    font-size: 17px;
}

/* Цветовые акценты карточек: сеанс — primary blue, получатель — info purple,
   оплата — success green. Цвет применяется и к фону-«плашке», и к иконке. */
.odetails-card__icon--session {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
}

.odetails-card__icon--recipient {
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    color: var(--color-info);
}

.odetails-card__icon--payment {
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
    color: var(--color-success);
}

.odetails-card__icon i.fad {
    font-size: 23px;
}

.odetails-card__header .odetails-card__title {
    margin: 0;
}

/* Компактная «ghost»-кнопка в шапке карточки. */
.odetails-card__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.odetails-card__action-btn:hover,
.odetails-card__action-btn:focus-visible {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
}

.odetails-card__action-btn i.fad,
.odetails-card__action-btn .ki-duotone {
    font-size: 14px;
}

/* Цветные варианты action-кнопок в шапке карточек: подсветка под цвет иконки.
   Используют subtle-фон + насыщенный текст (Metronic 8 «btn-light-*»),
   на hover/focus превращаются в solid. */
.odetails-card__action-btn--session,
.odetails-card__action-btn--recipient,
.odetails-card__action-btn--payment {
    border-color: transparent;
    text-shadow: none;
}

.odetails-card__action-btn--session {
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary-text-emphasis);
    /* Заголовок + подпись «Waze или Google Maps» в две строки. */
    white-space: normal;
    align-items: center;
}
.odetails-card__action-btn--session:hover,
.odetails-card__action-btn--session:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.odetails-card__action-btn--recipient {
    background: var(--color-info-bg-subtle);
    color: var(--color-info-text-emphasis);
}
.odetails-card__action-btn--recipient:hover,
.odetails-card__action-btn--recipient:focus-visible {
    background: var(--color-info);
    color: var(--color-white);
    border-color: var(--color-info);
}

.odetails-card__action-btn--payment {
    background: var(--color-success-bg-subtle);
    color: var(--color-success-text-emphasis);
    /* Заголовок + подпись «отправка Tel/Email» в две строки. */
    white-space: normal;
    align-items: center;
}
.odetails-card__action-btn--payment:hover,
.odetails-card__action-btn--payment:focus-visible {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

.odetails-card__action-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    line-height: 1.15;
}

.odetails-card__action-title {
    font-size: 14px;
    font-weight: 600;
}

.odetails-card__action-hint {
    display: block;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.78;
    white-space: normal;
}

/* В открытом dropdown'е триггер остаётся «солидным» — чтобы видно было,
   что меню активно. */
.odetails-card__action-dropdown[open] > .odetails-card__action-btn--session {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.odetails-card__action-dropdown[open] > .odetails-card__action-btn--recipient {
    background: var(--color-info);
    color: var(--color-white);
    border-color: var(--color-info);
}
.odetails-card__action-dropdown[open] > .odetails-card__action-btn--payment {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

/* Дропдаун-обёртка в шапке: не сжимаем — иначе пропадает вторая строка-подсказка. */
.odetails-card__action-dropdown {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
}

.odetails-card__action-btn {
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 1024px) {
    .odetails-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .odetails-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Открытый dropdown сам по себе тоже выходит над соседями — это страховка
   на случай, если родитель `.odetails-card` (через `:has()`) не подхватил
   подсветку (старые движки или сложные RTL-кейсы). */
.odetails-card__action-dropdown[open] {
    z-index: 50;
}

.odetails-card__action-dropdown > summary {
    list-style: none;
}

.odetails-card__action-dropdown > summary::-webkit-details-marker {
    display: none;
}

.odetails-card__action-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* Список «иконка + лейбл + значение» */
.odetails-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 24px;
}

.odetails-list__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* Иконки внутри списка карточки — компактные и серые,
   чтобы не конкурировать с акцентной иконкой в шапке карточки. */
.odetails-list__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.odetails-list__icon i.fad {
    font-size: 14px;
    color: var(--color-text-muted);
}

.odetails-recipient__row[data-field="phone"] .fa-phone {
    transform: scaleX(-1);
}

.odetails-list__label {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.odetails-list__value {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    word-break: break-word;
}

.odetails-list__value a {
    color: var(--color-primary);
    text-decoration: none;
}

.odetails-list__value a:hover {
    text-decoration: underline;
}

.odetails-list__value.mono {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 15px;
}

/* Раздел «Оплата» — крупный итог + разбивка по строкам */
.odetails-payment__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.odetails-payment__total-label {
    /* Совпадает с `.odetails-list__label` — единый стиль «вторичной» метки. */
    font-size: 13px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.odetails-payment__total-value {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-text);
}

.odetails-payment__total-value small {
    margin-inline-start: 4px;
    /* Валюта рядом с акцентной суммой — приглушённая, в одну градацию с label. */
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.odetails-payment__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.odetails-payment__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    /* Та же градация шрифтов, что и в `.odetails-list__value` / `__label`:
       значение справа — 14px/500, ярлык слева — 14px/muted. */
    font-size: 15px;
    color: var(--color-text);
}

.odetails-payment__row > span:first-child {
    color: var(--color-text-muted);
}

.odetails-payment__row > span:last-child {
    font-weight: 500;
    color: var(--color-text);
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    .odetails-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "order"
            "main"
            "body"
            "foot";
        padding: 20px 18px;
    }

    .odetails-hero__order-id {
        justify-self: start;
        margin-bottom: 2px;
    }

    [dir="rtl"] .odetails-hero__order-id {
        justify-self: end;
    }

    .odetails-hero__body {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .odetails-hero__side-actions {
        width: 100%;
        max-width: none;
        margin-inline-start: 0;
    }

    .odetails-hero__side-actions .odetails-action,
    .odetails-hero__side-actions .action-dropdown-toggle {
        justify-content: center;
    }

    .odetails-hero__side-actions .action-dropdown-toggle .odetails-action__chevron {
        margin-inline-start: 8px;
        padding-inline-start: 0;
    }

    .odetails-hero__tickets {
        align-self: stretch;
        width: 100%;
        align-items: stretch;
    }

    .odetails-hero__qr {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        justify-content: center;
    }

    .odetails-hero__side-actions .action-dropdown > .action-dropdown-menu.coupon-popover {
        inset-inline-start: 0;
        inset-inline-end: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
    }

    .odetails-hero__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .odetails-hero__total {
        justify-content: flex-start;
        width: auto;
    }

    .odetails-hero__cancel {
        width: 100%;
        justify-content: center;
        margin-inline-start: 0;
    }

    .odetails-hero__title {
        font-size: 21px;
    }

    .odetails-card {
        padding: 18px 16px;
    }

    .odetails-list {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Per-row inline-редактирование карточки получателя на странице деталей.
   В шапке строки лежат лейбл и одна toggle-кнопка с двумя иконками
   (✎ Изменить / ✕ Закрыть): иконки тогглятся по data-row-mode. В edit
   виден инпут с предзаполненным текущим значением и приклеенная справа
   кнопка «Сохранить». Шаг OTP (phone/email) раскрывается ниже. */
.odetails-recipient__row[data-row-mode="view"] [data-edit] {
    display: none !important;
}

.odetails-recipient__row[data-row-mode="edit"] [data-view] {
    display: none !important;
}

/* Двухшаговый стэппер внутри edit: видна либо input-форма (data-row-stage="input"
   или ещё не выставлен — фаза по умолчанию), либо OTP-плашка (data-row-stage="otp"). */
.odetails-recipient__row[data-row-stage="otp"] [data-input-form] {
    display: none !important;
}

.odetails-recipient__row:not([data-row-stage="otp"]) [data-otp] {
    display: none !important;
}

.odetails-recipient__cell {
    min-width: 0;
    flex: 1;
}

/* Шапка строки: лейбл + ✎/✕ inline сразу после лейбла, без растягивания
   по правому краю — чтобы высота шапки совпадала со строками без кнопки
   (например, «Теудат зеут») и с соседней карточкой «Сеанс и место». */
.odetails-recipient__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.odetails-recipient__head > .odetails-list__label {
    flex: 0 0 auto;
    min-width: 0;
}

/* Inline-кнопка-иконка без фона и бордера: высота строки определяется
   высотой лейбла, ничего не «толкает». В view — ✎, в edit — ✕. */
.odetails-recipient__toggle-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}

.odetails-recipient__toggle-btn > i {
    font-size: 13px;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.45;
}

.odetails-recipient__toggle-btn:hover,
.odetails-recipient__toggle-btn:focus-visible {
    color: var(--color-info);
    outline: 0;
}

.odetails-recipient__row[data-row-mode="view"] [data-icon-cancel] { display: none; }
.odetails-recipient__row[data-row-mode="edit"] [data-icon-edit] { display: none; }

.odetails-recipient__row[data-row-mode="edit"] .odetails-recipient__toggle-btn {
    color: var(--color-info);
}

.odetails-recipient__edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

/* Inline-строка с инпутом и приклеенной справа кнопкой «Сохранить». */
.odetails-recipient__row-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.odetails-recipient__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-body-bg);
    color: var(--color-body-color);
    font: inherit;
    font-size: 15px;
}

.odetails-recipient__input:focus {
    outline: 0;
    border-color: var(--focus-ring-color);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-shadow);
}

.odetails-recipient__input--code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

/* Компактная мини-кнопка «Сохранить»/«Подтвердить» — стиль как у
   `.btn-light-primary`, чтобы попадать в общую палитру. */
.odetails-recipient__row-save {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-info-bg-subtle);
    color: var(--color-info-text-emphasis);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.odetails-recipient__row-save > i {
    font-size: 13px;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.5;
}

.odetails-recipient__row-save:hover,
.odetails-recipient__row-save:focus-visible {
    background: var(--color-info);
    color: var(--color-white);
    border-color: var(--color-info);
    outline: 0;
}

.odetails-recipient__row-save[disabled] {
    opacity: 0.55;
    cursor: progress;
}

/* Иконочный вариант кнопки «Сохранить» — без текста, квадратный квадрат
   c той же высотой 32px (для «прицепления» к инпуту в row-form). */
.odetails-recipient__row-save--icon {
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    gap: 0;
}

.odetails-recipient__otp {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px dashed var(--color-info-border-subtle, var(--color-info));
    border-radius: var(--radius-sm);
    background: var(--color-info-bg-subtle);
}

.odetails-recipient__hint {
    margin: 0;
    font-size: 13px;
    color: var(--color-info-text-emphasis);
}

.odetails-recipient__msg {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.odetails-recipient__msg[data-tone="error"] {
    color: var(--color-danger-text-emphasis);
}

.odetails-recipient__msg[data-tone="success"] {
    color: var(--color-success-text-emphasis);
}

/* ============================================================
   Order cancel page (новый дизайн)
   Контекст-баннер → карточка варианта возврата (receipt + форма)
   → встроенный confirm-блок с финальной кнопкой. См. orders/cancel.html.
   ============================================================ */

.ocancel-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ---------- Контекстный баннер ---------- */
.ocancel-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.ocancel-banner__ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 41px;
    line-height: 1;
}
.ocancel-banner__title {
    margin: 0 0 6px;
    font-size: 21px !important;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}
.ocancel-banner__text {
    margin: 0;
    font-size: 16px !important;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.45;
}
.ocancel-banner--warning {
    background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
    border-color: var(--color-warning);
    border-inline-start: 6px solid var(--color-warning);
}
.ocancel-banner--warning .ocancel-banner__ico {
    color: var(--color-warning);
    --fa-primary-color: var(--color-warning);
    --fa-secondary-color: var(--color-warning);
}
.ocancel-banner--danger {
    background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
    border-color: var(--color-danger);
    border-inline-start: 6px solid var(--color-danger);
}
.ocancel-banner--danger .ocancel-banner__ico {
    color: var(--color-danger);
    --fa-primary-color: var(--color-danger);
    --fa-secondary-color: var(--color-danger);
}
.ocancel-banner--danger .ocancel-banner__title,
.ocancel-banner--danger .ocancel-banner__text {
    color: var(--color-danger);
}
.ocancel-banner--info {
    background: color-mix(in srgb, var(--color-info) 6%, var(--color-surface));
    border-color: var(--color-info);
    border-inline-start: 6px solid var(--color-info);
}
.ocancel-banner--info .ocancel-banner__ico {
    color: var(--color-info);
    --fa-primary-color: var(--color-info);
    --fa-secondary-color: var(--color-info);
}
.ocancel-banner--success {
    background: color-mix(in srgb, var(--color-success) 6%, var(--color-surface));
    border-color: var(--color-success);
    border-inline-start: 6px solid var(--color-success);
}
.ocancel-banner--success .ocancel-banner__ico {
    color: var(--color-success);
    --fa-primary-color: var(--color-success);
    --fa-secondary-color: var(--color-success);
}

/* ---------- Сетка вариантов возврата ----------
   Карта и зикуй встают в один ряд по половине ширины. Одиночная карточка
   (auto-fit) занимает всю строку. align-items: start — карточки сохраняют
   собственную высоту, не растягиваясь под более высокую (зикуй с формой). */
.ocancel-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    align-items: start;
}
/* «Зикуй» показываем первым в ряду, не меняя порядок в разметке. */
.ocancel-card--lead { order: -1; }

/* ---------- Карточка варианта возврата ---------- */
.ocancel-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-soft);
    padding: 22px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ocancel-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.ocancel-card__title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
}
.ocancel-card__hint {
    margin: 0;
    font-size: 16px !important;
    color: var(--color-text);
    line-height: 1.45;
}

/* ---------- Receipt (главный «к возврату») ---------- */
.ocancel-receipt {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 20px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)) 0%,
        var(--color-surface) 60%
    );
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}
.ocancel-receipt__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
}
/* Широкая плашка: сумма слева, «куда» справа. Узкая (≤540px контейнера,
   напр. 530px вьюпорт или карточка в двухколоночной сетке) — столбиком,
   блок назначения на всю ширину, без съезда при flex-wrap. */
@container (min-width: 541px) {
    .ocancel-receipt__hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}
.ocancel-receipt__amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ocancel-receipt__amount-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.ocancel-receipt__amount-value {
    font-size: 33px;
    font-weight: 700;
    color: var(--color-heading);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ocancel-receipt__amount-value small {
    font-size: 19px;
    font-weight: 600;
    margin-inline-start: 4px;
    color: var(--color-text-muted);
}
.ocancel-receipt__dest {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
}
@container (min-width: 541px) {
    .ocancel-receipt__dest {
        width: auto;
    }
}
.ocancel-receipt__dest-ico {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    color: var(--color-info);
}
.ocancel-receipt__dest--zikuy .ocancel-receipt__dest-ico {
    background: color-mix(in srgb, #298e7c 14%, transparent);
    color: #298e7c;
}
.ocancel-receipt__dest-body {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.ocancel-receipt__dest-label {
    font-size: 13px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ocancel-receipt__dest-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
}
.ocancel-receipt__breakdown {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    column-gap: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border);
}
.ocancel-receipt__breakdown > div { display: contents; }
.ocancel-receipt__breakdown dt {
    color: var(--color-text-muted);
    font-size: 14px;
}
.ocancel-receipt__breakdown dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    color: var(--color-body-color);
}
.ocancel-receipt__breakdown dd.is-negative { color: var(--color-danger); }
.ocancel-receipt__breakdown dd.is-positive { color: var(--color-success); }

/* ---------- Список заметок (зикуй, бонусы и т.п.) ---------- */
.ocancel-notes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ocancel-notes li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--color-body-color);
}
.ocancel-notes li i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ---------- Форма зикуя ---------- */
.ocancel-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ocancel-form__label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-muted);
}
.ocancel-form__input,
.ocancel-form__select {
    height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 16px;
    color: var(--color-body-color);
    background: var(--color-body-bg);
}
/* Селекты дня/месяца/года прижимаем влево по ширине контента, без
   растягивания на всю строку. */
.ocancel-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ocancel-form__row .ocancel-form__select {
    flex: 0 0 auto;
    width: auto;
    min-width: 96px;
}

/* ---------- Контакт поддержки ---------- */
.ocancel-support {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-info) 28%, transparent);
}
.ocancel-support__ico {
    inline-size: 56px;
    block-size: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    color: var(--color-info);
}
.ocancel-support__phones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 8px;
}
.ocancel-support__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
    color: var(--color-info);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}
.ocancel-support__phone i { font-size: 14px; }
.ocancel-support__schedule {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Confirm-блок («опасная зона») ---------- */
.ocancel-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    padding: 18px 22px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
    background: color-mix(in srgb, var(--color-danger) 5%, var(--color-surface));
}
.ocancel-confirm__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ocancel-confirm__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-danger);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ocancel-confirm__hint {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-body-color);
}
.ocancel-confirm__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.ocancel-confirm__back {
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: none;
    padding: 8px 6px;
}
.ocancel-confirm__back:hover { color: var(--color-link); }

/* Зикуй-вариант confirm: primary-цвет вместо danger. */
.ocancel-confirm--primary {
    border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.ocancel-confirm--primary .ocancel-confirm__title { color: var(--color-primary); }

/* Возврат на карту: фиолетовый акцент — в тон иконке и кнопке «кредитка». */
.ocancel-confirm--info {
    border-color: color-mix(in srgb, var(--color-info) 24%, transparent);
    background: color-mix(in srgb, var(--color-info) 5%, var(--color-surface));
}
.ocancel-confirm--info .ocancel-confirm__title { color: var(--color-info); }

/* Зикуй: зелёный акцент — в тон иконке и кнопке «оставить в Кассе». */
.ocancel-confirm--success {
    border-color: color-mix(in srgb, #298e7c 26%, transparent);
    background: color-mix(in srgb, #298e7c 6%, var(--color-surface));
}
.ocancel-confirm--success .ocancel-confirm__title { color: #298e7c; }
.ocancel-confirm--success .btn-success {
    background-color: #298e7c;
    border-color: #298e7c;
}
.ocancel-confirm--success .btn-success:hover {
    background-color: #217566;
    border-color: #217566;
    color: var(--color-white);
}

/* Мобильная вёрстка страницы отмены заказа (≤640px). */
@media (max-width: 640px) {
    .ocancel-page {
        gap: 16px;
    }

    .ocancel-page .dash-hero {
        margin-bottom: 16px;
        padding: 16px 14px;
    }

    .ocancel-page .dash-hero__title {
        font-size: 19px;
    }

    .ocancel-page .dash-hero__breadcrumbs {
        font-size: 13px;
    }

    .ocancel-banner {
        padding: 12px 14px;
        gap: 12px;
    }

    .ocancel-options {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .ocancel-card {
        min-width: 0;
        padding: 16px 14px 18px;
        gap: 14px;
    }

    .ocancel-receipt {
        padding: 14px;
        gap: 14px;
    }

    .ocancel-receipt__amount-value {
        font-size: 29px;
    }

    .ocancel-receipt__amount-value small {
        font-size: 17px;
    }

    .ocancel-confirm {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 12px;
    }

    .ocancel-confirm__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .ocancel-confirm__back {
        text-align: center;
        padding: 10px 6px;
    }

    .ocancel-confirm__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .ocancel-form__row .ocancel-form__select {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .ocancel-support {
        grid-template-columns: 44px 1fr;
        gap: 12px;
        padding: 14px;
    }

    .ocancel-support__ico {
        inline-size: 44px;
        block-size: 44px;
        font-size: 21px;
    }

    .ocancel-support__phones {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 450px) {
.header-contact .header-hours{display:none}
}

/* ============================================================
   Тёмная тема: дополнительные оверрайды по страницам.
   Базовые токены — в html[data-theme="dark"] (:root-уровень).
   Селектор html[data-theme="dark"] (не .page-shell): data-theme
   ставится на <html> из main.js.
   ============================================================ */
html[data-theme="dark"] .settings-pending-banner {
    background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
    border-color: var(--color-warning);
}

html[data-theme="dark"] .settings-channel-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .dash-hero {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
            color-mix(in srgb, var(--color-primary) 5%, transparent) 60%,
            transparent 100%),
        var(--color-surface);
}

html[data-theme="dark"] .settings-profile-card--accent {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
            color-mix(in srgb, var(--color-primary) 4%, transparent) 60%,
            transparent 100%),
        var(--color-surface);
}

html[data-theme="dark"] .login-hero > .form-panel {
    box-shadow: none;
    border-color: var(--color-border);
}

html[data-theme="dark"] .i18n-editor__search input {
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

html[data-theme="dark"] .god-mode-banner {
    background: var(--color-warning-bg-subtle);
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

html[data-theme="dark"] .god-mode-switch {
    background: var(--color-surface-muted);
}

html[data-theme="dark"] .ocancel-receipt {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) 0%,
        var(--color-surface) 60%
    );
}

html[data-theme="dark"] .orders-table__action--refund,
html[data-theme="dark"] .orders-table__action--refund:hover,
html[data-theme="dark"] .orders-table__action--refund:focus-visible {
    color: var(--color-white);
}

html[data-theme="dark"] .session-warning {
    color: var(--color-warning-text-emphasis);
}