/* ---- style.css ---- */
/* ============================================
   ПЕРЕМЕННЫЕ ТЕМЫ (оранжево-фиолетовая палитра)
   ============================================ */
:root {
    --color-primary: #c2410c;
    --color-primary-dark: #c2410c;
    --color-primary-light: #f97316;
    /* Текстовый вариант основного цвета: оранжевый #c2410c как цвет текста
       не проходит WCAG AA (2.80:1 на белом, 2.59:1 на --bg-body), поэтому для
       текста/ссылок/иконок используется затемнённый вариант (5.41:1 / 5.01:1).
       Сам --color-primary остаётся для фонов, градиентов, бордеров и графиков. */
    --color-primary-text: #bd3f0a;
    --color-secondary: #c2410c;
    --color-secondary-dark: #9a3412;
    --color-secondary-light: #fdba74;
    /* Текстовый вариант вторичного цвета: #c2410c как текст даёт 3.29:1 на белом,
       поэтому для текста/ссылок/иконок используется затемнённый фиолетовый
       (7.02:1 на белом, 6.51:1 на --bg-body). Фоны и градиенты - прежние. */
    --color-secondary-text: #9a3412;

    --gradient-main: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    /* Градиент для кнопок с белым текстом: обе точки >=5:1 к белому */
    --gradient-button: linear-gradient(135deg, #c2410c, #9a3412);
    --color-success-text: #15803d;
    --color-warning-text: #b45309;
    --color-danger-text: #b91c1c;
    --gradient-hero: linear-gradient(135deg, #c2410c 0%, #c2410c 100%);
    --gradient-card: linear-gradient(145deg, #ffffff, #f8f5ff);

    --text-primary: #16181d;
    --text-secondary: #43474f;
    --text-muted: #6b707a;
    --text-inverse: #ffffff;

    --bg-body: #f6f6f4;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f0efec;
    --bg-sidebar: #ffffff;
    --bg-dropdown: #ffffff;
    /* Вторичный фон (подсказки, hover списков) - раньше использовался без определения,
       из-за чего в тёмной теме оставался светлым. */
    --bg-secondary: #f6f6f4;
    --transition: all 0.2s ease;

    --border-color: #dedcd6;
    --border-light: #efeeea;

    --shadow: 0 2px 12px rgba(0,0,0,0.04);
    --shadow-hover: 0 8px 30px rgba(194,65,12,0.15);
    --shadow-heavy: 0 20px 50px -12px rgba(0,0,0,0.15);

    --tag-bg: #efeeea;
    --tag-color: #9a3412;
    /* Семантические пары для статус-бейджей (.badge-status/.event-status/.transfer-status).
       Светлая тема - пастельный фон + тёмный текст, тёмная тема переопределяет ниже. */
    --badge-warning-bg: #fef3c7;
    --badge-warning-color: #92400e;
    --badge-success-bg: #d1fae5;
    --badge-success-color: #065f46;
    --badge-danger-bg: #fee2e2;
    --badge-danger-color: #991b1b;
    --badge-neutral-bg: #e5e7eb;
    --badge-neutral-color: #4b5563;
    --badge-info-bg: #dbeafe;
    --badge-info-color: #1e40af;
    --badge-purple-bg: #fdf1e9;
    --badge-purple-color: #9a3412;
    --avatar-gradient: var(--gradient-main);
    --code-bg: #f0efec;
    --blockquote-border: var(--color-secondary);
    --best-answer-bg: #f6f6f4;
    --placeholder-color: #75787f;
    /* Затемнённые статусные цвета: белый текст на них даёт 5.02:1 / 4.85:1 / 5.12:1 */
    --toast-success: #15803d;
    --toast-error: #dc2626;
    --toast-info: #2563eb;
    --social-icon-color: #43474f;
    --editor-toolbar-bg: #ffffff;
    --editor-toolbar-color: #16181d;
    --editor-border: #dedcd6;
    --code-block-bg: #16181d;
    --code-block-color: #eceae6;
}

.dark-theme {
    --bg-body: #131416;
    --bg-card: #1b1c1f;
    --bg-input: #232427;
    --bg-sidebar: #1b1c1f;
    --bg-dropdown: #1b1c1f;
    --bg-hover: #232427;
    --bg-secondary: #222326;
    --text-primary: #f2f1ee;
    --text-secondary: #c3c1bb;
    --text-muted: #9a978f;
    /* Светлый текстовый оранжевый для тёмной темы (10.54:1 на --bg-body,
       9.83:1 на --bg-card, 8.59:1 на --bg-input). */
    --color-primary-text: #fdba74;
    /* Светлый текстовый фиолетовый для тёмной темы (9.05:1 на --bg-body,
       8.44:1 на --bg-card). */
    --color-secondary-text: #fed7aa;
    --border-color: #35363a;
    --border-light: #232427;
    --shadow: 0 2px 12px rgba(0,0,0,0.3);
    --shadow-hover: 0 8px 30px rgba(194,65,12,0.2);
    --shadow-heavy: 0 20px 50px -12px rgba(0,0,0,0.4);
    --tag-bg: #232427;
    --tag-color: #fdba74;
    /* Тёмные пары статус-бейджей (контраст текста к фону указан в комментарии). */
    --badge-warning-bg: #3a2c12;   /* 8.40:1 к #fcd34d */
    --badge-warning-color: #fcd34d;
    --badge-success-bg: #16352a;   /* 8.26:1 к #6ee7b7 */
    --badge-success-color: #6ee7b7;
    --badge-danger-bg: #3a2222;    /* 7.31:1 к #fca5a5 */
    --badge-danger-color: #fca5a5;
    --badge-neutral-bg: #2c2d30;   /* 7.09:1 к #c4bfd8 */
    --badge-neutral-color: #c4bfd8;
    --badge-info-bg: #1e2a3d;      /* 7.38:1 к #93c5fd */
    --badge-info-color: #93c5fd;
    --badge-purple-bg: #2a2a2d;    /* 7.93:1 к #fed7aa */
    --badge-purple-color: #fed7aa;
    --avatar-gradient: var(--gradient-main);
    --code-bg: #232427;
    --blockquote-border: var(--color-secondary);
    --best-answer-bg: #2a1e17;
    --placeholder-color: #a3a09a;
    --toast-success: #15803d;
    --toast-error: #dc2626;
    --toast-info: #2563eb;
    --social-icon-color: #c3c1bb;
    --editor-toolbar-bg: #1b1c1f;
    --editor-toolbar-color: #f2f1ee;
    --editor-border: #35363a;
    --code-block-bg: #101113;
    --code-block-color: #eceae6;    --color-success-text: #4ade80;
    --color-warning-text: #fbbf24;
    --color-danger-text: #fca5a5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    background: var(--bg-body);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
}
a {
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--color-secondary);
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ (ДЕНЬ/НОЧЬ)
   ============================================ */
.toggleWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    transform: none;
    position: relative;
    top: auto;
    left: auto;
}

.toggleWrapper input {
    position: absolute;
    left: -99em;
}

.toggle {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 70px;
    height: 40px;
    background-color: #83D8FF;
    border-radius: 40px;
    transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    flex-shrink: 0;
}

.toggle__handler {
    display: inline-block;
    position: relative;
    z-index: 1;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 34px;
    background-color: #FFCF96;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: rotate(-45deg);
}

.toggle__handler .crater {
    position: absolute;
    background-color: #E8CDA5;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    border-radius: 100%;
}

.toggle__handler .crater--1 {
    top: 14px;
    left: 8px;
    width: 3px;
    height: 3px;
}

.toggle__handler .crater--2 {
    top: 22px;
    left: 18px;
    width: 5px;
    height: 5px;
}

.toggle__handler .crater--3 {
    top: 8px;
    left: 20px;
    width: 6px;
    height: 6px;
}

.star {
    position: absolute;
    background-color: #ffffff;
    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    border-radius: 50%;
}

.star--1 {
    top: 8px;
    left: 28px;
    z-index: 0;
    width: 24px;
    height: 2px;
}

.star--2 {
    top: 14px;
    left: 22px;
    z-index: 1;
    width: 24px;
    height: 2px;
}

.star--3 {
    top: 22px;
    left: 32px;
    z-index: 0;
    width: 24px;
    height: 2px;
}

.star--4,
.star--5,
.star--6 {
    opacity: 0;
    transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.star--4 {
    top: 12px;
    left: 8px;
    z-index: 0;
    width: 2px;
    height: 2px;
    transform: translate3d(3px, 0, 0);
}

.star--5 {
    top: 26px;
    left: 14px;
    z-index: 0;
    width: 3px;
    height: 3px;
    transform: translate3d(3px, 0, 0);
}

.star--6 {
    top: 28px;
    left: 22px;
    z-index: 0;
    width: 2px;
    height: 2px;
    transform: translate3d(3px, 0, 0);
}

/* Состояние "включено" (тёмная тема) */
.toggleWrapper input:checked + .toggle {
    background-color: #1a1a3e;
}

.toggleWrapper input:checked + .toggle .toggle__handler {
    background-color: #FFE5B5;
    transform: translate3d(30px, 0, 0) rotate(0);
}

.toggleWrapper input:checked + .toggle .toggle__handler .crater {
    opacity: 1;
}

.toggleWrapper input:checked + .toggle .star--1 {
    width: 2px;
    height: 2px;
}

.toggleWrapper input:checked + .toggle .star--2 {
    width: 4px;
    height: 4px;
    transform: translate3d(-5px, 0, 0);
}

.toggleWrapper input:checked + .toggle .star--3 {
    width: 2px;
    height: 2px;
    transform: translate3d(-7px, 0, 0);
}

.toggleWrapper input:checked + .toggle .star--4,
.toggleWrapper input:checked + .toggle .star--5,
.toggleWrapper input:checked + .toggle .star--6 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.toggleWrapper input:checked + .toggle .star--4 {
    transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggleWrapper input:checked + .toggle .star--5 {
    transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggleWrapper input:checked + .toggle .star--6 {
    transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Тёмная тема - настройка переключателя */
.dark-theme .toggleWrapper input:checked + .toggle {
    background-color: #1a1a3e;
}

.dark-theme .toggleWrapper input:not(:checked) + .toggle {
    background-color: #232427;
}

.dark-theme .toggleWrapper input:not(:checked) + .toggle .toggle__handler {
    background-color: #6a6488;
}

.dark-theme .toggleWrapper input:not(:checked) + .toggle .toggle__handler .crater {
    opacity: 1;
    background-color: #43474f;
}

.dark-theme .toggleWrapper input:not(:checked) + .toggle .star {
    opacity: 0.3;
}

/* Адаптивность */
@media (max-width: 480px) {
    .toggle {
        width: 60px;
        height: 34px;
    }
    .toggle__handler {
        width: 28px;
        height: 28px;
        top: 3px;
        left: 3px;
    }
    .toggleWrapper input:checked + .toggle .toggle__handler {
        transform: translate3d(26px, 0, 0) rotate(0);
    }
    .star--1 { width: 20px; height: 2px; top: 6px; left: 24px; }
    .star--2 { width: 20px; height: 2px; top: 12px; left: 18px; }
    .star--3 { width: 20px; height: 2px; top: 20px; left: 28px; }
}

/* ============================================
   ОБВОДКА ДЛЯ ПЕРЕКЛЮЧАТЕЛЯ ТЕМЫ
   ============================================ */

/* Обёртка переключателя с обводкой */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50px;
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
}

/* Обводка с градиентом */
.theme-toggle-wrapper::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 52px;
    padding: 2px;
    background: var(--gradient-main);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* При наведении на обёртку обводка становится ярче */
.theme-toggle-wrapper:hover::before {
    opacity: 1;
    transform: scale(1.02);
}

/* При активном состоянии (чекбокс включен) обводка ярче */
.theme-toggle-wrapper.active::before {
    opacity: 1;
}

/* Альтернативный вариант - простая обводка бордером */
.theme-toggle-wrapper-border {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 50px;
    background: var(--gradient-main);
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(234, 88, 12, 0.15);
}

.theme-toggle-wrapper-border:hover {
    box-shadow: 0 0 30px rgba(234, 88, 12, 0.3);
    transform: scale(1.02);
}

/* Внутренний фон для переключателя внутри обёртки */
.theme-toggle-wrapper-border .toggleWrapper {
    background: var(--bg-card);
    border-radius: 50px;
    padding: 2px 4px;
}

/* Анимация пульсации для обводки */
.theme-toggle-wrapper.pulse::before {
    animation: pulse-border-toggle 2s ease-in-out infinite;
}

@keyframes pulse-border-toggle {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.03);
    }
    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

/* Тёмная тема */
.dark-theme .theme-toggle-wrapper::before {
    background: var(--gradient-main);
    opacity: 0.7;
}

.dark-theme .theme-toggle-wrapper-border {
    background: var(--gradient-main);
    box-shadow: 0 0 30px rgba(194, 65, 12, 0.2);
}

.dark-theme .theme-toggle-wrapper-border .toggleWrapper {
    background: var(--bg-card);
}

/* Адаптивность */
@media (max-width: 480px) {
    .theme-toggle-wrapper {
        padding: 3px;
    }
    .theme-toggle-wrapper::before {
        inset: -1.5px;
        border-radius: 44px;
    }
    .theme-toggle-wrapper-border {
        padding: 2px;
        border-radius: 44px;
    }
}

/* ============================================
   HEADER - как в CareerVibe
   ============================================ */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(8px);
    transition: background 0.3s, border-color 0.3s;
}
.header-inner {
    margin: 0 auto;
    padding: 0 16px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-left: 0;
}
.burger-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px 12px 6px 8px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.1s;
    margin: 0;
}
.burger-menu:hover {
    background: var(--bg-hover);
}
.burger-menu:active {
    transform: scale(0.95);
}
.burger-menu span {
    width: 26px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 3px;
    transition: 0.2s;
}
.burger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.burger-menu.open span:nth-child(2) {
    opacity: 0;
}
.burger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}
.logo a {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.logo span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.header-search {
    flex: 1;
    max-width: 400px;
    position: relative;
    margin: 0 auto;
}
.header-search form {
    display: flex;
}
.header-search input {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 30px 0 0 30px;
    outline: none;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.header-search input:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
}
.header-search button {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 30px 30px 0;
    padding: 0 16px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.2s;
}
.header-search button:hover {
    background: var(--bg-hover);
}
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.btn-ask-header {
    padding: 6px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    background: var(--gradient-button);
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-ask-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(234,88,12,0.3);
    color: white;
}
.logout-btn, .btn-login-header, .btn-register-header {
    padding: 6px 14px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
}
.logout-btn {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.logout-btn:hover {
    background: var(--border-color);
}
.btn-login-header {
    color: var(--text-secondary);
}
.btn-login-header:hover {
    color: var(--color-primary-text);
}
.btn-register-header {
    background: var(--gradient-button);
    color: white;
}
.btn-register-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(234,88,12,0.3);
    color: white;
}
.user-avatar-link {
    display: flex;
    align-items: center;
}
.user-avatar, .user-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--avatar-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
    transition: transform 0.2s;
}
.user-avatar:hover {
    transform: scale(1.05);
}
.header-link {
    color: var(--text-secondary);
    font-size: 18px;
    transition: color 0.2s;
}
.header-link:hover {
    color: var(--color-primary-text);
}

/* Z5: ссылка "Лента" в шапке (текст скрывается на узких экранах) */
.feed-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 10px;
}
.feed-link:hover {
    background: var(--bg-hover);
}
.feed-link-text {
    font-size: 14px;
}
@media (max-width: 768px) {
    .feed-link-text {
        display: none;
    }
    .feed-link {
        padding: 6px;
        font-size: 18px;
    }
}

/* ============================================
   USER MENU (выпадающее меню пользователя)
   ============================================ */
.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 30px;
    transition: background 0.2s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.user-menu:hover {
    background: var(--bg-hover);
}

.user-menu .user-avatar-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.user-menu .user-avatar,
.user-menu .user-avatar-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--avatar-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
    transition: transform 0.2s;
}
.user-menu .user-avatar:hover {
    transform: scale(1.05);
}

.user-menu .user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-dropdown);
    border-radius: 16px;
    box-shadow: var(--shadow-heavy);
    min-width: 210px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 1001;
    border: 1px solid var(--border-light);
    transform-origin: top right;
}
.user-menu.open .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}
.user-menu-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.user-menu-item.logout:hover {
    color: var(--toast-error);
}

.user-menu-username {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

.user-menu-balance {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.user-menu-balance i {
    color: #ffd966;
    font-size: 13px;
}

.user-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 12px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .user-menu-dropdown {
        right: -10px;
        min-width: 180px;
    }
    .user-menu-item {
        padding: 10px 16px;
        font-size: 15px;
    }
    .user-menu .user-name {
        max-width: 70px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .user-menu .user-name {
        display: none;
    }
    .user-menu {
        padding: 4px;
    }
}

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    background: var(--gradient-hero);
    padding: 60px 20px 50px;
    color: white;
    border-radius: 0;
    overflow: hidden;
    z-index: 1;
}
.hero__container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.hero__badge .badge {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 30px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    font-size: 14px;
    font-weight: 500;
    color: white;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    min-height: 32px;
    line-height: 1.4;
}
#typing-badge {
    display: inline-block;
    min-width: 320px;
    min-height: 32px;
    visibility: visible;
    line-height: 1.4;
}
.hero-title {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.2;
    margin-bottom: 16px;
}
.hero-title .highlight-gradient {
    background: linear-gradient(135deg, #ffd966, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-description {
    font-size: 20px;
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
    color: #ffffff;
}
.hero__stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px 0;
    flex-wrap: wrap;
}
.stat-item {
    text-align: center;
}
.stat-number {
    font-size: 32px;
    font-weight: 800;
    display: block;
    color: #ffffff;
}
.stat-label {
    font-size: 14px;
    opacity: 1;
    color: #ffffff;
    font-weight: 400;
}
.hero__buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.btn-hero-primary,
.btn-hero-secondary,
.btn-hero-outline {
    padding: 12px 32px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-hero-primary {
    background: white;
    /* Фон кнопки всегда белый - цвет текста фиксированный: 4.99:1 */
    color: #b45309;
}
.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.btn-hero-secondary {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
}
.btn-hero-secondary:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-3px);
}
.btn-hero-outline {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    color: white;
    border: 1px solid rgba(255,255,255,0.5);
}
.btn-hero-outline:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
}

/* ============================================
   ФУТЕР
   ============================================ */
.footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    padding: 40px 20px;
    margin-top: 40px;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
.footer-col {
    flex: 1;
    min-width: 150px;
}
.footer-col h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.footer-col a {
    display: block;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
    transition: color 0.2s, padding-left 0.2s;
}
.footer-col a:hover {
    color: var(--color-primary-text);
}

.footer-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-socials h4 {
    text-align: center;
}
.footer-socials .socials {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
}
.footer-socials .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--social-icon-color);
    font-size: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
    flex-shrink: 0;
}
.footer-socials .social-link:hover {
    background: var(--gradient-main);
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(234,88,12,0.3);
}
.footer-copyright {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.footer-tagline {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 2px;
    text-align: center;
}

/* ============================================
   БУРГЕР-МЕНЮ (выпадающее)
   ============================================ */
.burger-menu-dropdown {
    position: fixed;
    top: 68px;
    left: -300px;
    width: 280px;
    height: calc(100vh - 68px);
    background: var(--bg-dropdown);
    box-shadow: var(--shadow-heavy);
    z-index: 1001;
    transition: left 0.3s ease, visibility 0.3s;
    overflow-y: auto;
    visibility: hidden;
}
.burger-menu-dropdown.open {
    left: 0;
    visibility: visible;
}
.burger-menu-content {
    padding: 24px 20px;
}
.burger-menu-section {
    margin-bottom: 24px;
}
.burger-menu-section h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
}
.burger-menu-section a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-secondary);
    transition: color 0.2s, padding-left 0.2s;
}
.burger-menu-section a:hover {
    color: var(--color-primary-text);
    padding-left: 8px;
}
/* Z5: кнопка "Выйти" в бургер-меню (button, а не ссылка - нужны свои стили) */
.burger-menu-section .logout-form {
    margin: 0;
}
.burger-menu-section .logout-link {
    display: block;
    width: 100%;
    padding: 8px 0;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, padding-left 0.2s;
}
.burger-menu-section .logout-link:hover {
    color: var(--toast-error);
    padding-left: 8px;
}
.burger-menu-section .logout-link i {
    margin-right: 6px;
}
/* Кнопка "Выйти" в выпадающем меню пользователя - сброс стилей button */
.user-menu-dropdown .logout-form {
    margin: 0;
}
.user-menu-dropdown .logout-form .user-menu-item {
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.burger-menu-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.theme-toggle-wrapper {
    display: flex;
    justify-content: center;
}
.socials-mini {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.socials-mini .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--social-icon-color);
    font-size: 18px;
    transition: all 0.3s ease;
}
.socials-mini .social-link:hover {
    background: var(--gradient-main);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234,88,12,0.3);
}
.burger-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 999;
    display: none;
}
.burger-overlay.show {
    display: block;
}

/* ============================================
   ОСНОВНЫЕ СЕКЦИИ
   ============================================ */
.section-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.section-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 30px;
}
.how-it-works, .features, .upcoming-events, .popular-events, .cta-section {
    padding: 60px 0;
}
.steps-grid, .features-grid, .events-grid, .popular-grid {
    display: grid;
    gap: 30px;
}
.steps-grid {
    grid-template-columns: repeat(3, 1fr);
}
.features-grid {
    grid-template-columns: repeat(3, 1fr);
}
.events-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.popular-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.step-card, .feature-item {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}
.step-card:hover, .feature-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-main);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    margin: 0 auto 16px;
}
.step-icon, .feature-icon {
    font-size: 40px;
    margin-bottom: 16px;
    color: var(--color-primary-text);
}
.step-card h3, .feature-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.step-card p, .feature-item p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

/* ============================================
   КАРТОЧКИ МЕРОПРИЯТИЙ
   ============================================ */
.event-card {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--border-light);
}
.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.event-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}
.event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--color-secondary);
    color: white;
}
.event-status-badge.sold-out {
    background: var(--toast-error);
}
.event-card-content {
    padding: 16px 20px 20px;
}
.event-card-category {
    margin-bottom: 6px;
}
.category-tag {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 12px;
    background: var(--tag-bg);
    color: var(--tag-color);
}
.event-card-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.event-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.event-card-meta i {
    margin-right: 4px;
}
.event-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.event-card-price,
.event-card-tickets {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.event-card-price .price-label,
.event-card-tickets .tickets-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.event-card-price .price-value {
    font-size: 18px;
    white-space: nowrap;
    color: var(--color-primary-text);
}
.event-card-tickets .tickets-value {
    font-size: 16px;
    font-weight: 700;
}
.event-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-text);
}
.event-tickets {
    font-size: 14px;
    color: var(--text-muted);
}
.btn-small {
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    background: var(--gradient-button);
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(234,88,12,0.25);
}
.btn-primary {
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    background: var(--gradient-button);
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(234,88,12,0.3);
}
.btn-secondary {
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-secondary:hover {
    background: var(--border-color);
    transform: translateY(-2px);
}
.view-all-link {
    color: var(--color-secondary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}
.view-all-link:hover {
    gap: 12px;
    color: var(--color-primary-text);
}

/* ============================================
   ПОПУЛЯРНЫЕ МЕРОПРИЯТИЯ
   ============================================ */
.popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.popular-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--border-light);
    max-width: 100%;
}
.popular-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.popular-card-image {
    height: 120px;
    overflow: hidden;
}
.popular-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.popular-card-content {
    padding: 12px 16px;
}
.popular-card-content h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.popular-card-content p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.popular-price {
    font-weight: 700;
    color: var(--color-primary-text);
    font-size: 16px;
}

/* ============================================
   CTA БЛОК
   ============================================ */
.cta-content {
    text-align: center;
    padding: 50px 30px;
    background: var(--gradient-hero);
    border-radius: 24px;
    color: white;
}
.cta-content h2 {
    font-size: 32px;
    margin-bottom: 12px;
}
.cta-content p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 24px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-buttons .btn-primary {
    background: white;
    color: var(--color-primary-dark);
    padding: 14px 36px;
}
.cta-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cta-buttons .btn-secondary {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 14px 36px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.cta-buttons .btn-secondary:hover {
    background: rgba(255,255,255,0.35);
    transform: translateY(-2px);
}

/* ============================================
   СТРАНИЦЫ АУТЕНТИФИКАЦИИ
   ============================================ */
.auth-page {
    padding: 60px 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}
.auth-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 960px;
    margin: 0 auto;
}
.auth-card {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-heavy);
}
.auth-icon {
    font-size: 48px;
    text-align: center;
    color: var(--color-primary-text);
    margin-bottom: 16px;
}
.auth-card h1, .auth-card h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 24px;
}
.auth-field {
    margin-bottom: 18px;
}
.auth-field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}
.auth-field input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 16px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-field input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
}
.auth-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.auth-btn-primary {
    background: var(--gradient-button);
    color: white;
}
.auth-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(234,88,12,0.3);
}
.auth-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}
.auth-link a {
    font-weight: 600;
}
.auth-features ul {
    list-style: none;
    padding: 0;
}
.auth-features li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--text-secondary);
}
.auth-features li i {
    color: var(--color-primary-text);
    width: 24px;
    text-align: center;
}
.auth-social {
    margin-top: 30px;
    text-align: center;
}
.social-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.btn-social {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}
.btn-social:hover {
    transform: translateY(-2px);
}

/* ============================================
   СТРАНИЦА МЕРОПРИЯТИЙ
   ============================================ */
.events-page {
    padding: 30px 0;
}
.events-page-header h1 {
    font-size: 32px;
    margin-bottom: 16px;
}
.events-filters {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}
.filter-group label,
.filter-group .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.filter-group select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
}
.btn-filter, .btn-filter-reset {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-filter {
    background: var(--gradient-button);
    color: white;
}
.btn-filter:hover {
    opacity: 0.9;
}
.btn-filter-reset {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.btn-filter-reset:hover {
    background: var(--border-color);
}
.events-count {
    margin: 12px 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================
   СТРАНИЦА МАСТЕРОВ
   ============================================ */
.masters-page {
    padding: 30px 0;
}
.masters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}
.masters-header h1 {
    font-size: 32px;
}
.masters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.master-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    transition: transform 0.2s, box-shadow 0.2s;
}
.master-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.master-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.master-avatar img, .avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-placeholder {
    background: var(--avatar-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
}
.master-info h3 {
    font-size: 18px;
    font-weight: 700;
}
.master-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.stars {
    color: var(--color-warning-text);
}
.dark-theme .stars {
    color: var(--color-warning-text);
}
.rating-value {
    font-weight: 600;
}
.reviews-count {
    font-size: 13px;
    color: var(--text-muted);
}
.master-card-body p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.master-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}
.portfolio-badge {
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================
   ДЕТАЛЬНАЯ СТРАНИЦА МЕРОПРИЯТИЯ
   ============================================ */
.event-detail-page {
    padding: 30px 0;
}
.event-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
}
.event-detail-image {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.event-detail-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.event-detail-info h1 {
    font-size: 28px;
    margin-bottom: 12px;
}
.event-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text-secondary);
}
.meta-item i {
    width: 20px;
    color: var(--color-primary-text);
}
.event-buy-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 100px;
}
.event-price-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.price-label {
    font-size: 14px;
    color: var(--text-secondary);
}
.price-value {
    font-size: 28px;
    font-weight: 700;
}
.event-availability {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}
.availability-value.low {
    color: var(--toast-error);
}
.buy-form {
    margin-top: 20px;
}
.quantity-selector {
    margin-bottom: 16px;
}
.quantity-control {
    display: flex;
    align-items: center;
    gap: 12px;
}
.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}
.qty-btn:hover {
    background: var(--border-color);
}
.quantity-control input {
    width: 60px;
    height: 36px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    background: var(--bg-input);
    color: var(--text-primary);
}
.btn-buy-tickets {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--gradient-button);
    color: white;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-buy-tickets:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(234,88,12,0.3);
}
.ticket-views {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none; /* чтобы не мешать кликам по кнопке копирования */
}
.ticket-views i {
    font-size: 13px;
}
.sold-out-message {
    text-align: center;
    padding: 20px;
    color: var(--toast-error);
}
.login-to-buy {
    text-align: center;
    padding: 20px;
    background: var(--bg-hover);
    border-radius: 12px;
}
.event-description-section {
    margin: 40px 0;
    padding: 30px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.organizer-reviews {
    margin: 40px 0;
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.review-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--color-secondary);
}
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.review-author {
    font-weight: 600;
}
.review-rating {
    color: var(--color-warning-text);
}

/* ============================================
   СТРАНИЦА ПРОФИЛЯ
   ============================================ */
.profile-page {
    padding: 30px 0;
}
.profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
}
.profile-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
    text-align: center;
}
.profile-avatar img, .profile-avatar .avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-secondary);
}
.profile-avatar .avatar-placeholder {
    background: var(--avatar-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin: 0 auto;
}
.profile-info h1 {
    font-size: 24px;
    margin: 12px 0 4px;
}
.profile-email {
    font-size: 14px;
    color: var(--text-muted);
}
.profile-bio {
    background: var(--bg-hover);
    padding: 16px;
    border-radius: 12px;
    margin: 16px 0;
    text-align: left;
}
.profile-bio p {
    margin: 0;
    color: var(--text-secondary);
}
.profile-joined {
    font-size: 13px;
    color: var(--text-muted);
}
.btn-edit-profile {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 24px;
    border-radius: 30px;
    background: var(--gradient-button);
    color: white;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-edit-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(234,88,12,0.3);
    color: white;
}
.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}
.stat-item {
    text-align: center;
}
.stat-item .stat-number {
    font-size: 24px;
    font-weight: 700;
    display: block;
}
.stat-item .stat-label {
    font-size: 13px;
    color: var(--text-muted);
}
.profile-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 6px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--text-secondary);
}
.tab-btn:hover {
    background: var(--bg-hover);
}
.tab-btn.active {
    background: var(--gradient-button);
    color: white;
    box-shadow: 0 2px 12px rgba(234,88,12,0.3);
}
.tab-content {
    display: none;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}
.tab-content.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   СТАТИЧЕСКИЕ СТРАНИЦЫ
   ============================================ */
.about-page, .help-page, .rules-page, .contacts-page {
    padding: 30px 0;
}
.about-hero, .help-hero, .rules-hero, .contacts-hero {
    text-align: center;
    margin-bottom: 40px;
}
.about-hero h1, .help-hero h1, .rules-hero h1, .contacts-hero h1 {
    font-size: 36px;
}
.about-section {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}
.about-section h2 {
    font-size: 26px;
    margin-bottom: 16px;
}
.about-grid, .values-grid, .team-grid {
    display: grid;
    gap: 20px;
}
.about-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.values-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.about-item, .value-card, .team-card {
    background: var(--bg-hover);
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.2s;
}
.about-item:hover, .value-card:hover, .team-card:hover {
    transform: translateY(-4px);
}
.about-icon, .value-icon {
    font-size: 32px;
    color: var(--color-primary-text);
    margin-bottom: 8px;
}
.value-icon {
    font-size: 36px;
}
.about-cta {
    text-align: center;
    padding: 40px;
    background: var(--gradient-hero);
    border-radius: 20px;
    color: white;
}
.cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-buttons .btn-primary {
    background: white;
    color: var(--color-primary-dark);
}
.cta-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cta-buttons .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}
.cta-buttons .btn-secondary:hover {
    background: white;
    color: var(--color-primary-dark);
}

/* ============================================
   СТРАНИЦА ПОМОЩИ
   ============================================ */
.help-section {
    background: var(--bg-card);
    padding: 24px 30px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.help-section h2 {
    font-size: 20px;
    margin-bottom: 12px;
}
.help-section ol, .help-section ul {
    padding-left: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}
.help-contact {
    text-align: center;
    padding: 30px;
    background: var(--gradient-hero);
    border-radius: 16px;
    color: white;
}
.help-contact .btn-primary {
    background: white;
    color: var(--color-primary-dark);
}

/* ============================================
   ПРАВИЛА
   ============================================ */
.rules-section {
    background: var(--bg-card);
    padding: 24px 30px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.rules-section h2 {
    font-size: 20px;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.rules-section ul {
    padding-left: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}
.rules-footer {
    background: var(--bg-card);
    padding: 20px 30px;
    border-radius: 16px;
    text-align: center;
    color: var(--text-muted);
}

/* ============================================
   КОНТАКТЫ
   ============================================ */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.contact-card {
    background: var(--bg-card);
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}
.contact-card:hover {
    transform: translateY(-4px);
}
.contact-icon {
    font-size: 36px;
    color: var(--color-primary-text);
    margin-bottom: 8px;
}
.contact-link {
    color: var(--color-secondary);
    font-weight: 600;
}
.contact-form-section {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    max-width: 600px;
    margin: 0 auto;
}
.contact-form .form-group {
    margin-bottom: 16px;
}
.contact-form label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
}

/* ============================================
   ТОСТЫ
   ============================================ */
#toast-container {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2000;
}
.toast {
    padding: 12px 24px;
    border-radius: 40px;
    margin-bottom: 8px;
    transform: translateY(-100px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    font-weight: 500;
    box-shadow: var(--shadow-heavy);
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}
.toast-success { background: var(--toast-success); color: white; }
.toast-error { background: var(--toast-error); color: white; }
.toast-info { background: var(--toast-info); color: white; }

/* ============================================
   ОБЩИЕ КОМПОНЕНТЫ
   ============================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    width: 100%;
}
.empty-state i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.empty-state h3 {
    font-size: 24px;
    margin-bottom: 8px;
}
.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */
@media (max-width: 992px) {
    .hero-title {
        font-size: 34px;
    }
    .steps-grid {
        grid-template-columns: 1fr 1fr;
    }
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
    .event-detail-grid {
        grid-template-columns: 1fr;
    }
    .event-buy-card {
        position: static;
    }
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .auth-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .header-search {
        display: none;
    }
    .header-right .btn-ask-header,
    .header-right .logout-btn,
    .header-right .btn-login-header,
    .header-right .btn-register-header {
        display: none;
    }
    .hero-title {
        font-size: 28px;
    }
    .hero-description {
        font-size: 17px;
    }
    .hero__stats {
        gap: 20px;
    }
    .steps-grid {
        grid-template-columns: 1fr;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .events-grid {
        grid-template-columns: 1fr;
    }
    .popular-grid {
        grid-template-columns: 1fr 1fr;
    }
    .masters-grid {
        grid-template-columns: 1fr;
    }
    .event-detail-image img {
        height: 250px;
    }
    .auth-card {
        padding: 24px;
    }
    .about-grid {
        grid-template-columns: 1fr;
    }
    .values-grid {
        grid-template-columns: 1fr 1fr;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
    .contacts-grid {
        grid-template-columns: 1fr 1fr;
    }
    .filter-form {
        flex-direction: column;
    }
    .filter-group {
        min-width: 100%;
    }
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-socials .socials {
        justify-content: center;
    }
    .footer-copyright {
        text-align: center;
    }
}
@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
    }
    .hero-description {
        font-size: 15px;
    }
    .popular-grid {
        grid-template-columns: 1fr;
    }
    .values-grid {
        grid-template-columns: 1fr;
    }
    .contacts-grid {
        grid-template-columns: 1fr;
    }
    .profile-stats {
        grid-template-columns: 1fr 1fr;
    }
    .profile-tabs {
        flex-direction: column;
    }
}

/* ============================================
   СТИЛИ ДЛЯ ПАНЕЛЕЙ УПРАВЛЕНИЯ
   ============================================ */

/* Карточки статистики */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    padding: 20px 16px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--border-light);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.stat-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-text);
}

.stat-icon.orange { color: #c2410c; }
.stat-icon.purple { color: #c2410c; }
.stat-icon.green { color: var(--color-success-text); }
.stat-icon.red { color: #ef4444; }

.stat-number {
    font-size: 28px;
    font-weight: 700;
    display: block;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    margin-top: 4px;
}

/* Таблицы */
.table-container {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: var(--shadow);
    overflow-x: auto;
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table-container th {
    text-align: left;
    padding: 12px 8px 8px 8px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.table-container td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    vertical-align: middle;
}

.table-container tr:last-child td {
    border-bottom: none;
}

.table-container tr:hover td {
    background: var(--bg-hover);
}

/* Бейджи ролей в мероприятии (Фаза 1)
   Палитра переиспользует пары цветов существующих .badge-status:
   owner - как .pending, manager - как .used, scanner - как .approved,
   viewer - как .draft. Новых цветовых переменных не вводим. */
.event-badge {
    display: inline-block;
    padding: 2px 10px;
    margin-left: 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.event-badge--role-owner {
    background: #fef3c7;
    color: #92400e;
}

.event-badge--role-manager {
    background: #dbeafe;
    color: #1e40af;
}

.event-badge--role-scanner {
    background: #d1fae5;
    color: #065f46;
}

.event-badge--role-viewer {
    background: #e5e7eb;
    color: #4b5563;
}

.dark-theme .event-badge--role-owner {
    background: #78350f;
    color: #fde68a;
}

.dark-theme .event-badge--role-manager {
    background: #1e3a8a;
    color: #bfdbfe;
}

.dark-theme .event-badge--role-scanner {
    background: #064e3b;
    color: #a7f3d0;
}

.dark-theme .event-badge--role-viewer {
    background: #374151;
    color: #d1d5db;
}

/* Фаза Z2-B: несколько ролей организатора на одном мероприятии */
.role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.organizer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.organizer-role-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.organizer-role-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 88px;
}

/* ============================================ */
/* Фаза Z2-C: UI системы ролей                   */
/* Единый бейдж, карточки команды, выбор роли,   */
/* матрица прав.                                 */
/* ============================================ */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.role-badge i {
    font-size: 10px;
    opacity: .85;
}
.role-badge--sm {
    padding: 2px 8px;
    font-size: 10px;
}
.role-badge--sm i {
    font-size: 9px;
}

.team-self {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color-primary);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm, var(--shadow));
}
.team-self__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.team-self__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.team-self__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--text-secondary);
}
.team-self__actions i {
    color: #16a34a;
    margin-right: 4px;
}
.team-self__note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}
.section-hint {
    margin: -4px 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

.org-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.org-card {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.org-card:hover {
    border-color: var(--color-primary);
}
.org-card--self {
    background: linear-gradient(0deg, rgba(234, 88, 12, .05), rgba(234, 88, 12, .05)), var(--bg-card);
}
.org-card__main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.org-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 16px;
    text-decoration: none;
}
.org-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.org-card__info {
    flex: 1 1 220px;
    min-width: 0;
}
.org-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}
.org-card__name a {
    color: var(--text-primary);
    text-decoration: none;
}
.org-card__name a:hover {
    color: var(--color-primary-text);
}
.org-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b45309;
    background: rgba(234, 88, 12, .12);
    border-radius: 999px;
    padding: 2px 8px;
}
.org-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.org-card__meta a {
    color: var(--text-secondary);
    text-decoration: none;
}
.org-card__badges .role-badges {
    justify-content: flex-end;
}

.org-manage {
    margin-top: 12px;
}
.org-manage > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
}
.org-manage > summary::-webkit-details-marker {
    display: none;
}
.org-manage[open] > summary {
    margin-bottom: 10px;
}
.org-manage__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}
.org-manage__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.org-manage__role {
    min-width: 120px;
}
.org-manage__row .inline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.org-manage__note {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}
.org-manage__add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}

.role-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.role-pick__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.role-pick__item:hover {
    border-color: var(--color-primary);
}
.role-pick__item.is-checked,
.role-pick__item:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .16);
}
.role-pick__item input {
    margin-top: 3px;
    accent-color: var(--color-primary);
}
.role-pick__icon {
    color: var(--color-primary-text);
    font-size: 15px;
    margin-top: 1px;
}
.role-pick__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.role-pick__title {
    display: flex;
}
.role-pick__hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.role-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.role-matrix th,
.role-matrix td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.role-matrix th:first-child,
.role-matrix td:first-child {
    text-align: left;
    color: var(--text-secondary);
}
.role-matrix thead th {
    font-size: 12px;
}
.role-matrix th .event-badge {
    margin: 0 auto;
}
.role-matrix__yes {
    color: #16a34a;
    font-weight: 700;
    font-size: 15px;
}
.role-matrix__no {
    color: var(--text-muted);
    opacity: .45;
    font-size: 15px;
}
.dark-theme .role-matrix__yes {
    color: #4ade80;
}
.dark-theme .org-tag {
    color: #fcd34d;
}

@media (max-width: 720px) {
    .org-card__badges .role-badges {
        justify-content: flex-start;
    }
    .org-manage__role {
        min-width: 0;
    }
}

/* Бейджи статусов */
.badge-status {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.badge-status.pending {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.badge-status.approved,
.badge-status.published,
.badge-status.active,
.badge-status.resolved {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}

.badge-status.rejected,
.badge-status.cancelled,
.badge-status.banned {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-color);
}

.badge-status.draft {
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-color);
}

.badge-status.used,
.badge-status.completed {
    background: var(--badge-info-bg);
    color: var(--badge-info-color);
}

.badge-status.transferred {
    background: var(--badge-purple-bg);
    color: var(--badge-purple-color);
}

/* Тёмная тема: те же варианты с повышенной специфичностью, чтобы перебивать
   светлые пастели, продублированные инлайновыми <style> в шаблонах. */
.dark-theme .badge-status.pending {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.dark-theme .badge-status.approved,
.dark-theme .badge-status.published,
.dark-theme .badge-status.active,
.dark-theme .badge-status.resolved {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}

.dark-theme .badge-status.rejected,
.dark-theme .badge-status.cancelled,
.dark-theme .badge-status.banned {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-color);
}

.dark-theme .badge-status.draft {
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-color);
}

.dark-theme .badge-status.used,
.dark-theme .badge-status.completed {
    background: var(--badge-info-bg);
    color: var(--badge-info-color);
}

.dark-theme .badge-status.transferred {
    background: var(--badge-purple-bg);
    color: var(--badge-purple-color);
}

/* Кнопки в таблицах */
.btn-sm {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.btn-sm.primary {
    background: var(--gradient-button);
    color: white;
}

.btn-sm.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234,88,12,0.3);
}

.btn-sm.outline {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-sm.outline:hover {
    background: var(--border-color);
    transform: translateY(-2px);
}

.btn-sm.danger {
    background: var(--toast-error);
    color: white;
}

.btn-sm.danger:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn-sm.success {
    background: var(--toast-success);
    color: white;
}

.btn-sm.success:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn-sm.info {
    background: var(--toast-info);
    color: white;
}

.btn-sm.info:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Все иконки внутри кнопок с градиентным фоном - белые и непрозрачные */
.btn-primary i,
.btn-primary svg,
.btn-secondary i,
.btn-secondary svg,
.btn-hero-primary i,
.btn-hero-primary svg,
.btn-hero-secondary i,
.btn-hero-secondary svg,
.btn-hero-outline i,
.btn-hero-outline svg,
.btn-sm i,
.btn-sm svg,
.btn-small i,
.btn-small svg {
    color: inherit;
    opacity: 1;
}

/* Для случаев, когда inherit не срабатывает из-за других правил (например, .empty-state i) */
.empty-state .btn-primary i,
.empty-state .btn-primary svg,
.empty-state .btn-secondary i,
.empty-state .btn-secondary svg {
    color: white;
    opacity: 1;
}

/* Поисковая строка */
.search-bar {
    background: var(--bg-card);
    padding: 16px 20px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
}

.search-bar form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.search-bar input,
.search-bar select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
}

.search-bar input:focus,
.search-bar select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
}

/* Пагинация */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pagination a {
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--gradient-button);
    color: white;
    transform: translateY(-2px);
}

.pagination span {
    color: var(--text-muted);
    font-size: 14px;
}

/* Пустые состояния */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 16px;
    margin-bottom: 4px;
}

/* Адаптивность для панелей */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .table-container {
        padding: 16px;
    }

    .search-bar form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar input,
    .search-bar select {
        width: 100%;
    }

    .pagination {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-number {
        font-size: 24px;
    }
}

/* ============================================
   СТРАНИЦА РЕДАКТИРОВАНИЯ ПРОФИЛЯ
   ============================================ */
.edit-profile-page {
    padding: 30px 0;
}
.edit-profile-container {
    max-width: 720px;
    margin: 0 auto;
}
.edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}
.edit-header h1 {
    font-size: 28px;
    color: var(--text-primary);
}
.edit-header h1 i {
    color: var(--color-primary-text);
    margin-right: 12px;
}
.btn-back {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.btn-back:hover {
    color: var(--color-primary-text);
}

.edit-form {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 30px 35px;
    box-shadow: var(--shadow-heavy);
}
.edit-form .form-group {
    margin-bottom: 20px;
}
.edit-form .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 14px;
}
.edit-form .form-group input,
.edit-form .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s;
    font-family: inherit;
}
.edit-form .form-group input:focus,
.edit-form .form-group textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
}
.edit-form .form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.edit-form .form-group small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.current-avatar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 12px;
    flex-wrap: wrap;
}
.current-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-secondary);
}
.avatar-filename {
    font-size: 13px;
    color: var(--text-muted);
}

.avatar-upload {
    margin-top: 8px;
}
.avatar-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--bg-hover);
}
.avatar-drop-zone:hover {
    border-color: var(--color-primary);
}
.avatar-drop-zone.drag-over {
    border-color: var(--color-primary);
    background: rgba(234,88,12,0.05);
}
.avatar-drop-zone i {
    font-size: 32px;
    color: var(--color-primary-text);
    margin-bottom: 8px;
    display: block;
}
.avatar-drop-zone p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}
#avatarPreview {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
#avatarPreview img {
    max-height: 80px;
    max-width: 100%;
    border-radius: 8px;
    object-fit: cover;
}
.btn-remove {
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    background: var(--toast-error);
    color: white;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}
.btn-remove:hover {
    opacity: 0.9;
}

.social-connect-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--border-light);
}
.social-hint {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}
.social-connect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.social-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 12px;
}
.social-label {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}
.social-input {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
}
.social-item .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    cursor: pointer;
}
.social-item .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 16px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.form-actions .btn-primary {
    padding: 12px 32px;
    border: none;
    border-radius: 30px;
    background: var(--gradient-button);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.form-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(234,88,12,0.3);
}
.form-actions .btn-secondary {
    padding: 12px 32px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.form-actions .btn-secondary:hover {
    background: var(--border-color);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .edit-form {
        padding: 20px;
    }
    .edit-header h1 {
        font-size: 24px;
    }
    .form-actions {
        flex-direction: column;
    }
    .form-actions .btn-primary,
    .form-actions .btn-secondary {
        justify-content: center;
        width: 100%;
    }
    .current-avatar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .social-connect-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .edit-form {
        padding: 16px;
    }
    .edit-header h1 {
        font-size: 20px;
    }
    .edit-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   РЕДАКТИРОВАНИЕ СОЦИАЛЬНЫХ СЕТЕЙ (ЯВНЫЕ ПОЛЯ, ПЛИТКИ)
   ============================================ */
.social-connect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-hover);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.social-item:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.08);
}

.social-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.social-item-icon.vk { background: #4a76a8; }
.social-item-icon.yandex { background: #ff0000; }
.social-item-icon.telegram { background: #0088cc; }
.social-item-icon.discord { background: #5865f2; }
.social-item-icon.github { background: #333; }
.social-item-icon.furaffinity { background: #0b0b0b; }
.social-item-icon.furrynetwork { background: #ea580c; }
.social-item-icon.furry_tver { background: #c2410c; }

.social-item-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.social-item-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Явно выраженное поле в стиле остальных полей формы */
.social-item-fields .social-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: inherit;
}

.social-item-fields .social-input:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}

.social-item-fields .social-input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}

.social-item-fields .social-item-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

/* Toggle switch */
.social-item-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.social-item-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-color);
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.social-item-toggle input:checked + .toggle-slider {
    background: var(--color-primary);
}

.social-item-toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* ============================================
   СОЦСЕТИ В ПРОФИЛЕ (правка N6: компактные чипы)
   ============================================ */
.profile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.social-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    text-decoration: none;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.social-chip i {
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.social-chip .social-chip-label {
    font-weight: 600;
    white-space: nowrap;
}

.social-chip .social-chip-value {
    color: var(--text-muted);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.social-chip:hover {
    transform: translateY(-2px);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-hover);
}

a.social-chip:hover i,
a.social-chip:hover .social-chip-value {
    color: var(--color-primary-text);
}

.social-chip--static {
    cursor: default;
    opacity: 0.85;
}

.social-chip--edit {
    border-style: dashed;
    color: var(--text-secondary);
}

.social-chip--edit i {
    color: var(--color-primary-text);
}

.social-chip--vk i { color: #4a76a8; }
.social-chip--yandex i { color: #ff0000; }
.social-chip--telegram i { color: #0088cc; }
.social-chip--discord i { color: #5865f2; }
.social-chip--github i { color: var(--text-primary); }
.social-chip--furaffinity i { color: #e8762c; }
.social-chip--furrynetwork i { color: #ea580c; }
.social-chip--furry_tver i { color: #c2410c; }

.profile-socials-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.profile-socials-empty:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

/* ============================================
   АДАПТИВНОСТЬ ДЛЯ СОЦСЕТЕЙ
   ============================================ */
@media (max-width: 768px) {
    .social-connect-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .social-item {
        flex-wrap: wrap;
        gap: 8px;
    }

    .social-item-fields {
        flex: 1 1 100%;
        order: 2;
    }

    .social-item-toggle {
        order: 3;
        margin-left: auto;
    }
}

/* ============================================
   КНОПКИ-ФЛАЖКИ ДЛЯ ЖАЛОБ
   ============================================ */
.report-btn,
.report-btn-small {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 30px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.report-btn:hover,
.report-btn-small:hover {
    color: var(--toast-error);
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}
.report-btn-small {
    font-size: 14px;
    padding: 2px 6px;
}


.input-error {
    border-color: var(--toast-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}
.field-error {
    color: var(--toast-error);
    font-size: 13px;
    margin-top: 4px;
}

/* ===== СТИЛИ ДЛЯ EASYMDE (ТЁМНАЯ ТЕМА) ===== */
.dark-theme .EasyMDEContainer .editor-toolbar {
    background: var(--bg-input);
    border-color: var(--border-color);
}
.dark-theme .EasyMDEContainer .editor-toolbar button {
    color: var(--text-secondary);
}
.dark-theme .EasyMDEContainer .editor-toolbar button:hover {
    background: var(--bg-hover);
}
.dark-theme .EasyMDEContainer .CodeMirror {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.dark-theme .EasyMDEContainer .CodeMirror-cursor {
    border-color: var(--text-primary);
}
.dark-theme .EasyMDEContainer .editor-preview {
    background: var(--bg-card);
    color: var(--text-secondary);
}
.dark-theme .EasyMDEContainer .editor-preview pre {
    background: var(--code-bg);
    color: var(--text-primary);
}
.dark-theme .EasyMDEContainer .editor-preview blockquote {
    border-left: 4px solid var(--color-secondary);
    color: var(--text-muted);
}
.dark-theme .EasyMDEContainer .editor-preview a {
    color: var(--color-secondary);
}

/* ===== ЛЕНТА: ВИДЕО ===== */
.feed-card-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--bg-hover);
}

.feed-card-image video:hover {
    cursor: pointer;
}

.feed-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--text-muted);
    background: var(--bg-hover);
}

/* Бейдж типа контента */
.feed-type-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.feed-type-badge.photo { background: rgba(59, 130, 246, 0.85); }
.feed-type-badge.video { background: rgba(239, 68, 68, 0.85); }
.feed-type-badge.event { background: rgba(245, 158, 11, 0.85); }
.feed-type-badge.album { background: rgba(194, 65, 12, 0.85); }
.feed-type-badge.user { background: rgba(34, 197, 94, 0.85); }

/* ============================================
   КАРТЫ МЕРОПРИЯТИЙ, DEALER'S DEN, ПРОЖИВАНИЕ
   ============================================ */
.yfg-map-page { padding: 28px 0 60px; }
.yfg-map-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.yfg-map-header h1 { font-size: 30px; color: var(--text-primary); margin-bottom: 6px; }
.yfg-map-subtitle { color: var(--text-secondary); font-size: 14px; }
.yfg-map-subtitle a { color: var(--color-primary-text); text-decoration: none; font-weight: 600; }
.yfg-map-subtitle a:hover { text-decoration: underline; }
.yfg-map-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.yfg-map-actions a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-card);
    transition: var(--transition);
}
.yfg-map-actions a:hover { background: var(--bg-hover); }
.yfg-map-actions a.primary {
    background: var(--gradient-main);
    color: #ffffff;
    border-color: transparent;
}
.yfg-map-stage { position: relative; margin-bottom: 8px; }
.yfg-map-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    min-height: 320px;
    max-height: 60vh;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--bg-hover);
}
/* Схема без изображения: никакого "фона по умолчанию" - нейтральный холст
   с пунктирной рамкой, чтобы было видно, что фон просто не задан. */
.yfg-map-canvas:not(.has-map-image) {
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    box-shadow: none;
}
.yfg-map-canvas:not(.has-map-image) .yfg-map-placeholder span {
    display: block;
    max-width: 520px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}
.yfg-map-canvas:not(.has-map-image) .yfg-map-placeholder strong { color: var(--text-primary); }
/* Кнопка "Очистить фон" внутри панели инструментов редактора. */
.dd-toolbar-form { display: inline-flex; margin: 0; }
.yfg-muted-hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}
/* Когда фон реально загружен - холст принимает пропорции картинки,
   чтобы SVG-слой (viewBox 0 0 100 100) не разъезжался с изображением. */
.yfg-map-canvas.has-map-image {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
}
.yfg-map-canvas img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.yfg-map-canvas.has-map-image img { height: auto; }
.yfg-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    pointer-events: none;
}
.yfg-map-placeholder[hidden] { display: none !important; }
.yfg-map-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.yfg-map-darkness {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    pointer-events: none;
}
.yfg-map-current {
    display: block;
    max-width: 100%;
    border-radius: 12px;
    margin: 10px 0;
    border: 1px solid var(--border-light);
}
.yfg-map-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.yfg-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.yfg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.yfg-dot.point { background: #c2410c; }
.yfg-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.yfg-swatch.area { background: rgba(234, 88, 12, 0.35); border: 1px solid #c2410c; }
.yfg-swatch.table { background: #c2410c; }
.yfg-swatch.lodging { background: #22c55e; }
.yfg-map-tip,
.yfg-world-tip {
    position: absolute;
    display: none;
    z-index: 40;
    max-width: 280px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(30, 27, 46, 0.95);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.yfg-map-tip .yfg-muted,
.yfg-world-tip .yfg-muted { color: rgba(255, 255, 255, 0.65); }
.yfg-map-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.yfg-panel,
.yfg-map-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
    margin-top: 20px;
}
.yfg-panel h2,
.yfg-map-panel h2 { font-size: 18px; color: var(--text-primary); margin-bottom: 14px; }
.yfg-route-list,
.yfg-area-list { list-style: none; padding: 0; margin: 0; }
.yfg-route-list li,
.yfg-area-list li {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--text-secondary);
}
.yfg-route-list li:last-child,
.yfg-area-list li:last-child { border-bottom: none; }
.yfg-route-list p,
.yfg-area-list p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.yfg-route-index {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradient-main);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yfg-area-color { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; margin-top: 3px; }
.yfg-area-shape {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.yfg-map-empty,
.yfg-muted { color: var(--text-muted); font-size: 14px; }
.yfg-hint { color: var(--text-muted); font-size: 13px; margin: 8px 0; }
.yfg-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.yfg-empty i { font-size: 42px; color: var(--border-color); }
.yfg-empty h3 { margin: 14px 0 8px; color: var(--text-primary); }
.yfg-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.yfg-label .required { color: #ef4444; }
.yfg-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}
.yfg-input:focus { outline: none; border-color: var(--color-primary); }
.yfg-form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.yfg-form-inline .yfg-input { width: auto; }
.yfg-inline-form { display: inline-flex; }
.yfg-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 16px;
    align-items: end;
}
.yfg-form-grid .yfg-form-actions,
.yfg-filter-form .yfg-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.yfg-form-span { grid-column: 1 / -1; }
.yfg-form-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 16px;
    padding: 12px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    background: var(--bg-hover);
}
.yfg-form-row.is-hidden,
.is-hidden { display: none; }
.yfg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-hover);
    transition: var(--transition);
}
.yfg-btn:hover { filter: brightness(0.97); }
.yfg-btn-primary { background: var(--gradient-main); color: #ffffff; }
.yfg-btn-ghost { background: var(--bg-hover); border: 1px solid var(--border-color); }
.yfg-btn-danger { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.yfg-btn-xs { padding: 2px 8px; font-size: 12px; border-radius: 12px; }
.yfg-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.yfg-table th,
.yfg-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    vertical-align: middle;
}
.yfg-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); }
.yfg-table tbody tr:hover { background: var(--bg-hover); }
.yfg-row-edit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.yfg-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.yfg-details { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.yfg-details summary { cursor: pointer; color: var(--color-primary-text); font-weight: 600; }
.yfg-house-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.yfg-house {
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px;
    background: var(--bg-card);
}
.yfg-house h3 { font-size: 16px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yfg-occupancy { font-size: 13px; color: var(--text-secondary); margin: 8px 0; }
.yfg-occupancy strong { color: var(--color-primary-text); }
.yfg-residents { list-style: none; padding: 0; margin: 10px 0; font-size: 13px; }
.yfg-residents li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-light);
}
.yfg-residents a { color: var(--color-primary-text); text-decoration: none; font-weight: 600; }
.yfg-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(194, 65, 12, 0.14);
    color: var(--color-secondary);
}
.yfg-world-map {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    box-shadow: var(--shadow);
    margin-top: 18px;
}
.yfg-world-map canvas { display: block; cursor: crosshair; }
.yfg-marker-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.yfg-marker-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 13px;
}
.yfg-marker-list a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.yfg-marker-list a:hover { color: var(--color-primary-text); }
@media (max-width: 768px) {
    .yfg-map-header { flex-direction: column; }
    .yfg-map-actions { width: 100%; }
    .yfg-row-edit { flex-direction: column; align-items: stretch; }
}


/* ============================================ */
/* Balance page family (extracted from balance.html, tech debt E) */
/* ============================================ */

    .balance-page {
        padding: 30px 0;
    }
    .balance-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 30px;
        background: var(--bg-card);
        padding: 30px 35px;
        border-radius: 20px;
        box-shadow: var(--shadow);
        transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .balance-header-left h1 {
        font-size: 28px;
        color: var(--text-primary);
        margin-bottom: 4px;
    }
    .balance-header-left h1 i {
        color: var(--color-primary-text);
        margin-right: 12px;
    }
    .balance-subtitle {
        font-size: 15px;
        color: var(--text-muted);
    }
    .balance-amount {
        text-align: right;
        background: var(--bg-hover);
        padding: 12px 24px;
        border-radius: 16px;
        border: 1px solid var(--border-light);
        transition: background 0.3s ease, border-color 0.3s ease;
        min-width: 150px;
    }
    .balance-label {
        display: block;
        font-size: 13px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .balance-value {
        font-size: 32px;
        font-weight: 700;
        color: var(--color-primary-text);
    }
    .balance-actions {
        margin-bottom: 30px;
    }
    .balance-actions-card {
        background: var(--bg-card);
        padding: 24px 30px;
        border-radius: 16px;
        box-shadow: var(--shadow);
        transition: background 0.3s ease;
    }
    .balance-actions-card h3 {
        font-size: 18px;
        color: var(--text-primary);
        margin-bottom: 4px;
    }
    .balance-actions-card h3 i {
        color: var(--color-primary-text);
        margin-right: 8px;
    }
    .actions-hint {
        font-size: 14px;
        color: var(--text-muted);
        margin-bottom: 16px;
    }
    .add-balance-form .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .input-group {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }
    .input-group input {
        padding: 10px 16px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        font-size: 16px;
        width: 150px;
        background: var(--bg-input);
        color: var(--text-primary);
        transition: border-color 0.2s, background 0.3s, color 0.3s;
    }
    .input-group input:focus {
        outline: none;
        border-color: var(--color-secondary);
        box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
    }
    .input-group .btn-primary {
        padding: 10px 28px;
        border: none;
        border-radius: 12px;
        background: var(--gradient-main);
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .input-group .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(234,88,12,0.3);
    }
    .transactions-section {
        background: var(--bg-card);
        border-radius: 20px;
        padding: 30px 35px;
        box-shadow: var(--shadow);
        margin-bottom: 30px;
        transition: background 0.3s ease;
    }
    .transactions-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .transactions-header h2 {
        font-size: 22px;
        color: var(--text-primary);
    }
    .transactions-header h2 i {
        color: var(--color-primary-text);
        margin-right: 10px;
    }
    .transactions-count {
        font-size: 14px;
        color: var(--text-muted);
        background: var(--bg-hover);
        padding: 4px 14px;
        border-radius: 20px;
        transition: background 0.3s ease;
    }
    .transactions-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 500px;
        overflow-y: auto;
    }
    .transactions-list::-webkit-scrollbar {
        width: 6px;
    }
    .transactions-list::-webkit-scrollbar-track {
        background: var(--bg-hover);
        border-radius: 10px;
    }
    .transactions-list::-webkit-scrollbar-thumb {
        background: var(--color-secondary);
        border-radius: 10px;
    }
    .transaction-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 20px;
        background: var(--bg-hover);
        border-radius: 12px;
        border-left: 4px solid transparent;
        transition: background 0.3s ease, transform 0.2s;
    }
    .transaction-item:hover {
        transform: translateX(4px);
    }
    .transaction-item.credit {
        border-left-color: var(--toast-success);
    }
    .transaction-item.debit {
        border-left-color: var(--toast-error);
    }
    .tx-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-card);
        color: var(--text-muted);
        flex-shrink: 0;
        transition: background 0.3s ease;
    }
    .transaction-item.credit .tx-icon {
        color: var(--toast-success);
    }
    .transaction-item.debit .tx-icon {
        color: var(--toast-error);
    }
    .tx-info {
        flex: 1;
        min-width: 0;
    }
    .tx-description {
        display: block;
        font-size: 15px;
        color: var(--text-primary);
        font-weight: 500;
    }
    .tx-date {
        font-size: 12px;
        color: var(--text-muted);
    }
    .tx-amount {
        font-size: 18px;
        font-weight: 700;
        flex-shrink: 0;
    }
    .tx-amount.positive {
        color: var(--toast-success);
    }
    .tx-amount.negative {
        color: var(--toast-error);
    }
    .balance-page .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted);
    }
    .balance-page .empty-state i {
        font-size: 48px;
        margin-bottom: 12px;
        color: var(--text-muted);
    }
    .balance-page .empty-state h3 {
        font-size: 20px;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .balance-page .empty-state p {
        font-size: 15px;
    }
    .balance-info-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
    .info-card {
        background: var(--bg-card);
        padding: 20px 24px;
        border-radius: 16px;
        box-shadow: var(--shadow);
        display: flex;
        align-items: flex-start;
        gap: 14px;
        transition: transform 0.2s, box-shadow 0.2s, background 0.3s ease;
        border: 1px solid var(--border-light);
    }
    .info-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }
    .info-icon {
        font-size: 28px;
        color: var(--color-primary-text);
        flex-shrink: 0;
        margin-top: 2px;
    }
    .info-content h4 {
        font-size: 15px;
        color: var(--text-primary);
        margin-bottom: 4px;
    }
    .info-content p {
        font-size: 13px;
        color: var(--text-muted);
        margin: 0;
        line-height: 1.4;
    }

    @media (max-width: 768px) {
        .balance-header {
            flex-direction: column;
            text-align: center;
            padding: 20px;
        }
        .balance-amount {
            text-align: center;
            width: 100%;
        }
        .transactions-section {
            padding: 20px;
        }
        .transactions-header {
            flex-direction: column;
            align-items: flex-start;
        }
        .input-group {
            flex-direction: column;
            align-items: stretch;
        }
        .input-group input {
            width: 100%;
        }
        .input-group .btn-primary {
            width: 100%;
            justify-content: center;
        }
        .transaction-item {
            flex-wrap: wrap;
            padding: 12px 16px;
        }
        .tx-info {
            min-width: 120px;
        }
        .balance-info-cards {
            grid-template-columns: 1fr;
        }
        .info-card {
            align-items: center;
            text-align: center;
        }
    }

    @media (max-width: 480px) {
        .balance-header {
            padding: 16px;
        }
        .balance-header-left h1 {
            font-size: 22px;
        }
        .balance-value {
            font-size: 28px;
        }
        .transactions-section {
            padding: 16px;
        }
        .transaction-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        .tx-amount {
            align-self: flex-end;
        }
        .balance-actions-card {
            padding: 16px 20px;
        }
    }

/* ============================================ */
/* Form fields: labels and inputs (tech debt E) */
/* ============================================ */
:where(.form-group) label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
:where(.form-group) input[type="text"],
:where(.form-group) input[type="number"],
:where(.form-group) input[type="tel"],
:where(.form-group) input[type="email"],
:where(.form-group) input[type="date"],
:where(.form-group) input[type="password"],
:where(.form-group) select,
:where(.form-group) textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.3s;
    font-family: inherit;
}
:where(.form-group) input:focus,
:where(.form-group) select:focus,
:where(.form-group) textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
}
:where(.form-group) select {
    cursor: pointer;
}

/* ============================================ */
/* Weather card (tech debt A.1) */
/* ============================================ */
.weather-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: var(--shadow);
    margin: 24px 0;
    border: 1px solid var(--border-light);
}
.weather-card h2 {
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.weather-card h2 i {
    color: var(--color-primary-text);
    margin-right: 10px;
}
/* Город, к которому привязан прогноз: координаты берутся из справочника
   городов (yfg/utils/cities.py) или из полей мероприятия. */
.weather-city {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
}
.weather-days {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.weather-day {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.weather-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.weather-date {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.weather-icon {
    font-size: 40px;
    line-height: 1;
}
.weather-temp {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary-text);
}
.weather-details {
    font-size: 14px;
    color: var(--text-secondary);
    gap: 20px;
}
.weather-details span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.weather-stale {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
@media (max-width: 480px) {
    .weather-card { padding: 16px 20px; }
    .weather-icon { font-size: 32px; }
    .weather-temp { font-size: 18px; }
    .weather-row { gap: 10px; }
}

/* ============================================ */
/* Event action buttons (tech debt A.2) */
/* ============================================ */
.event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}
.event-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--border-light);
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    cursor: pointer;
}
.event-action-btn:hover {
    background: var(--bg-card);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    color: var(--color-primary-text);
}
.event-action-btn i {
    color: var(--color-primary-text);
    font-size: 16px;
}
.event-action-btn.primary {
    background: var(--gradient-main);
    color: #fff;
    border-color: transparent;
}
.event-action-btn.primary:hover {
    color: #fff;
    box-shadow: 0 6px 20px rgba(234,88,12,0.3);
}
.event-action-btn.primary i {
    color: #fff;
}
.event-action-btn.edit {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}
.event-action-btn.edit:hover {
    background: var(--bg-hover);
    color: var(--color-primary-text);
}

/* Event badges (tech debt B.9) */
.event-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.event-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--color-primary, #c2410c);
    font-size: 15px;
    cursor: default;
    transition: background 0.2s ease, transform 0.2s ease;
}
.event-pill:hover {
    background: var(--bg-card);
    transform: translateY(-2px);
}
.event-pill--no {
    color: var(--text-secondary);
    opacity: 0.7;
}
.event-pill[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.3;
    max-width: 240px;
    width: max-content;
    white-space: normal;
    text-align: center;
    box-shadow: var(--shadow);
    z-index: 60;
    pointer-events: none;
}

/* Event dealer preview (tech debt B.6) */
.event-dealer-preview {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: var(--shadow);
}
.event-dealer-preview h2 {
    margin: 0 0 16px;
    font-size: 20px;
    color: var(--text-primary);
}
.event-dealer-thumb {
    display: inline-block;
    max-width: 400px;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.event-dealer-thumb img {
    display: block;
    width: 100%;
    height: auto;
}
.event-dealer-thumb:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}
.event-dealer-preview p {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}


/* ============================================ */
/* DD theme adaptation (tech debt C5) */
/* ============================================ */
.dark-theme .yfg-map-canvas img {
    filter: brightness(0.85) contrast(1.05);
}

/* Event map preview (tech debt D; правка "карты" п.1-2: полная ширина) */
.event-map-preview {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
}
.event-map-preview h2 {
    font-size: 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.event-map-preview h2 i {
    color: var(--color-secondary);
}
/* Лимит глобальных обращений к Static API исчерпан: карты ещё нет, но
   посетитель видит объяснение, а не пустое место. */
.event-map-preview--pending .event-map-pending-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}
.event-map-preview--pending .event-map-pending-note i {
    margin-top: 3px;
    color: var(--color-secondary);
}
.event-map-image {
    display: block;
    width: 100%;
    line-height: 0;
}
.event-map-image img {
    /* Карта занимает всю ширину своего поля. Не обрезаем и не искажаем:
       логотип и копирайт Яндекса должны оставаться видимыми. */
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}
.event-map-links {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 14px;
    flex-wrap: wrap;
}
.event-map-links a {
    color: var(--color-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.event-map-links a:hover {
    text-decoration: underline;
}
@media (max-width: 480px) {
    .event-map-preview { padding: 16px 20px; }
    .event-map-links { gap: 10px; }
}

/* external-link-guard.js - модальное предупреждение о переходе на внешний ресурс (Task 4) */
.ext-link-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ext-link-overlay[hidden] { display: none; }
.ext-link-modal { background: var(--bg-card, #fff); color: inherit; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); max-width: 480px; width: 100%; padding: 24px; }
.ext-link-modal h3 { margin: 0 0 8px; }
.ext-link-modal-icon { font-size: 32px; line-height: 1; text-align: center; margin-bottom: 8px; color: var(--color-warning-text); font-weight: 700; }
.ext-link-url { font-family: monospace; font-size: 12px; word-break: break-all; background: rgba(0,0,0,0.05); padding: 8px 10px; border-radius: 6px; margin: 12px 0; }
.ext-link-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.ext-link-actions .btn-cancel,
.ext-link-actions .btn-proceed { padding: 8px 14px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-size: 14px; }
.ext-link-actions .btn-cancel { background: transparent; border-color: rgba(0,0,0,0.2); }
.ext-link-actions .btn-proceed { background: #3b82f6; color: #fff; }

/* upload-progress.js - индикатор загрузки файлов на сервер (Этап 1) */
.yfg-upload-tray { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.yfg-upload-card { background: var(--bg-card, #fff); color: var(--text-primary, #16181d); border: 1px solid var(--border-color, rgba(0,0,0,0.12)); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 12px 14px; min-width: 240px; }
.yfg-upload-card--error { cursor: pointer; border-color: var(--toast-error, #ef4444); }
.yfg-upload-name { font-size: 13px; font-weight: 600; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yfg-upload-bar { height: 6px; border-radius: 999px; background: var(--bg-hover, rgba(0,0,0,0.08)); overflow: hidden; }
.yfg-upload-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: #3b82f6; transition: width 0.2s ease; }
.yfg-upload-status { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 8px; }
.yfg-upload-card--success { border-color: var(--toast-success, #22c55e); }
.yfg-upload-card--success .yfg-upload-bar-fill { background: var(--toast-success, #22c55e); }
.yfg-upload-card--success .yfg-upload-status { color: var(--toast-success, #22c55e); font-weight: 600; }
.yfg-upload-card--error .yfg-upload-bar { display: none; }
.yfg-upload-card--error .yfg-upload-status { color: var(--toast-error, #ef4444); font-weight: 600; }
.dark-theme .yfg-upload-card { background: var(--bg-card, #16181d); }
@media (max-width: 600px) { .yfg-upload-tray { right: 12px; left: 12px; bottom: 12px; max-width: none; } }

/* upload-progress.js - оверлей загрузки поверх превью (Этап 3) */
.yfg-upload-host { position: relative; }
.yfg-upload-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,0.5); border-radius: inherit; pointer-events: none; z-index: 20; }
.yfg-upload-overlay-bar { width: 60%; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.2); overflow: hidden; }
.yfg-upload-overlay-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--color-primary); transition: width 0.2s ease; }
.yfg-upload-overlay-pct { color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.yfg-upload-overlay--success .yfg-upload-overlay-fill { width: 100%; background: var(--toast-success, #22c55e); }
.yfg-upload-overlay--success .yfg-upload-overlay-pct { color: #86efac; }
.yfg-upload-overlay--error .yfg-upload-overlay-bar { display: none; }
.yfg-upload-overlay--error .yfg-upload-overlay-pct { color: #fca5a5; }

/* .yfg-badge - единые плашки мероприятия (Этап 2) */
.yfg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; line-height: 1.2; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; border: 1px solid transparent; }
.yfg-badge--success { background: rgba(34,197,94,0.12); color: #15803d; border-color: rgba(34,197,94,0.3); }
.yfg-badge--info { background: rgba(59,130,246,0.12); color: #1d4ed8; border-color: rgba(59,130,246,0.3); }
.yfg-badge--warning { background: rgba(245,158,11,0.14); color: #b45309; border-color: rgba(245,158,11,0.3); }
.yfg-badge--danger { background: rgba(239,68,68,0.12); color: #b91c1c; border-color: rgba(239,68,68,0.3); }
.yfg-badge--muted { background: rgba(107,114,128,0.12); color: #4b5563; border-color: rgba(107,114,128,0.3); }
.yfg-badge--limited { background: rgba(234,88,12,0.14); color: #c2410c; border-color: rgba(234,88,12,0.3); }
.yfg-badge i { font-size: 10px; }

.dark-theme .yfg-badge--success { color: #86efac; background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.4); }
.dark-theme .yfg-badge--info { color: #93c5fd; background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.4); }
.dark-theme .yfg-badge--warning { color: #fcd34d; background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.4); }
.dark-theme .yfg-badge--danger { color: #fca5a5; background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.4); }
.dark-theme .yfg-badge--muted { color: #d1d5db; background: rgba(107,114,128,0.2); border-color: rgba(107,114,128,0.4); }
.dark-theme .yfg-badge--limited { color: #fdba74; background: rgba(234,88,12,0.2); border-color: rgba(234,88,12,0.4); }

.ticket-status-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }

/* .yfg-feature - чипы характеристик мероприятия (Этап 2) */
.event-features { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.yfg-feature { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.3; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-light); }
.yfg-feature i { font-size: 12px; color: var(--color-primary-text); }
.yfg-feature--positive { color: #15803d; border-color: rgba(34,197,94,0.3); }
.yfg-feature--positive i { color: #15803d; }
.yfg-feature--negative { color: #b91c1c; border-color: rgba(239,68,68,0.3); }
.yfg-feature--negative i { color: #b91c1c; }
.yfg-feature--warning { color: #b45309; border-color: rgba(245,158,11,0.3); }
.yfg-feature--warning i { color: #b45309; }
.dark-theme .yfg-feature--positive { color: #86efac; border-color: rgba(34,197,94,0.4); }
.dark-theme .yfg-feature--positive i { color: #86efac; }
.dark-theme .yfg-feature--negative { color: #fca5a5; border-color: rgba(239,68,68,0.4); }
.dark-theme .yfg-feature--negative i { color: #fca5a5; }
.dark-theme .yfg-feature--warning { color: #fcd34d; border-color: rgba(245,158,11,0.4); }
.dark-theme .yfg-feature--warning i { color: #fcd34d; }

/* .yfg-feature: текст показывается при наведении (Этап 1) */
.yfg-feature { padding: 6px; gap: 0; position: relative; }
.yfg-feature i { font-size: 14px; }
.yfg-feature-text { display: none; margin-left: 4px; }
.yfg-feature:hover .yfg-feature-text { display: inline; }
.yfg-feature:hover { padding: 4px 10px; gap: 6px; }

/* Weather card redesign (Этап 4): горизонтальные карточки дня */
.weather-days { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
.weather-day { display: flex; flex-direction: column; gap: 12px; flex: 1 1 240px; min-width: 220px; background: var(--bg-hover); border: 1px solid var(--border-light); border-radius: 14px; padding: 16px 18px; opacity: 0; animation: yfg-weather-in 0.35s ease forwards; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.weather-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
.weather-day-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.weather-day-date { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.weather-day .weather-icon { font-size: 34px; }
.weather-day .weather-temp { font-size: 22px; display: inline-flex; align-items: baseline; }
.weather-temp-max { font-weight: 700; color: var(--color-primary-text); }
.weather-temp-min { font-weight: 500; color: var(--text-muted); margin-left: 4px; font-size: 16px; }
.weather-day-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-secondary); }
.weather-day-meta span { display: inline-flex; align-items: center; gap: 5px; }
@keyframes yfg-weather-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) { .weather-day { flex: 1 1 100%; min-width: 0; } .weather-day .weather-icon { font-size: 30px; } }

.yfg-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 10px; margin-bottom: 10px; }
.yfg-editor-toolbar .yfg-btn { padding: 4px 10px; font-size: 13px; }
.yfg-editor-toolbar .yfg-btn.is-active { background: var(--color-primary); color: #fff; border-color: transparent; }
.yfg-editor-toolbar .yfg-btn[disabled] { opacity: 0.4; cursor: default; }
.yfg-editor-toolbar .yfg-btn.is-dirty { box-shadow: 0 0 0 2px rgba(234,88,12,0.4); }
.yfg-editor-sep { width: 1px; height: 20px; background: var(--border-light); margin: 0 4px; }
.yfg-editor-zoom { min-width: 44px; text-align: center; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.dd-marquee { fill: rgba(59,130,246,0.15); stroke: #3b82f6; stroke-width: 0.3; stroke-dasharray: 1 1; pointer-events: none; }


/* --- DD-редактор / карта: переменные цветов фонов (прогон A) --- */
:root {
    --dd-bg-forest: #86efac;
    --dd-bg-water: #93c5fd;
    --dd-bg-river: #60a5fa;
    --dd-bg-ground: #a3e635;
    --dd-bg-pavement: #d4d4d8;
    --dd-bg-sand: #fde68a;
    --dd-bg-road: #a1a1aa;
}

.dark-theme {
    --dd-bg-forest: #166534;
    --dd-bg-water: #1e3a8a;
    --dd-bg-river: #1d4ed8;
    --dd-bg-ground: #3f6212;
    --dd-bg-pavement: #3f3f46;
    --dd-bg-sand: #854d0e;
    --dd-bg-road: #52525b;
}

.yfg-map-bg { pointer-events: none; }
.yfg-map-object { pointer-events: auto; cursor: pointer; }
/* Редактор (dd-editor.js) рисует элементы классами dd-*; SVG-корень
   .yfg-map-overlay наследует pointer-events: none, поэтому клики до
   обработчиков не доходили. Возвращаем интерактивность элементам редактора. */
.dd-object, .dd-shape, .dd-bg, .dd-handle, .dd-bg-vertex { pointer-events: auto; }
/* Редактору нужен клик и по пустому холсту (рисование зон, рамка, панорама,
   снятие выделения). На read-only страницах корень остаётся прозрачным для
   мыши, чтобы не перехватывать переход по ссылке-обёртке. */
.yfg-map-stage[data-can-manage="1"] .yfg-map-overlay { pointer-events: auto; }
.yfg-map-object:hover .dd-shape { stroke-width: 0.6; }
.yfg-map-label { pointer-events: none; }

.dd-shape { transition: stroke-width 0.15s ease; }


/* --- DD-редактор: палитра типов, инлайн-форма, список объектов (прогон B) --- */
#dd-type-palette { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 10px; margin-bottom: 10px; }
.dd-type-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; font-family: inherit; cursor: pointer; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-input); color: var(--text-secondary); }
.dd-type-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.dd-type-icon { font-size: 15px; line-height: 1; }
.dd-type-name { white-space: nowrap; }
.dd-type-btn.dd-type-active { border-color: var(--color-primary); background: var(--color-primary); color: #ffffff; }
.dark-theme .dd-type-btn { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border-color); }
.dark-theme .dd-type-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.dark-theme .dd-type-btn.dd-type-active { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary-dark); }

.yfg-editor-zoom { cursor: pointer; }

#dd-object-form[hidden] { display: none !important; }
#dd-object-form .dd-color-input { padding: 2px; height: 38px; }
.dd-object-extra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 16px; align-items: end; }
.dd-object-form-actions { flex-wrap: wrap; }

#dd-object-list .dd-object-list-scroll { overflow-x: auto; }
.dd-object-table { table-layout: fixed; width: 100%; }
.dd-object-table th, .dd-object-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.dd-object-table tbody tr { cursor: pointer; }
.dd-object-table tbody tr:hover { background: var(--bg-hover); }
.dd-object-table tbody tr.dd-row-selected { background: rgba(234,88,12,0.12); }
.dd-list-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-list-actions .yfg-btn { padding: 3px 8px; font-size: 12px; }
#dd-object-list-empty[hidden] { display: none !important; }

/* --- Прогон C4: панель деталей объекта, список с фильтром, подсветка --- */
.dd-editor-layout { display: flex; gap: 16px; align-items: flex-start; }
.dd-editor-layout > .yfg-map-stage { flex: 1 1 auto; min-width: 0; }
.dd-editor-side { flex: 0 0 340px; max-width: 340px; position: sticky; top: 16px; }
.dd-editor-side .yfg-form-grid { grid-template-columns: 1fr; }
.dd-editor-side .dd-object-extra { grid-template-columns: 1fr; }
.dd-object-side-panel { max-height: calc(100vh - 150px); overflow-y: auto; }
.dd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dd-panel-head h2 { margin: 0; }
.dd-icon-btn { padding: 2px 10px; font-size: 16px; line-height: 1.1; }
.dd-object-special:empty { display: none; }
.dd-subtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 0 6px; font-size: 14px; }
.dd-residents-counter { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.dd-residents-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dd-residents-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.dd-residents-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dd-residents-add { display: flex; gap: 6px; align-items: center; flex: 1 1 180px; }
.dd-residents-add .yfg-input { min-width: 0; }
.dd-panel-status { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); }
.dd-panel-status.is-error { color: #dc2626; }
.dd-panel-status.is-success { color: #16a34a; }
.dd-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dd-list-head h2 { margin: 0; }
.dd-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.dd-seg-btn { padding: 5px 12px; font-size: 13px; font-family: inherit; cursor: pointer; border: 0; background: var(--bg-card); color: var(--text-secondary); }
.dd-seg-btn + .dd-seg-btn { border-left: 1px solid var(--border-color); }
.dd-seg-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.dd-seg-btn.dd-seg-active { background: var(--color-primary); color: #fff; }
.dd-list-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.dd-list-tool { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.dd-list-tool .yfg-input { min-width: 130px; }
.dd-list-tool-wide { flex: 1 1 220px; }
.dd-object-table tbody tr.dd-row-hover { background: var(--bg-hover); }
.dd-object.is-hovered .dd-shape { stroke: var(--color-primary); stroke-width: 0.8; }
.dd-bg.is-hovered { stroke-width: 0.8; }
.dd-kind-bg { color: var(--text-muted); }
@media (max-width: 1024px) {
    .dd-editor-layout { flex-direction: column; }
    .dd-editor-side { position: static; flex: none; max-width: none; width: 100%; }
    .dd-object-side-panel { max-height: none; }
}


/* --- Прогон C: статус-строка, справка, легенда, инструменты, фоны --- */
.dd-status-bar {
    font-size: 13px;
    color: var(--text-muted);
    padding: 4px 2px 12px;
    min-height: 20px;
    line-height: 1.5;
}

.dd-help {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.dd-help[hidden] { display: none !important; }
.dd-help h3 { font-size: 14px; color: var(--text-primary); margin-bottom: 8px; }
.dd-help ul { list-style: none; padding: 0; margin: 0; }
.dd-help li { margin: 3px 0; }

.dd-legend-section { margin-top: 16px; }
.dd-legend-section:first-child { margin-top: 0; }
.dd-legend-section h3 { font-size: 14px; color: var(--text-primary); margin-bottom: 8px; }
.dd-legend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dd-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.dd-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color); flex: none; }

.dd-bg-type-select { max-width: 130px; padding: 4px 8px; height: auto; font-size: 13px; }
.dd-grid-line { stroke: var(--border-light); }
.dark-theme .dd-grid-line { stroke: rgba(255, 255, 255, 0.22); }

#ddDarkness { accent-color: var(--color-primary); }

.yfg-editor-toolbar .yfg-btn.dd-tool-active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary-dark);
}

#dd-bg-form[hidden] { display: none !important; }

/* --- Прогон C4 (P6): всплывающая карточка объекта на карте (read-only) --- */
.yfg-map-card { position: absolute; z-index: 30; max-width: 280px; padding: 12px 14px; border-radius: 12px; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: var(--shadow); font-size: 13px; line-height: 1.5; }
.yfg-map-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.yfg-map-card-close { border: 0; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.yfg-map-card-close:hover { color: var(--text-primary); }
.yfg-map-card-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.yfg-map-card-fields { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.yfg-map-card-row { display: flex; gap: 8px; justify-content: space-between; }
.yfg-map-card-label { color: var(--text-muted); }
.yfg-map-card-value { text-align: right; }
.yfg-map-card-residents { list-style: none; margin: 8px 0 0; padding: 0; color: var(--text-secondary); }
.yfg-map-card-status { margin-top: 8px; color: var(--text-secondary); }
.yfg-map-card-status.is-full { color: #dc2626; }
.yfg-map-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.yfg-map-card-occupy { margin: 0; }
.yfg-map-object.is-flash { stroke: var(--color-primary); stroke-width: 0.8; }

/* --- Прогон C5: удаление фона и режим карточек под картой --- */
.dd-list-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-card-actions { display: flex; gap: 8px; }
.dd-card-actions[hidden] { display: none !important; }
.dd-card-actions .yfg-btn { font-size: 12px; padding: 4px 10px; }
.dd-card-list { display: block; padding: 2px 0 8px; }
.dd-card-list[hidden] { display: none !important; }
.dd-card-status { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--bg-hover); color: var(--text-secondary); }
.dd-card-status[hidden] { display: none !important; }
.dd-card-status.is-error { background: #fee2e2; color: #b91c1c; }
.dd-card-status.is-success { background: #dcfce7; color: #15803d; }
.dd-card-group { margin-bottom: 14px; }
.dd-card-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.dd-card-group-head:hover { background: var(--bg-hover); }
.dd-card-group-icon { font-size: 15px; }
.dd-card-group-name { color: var(--text-primary); }
.dd-card-group-count { margin-left: auto; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); font-size: 12px; font-weight: 600; text-align: center; }
.dd-card-group-chevron { color: var(--text-secondary); }
.dd-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.dd-card-grid[hidden] { display: none !important; }
.dd-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow); }
.dd-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.dd-card-head { display: flex; align-items: center; gap: 8px; }
.dd-card-icon { font-size: 15px; }
.dd-card-title { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.dd-card-badge { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.dd-card-field { display: flex; gap: 8px; font-size: 13px; }
.dd-card-field-label { flex: 0 0 92px; color: var(--text-muted); }
.dd-card-field-value { flex: 1 1 auto; color: var(--text-primary); overflow-wrap: anywhere; }
.dd-card-muted { color: var(--text-muted); font-size: 13px; }
.dd-card-progress { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.dd-card-progress-bar { display: block; height: 6px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.dd-card-progress-fill { display: block; height: 100%; background: var(--color-primary); }
.dd-card-progress.is-full .dd-card-progress-fill { background: #dc2626; }
.dd-card-residents { display: flex; flex-direction: column; gap: 6px; }
.dd-card-resident { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dd-card-resident-name { flex: 1 1 auto; color: var(--text-primary); }
.dd-card-master { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dd-card-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), #c2410c); color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; flex: 0 0 auto; }
.dd-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dd-card-master-name { color: var(--text-primary); font-weight: 600; }
.dd-card-link { color: var(--color-primary-text); text-decoration: none; overflow-wrap: anywhere; }
.dd-card-link:hover { text-decoration: underline; }
.dd-card-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-color); flex: 0 0 auto; }
.dd-card-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.dd-card-actions-row .yfg-btn { font-size: 12px; padding: 4px 10px; }
.dd-card-add-resident { display: flex; gap: 6px; align-items: center; }
.dd-card-add-resident .yfg-input { width: 140px; font-size: 12px; padding: 4px 8px; }
.dark-theme .dd-card-status.is-error { background: rgba(220, 38, 38, 0.2); color: #fca5a5; }
.dark-theme .dd-card-status.is-success { background: rgba(22, 163, 74, 0.2); color: #86efac; }
.dark-theme .dd-card-progress.is-full .dd-card-progress-fill { background: #f87171; }
@media (max-width: 720px) {
    .dd-card-grid { grid-template-columns: 1fr; }
}

/* --- Прогон C6: секции с формами добавления, индикация заселения, чипы --- */
.dd-quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; }
.dd-chip { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: 13px; cursor: pointer; }
.dd-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.dd-chip.is-active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.dd-card-body[hidden] { display: none !important; }
.dd-card-group-head { position: sticky; top: 72px; z-index: 5; }
.dd-card-empty { margin: 0 0 10px; padding: 10px 12px; border: 1px dashed var(--border-color); border-radius: 10px; color: var(--text-secondary); font-size: 13px; }
.dd-card-main-action { display: inline-flex; align-items: center; }
.dd-card-main-action .yfg-btn { font-size: 13px; padding: 6px 14px; }
.dd-card-login { text-decoration: none; }
.dd-card-icons { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.dd-card-icon-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; }
.dd-card-here { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.dark-theme .dd-card-here { background: rgba(22, 163, 74, 0.25); color: #86efac; border-color: rgba(134, 239, 172, 0.4); }
.dd-card-resident.is-me .dd-card-resident-name { font-weight: 700; color: var(--color-primary-text); }
.dd-card-add-resident { margin-top: 8px; }
.dd-add-form { margin-top: 8px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); }
.dd-add-summary { padding: 10px 12px; cursor: pointer; font-weight: 600; color: var(--text-primary); }
.dd-add-body { padding: 0 12px 12px; }
.dd-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dd-add-field { display: flex; flex-direction: column; gap: 4px; }
.dd-add-field.is-wide { grid-column: 1 / -1; }
.dd-add-field-label { font-size: 12px; color: var(--text-secondary); }
.dd-add-field .yfg-input { width: 100%; font-size: 13px; }
.dd-add-submit { margin-top: 12px; }
.dd-add-status { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); }
.dd-add-status[hidden] { display: none !important; }
.dd-add-status.is-error { color: #b91c1c; }
.dark-theme .dd-add-status.is-error { color: #fca5a5; }
@keyframes dd-flash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
.dd-object.is-flash, .dd-bg.is-flash { animation: dd-flash-pulse 0.4s ease-in-out 4; }
.dd-object.is-flash .dd-shape { stroke: var(--color-primary); stroke-width: 0.8; }
.dd-bg.is-flash { stroke-width: 0.8; }
@media (max-width: 720px) {
    .dd-add-grid { grid-template-columns: 1fr; }
    .dd-quick-filters { gap: 6px; }
    .dd-card-icons { margin-left: 0; }
}

/* Прогон 9 - секция "Жильцы мероприятия" (таблица) */
.dd-residents-table-wrap { overflow-x: auto; }
.dd-residents-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd-residents-table th, .dd-residents-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.dd-residents-table th { font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.dd-residents-table tbody tr:hover { background: var(--bg-hover); }
.dd-residents-table .is-me { font-weight: 600; color: var(--color-primary-text); }
.dd-residents-table .yfg-btn { padding: 2px 10px; font-size: 12px; line-height: 1.6; }

/* Фаза 17: маркер "только организаторам сайта" в выборе роли */
.role-pick__lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.role-pick__lock i {
    font-size: 10px;
}

/* ===== Управление картой Яндекс.Карт в редакторе (правка "карты", п.4) ===== */
.event-map-controls .form-subtitle,
.form-subtitle {
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0 10px;
    color: var(--text-primary);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

/* Пояснение внутри формы мероприятия: откуда берутся цена и количество
   билетов, почему координаты недоступны и т.п. */
.form-hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}
.form-hint i {
    margin-right: 4px;
}
.form-hint a {
    color: var(--color-primary);
}
/* Координаты места проведения: доступны только в режиме "Точка по координатам",
   в остальных режимах поля заблокированы (static/js/event_map.js). */
[data-map-coords-field].is-disabled .form-row {
    opacity: 0.55;
}
[data-map-coords-field].is-disabled input:disabled {
    cursor: not-allowed;
}
.event-map-controls [data-map-link-field][hidden],
.event-map-controls [data-map-zoom-field][hidden] {
    display: none;
}
.event-map-current {
    margin: 12px 0 8px;
}
.event-map-current img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    border: 1px solid var(--border-light);
}
.event-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.event-map-meta {
    margin-top: 12px;
}

/* ============================================
   НЕДОСТАЮЩИЕ КЛАССЫ ШАБЛОНОВ (правки аудита тёмной темы)
   Все цвета - через переменные темы; светлые фоны не хардкодятся.
   Блок нейтральный по специфичности: инлайновые <style> в шаблонах
   при равной специфичности идут позже и продолжают переопределять вид.
   ============================================ */

/* ---- Статистика: блок "число + подпись" ---- */
.stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.stat-content .stat-number {
    line-height: 1.15;
}
.stat-content .stat-label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-muted);
}

/* ---- Контейнер формы (карточка) ---- */
.form-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 26px;
    max-width: 720px;
    margin: 0 auto 24px;
    box-shadow: var(--shadow);
}

/* ---- Строка чекбоксов ---- */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
}
.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}
.checkbox-group input[type="checkbox"],
.user-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ---- Селект ---- */
.form-select {
    width: 100%;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}

/* ---- Компактный переключатель и половинная колонка формы ---- */
.switch.switch-sm {
    font-size: 13px;
}
.switch.switch-sm span,
.switch.switch-sm .switch-label {
    font-size: 13px;
}
.form-group.half {
    flex: 1 1 calc(50% - 8px);
    min-width: 220px;
}

/* ---- Ссылки в отчётах и мини-статистика ---- */
.report-link {
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
}
.report-link:hover {
    color: var(--color-primary-text);
    text-decoration: underline;
}
.stats-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

/* ---- Бейджи: статус события и статус передачи (общие токены) ---- */
.event-status,
.transfer-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-color);
}
.event-status.pending,
.transfer-status.pending {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}
.event-status.approved,
.event-status.published,
.transfer-status.approved {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}
.event-status.rejected,
.event-status.cancelled,
.transfer-status.rejected,
.transfer-status.cancelled {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-color);
}
.event-status.draft {
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-color);
}
.event-status.completed,
.transfer-status.completed {
    background: var(--badge-info-bg);
    color: var(--badge-info-color);
}
/* Тёмная тема: повышенная специфичность, чтобы перебивать светлые пастели,
   продублированные инлайновыми <style> в отдельных шаблонах.
   .badge-status уже покрыт dark-переопределениями в блоке "Бейджи статусов". */
.dark-theme .event-status,
.dark-theme .transfer-status {
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-color);
}
.dark-theme .event-status.pending,
.dark-theme .transfer-status.pending {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}
.dark-theme .event-status.approved,
.dark-theme .event-status.published,
.dark-theme .transfer-status.approved {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}
.dark-theme .event-status.rejected,
.dark-theme .event-status.cancelled,
.dark-theme .transfer-status.rejected,
.dark-theme .transfer-status.cancelled {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-color);
}
.dark-theme .event-status.draft {
    background: var(--badge-neutral-bg);
    color: var(--badge-neutral-color);
}
.dark-theme .event-status.completed,
.dark-theme .transfer-status.completed {
    background: var(--badge-info-bg);
    color: var(--badge-info-color);
}
.event-deleted-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid var(--badge-danger-bg);
    border-radius: 12px;
    background: var(--badge-danger-bg);
    color: var(--badge-danger-color);
}

/* ---- Заголовки страниц ---- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.page-header h1,
.page-header h2 {
    margin: 0;
    font-size: 24px;
    color: var(--text-primary);
}
.page-subtitle,
.subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ---- Списки сущностей ---- */
.partners-list,
.events-list,
.reports-list,
.requests-list,
.transfer-requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.col-cat {
    min-width: 150px;
}

/* ---- Аутентификация ---- */
.auth-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---- Контентные страницы ---- */
.about-content,
.contacts-content {
    max-width: 900px;
    margin: 0 auto;
}
.hero__text {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}
.community-section {
    margin-top: 40px;
    min-height: 0;
}
.media-section {
    margin-bottom: 20px;
}
.apply-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.btn-large {
    padding: 12px 30px;
    font-size: 15px;
    border-radius: 12px;
}

/* ---- Алерты ---- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text-primary);
}
.alert.success,
.alert.alert-success {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
    border-color: var(--badge-success-bg);
}
.alert.error,
.alert.danger,
.alert.alert-error,
.alert.alert-danger {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-color);
    border-color: var(--badge-danger-bg);
}
.alert.warning,
.alert.alert-warning {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
    border-color: var(--badge-warning-bg);
}
.alert.info {
    background: var(--badge-info-bg);
    color: var(--badge-info-color);
    border-color: var(--badge-info-bg);
}

/* ---- Пустые состояния и подсказки ---- */
.empty-hint,
.muted-note,
.user-search-empty,
.dd-hint,
.buy-preview-hint {
    font-size: 13px;
    color: var(--text-muted);
}
.empty-hint,
.user-search-empty {
    padding: 24px 12px;
    text-align: center;
}
.custom-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    font-size: 28px;
    color: var(--text-muted);
    background: var(--bg-hover);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
}

/* ---- Тикеты ---- */
.ticket-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.ticket-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Организаторы / поиск пользователей ---- */
.event-organizers-page {
    display: block;
}
.organizer-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}
.user-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    margin-top: 10px;
    overflow-y: auto;
}
.notif-settings-form {
    display: block;
}
.master-switch {
    margin-bottom: 18px;
}
.master-profile-left,
.master-profile-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ---- Разные утилитарные классы ---- */
.toggle-partner {
    min-width: 90px;
}
.org-events-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.event-action-btn.manage {
    color: var(--color-primary-text);
}
.reaction-emoji {
    font-size: 18px;
    line-height: 1;
}
.scan-header-main,
.scan-left,
.scan-right {
    min-width: 0;
}
.yfgid-docs {
    margin-bottom: 18px;
}
.yfgid-docs-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text-primary);
}
.buy-form--pending {
    display: block;
}
.buy-form--pending .buy-preview-hint {
    margin: 8px 0 0;
}

/* ---- Дополнительные поля карточки элемента (альбомы/соцсети) ---- */
.item-extra {
    margin-top: 10px;
}
.item-extra-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.item-author {
    font-weight: 600;
    color: var(--text-secondary);
}
.item-date,
.item-type {
    color: var(--text-muted);
}

/* ---- Палитра типов Dealers Den (зеркало #dd-type-palette) ---- */
.dd-type-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.dd-object-form-panel,
.dd-object-list-panel {
    min-width: 0;
}

/* ---- Адаптивность для новых классов ---- */
@media (max-width: 900px) {
    .master-profile-left,
    .master-profile-right {
        gap: 12px;
    }
}
@media (max-width: 700px) {
    .form-container {
        padding: 20px 16px;
        border-radius: 12px;
    }
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .stats-mini {
        gap: 12px;
    }
    .checkbox-group {
        gap: 8px 14px;
    }
    .form-group.half {
        flex: 1 1 100%;
        min-width: 0;
    }
    .organizer-add-form {
        flex-direction: column;
        align-items: stretch;
    }
    .alert {
        padding: 10px 12px;
    }
}

/* ===== Доступность: пропуск навигации и видимый фокус ===== */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10000;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--gradient-main, #e8590c);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: top 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* Клавиатурный фокус виден на всех интерактивных элементах; мышью
   подсветка не появляется, чтобы не менять привычный вид. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary, #e8590c);
    outline-offset: 2px;
    border-radius: 6px;
}

/* main получает tabindex="-1" только как цель перехода по skip-link:
   рамку ему не рисуем. */
main:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
}

/* ---------- Шапка: навигация, поиск и переключатель темы ---------- */
.header-inner { position: relative; }
.header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 14px;
}
.header-nav a {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.header-nav a:hover { color: var(--color-primary-text); }
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
}
.header-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.header-icon-btn:focus-visible,
.burger-menu:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}
.mobile-search-toggle,
.mobile-account-link { display: none; }
.burger-menu {
    border: 0;
    background: transparent;
}

@media (max-width: 900px) {
    .header-nav { display: none; }
}

@media (max-width: 768px) {
    .header-search.mobile-open {
        display: block;
        position: absolute;
        top: 68px;
        left: 12px;
        right: 12px;
        max-width: none;
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        background: var(--bg-card);
        box-shadow: var(--shadow-heavy);
        z-index: 1002;
    }
    .mobile-search-toggle,
    .mobile-account-link { display: inline-flex; }
    .header-right { gap: 4px; }
    .theme-toggle-btn { display: none; }
    .feed-link-text { display: none; }
}

@media (max-width: 768px) {
    .hero__container { width: 100%; min-width: 0; }
    .hero__badge .badge {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 12px;
        line-height: 1.35;
        padding: 4px 12px;
    }
    #typing-badge { min-width: 0; }
    .hero-description { max-width: 100%; overflow-wrap: anywhere; }
}

.feed-more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.master-rating .stars { color: #f59e0b; letter-spacing: 1px; }
.master-rating .star-muted { opacity: 0.25; }

/* Passkeys: вход и настройки безопасности. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
    color: var(--text-muted);
    font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.passkey-login-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
}
.passkey-status {
    min-height: 18px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.passkey-status.is-error { color: var(--toast-error, #dc2626); }
.passkey-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.passkey-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
}
.passkey-meta { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.passkey-empty { color: var(--text-muted); }

/* Email-рассылки в админке. */
.campaigns-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.campaigns-grid .form-group { margin-bottom: 14px; }
.campaigns-grid .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.campaigns-grid input,
.campaigns-grid select,
.campaigns-grid textarea {
    width: 100%;
    box-sizing: border-box;
}
.campaigns-grid textarea { resize: vertical; min-height: 160px; }
.campaigns-grid .admin-card { margin: 0; }
@media (max-width: 900px) {
    .campaigns-grid { grid-template-columns: minmax(0, 1fr); }
}

.campaigns-grid input,
.campaigns-grid select,
.campaigns-grid textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
}

/* Подтверждённые соцсети в безопасности профиля. */
.social-accounts { display: grid; gap: 10px; margin-top: 16px; }
.social-account {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-input);
}
.social-account__icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; color: #fff; font-size: 20px; flex: 0 0 42px;
}
.social-account__icon--vk { background: #0077ff; }
.social-account__icon--yandex { background: #fc3f1d; }
.social-account__icon--telegram { background: #2aabee; }
.social-account__body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.social-account__state { color: #047857; font-size: 13px; font-weight: 600; }
.social-account__muted { color: var(--text-muted); font-size: 13px; }
@media (max-width: 640px) {
    .social-account { flex-wrap: wrap; }
    .social-account .btn-primary, .social-account form, .social-account form .btn-secondary { width: 100%; }
}

/* Кнопки соцсетей не должны растягиваться на всю карточку. */
.social-account .btn-primary,
.social-account .btn-secondary {
    width: auto;
    margin-top: 0;
    padding: 9px 16px;
    font-size: 14px;
    flex: 0 0 auto;
}
@media (max-width: 640px) {
    .social-account .btn-primary,
    .social-account .btn-secondary,
    .social-account form { width: 100%; }
}

/* Организатор в карточке мероприятия + verified-галочка. */
.event-card-organizer { display: flex; align-items: center; gap: 2px; margin: 2px 0 8px;
    font-size: 12px; color: var(--text-muted); }
.event-card-organizer a { color: var(--text-secondary); font-weight: 600; text-decoration: none; }
.event-card-organizer a:hover { color: var(--color-primary-text); }

/* ---- css/upload.css ---- */
/* ==========================================================================
   YFG - единый формат загрузки файлов + редактор кадрирования (пункты 4 и 5).
   Подключается из base.html, поэтому доступен на всех страницах.
   ========================================================================== */

/* ---------- Единое поле загрузки ---------- */
.upload-field {
    display: block;
    width: 100%;
    margin: 0;
}

.upload-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.upload-field__box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 2px dashed var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    transition: border-color 0.2s, background 0.2s;
}

.upload-field__box:hover,
.upload-field--dragover .upload-field__box {
    border-color: var(--color-primary);
    background: var(--bg-hover);
}

.upload-field__preview {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 22px;
}

.upload-field__preview--wide {
    width: 168px;
    height: 56px;
    border-radius: 10px;
}

.upload-field__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upload-field__info {
    flex: 1 1 auto;
    min-width: 0;
}

.upload-field__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-field__hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

.upload-field__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.upload-field__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.upload-field__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

.upload-field__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.upload-field__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tag-bg);
    color: var(--tag-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.upload-field__error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--toast-error);
}

/* ---------- Модальное окно кадрирования ---------- */
.yfg-crop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 15, 22, 0.74);
    backdrop-filter: blur(2px);
}

.yfg-crop-panel {
    width: min(760px, 96vw);
    max-height: 94vh;
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

.yfg-crop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.yfg-crop-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.yfg-crop-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.yfg-crop-close {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.yfg-crop-close:hover {
    color: var(--toast-error);
}

.yfg-crop-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.yfg-crop-stage-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.yfg-crop-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #101018;
    cursor: grab;
    touch-action: none;
}

.yfg-crop-stage.is-dragging {
    cursor: grabbing;
}

.yfg-crop-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: top left;
    user-select: none;
    -webkit-user-drag: none;
}

.yfg-crop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.yfg-crop-grid-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.32);
}

.yfg-crop-grid-line--v {
    top: 0;
    bottom: 0;
    width: 1px;
}

.yfg-crop-grid-line--h {
    left: 0;
    right: 0;
    height: 1px;
}

.yfg-crop-frame {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
}

.yfg-crop-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.yfg-crop-zoom {
    flex: 1 1 auto;
    accent-color: var(--color-primary);
}

.yfg-crop-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Схематичная иллюстрация того, как фото встанет в целевое место */
.yfg-crop-schematic {
    flex: 0 0 190px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-hover);
}

.yfg-crop-schematic h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.yfg-crop-schematic-canvas {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #101018;
}

.yfg-crop-schematic-canvas img {
    display: block;
    width: 100%;
    height: auto;
}

.yfg-crop-schematic-rect {
    position: absolute;
    border: 2px dashed var(--color-primary);
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgba(10, 10, 16, 0.45);
}

.yfg-crop-schematic-target {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.yfg-crop-schematic-shape {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--color-primary);
    background: rgba(234, 88, 12, 0.12);
}

.yfg-crop-schematic-shape--circle {
    border-radius: 50%;
}

.yfg-crop-schematic-note {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}

.yfg-crop-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 720px) {
    .yfg-crop-body {
        flex-direction: column;
    }

    .yfg-crop-schematic {
        flex: 1 1 auto;
        width: 100%;
    }

    .upload-field__box {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Миниатюры выбранных файлов (multi-upload) ---------- */
.upload-field__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.upload-field__thumb {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-hover, rgba(0, 0, 0, .05));
    border: 1px solid var(--border-color, rgba(0, 0, 0, .08));
}

.upload-field__thumb img,
.upload-field__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upload-field__thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(15, 15, 22, .72);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: background .2s;
}

.upload-field__thumb-remove:hover { background: var(--toast-error, #ef4444); }

.upload-field__thumb-remove span { line-height: 1; font-size: 15px; }

/* ---- css/media.css ---- */
/* ==========================================================================
   Общие стили медиа-превью (лайтбокс) - грузятся на всех страницах (base.html).
   Раньше блок жил в albums.css под скоупом .yfg-albums, поэтому на лентах
   (/feed, /, /post/<id>) разметка лайтбокса оставалась без стилей.
   ========================================================================== */

/* ---------- Лайтбокс ---------- */
.album-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 12, 18, 0.9);
    padding: 24px;
}

.album-lightbox[hidden] {
    display: none;
}

.album-lightbox-body {
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.album-lightbox-body img, .album-lightbox-body video {
    max-width: 100%;
    max-height: 76vh;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.album-lightbox-caption {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.album-lightbox-counter {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.album-lightbox-close, .album-lightbox-nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.album-lightbox-close:hover, .album-lightbox-nav:hover {
    background: var(--gradient-main);
    transform: scale(1.06);
}

.album-lightbox-close {
    top: 20px;
    right: 20px;
}

.album-lightbox-nav--prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.album-lightbox-nav--next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.album-lightbox-nav--prev:hover, .album-lightbox-nav--next:hover {
    transform: translateY(-50%) scale(1.06);
}

.album-lightbox-nav[disabled] {
    opacity: 0.35;
    cursor: default;
}


/* <=700px: лайтбокс (media.css не имел ни одного @media). Уменьшаем отступы
   и элементы управления, чтобы изображение и кнопки не перекрывались
   на узком экране. */
@media (max-width: 700px) {
    .album-lightbox {
        padding: 12px;
    }
    .album-lightbox-body {
        max-width: 100%;
        gap: 8px;
    }
    .album-lightbox-body img,
    .album-lightbox-body video {
        max-height: 68vh;
        border-radius: 10px;
    }
    .album-lightbox-close,
    .album-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    .album-lightbox-close {
        top: 10px;
        right: 10px;
    }
    .album-lightbox-nav--prev {
        left: 8px;
    }
    .album-lightbox-nav--next {
        right: 8px;
    }
    .album-lightbox-caption {
        font-size: 13px;
    }
}

/* ---- css/cookies.css ---- */
/* Предупреждение о куки и панель настроек. Подключается вместе с
   templates/partials/_cookie_notice.html. */

.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    padding: 14px clamp(12px, 4vw, 28px) calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(23, 20, 38, 0.96);
    color: #f4f1ff;
    backdrop-filter: blur(8px);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.55);
    animation: cookie-notice-in 0.28s ease-out;
}

@keyframes cookie-notice-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

.cookie-notice__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cookie-notice__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #c2410c 0%, #c2410c 100%);
    color: #fff;
    font-size: 18px;
}

.cookie-notice__text { flex: 1 1 320px; min-width: 0; }

.cookie-notice__text strong { font-size: 15px; }

.cookie-notice__text p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cfc9e8;
}

.cookie-notice__text a { color: #ffb27a; }

.cookie-notice__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-notice__btn {
    height: 42px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
}

.cookie-notice__btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #c2410c 0%, #c2410c 100%);
    box-shadow: 0 10px 24px -12px rgba(234, 88, 12, 0.8);
}

.cookie-notice__btn--primary:hover { transform: translateY(-1px); }

.cookie-notice__btn--ghost {
    color: #f4f1ff;
    background: transparent;
    border-color: rgba(244, 241, 255, 0.28);
}

.cookie-notice__btn--ghost:hover { border-color: #ffb27a; color: #ffb27a; }

/* ---------- панель настроек ---------- */
.cookie-settings {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

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

.cookie-settings__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 17, 33, 0.55);
    backdrop-filter: blur(2px);
}

.cookie-settings__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    border-radius: 22px;
    background: #fff;
    color: #1f1d2e;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5);
}

html.dark-theme .cookie-settings__dialog { background: #1c1a2b; color: #f1eefc; }

.cookie-settings__dialog h2 { margin: 0 0 8px; font-size: 20px; }

.cookie-settings__lead {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6f6a8a;
}

html.dark-theme .cookie-settings__lead { color: #b3adcf; }

.cookie-settings__lead a { color: #c2410c; }

.cookie-settings__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid #e6e2f2;
    border-radius: 14px;
    cursor: pointer;
}

html.dark-theme .cookie-settings__row { border-color: #332f4a; }

.cookie-settings__row--locked { opacity: 0.85; cursor: default; }

.cookie-settings__row input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #c2410c;
    flex: 0 0 auto;
}

.cookie-settings__row strong { display: block; font-size: 14px; }

.cookie-settings__row small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6f6a8a;
}

html.dark-theme .cookie-settings__row small { color: #b3adcf; }

.cookie-settings__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.cookie-settings__link {
    margin-right: auto;
    font-size: 13px;
    color: #c2410c;
    text-decoration: none;
}

.cookie-settings__link:hover { text-decoration: underline; }

.cookie-settings .cookie-notice__btn--ghost {
    color: #1f1d2e;
    border-color: #d9d4ee;
}

html.dark-theme .cookie-settings .cookie-notice__btn--ghost {
    color: #f1eefc;
    border-color: #3d3856;
}

@media (max-width: 700px) {
    .cookie-notice__inner { gap: 12px; }
    .cookie-notice__actions { width: 100%; }
    .cookie-notice__btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Адаптив страницы "Политика куки" (templates/cookies.html).
   Таблица из 4 колонок на узких экранах разворачивается в карточки,
   подписи колонок выводятся через td::before. Селекторы со скоупом
   .cookies-page, чтобы гарантированно переопределять правила таблицы
   независимо от порядка подключения стилей. Значения совпадают с
   инлайновым блоком в шаблоне (он становится избыточным).
   ========================================================================== */
@media (max-width: 700px) {
    .cookies-page .cookies-table {
        font-size: 14px;
    }
    .cookies-page .cookies-table thead {
        display: none;
    }
    .cookies-page .cookies-table tbody,
    .cookies-page .cookies-table tr,
    .cookies-page .cookies-table td {
        display: block;
        width: 100%;
    }
    .cookies-page .cookies-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color, #e6e2f2);
    }
    .cookies-page .cookies-table tr:last-child {
        border-bottom: none;
    }
    .cookies-page .cookies-table td {
        padding: 4px 0;
        border-bottom: none;
    }
    .cookies-page .cookies-table td::before {
        display: block;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--text-secondary, #6f6a8a);
    }
    .cookies-page .cookies-table td:nth-child(1)::before { content: "Кука"; }
    .cookies-page .cookies-table td:nth-child(2)::before { content: "Категория"; }
    .cookies-page .cookies-table td:nth-child(3)::before { content: "Зачем"; }
    .cookies-page .cookies-table td:nth-child(4)::before { content: "Срок"; }
    /* Длинные имена куки (<code>remember_token</code> и т.п.) не должны
       вылезать за пределы карточки на узком экране. */
    .cookies-page .cookies-table code {
        overflow-wrap: anywhere;
    }
}

/* Баннер не должен перекрывать основное действие страницы. */
body.cookie-open .auth-page { padding-bottom: 150px; }
body.cookie-open .footer { padding-bottom: 110px; }

@media (max-width: 768px) {
    .cookie-notice { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .cookie-notice__inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cookie-notice__icon { display: none; }
    .cookie-notice__text { flex: none; }
    .cookie-notice__text p { font-size: 12px; }
    .cookie-notice__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .cookie-notice__btn { width: 100%; height: 40px; padding: 0 10px; }
    .cookie-notice__btn--primary { grid-column: 1 / -1; }
    body.cookie-open .auth-page { padding-bottom: 170px; }
}

@media (max-width: 768px) {
    .cookie-notice__text p { display: none; }
    .cookie-notice__text strong { font-size: 14px; }
    .cookie-notice__actions { grid-template-columns: 1fr 1fr 1fr; }
    .cookie-notice__btn--primary { grid-column: auto; }
    .cookie-notice__btn { height: 36px; font-size: 12px; }
}

/* ---- css/sorting.css ---- */
/* ============================================================================
   Универсальная сортировка списков и таблиц (см. yfg/utils/sorting.py)
   ========================================================================= */

.sort-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.sort-bar--compact {
    padding: 8px 12px;
    border-radius: 14px;
    margin-bottom: 14px;
}

.sort-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sort-bar__label i {
    color: var(--color-primary-text);
}

.sort-bar__items {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.sort-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 40px;
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition, all 0.2s ease);
}

.sort-pill:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.sort-pill__icon {
    font-size: 12px;
    opacity: 0.65;
}

.sort-pill.is-active {
    background: rgba(234, 88, 12, 0.12);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    box-shadow: 0 6px 18px -12px rgba(234, 88, 12, 0.8);
}

.sort-pill.is-active .sort-pill__icon {
    opacity: 1;
}

.sort-pill:focus-visible,
.th-sort__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------- Заголовки таблиц ---------- */

.th-sort {
    padding: 0 !important;
}

.th-sort__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    width: 100%;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
}

.th-sort__link i {
    font-size: 11px;
    opacity: 0.45;
    transition: var(--transition, all 0.2s ease);
}

.th-sort__link:hover {
    color: var(--color-primary-text);
    background: var(--bg-hover);
}

.th-sort__link:hover i {
    opacity: 1;
}

.th-sort__link.is-active {
    color: var(--color-primary-text);
}

.th-sort__link.is-active i {
    opacity: 1;
}

th[aria-sort="ascending"] .th-sort__link,
th[aria-sort="descending"] .th-sort__link {
    color: var(--color-primary-text);
}

th[data-align="right"] .th-sort__link {
    justify-content: flex-end;
}

th[data-align="center"] .th-sort__link {
    justify-content: center;
}

/* ---------- Адаптив ---------- */

/* Полоса прокрутки пилюль: в тёмной теме системная выглядит светлой полосой. */
.sort-bar__items::-webkit-scrollbar {
    height: 6px;
}

.sort-bar__items::-webkit-scrollbar-track {
    background: transparent;
}

.sort-bar__items::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

.sort-bar__items::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

@media (max-width: 720px) {
    .sort-bar {
        gap: 10px;
        padding: 10px 12px;
    }

    .sort-bar__items {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .sort-pill {
        padding: 6px 12px;
        font-size: 12.5px;
    }

    .th-sort__link {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sort-pill,
    .sort-pill:hover,
    .th-sort__link,
    .th-sort__link i {
        transition: none;
        transform: none;
    }
}

/* ---- css/segmented-input.css ---- */
/* segmented-input.css - квадратные ячейки для полей с ограниченной длиной.
 *
 * Один размер для всех масок (правка владельца): сторона квадрата ровно в два
 * раза больше высоты символа, поэтому сетка не "гуляет" между полями телефона,
 * карты, счёта, ИНН, СНИЛС и паспорта. Значения вынесены в переменные, чтобы
 * медиа-запросы меняли только их.
 *
 * Стиль повторяет ввод кода из письма (templates/login.html) и токены темы
 * (static/style.css): --bg-input, --border-color, --color-primary,
 * --color-secondary, --bg-hover, --text-muted. Тёмная тема (.dark-theme на
 * <html> или <body>) работает через те же переменные, отдельно правится
 * только кольцо фокуса: на тёмном фоне нужен более плотный оттенок.
 *
 * Разметку строит static/js/segmented-input.js:
 *   .yfg-seg (role=group)
 *     +- .yfg-seg-prefix           "+7" (только телефон, несменяемый)
 *     +- .yfg-seg-group            группа цифр (по разделителям маски)
 *     |    +- .yfg-seg-cell x N    input на одну цифру
 *     +- .yfg-seg-sep              "(", ")", "-" между группами
 */

.yfg-seg {
    /* Сторона квадрата = 2 x высоты символа, поэтому ячейка и шрифт связаны
       одной переменной: поменяв --yfg-seg-font, размер не разъедется. */
    --yfg-seg-font: 13px;
    --yfg-seg-cell: calc(var(--yfg-seg-font) * 2);
    --yfg-seg-gap: 4px;
    --yfg-seg-radius: 6px;
    --yfg-seg-focus-ring: rgba(194, 65, 12, 0.15);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yfg-seg-gap);
    direction: ltr;
    max-width: 100%;
}

.yfg-seg-group {
    display: flex;
    gap: var(--yfg-seg-gap);
}

/* Селектор со двумя классами: общее правило форм
   `:where(.form-group) input[type="text"]` иначе задаёт ширину 100% и свои
   паддинги/шрифт (его специфичность - один класс + элемент). */
.yfg-seg .yfg-seg-cell {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--yfg-seg-cell);
    min-width: var(--yfg-seg-cell);
    height: var(--yfg-seg-cell);
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: var(--yfg-seg-font);
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--yfg-seg-radius);
    outline: none;
    caret-color: var(--color-primary);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.yfg-seg .yfg-seg-cell:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px var(--yfg-seg-focus-ring);
}

.yfg-seg .yfg-seg-cell.filled {
    border-color: var(--color-primary);
    background: var(--bg-hover);
}

.yfg-seg .yfg-seg-cell[aria-invalid="true"] {
    border-color: var(--toast-error);
}

.yfg-seg .yfg-seg-cell[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.yfg-seg .yfg-seg-cell::selection {
    background: var(--color-secondary);
    color: var(--text-inverse);
}

.yfg-seg-sep {
    margin: 0 1px;
    color: var(--text-muted);
    font-size: var(--yfg-seg-font);
    font-weight: 600;
    user-select: none;
    pointer-events: none;
}

/* Пробел в маске (4+4+4+4 у карты): граница групп шире обычного зазора. */
.yfg-seg-gap {
    width: calc(var(--yfg-seg-gap) * 1.5);
    flex: 0 0 auto;
}

/* Префикс телефона: та же высота, что у ячеек, приглушённый фон. */
.yfg-seg--phone .yfg-seg-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--yfg-seg-cell);
    padding: 0 calc(var(--yfg-seg-font) * 0.55);
    font-family: inherit;
    font-size: var(--yfg-seg-font);
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--yfg-seg-radius);
    cursor: text;
    user-select: none;
}

.yfg-seg--phone .yfg-seg-prefix + .yfg-seg-sep {
    margin-left: -2px;
    margin-right: 0;
    color: var(--text-secondary);
}

.dark-theme .yfg-seg {
    --yfg-seg-focus-ring: rgba(192, 132, 252, 0.30);
}

.dark-theme .yfg-seg--phone .yfg-seg-prefix {
    background: var(--bg-secondary, var(--bg-hover));
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .yfg-seg {
        --yfg-seg-font: 12px;
        --yfg-seg-gap: 3px;
        --yfg-seg-radius: 5px;
    }
    .yfg-seg--phone .yfg-seg-prefix + .yfg-seg-sep {
        margin-left: 0;
    }
}

@media (max-width: 360px) {
    .yfg-seg {
        --yfg-seg-font: 11px;
        --yfg-seg-gap: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yfg-seg .yfg-seg-cell,
    .yfg-seg--phone .yfg-seg-prefix {
        transition: none;
        animation: none;
    }
}

/* ---- css/live.css ---- */
/* YFG - "живые" числа и ленты: общий визуальный слой.
 *
 * Счётчик из разрядов-"барабанов" переиспользуется везде, где число меняется
 * само: карточка билета, баланс, посты, панели. Раньше эти правила жили в
 * event-ticket.css, но теперь они общие, поэтому и лежат в отдельном файле,
 * который подключается на всех страницах.
 */

/* ---------- "Механический" счётчик ---------- */

.live-number {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.02em;
}

/* Разряд счётчика - узкое окно, через которое видна одна цифра */
.live-number .live-digit {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.15em;
    line-height: 1.15em;
    text-align: center;
}

.live-number .live-digit__in,
.live-number .live-digit__out {
    display: block;
}

/* Блик "барабана": верх светлее, низ темнее */
.live-number .live-digit::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 42%,
        rgba(0, 0, 0, 0.14) 100%);
}

/* Меняется только тот разряд, который изменился */
.live-number .live-digit--rolling .live-digit__out {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: live-digit-out 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.live-number .live-digit--rolling .live-digit__in {
    animation: live-digit-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes live-digit-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-104%); opacity: 0; }
}

@keyframes live-digit-in {
    from { transform: translateY(104%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Число изменилось целиком (выросло на разряд) - короткий "щелчок" */
.live-number--jump {
    animation: live-jump 0.34s ease-out both;
}

@keyframes live-jump {
    from { transform: translateY(0.22em); opacity: 0.35; }
    to { transform: translateY(0); opacity: 1; }
}

/* ---------- Ленты: появление новой карточки ---------- */

.feed-live-item {
    animation: live-card-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes live-card-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Плашка "N новых": показываем, когда лента только что обновилась */
.feed-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

.feed-live-pill[hidden] {
    display: none;
}

/* Кому анимации не нужны - числа просто меняются, карточки появляются сразу */
@media (prefers-reduced-motion: reduce) {
    .live-number .live-digit--rolling .live-digit__out,
    .live-number .live-digit--rolling .live-digit__in,
    .live-number--jump,
    .feed-live-item,
    .feed-live-pill {
        animation: none;
    }
}

/* ---- css/support.css ---- */
/* Чат поддержки: клиентский виджет, страницы обращения и панель модератора. */

.sp-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.sp-hero__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 21px;
    color: #fff;
    background: var(--gradient-main);
}

.sp-hero h1 { margin: 0 0 6px; font-size: 24px; }
.sp-hero p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }

.sp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    .sp-layout { grid-template-columns: 1fr; }
}

.sp-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.sp-card__head h2 { margin: 0; font-size: 16px; }
.sp-card__body { padding: 16px 18px; }

.sp-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 520px;
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--bg-secondary);
}

.sp-msg {
    max-width: 78%;
    align-self: flex-start;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-size: 14.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-msg--mine {
    align-self: flex-end;
    border-color: transparent;
    background: var(--gradient-main);
    color: #fff;
}

.sp-msg--bot {
    border-style: dashed;
    border-color: var(--color-primary);
    background: var(--bg-hover);
}

.sp-msg--note {
    max-width: 100%;
    align-self: stretch;
    border-style: dashed;
    border-color: var(--badge-warning-color, #b45309);
    background: var(--badge-warning-bg, rgba(245, 158, 11, .12));
    font-size: 13.5px;
}

.sp-msg--event {
    max-width: 100%;
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
    padding: 2px 0;
}

.sp-msg__meta {
    margin-top: 5px;
    font-size: 11.5px;
    opacity: .75;
}

.sp-composer {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.sp-composer textarea {
    flex: 1 1 auto;
    min-height: 46px;
    max-height: 160px;
    resize: vertical;
    padding: 11px 13px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
}

.sp-card__body textarea,
.sp-composer-wrap textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
}

.sp-card__body textarea:focus,
.sp-composer-wrap textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(234, 88, 12, .18));
}

.sp-field textarea { min-height: 150px; font-size: 13.5px; }

.sp-composer textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--bg-hover);
}

.sp-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--gradient-main);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sp-send:disabled { opacity: .55; cursor: default; }

.sp-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}

.sp-chip--active {
    border-color: transparent;
    background: var(--gradient-main);
    color: #fff;
}

.sp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.sp-status--new,
.sp-status--open { color: #1d4ed8; border-color: rgba(29, 78, 216, .35); background: rgba(29, 78, 216, .1); }
.sp-status--pending { color: #b45309; border-color: rgba(180, 83, 9, .35); background: rgba(245, 158, 11, .12); }
.sp-status--solved { color: #15803d; border-color: rgba(21, 128, 61, .35); background: rgba(34, 197, 94, .12); }
.sp-status--closed,
.sp-status--on_hold { color: var(--text-muted); }

.sp-list { display: flex; flex-direction: column; gap: 10px; }

.sp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
}

.sp-item:hover { border-color: var(--color-primary); }

.sp-item__title { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.sp-item__meta { font-size: 12.5px; color: var(--text-muted); }
.sp-item__badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.sp-empty {
    text-align: center;
    padding: 42px 20px;
    color: var(--text-muted);
}

.sp-empty i { font-size: 34px; opacity: .45; display: block; margin-bottom: 10px; }

.sp-field { margin-bottom: 14px; }
.sp-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.sp-field input,
.sp-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
}

.sp-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }

.sp-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--badge-warning-bg, rgba(245, 158, 11, .14));
    color: var(--badge-warning-color, #b45309);
    font-size: 11.5px;
    font-weight: 600;
}

.sp-overdue { color: var(--color-danger-text, #b91c1c); font-weight: 600; }

/* Таблица очереди в панели */
.sp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.sp-table td { padding: 12px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.sp-table tr:last-child td { border-bottom: 0; }
.sp-table a { color: var(--color-primary-text); font-weight: 600; text-decoration: none; }
.sp-table a:hover { text-decoration: underline; }

.sp-csat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-csat button {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}
.sp-csat button:hover { border-color: var(--color-primary); }

/* ------------------------------------------------------------------ */
/* Плавающий виджет                                                    */
/* ------------------------------------------------------------------ */

.spw-root { position: fixed; right: 22px; bottom: 92px; z-index: 1200; font-family: inherit; }

.spw-toggle {
    position: relative;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: var(--gradient-main);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    display: grid;
    place-items: center;
}

.spw-toggle:hover { transform: translateY(-1px); }

.spw-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-danger-text, #dc2626);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.spw-panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    width: min(380px, calc(100vw - 34px));
    max-height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
    overflow: hidden;
}

.spw-panel[hidden] { display: none; }

.spw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    background: var(--gradient-main);
    color: #fff;
}

.spw-head strong { font-size: 15px; }
.spw-head small { display: block; font-size: 11.5px; opacity: .85; }

.spw-close {
    border: 0;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 15px;
}

.spw-body {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--bg-secondary);
}

.spw-start { display: flex; flex-direction: column; gap: 10px; }
.spw-start input,
.spw-start select,
.spw-start textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: 13.5px;
}
.spw-start textarea { min-height: 76px; resize: vertical; }

.spw-foot {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.spw-foot textarea {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 100px;
    resize: none;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: 13.5px;
}

.spw-foot button {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--gradient-main);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
}

.spw-foot button:disabled { opacity: .5; cursor: default; }

.spw-link {
    display: block;
    padding: 8px 12px 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: none;
    border-top: 1px solid var(--border-color);
}

.spw-link:hover { color: var(--color-primary-text); }

@media (max-width: 520px) {
    .spw-root { right: 14px; bottom: 14px; }
    .spw-panel { width: calc(100vw - 28px); }
}
.sp-attachments { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 13px; }
.sp-attachments a { color: var(--color-primary-text); text-decoration: underline; overflow-wrap: anywhere; }
.sp-attach { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.sp-attach:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- css/appearance.css ---- */
/* ============================================================
   Оформление: акценты, плотность, скругления и настройки темы.
   Подключается после style.css, чтобы переопределять токены.
   ============================================================ */

:root {
    --radius-card: 18px;
    --radius-control: 12px;
    --radius-pill: 999px;
    --surface-border: color-mix(in srgb, var(--border-color) 82%, transparent);
    --surface-shadow: 0 1px 2px rgba(20, 16, 40, 0.04), 0 8px 24px -18px rgba(20, 16, 40, 0.25);
    --surface-shadow-hover: 0 2px 4px rgba(20, 16, 40, 0.05), 0 18px 42px -22px rgba(20, 16, 40, 0.32);
    --ui-gap: 16px;
    --ui-pad: 22px;
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

/* ---------- Базовые поверхности и типографика ---------- */
body {
    font-family: var(--font-ui);
    background-image:
        radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%),
        radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--color-secondary) 7%, transparent), transparent 70%);
    background-attachment: fixed;
}
h1, h2, h3, h4 { letter-spacing: -0.015em; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--color-primary) 26%, transparent); }

.header.sticky-header {
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--surface-border);
    box-shadow: 0 1px 0 rgba(20, 16, 40, 0.02);
}
.header-inner { gap: 18px; }
.header-icon-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-control);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.header-icon-btn:hover { background: var(--bg-hover); transform: translateY(-1px); }

.event-card, .master-card, .profile-card, .card, .table-container,
.auth-card, .form-container > .table-container, .profile-side-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
}
.event-card:hover, .master-card:hover {
    box-shadow: var(--surface-shadow-hover);
    transform: translateY(-3px);
}
.event-card, .master-card { transition: transform .18s ease, box-shadow .18s ease; }

.btn-primary, .btn-secondary, .btn-sm, button.ticket-buy-btn {
    border-radius: var(--radius-control);
    min-height: 42px;
    font-weight: 650;
    letter-spacing: -0.005em;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary:hover, button.ticket-buy-btn:hover { transform: translateY(-1px); }
.btn-secondary { background: var(--bg-card); border: 1px solid var(--surface-border); }
.btn-secondary:hover { background: var(--bg-hover); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], input[type="datetime-local"], input[type="time"],
select, textarea {
    border-radius: var(--radius-control);
    border-color: var(--surface-border);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
    outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border-color));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.table-container { overflow: hidden; }
.table-container table th {
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
}
.table-container table th, .table-container table td { border-color: var(--border-light); }
.table-container table tbody tr:hover { background: color-mix(in srgb, var(--bg-hover) 65%, transparent); }

.badge, .badge-status, .event-status, .tag, .chip {
    border-radius: var(--radius-pill);
    font-weight: 600;
}

/* ---------- Панель оформления ---------- */
.appearance-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(11, 8, 24, .42);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; justify-content: flex-end;
}
.appearance-overlay[hidden] { display: none; }
.appearance-panel {
    position: relative; z-index: 1;
    width: min(420px, 100vw); height: 100%; overflow-y: auto;
    background-color: var(--bg-card, #ffffff); color: var(--text-primary);
    border-left: 1px solid var(--surface-border);
    box-shadow: -24px 0 60px -30px rgba(0,0,0,.45);
    display: flex; flex-direction: column;
    animation: appearance-in .22s ease;
}
@keyframes appearance-in { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } }
.appearance-panel__head {
    display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
    padding: 24px 24px 16px; border-bottom: 1px solid var(--border-light);
}
.appearance-eyebrow { margin: 0 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary-text); font-weight: 700; }
.appearance-panel h2 { margin: 0; font-size: 22px; }
.appearance-panel h3 { margin: 0 0 4px; font-size: 14px; }
.appearance-panel p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.appearance-close {
    width: 36px; height: 36px; border: 1px solid var(--surface-border);
    background: var(--bg-card); color: var(--text-secondary);
    border-radius: var(--radius-control); cursor: pointer;
}
.appearance-panel__body { padding: 8px 24px 24px; display: grid; gap: 8px; }
.appearance-section { padding: 16px 0; border-bottom: 1px solid var(--border-light); display: grid; gap: 10px; }
.appearance-section--row { grid-template-columns: 1fr auto; align-items: center; }
.appearance-segment { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--bg-hover); }
.appearance-segment button {
    flex: 1; min-height: 36px; padding: 6px 10px; border: 0; cursor: pointer;
    background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px;
    border-radius: calc(var(--radius-control) - 2px);
}
.appearance-segment button.is-active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow); font-weight: 650; }
.accent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.accent-swatch { height: 42px; border-radius: var(--radius-control); border: 2px solid transparent; cursor: pointer; position: relative; }
.accent-swatch.is-active { border-color: var(--text-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
.accent-sunset { background: linear-gradient(135deg, #c2410c, #c2410c); }
.accent-ocean { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.accent-forest { background: linear-gradient(135deg, #10b981, #14b8a6); }
.accent-rose { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.accent-gold { background: linear-gradient(135deg, #f59e0b, #c2410c); }
.accent-mono { background: linear-gradient(135deg, #64748b, #1e293b); }
.appearance-switch { position: relative; width: 44px; height: 26px; display: inline-block; }
.appearance-switch input { position: absolute; opacity: 0; }
.appearance-switch span {
    position: absolute; inset: 0; border-radius: 999px; background: var(--border-color);
    cursor: pointer; transition: background .18s ease;
}
.appearance-switch span::after {
    content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
    border-radius: 50%; background: #fff; transition: transform .18s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.appearance-switch input:checked + span { background: var(--color-primary); }
.appearance-switch input:checked + span::after { transform: translateX(18px); }
.appearance-note { font-size: 12px !important; color: var(--text-muted); padding-top: 12px; }
.appearance-panel__foot {
    margin-top: auto; display: flex; gap: 10px; padding: 16px 24px;
    border-top: 1px solid var(--border-light); background: var(--bg-card);
    position: sticky; bottom: 0;
}
.appearance-panel__foot .btn-primary { flex: 1; }
body.appearance-open { overflow: hidden; }

@media (max-width: 560px) {
    .appearance-panel { border-left: 0; }
    .appearance-panel__head { padding: 18px 18px 12px; }
    .appearance-panel__body { padding: 4px 18px 18px; }
    .appearance-panel__foot { padding: 12px 18px; }
    .accent-grid { grid-template-columns: repeat(3, 1fr); }
    .header-icon-btn.appearance-btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    .appearance-panel { animation: none; }
}

html.dark-theme .appearance-panel { background-color: var(--bg-card, #1b1c1f); }

/* ---- css/loading.css ---- */
/* Глобальная индикация загрузки страницы и медиа. */
#yfg-loading-bar {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 20000;
    width: 0;
    height: 3px;
    opacity: 0;
    pointer-events: none;
    background: var(--gradient-main, #c2410c);
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.45);
    transition: width 180ms ease, opacity 180ms ease;
}
html.is-page-loading #yfg-loading-bar {
    opacity: 1;
}
html.is-page-loading #yfg-loading-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: yfg-loading-sheen 1.1s linear infinite;
}
@keyframes yfg-loading-sheen {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

img.is-image-loading {
    opacity: 0.35;
    filter: saturate(0.65);
    background: linear-gradient(100deg, var(--bg-hover) 20%, var(--bg-card) 45%, var(--bg-hover) 70%);
    background-size: 220% 100%;
    animation: yfg-image-shimmer 1.4s ease-in-out infinite;
}
img.is-loaded,
img.is-image-error {
    opacity: 1;
    filter: none;
    animation: none;
    transition: opacity 180ms ease;
}
@keyframes yfg-image-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

.btn.is-submitting {
    position: relative;
    pointer-events: none;
    opacity: 0.82;
}
.btn.is-submitting::after,
button.is-submitting::after {
    content: "";
    width: 13px;
    height: 13px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: yfg-submit-spin 0.7s linear infinite;
}
@keyframes yfg-submit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    html.is-page-loading #yfg-loading-bar::after,
    img.is-image-loading,
    .btn.is-submitting::after,
    button.is-submitting::after {
        animation: none;
    }
    #yfg-loading-bar,
    img.is-loaded { transition: none; }
}

/* ---- css/mobile.css ---- */
/* Мобильный слой: подключается последним и аккуратно выравнивает общие блоки. */
@media (max-width: 768px) {
    html { width: 100%; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
    body { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
    img, video, svg { max-width: 100%; }

    .container, .container-wide, .page-container { padding-left: 16px; padding-right: 16px; }
    .admin-content { padding: 16px 14px 28px; }
    .admin-layout { min-height: 100dvh; }
    .admin-header-bar { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
    .admin-header-bar h1, .admin-header-bar .page-title { font-size: 22px; line-height: 1.25; }
    .admin-header-bar .header-actions { flex-wrap: wrap; gap: 8px; }

    .page-header, .profile-header, .section-head, .feed-header, .events-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .page-header .btn, .page-header button { align-self: stretch; }

    .stats-grid, .yfg-form-grid, .form-grid, .detail-grid, .dashboard-grid,
    .admin-grid, .campaigns-grid, .profile-grid, .service-admin-grid,
    .scan-grid, .ticket-info-grid, .filters-grid, .checkout-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
    }
    .stats-mini, .user-stats, .profile-stats { flex-wrap: wrap; }
    .stats-mini > *, .user-stats > *, .profile-stats > * { min-width: 0; }

    .table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
    }
    .table-scroll { overflow: visible; border-radius: 0; }
    .table-scroll table, .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; width: 100%; }
    .table-scroll thead { display: none; }
    .table-scroll tr {
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 12px;
        background: var(--bg-card, #fff);
    }
    .table-scroll td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border: 0;
        white-space: normal;
        text-align: right;
    }
    .table-scroll td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        color: var(--text-muted, #6b7280);
        font-size: 11px;
        font-weight: 600;
        text-align: left;
        text-transform: none;
        letter-spacing: 0;
        padding-top: 3px;
    }
    .table-scroll td:last-child { min-width: 0; justify-content: flex-end; }
    .table-scroll td:last-child > div { flex-wrap: wrap !important; justify-content: flex-end; }
    .search-bar, .search-bar form, .search-bar label { text-align: left !important; }

    .search-bar form { flex-direction: column !important; align-items: stretch !important; }
    .search-bar form > div { width: 100% !important; min-width: 0 !important; }
    .search-bar form label { text-align: left !important; }
    .search-bar form input, .search-bar form select { width: 100% !important; }
    .filter-group--date { grid-column: 1 / -1; }
    .sort-bar, .sort-options { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .sort-bar::-webkit-scrollbar, .sort-options::-webkit-scrollbar { display: none; }
    .admin-content pre, pre { overflow-x: auto; max-width: 100%; }

    /* 16px не даёт iOS Safari зумить поле при фокусе. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select, textarea {
        font-size: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Чекбоксы и радиокнопки не растягиваем: иначе в flex-строке
       (например, "Запомнить на этом устройстве") они занимают всю
       ширину и выдавливают подпись. */
    .form-card input:not([type="checkbox"]):not([type="radio"]),
    .auth-card input:not([type="checkbox"]):not([type="radio"]),
    .admin-content input:not([type="checkbox"]):not([type="radio"]),
    .form-card select, .form-card textarea,
    .auth-card select, .auth-card textarea,
    .admin-content select, .admin-content textarea { width: 100%; }

    .btn, .btn-primary, .btn-secondary, .btn-danger, .auth-btn,
    .form-card button, .admin-content .btn { min-height: 44px; }
    .tab-btn, .sort-pill, .filter-chip { min-height: 36px; }
    .header-icon-btn { width: 38px; height: 38px; }

    .header-inner { padding-left: 12px; padding-right: 12px; gap: 8px; }
    .header-nav { display: none; }
    .theme-toggle-btn, .appearance-btn,
    .header-icon-btn.appearance-btn { display: none !important; }
    .header-link.feed-link,
    .header-right > .header-link[title="Мои билеты"] { display: none; }
    .logo img { height: 32px; }
    .header-right { gap: 2px; }
    .header-search.is-open { position: absolute; left: 12px; right: 12px; top: 62px; z-index: 60; }

    .profile-tabs, .tabs, .security-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .profile-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar,
    .security-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; }

    .modal, .dialog-overlay { padding: 12px; align-items: flex-end; }
    .modal-content, .dialog, .modal-card { width: 100%; max-width: 100%; max-height: 90dvh; }

    .site-footer, .footer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; }
    .site-footer { padding-bottom: 24px; }

    .cookie-notice { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); padding: 12px; gap: 10px; }
    .cookie-notice__actions { flex-wrap: wrap; }
    .cookie-notice .btn, .cookie-notice button { min-height: 40px; }

    img, video, canvas { max-width: 100%; }
    .hero, .page-hero { padding-left: 16px; padding-right: 16px; }
    .empty-state { padding: 28px 16px; }
}

@media (max-width: 480px) {
    h1 { font-size: 26px; line-height: 1.2; }
    h2 { font-size: 21px; line-height: 1.25; }
    .admin-header-bar h1 { font-size: 20px; }
    .btn, .btn-primary, .btn-secondary, .btn-danger { width: auto; }
    .form-actions { flex-direction: column; align-items: stretch; }
    .form-actions .btn, .form-actions button { width: 100%; }
    .pagination { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 768px) {
    .table-scroll td { overflow-wrap: anywhere; }
    .table-scroll td > * { min-width: 0; max-width: 100%; }
    .btn, .btn-sm, .admin-header-bar .btn, .page-header .btn { white-space: nowrap; }
}

@media (max-width: 768px) {
    .search-tabs, .sort-bar, .filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .search-tabs::-webkit-scrollbar, .filter-pills::-webkit-scrollbar { display: none; }
    .search-tab { flex: 0 0 auto; }

    input[type="file"] { font-size: 14px; }
    input[type="file"]::file-selector-button {
        min-height: 40px;
        margin-right: 10px;
        padding: 8px 12px;
        border: 1px solid var(--border-color, #d1d5db);
        border-radius: 10px;
        background: var(--bg-input, #f9fafb);
        color: var(--text-primary, #111827);
        font: inherit;
        cursor: pointer;
    }
    details > summary { min-height: 36px; cursor: pointer; }
}

@media (max-width: 640px) {
    .settings-table, .settings-table tbody, .settings-table tr, .settings-table td {
        display: block;
        width: 100%;
    }
    .settings-table thead { display: none; }
    .settings-table tr {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 14px;
    }
    .settings-table td { padding: 0; border: 0; }
    .settings-table td.col-cat {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 8px;
    }
    .settings-table td.col-ch {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        border-top: 1px solid var(--border-light, #f3f4f6);
    }
    .settings-table td.col-ch::before {
        font-size: 12px;
        color: var(--text-muted, #6b7280);
        font-weight: 600;
    }
    .settings-table td.col-ch:nth-child(2)::before { content: "В приложении"; }
    .settings-table td.col-ch:nth-child(3)::before { content: "На email"; }
    .settings-table td.col-ch:nth-child(4)::before { content: "В Telegram"; }
    .telegram-status { white-space: nowrap; }
    .telegram-card .settings-card-head { gap: 10px; }
    .telegram-actions { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 768px) {
    .btn-primary, .btn-secondary, .btn-danger, .btn-save, .btn-small,
    .tg-primary, .tg-ghost { white-space: nowrap; }
}