/* ========== ПЕРЕМЕННЫЕ CSS ========== */
:root {
    /* Основные цвета */
    --c-primary: #dd4c60;
    --c-primary-hover: #cd4050;
    --c-text-bright: #ffffff;
    --c-background: #f0f4fa;
    --c-background-secondary: #e6edf4;
    --c-border: #ddd;
    --c-border-light: #eee;
    --c-shadow: rgba(0, 0, 0, 0.1);

    /* Цвета кнопок */
    --c-success: #60a060;
    --c-success-hover: #218838;
    --c-secondary: #6c757d;
    --c-secondary-hover: #5c656d;
    --c-fail: #e74c3c;

    /* Цвета строк таблиц */
    --c-admin-row: #A0C0F0;
    --c-admin-row-hover: #90B0E0;
    --c-lot-inactive: #ffcccc;
    --c-lot-inactive-hover: #f0c0c0;

    /* Цвета состояний аукциона */
    --c-state-preparation: #ddb84b;
    --c-state-published: #6abb81;
    --c-state-running: #485ca7;
    --c-state-completed: #6ac1ba;
    --c-state-cancelled: #dd4b60;

    /* Цвета текста */
    --c-text: #333;
    --c-text-light: #694747;
    --c-text-muted: #5c6f87;
    --c-text-mybid: #218838;
    --c-text-hasbid: #5850d0;

    /* Цвета фона вспомогательных элементов */
    --c-surface: #f9f9f9;
    --c-surface-hover: #e9e9e9;

    /* Цвета модальных окон и попапов */
    --c-modal-backdrop: rgba(0, 0, 0, 0.5);

    /* Цвета уведомлений */
    --notification-success-bg: #e8f5e9;
    --notification-success-text: #2e7d32;
    --notification-success-border: #a5d6a7;
    --notification-error-bg: #fff3e0;
    --notification-error-text: #c62828;
    --notification-error-border: #ffcc80;

    /* Оверлей стримера */
    --overlay-text: #ffffff;
    --overlay-chip-bg: rgba(0, 0, 0, 0.55);
    --overlay-border: rgba(255, 255, 255, 0.25);
    --overlay-btn-bg-active: rgba(0, 0, 0, 0.75);
    --overlay-btn-off-bg: rgba(180, 30, 30, 0.75);
    --overlay-btn-off-border: rgba(255, 255, 255, 0.4);
    --overlay-menu-bg: rgba(20, 20, 20, 0.95);
    --overlay-menu-shadow: rgba(0, 0, 0, 0.4);
    --overlay-item-hover: rgba(255, 255, 255, 0.15);
    --overlay-menu-item-disabled: #999;
    --overlay-controls-bg: rgba(0, 0, 0, 0.05);

    /* Цвета фокуса и бордеров */
    --c-focus-ring: rgba(221, 76, 96, 0.2);

    /* Отступы и размеры */
    --spacing-xxs: 2px;
    --spacing-xs: 6px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 15px;
    --spacing-xl: 20px;

    /* Размеры шрифтов */
    --font-size-small: 12px;
    --font-size-base: 14px;
    --font-size-medium: 16px;
    --font-size-large: 18px;
    --font-size-xlarge: 30pt;
    --font-size-12pt: 12pt;
    --font-size-28px: 28px;
    --font-size-icon: 24px;
    --font-size-32px: 32px;

    /* Границы и тени */
    --radius-block: 10px;
    --radius-field: 4px;
    --radius-circle: 50%;
    --box-shadow: 0 10px 25px var(--c-shadow);
    --box-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.3);
    --box-shadow-info: 0 2px 8px var(--c-shadow);

    /* Переходы */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;

    /* Слои (z-index) — именованные уровни вместо «магических» чисел */
    --z-modal: 500;
    --z-panel: 800;
    --z-pip: 900;
    --z-dropdown: 1000;
    --z-menu: 1500;
    --z-popup: 2000;
    --z-toast: 10000;

    /* Размеры превью */
    --preview-thumb-mobile: 30px;
    --preview-thumb: 50px;
    --preview-128: 128px;
    --preview-256: 256px;
    --preview-large: 512px;

    /* Размеры элементов UI */
    --modal-max-width: 600px;
    --container-max-width: 1600px;
    --popup-max-width: 400px;
    --popup-box-width: 90%;
    --popup-box-padding: 8px;
    --nav-arrow-size: 24px;
    --nav-min-height: 48px;
    --nav-min-width: 64px;
    --tile-gap: 20px;
    --tile-margin-bottom: 40px;
    --scroll-text-max-height: 500px;
    --table-min-width: 800px;
    --filter-min-width: 150px;
    --form-inline-input-width: 50%;
    --form-inline-label-min-width: 30%;
    --info-table-first-child-width: 40%;
    --inline-img-size: 16px;
    --checkbox-size: 16px;
    --social-gap: 30px;
    --social-transform: 3px;
    --modal-transform-y: 50px;
    --social-padding-h: 20px;
    --table-cell-padding-y: 6px;
    --table-cell-padding-x: 8px;
    --tab-padding-y: 12px;
    --toolbar-btn-padding-x: 20px;
    --popup-close-top: 12px;
    --popup-close-right: 18px;
    --lot-gap: 0.8rem;
    --footer-font-size: 0.7rem;
    --footer-margin-top: 1.5rem;
    --lot-info-margin-top: 10px;
    --lot-container-margin-top: 10px;
    --border-width-small: 2px;
    --border-width-tiny: 1px;
    --line-height-normal: 1.6;
}

/* ========== ТЁМНАЯ ТЕМА ========== */
/* Переопределение цветовых переменных.
   Класс theme-dark / theme-light ставится на <html> (инлайн-скрипт в head
   до загрузки CSS + Theme.js при инициализации приложения). */
html.theme-dark {
    /* Основные цвета */
    --c-primary: #dd4c60;
    --c-primary-hover: #cd4050;
    --c-text-bright: #ffffff;
    --c-background: #0d1117;
    --c-background-secondary: #161b22;
    --c-border: #30363d;
    --c-border-light: #21262d;
    --c-shadow: rgba(0, 0, 0, 0.4);

    /* Цвета кнопок */
    --c-success: #238636;
    --c-success-hover: #2ea043;
    --c-secondary: #484f58;
    --c-secondary-hover: #6e7681;
    --c-fail: #f85149;

    /* Цвета строк таблиц */
    --c-admin-row: #1f2a3a;
    --c-admin-row-hover: #2a3a50;
    --c-lot-inactive: #3a1a1a;
    --c-lot-inactive-hover: #4a2525;

    /* Цвета текста */
    --c-text: #e6edf3;
    --c-text-light: #c9d1d9;
    --c-text-muted: #8b949e;
    --c-text-mybid: #3fb950;
    --c-text-hasbid: #a371f7;

    /* Цвета фона вспомогательных элементов */
    --c-surface: #1c2128;
    --c-surface-hover: #2c3138;

    /* Цвета модальных окон и попапов */
    --c-modal-backdrop: rgba(0, 0, 0, 0.7);

    /* Цвета уведомлений */
    --notification-success-bg: #12261e;
    --notification-success-text: #3fb950;
    --notification-success-border: #1a3a2a;
    --notification-error-bg: #2d1215;
    --notification-error-text: #f85149;
    --notification-error-border: #4a1a1e;

    /* Оверлей стримера */
    --overlay-text: #e6edf3;
    --overlay-chip-bg: rgba(0, 0, 0, 0.65);
    --overlay-border: rgba(255, 255, 255, 0.2);
    --overlay-btn-bg-active: rgba(0, 0, 0, 0.85);
    --overlay-btn-off-bg: rgba(180, 30, 30, 0.85);
    --overlay-btn-off-border: rgba(255, 255, 255, 0.3);
    --overlay-menu-bg: rgba(13, 17, 23, 0.95);
    --overlay-menu-shadow: rgba(0, 0, 0, 0.6);
    --overlay-item-hover: rgba(255, 255, 255, 0.1);
    --overlay-menu-item-disabled: #484f58;
    --overlay-controls-bg: rgba(255, 255, 255, 0.05);

    /* Цвета фокуса и бордеров */
    --c-focus-ring: rgba(248, 81, 73, 0.3);

    /* Границы и тени */
    --box-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* ========== БАЗОВЫЕ СТИЛИ ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    width: 100%;
    color: var(--c-text);
    background: linear-gradient(145deg, var(--c-background) 0%, var(--c-background-secondary) 100%);
    background-attachment: fixed;
    font-family: 'Montserrat', 'Segoe UI', 'Inter', system-ui, Courier, monospace;
}

main {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    /* padding: var(--spacing-xs); */
    flex: 1;
    /* Sticky footer: main растянут на высоту body (flex:1), делаем его
       flex-колонкой, чтобы #app-root (flex:1) прижимал футер к низу
       экрана, когда контента мало. При длинном контенте футер остаётся
       под ним (страница скроллится). */
    display: flex;
    flex-direction: column;
}

#app-root {
    /* Растягивается на оставшееся место, прижимая футер к низу */
    flex: 1;
    width: 100%;
}

/* ========== ТЕГИ ========== */
a {
    text-decoration: none;
    color: inherit;
}

.button, button {
    border: 0;
    border-radius: var(--radius-block);
    color: var(--c-text-bright);
    transition: var(--transition-fast) linear;
    background: var(--c-primary);
    margin: var(--spacing-xxs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-medium);
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
}

button:hover {
    /* box-shadow: 0 0 0 2px var(--c-text-bright), 0 0 0 4px var(--c-primary); */
    transform: translateY(-2px);
    background: var(--c-primary-hover);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.settings-actions {
    display: flex;
    margin-top: var(--spacing-md);
}

.settings-value {
    width: 40%
}

@media (max-width: 768px) {
    .settings-value {
        width: 70%
    }
}

.inline-buttons {
    display: flex;
    width: 100%;
}

.inline-buttons button {
    flex: 1;
    padding: var(--spacing-sm) 16px;
    box-sizing: border-box;
}

.input-group {
    margin-bottom: var(--spacing-md);
}

.input-group label {
    display: block;
    margin-bottom: var(--spacing-md);
}

label {
    display: block;
    margin: var(--spacing-xs);
    color: var(--c-text-muted);
}

input, select, textarea {
    font-family: inherit;
    font-size: var(--font-size-base);
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-field);
    box-sizing: border-box;
    font-size: var(--font-size-base);
    padding: var(--spacing-sm);
    background: var(--c-background);
    color: var(--c-text);
}

input[type="text"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
textarea {
    width: 100%;
}

textarea {
    resize: vertical;
    min-height: 150px;
}

/* ========== ЦВЕТА (КЛАССЫ) ========== */

/* Цвета кнопок */

.btn-apply:hover { background: var(--c-success-hover); }

.btn-common, .btn-cancel { background: var(--c-secondary); }
.btn-common:hover, .btn-cancel:hover { background: var(--c-secondary-hover); }

.btn-delete { background: var(--c-primary); }

/* Мини-кнопка удаления (без фона, иконка через CSS) */

.btn-delete-mini::before {
    /* content: '🗑️'; */
    content: '❌';
}

/* Мини-кнопка смены пароля (без фона, иконка через CSS) */
.btn-delete-mini, .btn-password-mini {
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    font-size: var(--font-size-medium);
    line-height: 1;
    color: var(--c-primary);
    opacity: 0.7;
    transition: opacity var(--transition-normal);
}
.btn-delete-mini:hover, .btn-password-mini:hover {
    background: none;
    opacity: 1;
}
.btn-password-mini::before {
    content: '🔐';
}

/* Поле ввода с кнопкой справа (например, псевдоним + смена пароля) */
.input-with-btn {
    display: flex;
    align-items: center;
}

/* Цвета строк таблиц */

.admin_row_markup { background: var(--c-admin-row) !important; }
.admin_row_markup:hover { background: var(--c-admin-row-hover) !important; }
.nologin_markup { color: var(--c-primary) !important; }

/* Подтверждение почты (TODO 2.42) */
.email-unconfirmed {
    color: var(--c-primary);
    cursor: help;
    font-size: var(--font-size-small);
}

.user-email-status {
    color: var(--c-success);
}

.user-email-status-unconfirmed {
    color: var(--c-primary);
}
.lot_inactive_row { background: var(--c-lot-inactive) !important; }
.lot_inactive_row:hover { background: var(--c-lot-inactive-hover) !important; }

/* ========== LAYOUT ========== */
.header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.toolbar {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.header #logo-link {
    display: block;
    text-decoration: none;
}

.header .logo-container {
    display: flex;
}

.header img {
    max-width: 100%;
    height: auto;
}

/* Логотипы: на десктопе — большой, на мобильных — маленький.
   Базовые значения задаём явно, чтобы правила ниже по файлу (утилиты
   display) не «съели» переключение по медиазапросу. */
.logo-large { display: block; }
.logo-small { display: none; }

@media (max-width: 768px) {
    .logo-large { display: none; }
    .logo-small { display: block; }
}

.tile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    font-size: var(--font-size-12pt);
    /* margin-bottom: 40px; */
}

/* Режим списка - контейнер должен быть block, а не flex
   Явный класс (вместо :has()) — :has() не пересчитывается
   корректно при динамической замене innerHTML */
.tile.catalog-view-list {
    flex-direction: column;
    align-items: center;
}

/* ========== ФУТЕР ========== */
.main-footer {
    background: var(--c-primary);
    color: var(--c-text-bright);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-block) var(--radius-block) 0 0;
}

.footer-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.copyright {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--overlay-border);
    font-size: var(--font-size-base);
    color: var(--c-text-bright);
}

footer {
    text-align: center;
    font-size: var(--footer-font-size);
    margin-top: var(--footer-margin-top);
    color: var(--c-text-muted);
}

/* ========== КАРТОЧКИ (auc_tile_item) ========== */
.auc_tile_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-12pt);
    padding: var(--spacing-sm);
    text-align: center;
    background: var(--c-surface);
    border-radius: var(--radius-block);
    width: 280px;
    box-shadow: var(--box-shadow);
    transition: var(--transition-normal);
}

.auc_tile_item-has_bids {
    color: var(--c-primary-hover) !important;
    font-weight: 500;
}

.auc_tile_item:hover {
    transform: translateY(-5px);
    background: var(--c-surface-hover);
}

.auc_tile_item img {
    width: 100%;
    border-radius: var(--radius-block);
    margin-bottom: var(--spacing-md);
}

.auc_tile_item-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin: var(--spacing-sm) 0;
    color: var(--c-text);
}

/* ========== КАТАЛОГ АУКЦИОНОВ ========== */
.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.view-toggle {
    display: flex;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    background: var(--c-background);
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--c-text-light);
}

.view-toggle-btn:hover {
    background: var(--c-background-secondary);
    color: var(--c-primary);
}

.view-toggle-btn.active {
    background: var(--c-primary);
    color: var(--c-text-bright);
    border-color: var(--c-primary);
}

/* Режим списка */
.auction_catalog_item.auction-list-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    padding: var(--spacing-md);
    background: var(--c-surface);
    border-radius: 0;
    box-shadow: var(--box-shadow-info);
    /* margin-bottom: var(--spacing-md); */
    transition: var(--transition-normal);
    width: 100%;
    /* max-width: 1200px; */
}

.auction_catalog_item.auction-list-item > a {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.auc_list_item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.auc_list_item-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auc_list_item-descr {
    font-size: var(--font-size-medium);
    color: var(--c-text-light);
    margin: 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auc_list_item-meta {
    display: flex;
        font-size: var(--font-size-small);
    color: var(--c-text-muted);
}

.auc_list_item-state {
    font-weight: 500;
    font-size: var(--font-size-small);
}

.top_descr {
    justify-content: center;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--c-surface);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow-info);
}

.top_descr-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin: var(--spacing-xs) 0;
    color: var(--c-text);
}

/* Заголовок аукциона: название + кнопка шаринга
   (margin вместо gap: flexbox gap не поддерживается в Chromium 68) */
.auction-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-share-auction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--c-background);
    color: var(--c-text-light);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    cursor: pointer;
    transition: color var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}

.btn-share-auction:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
    background: var(--c-background);
}

/* Кнопки управления аукционом в заголовке (Начать/Завершить) */
.auction-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.btn-start-auction,
.btn-end-auction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    padding: 0 var(--spacing-md);
    height: 32px;
    font-size: var(--font-size-small);
    font-weight: 600;
    font-family: inherit;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    cursor: pointer;
    transition: color var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}

.btn-start-auction {
    background: var(--c-success);
    border-color: var(--c-success);
    color: var(--c-text-bright);
}

.btn-start-auction:hover {
    background: var(--c-success-hover);
    border-color: var(--c-success-hover);
}

.btn-end-auction {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-bright);
}

.btn-end-auction:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
}

.btn-takeover-auction {
    background: var(--c-secondary);
    border-color: var(--c-secondary);
    color: var(--c-text-bright);
}

.btn-takeover-auction:hover {
    background: var(--c-secondary-hover);
    border-color: var(--c-secondary-hover);
}

/* Псевдоним ведущего аукциона в заголовке */
.auction-master-info {
    margin-left: var(--spacing-sm);
    color: var(--c-text-muted);
}

/* ========== ЛОТ ========== */
.lot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
        border-radius: var(--radius-block);
    background: var(--c-background);
    align-items: center;
}

.lotblock {
    width: 47%;
}

.lot-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lot-image img {
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow);
}

.lot-info {
    display: flex;
    flex-direction: column;
        margin: var(--lot-info-margin-top) 0px 0px 0px;
}

.lot-price-container {
    min-width: 260px;
}

.lot-price-block {
    background: var(--c-background-secondary);
    margin-bottom: var(--spacing-sm);
    /* padding: var(--spacing-md); */
    border-radius: var(--radius-block);
    text-align: center;
/*    max-width: 580px;*/
}

/* TODO 2.25: строка "минимальная ставка" — текст #lot-price-info слева,
   кнопка "Минимальная ставка" (#btn-min-bid) справа.
   Скрывается вместе с блоком ставок (display: none на #bid_block).
   TODO 2.27: перенос кнопки под текст — по реальной ширине контейнера:
   метка занимает естественную ширину (без растягивания), кнопка — фиксированная;
   flex-wrap переносит кнопку на новую строку, когда текст + кнопка не помещаются
   в одну строку (влезли — на одной строке, не влезли — переносится) */
.lot-price-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.lot-price-info-row .lot-price-label {
    flex: 0 1 auto;
    min-width: 0;
}

/* Блок ставок: колонка — строка полей/кнопки (.form-inline) + строка
   #lot-price-info / #btn-min-bid под ней.
   Скрывается вместе с полями ввода и кнопкой (display: none на #bid_block). */
.actions-buttons, .bid-block {
    display: flex;
    flex-direction: column;
}

/* TODO 2.24: постаукционная продажа — поля ввода ставки скрыты,
   одинокая кнопка «Купить» центрируется в строке */
.form-inline.bid-row-postau {
    justify-content: center;
}

.lot-price-value {
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    color: var(--c-text-light);
    margin: var(--spacing-xs) 0 0 0;
}

.lot-price-value.mybid {
    color: var(--c-text-mybid);
}

.lot-price-value.hasbid {
    color: var(--c-text-hasbid);
}

.lot-status {
    font-size: var(--font-size-medium);
    color: var(--c-text-muted);
    font-style: italic;
}

.lot-author {
    font-size: var(--font-size-large);
    color: var(--c-text);
    margin: 0;
    font-weight: normal;
}

.lot-caption {
    border-bottom: 2px solid var(--c-border-light);
    font-size: var(--font-size-medium);
    color: var(--c-text-light);
    margin: var(--spacing-xs) 0;
}

.lot-techniq {
    padding-bottom: var(--spacing-sm);
}

.lot-description {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--c-text);
}

.scroll-text {
    max-height: var(--scroll-text-max-height);
    overflow-y: auto;
    padding: var(--spacing-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    background: var(--c-surface);
    line-height: 1.6;
    font-size: var(--font-size-base);
    color: var(--c-text);
    margin-bottom: var(--spacing-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--c-primary-hover) var(--c-surface-hover);
}

.scroll-text::-webkit-scrollbar {
    width: var(--spacing-xs);
}

.scroll-text::-webkit-scrollbar-track {
    background: var(--c-border-light);
    border-radius: var(--radius-block);
}

.scroll-text::-webkit-scrollbar-thumb {
    background: var(--c-primary);
    border-radius: var(--radius-block);
}

@media (max-width: 768px) {
    .lotblock {
        width: 100%;
    }

}

/* ========== ТАБЛИЦЫ АДМИНКИ ========== */
.table-admin {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    background: var(--c-surface);
}

.table-admin th {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    text-align: left;
    font-weight: 600;
    color: var(--c-text);
    border-bottom: 2px solid var(--c-border);
    white-space: nowrap;
}

.table-admin td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: 1px solid var(--c-border-light);
    color: var(--c-text);
}

.table-scroll {
    overflow-x: auto;
    margin-bottom: var(--spacing-xl);
}

.table-scroll .table-admin {
    min-width: var(--table-min-width);
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    .hide-desktop {
        display: unset !important;
    }
    .table-scroll .table-admin {
        min-width: auto;
    }
    .user-purchases-list .lot-sidebar-content {
        flex-wrap: wrap;
    }
    /* Мобильная версия: работа и автор — отдельной строкой под названием аукциона */
    .user-purchases-list .user-purchase-paint-mobile {
        flex-basis: 100%;
    }
    .user-purchase-meta {
        text-align: left;
        min-width: 0;
    }
}

/* Сокращение текста в ячейках таблицы с многоточием */
.table-admin td.description-cell {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== ВКЛАДКИ ========== */
.tabs-container {
    max-width: var(--container-max-width);
    margin: var(--spacing-sm) auto;
    font-family: Arial, sans-serif;
}

.tabs-labels {
    display: flex;
    /* gap: var(--spacing-xs); */
    border-bottom: 2px solid var(--c-primary-hover);
}

.tab-label {
    flex: 1;
    padding: var(--tab-padding-y) 8px;
    margin-bottom: 0px !important;
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
    border: none;
    border-radius: var(--radius-block) var(--radius-block) 0 0;
    transition: all var(--transition-normal) ease;
    font-weight: 600;
    font-size: var(--font-size-base);
    user-select: none;
}

.tab-label:hover {
    background: var(--c-surface-hover);
    transform: translateY(0px);
}

.tabs-content {
    padding: 0;
    border: 1px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--radius-block) var(--radius-block);
    background: var(--c-surface);
    min-height: 150px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-controls-container {
    display: flex;
    align-items: center;
        padding: var(--spacing-xs);
    flex-wrap: wrap;
}

.sale-paid-cell.unpaid {
    color: var(--c-fail);
    cursor: pointer;
}

/* ========== МОДАЛЬНЫЕ ОКНА ========== */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--c-modal-backdrop);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--c-background);
    border-radius: var(--radius-block);
    width: 100%;
    max-width: var(--modal-max-width);
    box-shadow: 0 10px 25px var(--c-shadow);
    animation: modal-slide-in 0.3s ease-out;
}

@keyframes modal-slide-in {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--c-border-light);
}

.modal-header h2 {
    margin: 0;
    font-weight: 500;
    font-size: var(--font-size-large);
    color: var(--c-text);
}

.modal-close {
    font-size: var(--font-size-28px);
    font-weight: bold;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--c-primary);
}

.modal-body {
    padding: var(--spacing-sm);
}

/* Список проблем загрузки JSON (UploadJsonModal): ошибки/предупреждения по лотам */
.upload-json-issues {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid var(--notification-error-border);
    border-radius: var(--radius-block);
    background: var(--notification-error-bg);
    max-height: 40vh;
    overflow-y: auto;
}

.upload-json-issues-title {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--notification-error-text);
    margin-bottom: var(--spacing-xs);
}

.upload-json-issues-list {
    margin: 0 0 var(--spacing-sm);
    padding-left: var(--spacing-md);
    font-size: var(--font-size-small);
    color: var(--notification-error-text);
}

.upload-json-issues-list li {
    margin-bottom: 2px;
}

/* Информация о выбранном файле и подсказка (UploadJsonModal / UploadZipModal) */
.upload-json-file-info {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
    word-break: break-all;
}

.upload-json-hint {
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
    margin-bottom: var(--spacing-sm);
}

/* Прогресс чанковой загрузки архива (UploadZipModal, TODO 2.32) */

.upload-progress-track {
    height: 8px;
    border-radius: var(--radius-block);
    background: var(--c-background-secondary);
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 0;
    border-radius: var(--radius-block);
    background: var(--c-primary);
    transition: width 0.2s linear;
}

.upload-progress-text {
    margin-top: var(--spacing-xxs);
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
        padding: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--c-border-light);
}

.modal-footer button {
    width: 100%;
}

@media (max-width: 768px) {
    .modal-footer button {
        width: 100%;
    }
}

/* ========== ImageViewModal ========== */
.image-viewer-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
}

.image-viewer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-viewer-container img {
    max-width: 100%;
    max-height: 75vh;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-block);
}

.image-viewer-container img.image-editable {
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.image-viewer-container img.image-editable:hover {
    opacity: 0.8;
}

.image-edit-hint {
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
    font-style: italic;
}

/* ========== ФОРМЫ ========== */
.upload-progress, .form-group {
    margin-bottom: var(--spacing-sm);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--c-text);
}

.form-inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    }

.form-inline label {
    min-width: var(--form-inline-label-min-width);
    display: inline;
    margin-bottom: 0;
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

.form-inline input[type="datetime-local"],
.form-inline input[type="number"],
.form-inline input[type="text"] {
    width: 50%;
}

.form-inline select {
    width: 50%;
    padding: var(--spacing-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-field);
    font-size: var(--font-size-base);
    background: var(--c-background);
    color: var(--c-text);
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
        font-size: var(--font-size-base);
    color: var(--c-text);
    cursor: pointer;
    margin: var(--spacing-xs);
}

.radio-group {
    display: flex;
    flex-direction: column;
        margin-top: var(--spacing-xs);
}

.radio-label {
    display: inline-flex;
    align-items: center;
        font-size: var(--font-size-base);
    color: var(--c-text);
    cursor: pointer;
}

/* Чекбоксы и радиокнопки — кастомное оформление.
   `accent-color` не поддерживается в Chromium 68, а нативный вид
   невыбранных контролов в тёмной теме оставался светлым. Рисуем сами:
   фон — --c-surface, рамка — --c-text-muted (контрастна в обеих темах,
   в отличие от --c-border, который в светлой теме почти не виден),
   выбор — --c-primary. Темизация идёт автоматически через токены,
   отдельный блок html.theme-dark не нужен. */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: 0;
    padding: 0;
    border: 1px solid var(--c-text-muted);
    border-radius: var(--radius-field);
    background-color: var(--c-surface);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

input[type="radio"] {
    border-radius: var(--radius-circle);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--c-primary);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

/* Галочка чекбокса: белая (фон выбранного всегда --c-primary в обеих темах) */
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Точка радиокнопки — светлая (--c-text-bright) */
input[type="radio"]:checked {
    background-image: radial-gradient(var(--c-text-bright) 3px, transparent 3px);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-group input[type="file"] {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-field);
    font-size: var(--font-size-base);
    background: var(--c-background);
    color: var(--c-text);
    cursor: pointer;
}

/* ========== КАЛЕНДАРЬ ДАТЫ/ВРЕМЕНИ ========== */
.datetime-picker-wrapper {
    display: flex;
    align-items: center;
}

.datetime-picker-trigger {
    flex-shrink: 0;
    width: 36px;
    padding: var(--spacing-sm) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-field);
    background: var(--c-background);
    color: var(--c-text-light);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition-fast);
}

.datetime-picker-popup {
    position: fixed;
    display: none;
    flex-direction: column;
    width: 292px;
    padding: var(--spacing-md);
    background: var(--c-background);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow);
    z-index: var(--z-popup);
}

.datetime-picker-popup.open {
    display: flex;
}

.datetime-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

.datetime-picker-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--c-text);
}

.datetime-picker-nav {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    background: var(--c-background);
    color: var(--c-text-light);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition-fast);
}

.datetime-picker-trigger:hover, .datetime-picker-nav:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-background-secondary);
}

.datetime-picker-weekday {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: var(--spacing-xxs);
}

.datetime-picker-weekday span {
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
}

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

.datetime-picker-day {
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-block);
    background: transparent;
    color: var(--c-text);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition-fast);
}

.datetime-picker-day:hover {
    background: var(--c-background-secondary);
    color: var(--c-primary);
    transform: none;
}

.datetime-picker-day.other-month {
    color: var(--c-text-muted);
    opacity: 0.5;
}

.datetime-picker-day.today {
    border: 1px solid var(--c-primary);
}

.datetime-picker-day.selected {
    background: var(--c-primary);
    color: var(--c-text-bright);
}

.tab-label.active, .datetime-picker-day.selected:hover {
    background: var(--c-primary-hover);
    color: var(--c-text-bright);
}

.datetime-picker-time {
    display: flex;
    align-items: center;
    justify-content: center;
        margin-top: var(--spacing-md);
}

.datetime-picker-time select {
    width: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-field);
    background: var(--c-background);
    color: var(--c-text);
    font-size: var(--font-size-base);
}

.datetime-picker-time-sep {
    color: var(--c-text-muted);
    font-size: var(--font-size-base);
}

.datetime-picker-footer {
    display: flex;
    justify-content: flex-end;
        margin-top: var(--spacing-md);
}

.datetime-picker-footer button {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-base);
}

.auction-filters {
    display: flex;
    align-items: center;
        flex-wrap: wrap;
    margin-left: auto;
}

.auction-filters select,
.auction-filters input[type="text"],
.auction-filters input[type="date"] {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-field);
    font-size: var(--font-size-base);
    background: var(--c-background);
    color: var(--c-text);
    min-width: var(--filter-min-width);
    transition: var(--transition-fast);
}


.auction-filters .datetime-picker-wrapper input {
    width: 112px;
    min-width: 112px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-field);
    font-size: var(--font-size-base);
    background: var(--c-background);
    color: var(--c-text);
    transition: var(--transition-fast);
}

.form-group.form-inline select:hover, .form-group input[type="file"]:hover, .auction-filters select:hover, .auction-filters input[type="text"]:hover, .auction-filters input[type="date"]:hover, .auction-filters .datetime-picker-wrapper input:hover {
    border-color: var(--c-primary);
}

input:focus, textarea:focus, select:focus, .auction-filters select:focus, .auction-filters input[type="text"]:focus, .auction-filters input[type="date"]:focus, .auction-filters .datetime-picker-wrapper input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-focus-ring);
}

.auction-filters .datetime-picker-trigger {
    width: 32px;
    border-radius: var(--radius-field);
}

/* ========== РЕДАКТОР АУКЦИОНА ========== */
.auction-editor {
    padding: 0;
    background: var(--c-background);
    min-height: auto;
}

.editor-button {
    width: auto;
    min-width: var(--filter-min-width);
}

/* Блоки информации в редакторах */
.auction-info-block {
    background: var(--c-surface);
    padding: var(--spacing-xs);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow);
    margin-bottom: var(--spacing-md);
}

.auction-info-block h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--c-primary);
    font-size: var(--font-size-large);
}

.auction-info-header {
    font-weight: 500;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
    color: var(--c-text-light);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: 2px solid var(--c-border);
}

.auction-info-description {
    margin-bottom: var(--spacing-lg);
    color: var(--c-text);
    line-height: 1.5;
}

.auction-info-table {
    width: 100%;
    /* max-width: var(--table-min-width); */
}

.auction-info-table td:first-child {
    font-weight: 500;
    color: var(--c-text-light);
    width: var(--info-table-first-child-width);
    vertical-align: top;
}

.auction-info-content {
    display: flex;
        align-items: flex-start;
}

.form-inline button, .datetime-picker-wrapper input, .auction-info-table-container {
    flex: 1;
}

/* ========== ПРЕВЬЮ И ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ ========== */
.inline_img {
    max-width: var(--inline-img-size);
    max-height: var(--inline-img-size);
}

@media (max-width: 768px) {
    .preview_lotlist {
        width: var(--preview-thumb-mobile);
        height: var(--preview-thumb-mobile);
    }
}

.preview_lotlist, .preview_thumb {
    width: var(--preview-thumb);
    height: var(--preview-thumb);
    object-fit: contain;
    border-radius: var(--radius-block);
}

.preview_128 {
    max-width: var(--preview-128);
    max-height: var(--preview-128);
    min-width: var(--preview-thumb);
    min-height: var(--preview-thumb);
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
}

.preview_256 {
    max-width: var(--preview-256);
    max-height: var(--preview-256);
    min-width: var(--preview-thumb);
    min-height: var(--preview-thumb);
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
}

.preview_large {
    max-width: var(--preview-large);
    max-height: var(--preview-large);
    min-width: var(--preview-thumb);
    min-height: var(--preview-thumb);
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--toolbar-btn-padding-x);
    font-size: var(--font-size-medium);
    background: var(--c-primary);
    color: var(--c-text-bright);
    border: none;
    border-radius: var(--radius-block);
    min-height: var(--nav-min-height);
    cursor: pointer;
    transition: background var(--transition-normal);
    text-decoration: none;
}

.toolbar-btn:hover {
    transform: translateY(-2px);
    background: var(--c-primary-hover);
}

/* Кнопка переключения темы (иконка, без текста) */
.theme-toggle-btn {
    padding: var(--spacing-sm);
    min-width: var(--nav-min-height);
}

/* Auth dropdown menu */
.auth-menu-wrapper {
    position: relative;
    display: inline-block;
}

.auth-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--c-background);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    box-shadow: 0 4px 12px var(--c-shadow);
    z-index: var(--z-dropdown);
    min-width: 140px;
}

.auth-dropdown-item {
    display: block;
    padding: 10px 16px;
    min-width: 14ch;
    color: var(--c-text);
    text-decoration: none;
    font-size: var(--font-size-medium);
    transition: background var(--transition-normal);
}

.auth-dropdown-item:first-child {
    border-radius: var(--radius-block) var(--radius-block) 0 0;
}

.auth-dropdown-item:last-child {
    border-radius: 0 0 var(--radius-block) var(--radius-block);
}

@media (max-width: 768px) {
    .auction-info-content {
        flex-direction: column;
    }
    .auction-image-container {
        margin: 0 auto;
        text-align: center;
    }
}

/* ===== ПОПАПЫ ВХОДА И РЕГИСТРАЦИИ (раздельные чекбоксы) ===== */
.login-form h2 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    color: var(--c-text);
}

.popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--c-modal-backdrop);
    z-index: var(--z-popup);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal) ease, visibility var(--transition-normal) ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Активное состояние popup-box (для динамических попапов) */
.popup-backdrop-active {
    opacity: 1;
    visibility: visible;
}

.popup-backdrop-active .popup-box {
    transform: scale(1);
    transition: transform var(--transition-normal) ease;
}

.popup-box {
    background: var(--c-background);
    max-width: var(--popup-max-width);
    width: var(--popup-box-width);
    padding: var(--popup-box-padding) var(--popup-box-padding);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow-modal);
    position: relative;
    transform: scale(0.8);
    transition: transform var(--transition-normal) ease;
    margin-top: -50px;
}

.popup-text {
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-md);
    color: var(--c-text);
    white-space: pre-line;
}

/* Страница подтверждения регистрации по e-mail (TODO 2.42, ui/php/confirm.php) */
.confirm-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.confirm-page .popup-box {
    transform: none; /* не нужен эффект появления: страница статична */
    margin-top: 0;
}

.confirm-page h2 {
    margin-top: 0;
    color: var(--c-text);
}

.confirm-message {
    font-size: var(--font-size-large);
    line-height: 1.5;
    margin: var(--spacing-md) 0;
    color: var(--c-text);
    white-space: pre-line;
}

.confirm-message-ok {
    color: var(--c-success);
}

.popup-content {
    padding: var(--spacing-xs);
}

.popup-close-btn {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: var(--font-size-28px);
    cursor: pointer;
    color: var(--c-text-muted);
    transition: color var(--transition-fast);
    background: none;
    border: none;
}

.notification-message {
    padding: var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-medium);
    line-height: 1.5;
    font-weight: bold;
    color: var(--notification-success-text);
}

.notification-message.error {
    color: var(--notification-error-text);
}

.register-link {
    text-align: center;
    /* margin-top: var(--spacing-sm); */
    font-size: var(--font-size-base);
}

.register-link a {
    color: var(--c-primary-hover);
    text-decoration: none;
}

.register-link a:hover {
    text-decoration: underline;
}

/* ========== СТРАНИЦА АУКЦИОНА ========== */

/* Заголовок аукциона */

.auction-description {
    font-size: var(--font-size-base);
    color: var(--c-text);
    line-height: 1.6;
    margin: 0;
}

.lot-price-label, .auction-meta {
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
    margin: 0;
}

/* Макет аукциона */
#auction_content {
    display: flex;
    /* gap: var(--spacing-md); */
    /* min-height: 500px; */
}

/* Боковая панель со списком лотов */
.lots-sidebar {
    width: 300px;
    min-width: 280px;
    overflow: hidden;
}

/* Заголовок боковой панели фиксирован */
.sidebar-title {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--c-border);
    /* position: sticky; */
    top: 0;
    background: var(--c-surface);
    /* z-index: 1; */
}

/* Прокручиваемый контент */
.sidebar-scroll {
    max-height: calc(80vh - 50px);
    overflow-y: auto;
}

.lot-sidebar-item {
    display: flex;
    padding: var(--spacing-xs);
    border-radius: var(--radius-block);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    /* margin-bottom: var(--spacing-xs); */
}

.lot-sidebar-item.selected {
    border-color: var(--c-primary);
    background: var(--c-surface);
}

.lot-sidebar-item.active::after {
    content: '';
}

.lot-sidebar-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.lot-sidebar-thumb {
    flex-shrink: 0;
    width: var(--preview-thumb);
    height: var(--preview-thumb);
}

.lot-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-block);
}

.lot-sidebar-number {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 2px;
}

.lot-sidebar-active {
    font-size: var(--font-size-32px);
}

.lot-sidebar-active::after {
    content: '\1F4E2';
}

.lot-sidebar-name {
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lot-sidebar-author {
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Список выигранных лотов в личном кабинете
   (строки переиспользуют стили lot-sidebar-item / lot-sidebar-content / lot-sidebar-info) */
.user-purchases-list {
    flex: 1;
    align-self: stretch; /* на мобильных auction-info-content — column с align-items: flex-start */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Разделители строк, как в таблице (1px), без отступов между строками */
.user-purchases-list .lot-sidebar-item {
    margin-bottom: 0;
    border-bottom: 1px solid var(--c-border-light);
}

/* В списке покупок контентная строка должна заполнять всю ширину строки
   (в сайдбаре лотов ширина item определяется контейнером, здесь — наоборот) */
.input-with-btn input[type="text"], .auction-header-row .top_descr-title, .lot-sidebar-info, .user-purchases-list .lot-sidebar-content {
    flex: 1;
    min-width: 0;
}

.user-purchase-meta {
    flex-shrink: 0;
    text-align: right;
    min-width: 90px;
}

.user-purchase-price {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--c-text);
}

/* Статус ставки в списке "Мои ставки": лидер / перебил */
.upload-json-hint code, .user-purchase-paid, .user-bid-status {
    font-size: var(--font-size-small);
}

.user-purchase-paid.unpaid, .user-bid-status.outbid {
    color: var(--c-fail);
}

/* Область деталей лота */
.lot-detail-area {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-sm);
}

/* Правая панель - список ставок */
.sidebar-panel {
    /* width: auto; */
    min-width: 350px;
    flex-shrink: 0;
    background: var(--c-surface);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow-info);
    padding: var(--spacing-sm);
    max-height: 80vh;
    align-self: flex-start;
    /* position: sticky; */
    top: var(--spacing-sm);
}

.sidebar-panel .sidebar-title {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--c-border);
}

.no-selection {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: var(--c-background);
    border-radius: var(--radius-block);
    color: var(--c-text-muted);
    font-size: var(--font-size-large);
}

/* Ставки (таблица) */

.bids-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
}

.table-admin thead, .bids-table thead {
    background: var(--c-surface);
}

.bids-table th {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
    font-weight: 600;
    color: var(--c-text);
    border-bottom: 2px solid var(--c-border);
}

.bids-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--c-border-light);
    color: var(--c-text);
}

.bids-table tbody tr:hover {
    background: var(--c-background);
}

/* Блок таблицы ставок */

.bids-table-scroll {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--c-border);
}

/* TODO 2.10.3: <video> активного плеера, вставленный в основной слот
   (#media_container) вместо #auc_video. Наследует размеры видео. */
#media_container video.active-stream-video {
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    max-width: 322px;
    max-height: 242px;
    min-height: 128px;
    min-width: 128px;
    width: 100%;
    object-fit: contain;
}

/* Адаптивность */
@media (max-width: 768px) {
    #auction_content {
        flex-direction: column;
    }

    .lots-sidebar,
    .lot-detail-area,
    .sidebar-panel {
        width: 100%;
        max-height: none;
        position: static;
    }

    .lots-sidebar {
        max-height: 250px;
    }

    .sidebar-panel {
        max-height: 300px;
    }
}

/* TODO 2.27: мониторы низкого разрешения (ширина <1200px, не мобильные) —
   поджимаем боковые панели и медиа, общий трёхколоночный макет сохраняем.
   ID-селекторы: переопределяют min-width: 350px базового .sidebar-panel
   для обеих панелей (у элементов обеих панелей есть этот класс) */
@media (min-width: 769px) and (max-width: 1200px) {
    /* Левая панель (список лотов): 300px -> 200px */
    #lots_sidebar {
        width: 250px;
        min-width: 250px;
    }

    /* Правая панель (медиа + ставки): 350px -> 144px (128px видео + 2×8px padding) */
    #lot_sidebar_panel {
        min-width: 144px;
    }

    /* Видео и заглушка в узкой панели: 128×96 (4:3, как базовые 322×242).
       Селекторы с #auc_media_container — базовые правила для #auc_video и
       #auc_image объявлены в файле НИЖЕ (секция «Видеотрансляция»), и при
       равной специфичности перебивали это правило по порядку: видео
       оставалось 322px и вылезало за суженную панель. min-width/min-height
       сбрасываем — базовый min-height: 128px приоритетнее max-height
       и не давал элементу уменьшиться */
    #auc_media_container #auc_video,
    #auc_media_container #auc_video_preview,
    #auc_media_container #auc_image,
    #media_container video.active-stream-video {
        max-width: 160px;
        max-height: 120px;
        min-width: 0;
        min-height: 96px;
    }

    /* Таблица ставок в узкой панели: не сжимать колонки,
       при необходимости — горизонтальная прокрутка */
    .bids-table {
        min-width: 240px;
    }

    .bids-table-scroll {
        overflow-x: auto;
    }

    /* Строка ставки: при нехватке ширины переносить кнопку на новую строку */

    /* Кнопки ведущего: перенос вместо сжатия */
    #bid_block .form-inline, #lot-controls-admin .inline-buttons {
        flex-wrap: wrap;
    }

    #lot-controls-admin .inline-buttons button {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

@media (max-width: 768px) {

    .lot-sidebar-thumb {
        width: 40px;
        height: 40px;
    }
}

/* ========== Мобильная версия сайдбара лотов ========== */

/* Мобильная шапка: заголовок + кнопка-бургер справа (только мобильная версия) */
.lots-mobile-header {
    display: none;
    position: relative;
}

/* Кнопка-бургер */
.lots-menu-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    background: var(--c-background);
    color: var(--c-text);
    font-size: var(--font-size-large);
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lots-menu-btn:hover {
    background: var(--c-background-secondary);
    border-color: var(--c-primary);
}

.burger-icon {
    font-size: var(--font-size-large);
}

/* Выпадающее меню со списком лотов (только мобильная версия).
   Элемент вешается на document.body и позиционируется фиксированно
   (top/left/width задаются из JS), чтобы отображаться поверх всего
   документа и не обрезаться overflow родительских контейнеров */
.lots-menu {
    display: none;
    position: fixed;
    z-index: var(--z-menu);
    max-height: 300px;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow);
    padding: var(--spacing-xs);
}

/* Пункт меню: мобильный элемент лота */
.lots-menu .lot-sidebar-info {
    padding: var(--spacing-sm);
    border-radius: var(--radius-block);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lots-menu .lot-sidebar-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Мобильная версия: показываем шапку с бургером и меню (когда открыто);
   в списке остаётся только выбранный лот — мобильные элементы остальных
   лотов перенесены в меню (JS) */
@media (max-width: 768px) {
    .lots-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .lots-menu.open {
        display: block;
    }

    .lots-sidebar {
        max-height: none;
    }
}

/* ========== Видеотрансляция (WebRTC) ========== */

#auc_media_container {
    position: relative;
    width: 100%;
}

/* Якорь для оверлеев (управление медиа, звук, статус) */

/* Заглушка (изображение аукциона) показывает картинку до старта
   трансляции; резервируем высоту как у видео, чтобы при подключении
   потока не было скачка вёрстки. Раньше эти значения задавались
   inline-стилями в разметке — вынесены в CSS, чтобы медиазапросы
   (например 2.27 для маленьких мониторов) могли уменьшать заглушку
   вместе с видео */
#auc_image {
    min-height: 128px;
    max-height: 242px;
}

#auc_video,
#auc_video_preview {
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    max-width: 322px;
    max-height: 242px;
    /* width: 322px;
    height: 242px; */
    min-height: 128px;
    min-width: 128px;
    width: 100%;
    object-fit: contain;
}

#auc_video_preview {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1); /* Для поддержки старых версий Safari */
}

/* ========== Оверлей управления медиа (2.11) ========== */

#auc_video_overlay {
    position: absolute;
    top: 6px;
    left: 6px;
    /* z-index выше #stream_status (5): выпадающее меню всегда сверху */
    z-index: 10;
}

/* Оверлей управления звуком плеера (2.10.2) — левый верхний угол видео */
#auc_player_overlay {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 10;
}

.streamer-overlay {
    display: flex;
}

#media_container, .streamer-overlay-item {
    position: relative;
}

.streamer-overlay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: var(--font-size-medium);
    line-height: 1;
    color: var(--overlay-text);
    background: var(--overlay-chip-bg);
    border: 1px solid var(--overlay-border);
    border-radius: var(--radius-block);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.streamer-overlay-btn:active {
    background: var(--overlay-btn-bg-active);
}

/* Камера отключена / микрофон приглушён */
.streamer-overlay-btn.off {
    background: var(--overlay-btn-off-bg);
    border-color: var(--overlay-btn-off-border);
}

.streamer-overlay-menu {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    min-width: 180px;
    max-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--overlay-menu-bg);
    border: 1px solid var(--overlay-border);
    border-radius: var(--radius-block);
    padding: 4px 0;
    box-shadow: 0 4px 12px var(--overlay-menu-shadow);
}

.streamer-overlay-menu-item {
    padding: 8px 12px;
    font-size: var(--font-size-small);
    color: var(--overlay-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.streamer-overlay-menu-item:hover {
    background: var(--overlay-item-hover);
}

.streamer-overlay-menu-item.disabled {
    color: var(--overlay-menu-item-disabled);
    cursor: default;
}

.streamer-overlay-menu-item.disabled:hover {
    background: none;
}

/* 2.12: заголовок секции в меню (например, «Разрешение») */
.streamer-overlay-menu-title {
    padding: 6px 12px 2px;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--overlay-menu-item-disabled);
    cursor: default;
    user-select: none;
}

.streamer-overlay-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--overlay-border);
}

#auc_video_controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
        padding: var(--spacing-xxs) var(--spacing-xs);
    background: var(--overlay-controls-bg);
    border-radius: var(--radius-block);
}

#auc_video_controls .btn-apply,
#auc_video_controls .btn-cancel {
    font-size: var(--font-size-small);
    /* padding: 4px 10px; */
    white-space: nowrap;
}

/* Группы кнопок управления видео */
.video-controls-group {
    display: inline-flex;
    align-items: center;
        padding: 2px 6px;
    border-right: 1px solid var(--overlay-border);
}

.video-controls-group:last-of-type {
    border-right: none;
}

/* Статус трансляции — левый нижний угол медиа-контейнера */
.stream-status {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 5;
    font-size: var(--font-size-small);
    color: var(--c-fail);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--overlay-chip-bg);
    padding: 2px 8px;
    border-radius: var(--radius-block);
}

/* Без текста (трансляции нет) — не показываем пустую плашку */

.stream-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--c-fail);
    margin-right: 4px;
    vertical-align: middle;
    animation: live-pulse 1.5s ease-in-out infinite;
}

.sale-paid-cell.paid, .user-purchase-paid.paid, .user-bid-status.leader, .stream-active {
    color: var(--c-success);
}

.btn-apply, .upload-progress-bar.full, .stream-active::before {
    background: var(--c-success);
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 2.23/2.26: Счётчик зрителей — в заголовке аукциона
   (.auction-header-actions, после кнопки шаринга, строго справа;
   2.26: клик — выпадающий список псевдонимов, только админу) */
#viewer_count {
    font-size: var(--font-size-small);
    color: var(--c-text-muted);
    white-space: nowrap;
    padding: 2px 4px;
}

/* 2.26: счётчик кликабелен у админа (список зрителей по клику).
   У не-админа блок #viewer_count_wrap скрыт, поэтому курсор
   показывать безопасно */
#viewer_count:not(:empty) {
    cursor: pointer;
}

#viewer_count:not(:empty):hover,
#viewer_count.viewer-count-active {
    color: var(--c-primary);
    background: var(--c-surface-hover);
    border-radius: var(--radius-block);
}

/* 2.26: выпадающая панель списка зрителей. В заголовке страницы,
   открывается ВНИЗ от счётчика (вверху экрана — больше свободного
   места для длинного списка). Блок действий хедера flex-shrink: 0,
   счётчик прижат к правому краю, не переносится при сжатии окна.
   Палитра — тематические переменные (светлая/тёмная тема) */
#viewer_count_wrap {
    position: relative;
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

#viewer_list_panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: var(--z-panel); /* выше контента страницы; ниже PiP (900), чата (1000), модалок */
    min-width: 160px;
    max-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    font-size: var(--font-size-small);
    color: var(--c-text);
    background: var(--c-background);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow);
    padding: var(--spacing-xxs) 0;
}

.viewer-list-item {
    padding: 2px var(--spacing-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auction_catalog_item.auction-list-item:hover, .table-admin tbody tr:hover, .lot-sidebar-item:hover, .lot-sidebar-item.selected:hover, .lots-menu .lot-sidebar-info:hover, .viewer-list-item:hover {
    background: var(--c-surface-hover);
}

.color-text-muted, .upload-json-issues-list li.warning, .viewer-list-anon {
    color: var(--c-text-muted);
}

.viewer-list-empty {
    padding: 2px var(--spacing-sm);
    color: var(--c-text-muted);
}

/* TODO 2.28: кнопка сворачивания плавающего видео в кнопку-«пузырь»
   (по аналогии с кнопкой чата, 2.18). Нужна только на мобильных —
   на десктопе PiP нет, поэтому базово кнопка скрыта (стили — в
   медиазапросе <=768px ниже) */
#btn_media_toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

/* Иконки кнопки: ▼ — свернуть (развёрнутый PiP), камера — «пузырь»
   (свёрнутый); переключаются классом .media-collapsed */

/* Мерцающая зелёная точка — статус LIVE (в свёрнутом виде) */
.media-toggle-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    background: var(--c-success);
    box-shadow: 0 0 0 2px var(--c-surface);
    animation: live-pulse 1.5s ease-in-out infinite;
}

/* TODO 2.28: мобильная версия — при активной трансляции медиа-контейнер
   превращается в плавающий PiP-оверлей в левом нижнем углу, чтобы видео
   было всегда на виду, не прокручивая страницу (в обычной вёрстке оно
   находится в самом низу колонки, после деталей лота).
   Класс .media-floating добавляется JS (VideoContainer.updateDisplay) при
   активной трансляции; position:fixed применяется только в @media <=768px,
   на десктопе класс ничего не меняет.
   Левый угол выбран, чтобы не перекрывать кнопку чата (правый нижний).
   z-index 900 — ниже чата (1000) и мобильного меню лотов (1500). */
@media (max-width: 768px) {
    #auc_media_container.media-floating {
        position: fixed;
        left: var(--spacing-sm);
        bottom: var(--spacing-sm);
        z-index: var(--z-pip);
        width: auto;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-block);
        box-shadow: var(--box-shadow);
        padding: var(--spacing-xxs);
    }

    /* Видео в PiP: фиксированный размер 160×120 (4:3, как в базовом стиле).
       aspect-ratio/min()/max() недоступны в Chromium 68 — используем px.
       display:block + margin:auto — по центру, если панель управления
       трансляцией (ниже) шире видео. */
    #auc_media_container.media-floating #auc_video,
    #auc_media_container.media-floating #auc_video_preview,
    #media_container video.active-stream-video {
        display: block;
        margin: 0 auto;
        max-width: 160px;
        max-height: 120px;
        min-width: 0;
        min-height: 0;
    }

    /* Панель управления трансляцией (только админ) — компактнее в PiP */
    #auc_media_container.media-floating #auc_video_controls {
        padding: var(--spacing-xxs);
    }

    /* Меню оверлеев (звук плеера, камера/микрофон стримера) — в PiP оно
       у самого низа экрана, поэтому разворачиваем ВВЕРХ от кнопки
       (top:40px вывело бы его за нижнюю границу viewport и пункты было
       бы не выбрать). bottom:40px — нижний край меню на 4px выше кнопки. */
    #auc_media_container.media-floating .streamer-overlay-menu {
        top: auto;
        bottom: 40px;
    }

    /* TODO 2.28: кнопка сворачивания PiP — компактная, в правом верхнем
       углу видео (z-index выше оверлеев видео — у них 10) */
    #auc_media_container.media-floating #btn_media_toggle {
        display: flex;
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 20;
        width: 32px;
        height: 32px;
        /* сбрасываем margin глобального правила button {} */
        margin: 0;
        font-size: var(--font-size-small);
        color: var(--overlay-text);
        background: var(--overlay-chip-bg);
        border: 1px solid var(--overlay-border);
        border-radius: var(--radius-block);
    }

    #auc_media_container.media-floating #btn_media_toggle:active {
        background: var(--overlay-btn-bg-active);
    }

    /* Свёрнутый PiP — кнопка-«пузырь» как у чата (2.18): контейнер
       прижимается к левому нижнему углу, оформление карточки и padding
       убираются, а отступ от края экрана даёт margin самой кнопки — тот же
       --spacing-xxs, что и у кнопки чата (отступы зеркальны: чат справа,
       видео слева) */
    #auc_media_container.media-floating.media-collapsed {
        left: 0;
        bottom: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    /* Свёрнуто: видео, оверлеи и панель управления скрыты, остаётся
       только «пузырь». Поток при этом не прерывается — видеоэлемент
       остаётся в DOM (display:none не останавливает воспроизведение) */
    #auc_media_container.media-collapsed #media_container,
    #auc_media_container.media-collapsed #auc_video_controls {
        display: none !important;
    }

    #auc_media_container.media-collapsed .media-toggle-icon {
        display: none;
    }

    #auc_media_container.media-collapsed .media-toggle-bubble-icon {
        display: block;
    }

    #auc_media_container.media-floating.media-collapsed #btn_media_toggle {
        /* position: relative (не static) — чтобы точка позиционировалась
           внутри «пузыря»; в потоке кнопка остаётся обычным блоком.
           top/right обнуляем: в развёрнутом виде кнопка абсолютно
           позиционирована по ним, для relative это был бы сдвиг */
        position: relative;
        top: auto;
        right: auto;
        width: 56px;
        height: 56px;
        margin: var(--spacing-xxs);
        font-size: var(--font-size-icon);
        color: var(--c-text-bright);
        background: var(--c-primary);
        border: none;
        border-radius: var(--radius-circle);
        box-shadow: var(--box-shadow-info);
    }

    /* Зелёная мерцающая точка (LIVE) в правом верхнем углу «пузыря» */
    #auc_media_container.media-floating.media-collapsed .media-toggle-dot {
        position: absolute;
        top: 6px;
        right: 6px;
    }
}

/* ========== УВЕДОМЛЕНИЯ ========== */
.notification-toast {
    position: fixed;
    top: 20px;
    left: 20px;
    padding: 16px 24px;
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow-info);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
        opacity: 0;
    animation: slideIn 0.3s ease forwards;
}

.notification-toast.slide-out {
    animation: slideOut 0.3s ease forwards;
}

.notification-toast.success {
    background: var(--notification-success-bg);
    color: var(--notification-success-text);
    border: 1px solid var(--notification-success-border);
}

.notification-toast.error {
    background: var(--notification-error-bg);
    color: var(--notification-error-text);
    border: 1px solid var(--notification-error-border);
}

.notification-message {
    flex: 1;
}

.notification-message.error {
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    font-size: var(--font-size-icon);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--transition-normal);
}

.notification-close:hover {
    opacity: 1;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* ========== Чат аукциона (TODO 2.18) ========== */

/* Корневой контейнер: плавающий виджет в правом нижнем углу */
.chat-widget {
    position: fixed;
    right: var(--spacing-lg);
    bottom: var(--spacing-lg);
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Кнопка-«пузырь» */
.chat-widget-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    border: none;
    background: var(--c-primary);
    color: var(--c-text-bright);
    font-size: var(--font-size-icon);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--box-shadow-info);
    transition: background var(--transition-normal);
    padding: 0;
}

/* Кнопка-«пузырь» скрыта, пока панель чата открыта
   (на маленьких экранах она закрывает контент) */
.hide-desktop, .stream-status:empty, #viewer_count:empty, .media-toggle-bubble-icon, .chat-widget-open .chat-widget-toggle {
    display: none;
}

.theme-toggle-btn svg, .streamer-overlay-menu.open, .chat-widget-toggle-icon {
    display: block;
}

/* Бейдж непрочитанных сообщений */
.chat-widget-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--radius-circle);
    background: var(--c-fail);
    color: var(--c-text-bright);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}

/* Панель чата */
.chat-widget-panel {
    position: relative;
    width: 320px;
    max-width: calc(100vw - 2 * var(--spacing-lg));
    background: var(--c-surface);
    border-radius: var(--radius-block);
    box-shadow: var(--box-shadow-info);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--c-surface);
    border-bottom: 2px solid var(--c-border);
}

.lots-mobile-title, .chat-widget-title {
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--c-text);
}

.chat-widget-close {
    border: none;
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--font-size-large);
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--spacing-xs);
}

.popup-close-btn:hover, .chat-widget-close:hover {
    color: var(--c-text);
}

/* Заголовок окна — за него перетаскивается чат на десктопе (TODO 2.21).
   Двигается только панель (.chat-widget-panel), кнопка-«пузырь»
   остаётся на месте. На мобильных (<=768px) drag отключён,
   курсор не меняется */
@media (min-width: 769px) {
    .chat-widget-header {
        cursor: grab;
    }

    .chat-widget-header .chat-widget-close {
        cursor: pointer;
    }

    .chat-widget-panel.chat-widget-dragging, .chat-widget-panel.chat-widget-dragging .chat-widget-header {
        cursor: grabbing;
    }

    /* Ручка изменения размера в правом нижнем углу (TODO 2.21) */
    .chat-widget-resize-handle {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        cursor: nwse-resize;
        z-index: 1;
        background:
            linear-gradient(135deg,
                transparent 0%,
                transparent 50%,
                var(--c-border) 50%,
                var(--c-border) 60%,
                transparent 60%,
                transparent 75%,
                var(--c-border) 75%,
                var(--c-border) 85%,
                transparent 85%);
    }

    .chat-widget-panel.chat-widget-resizing {
        cursor: nwse-resize;
    }
}

/* Список сообщений.
   flex: 1 — при заданной высоте панели (после resize, TODO 2.21)
   список занимает всё доступное место; max-height ограничивает
   его при авто-высоте панели */
.chat-widget-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
}

/* Когда панели задана явная высота (resize) — список сообщений
   растягивается на всё доступное место (без ограничения 300px) */
.chat-widget-panel.chat-widget-resized .chat-widget-messages {
    max-height: none;
}

.chat-msg {
    position: relative;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-block);
    background: var(--c-background);
    font-size: var(--font-size-small);
}

.auth-dropdown-item:hover, .lot-sidebar-item.active, .chat-msg-mine {
    background: var(--c-background-secondary);
}

.chat-msg-meta {
    display: flex;
    align-items: baseline;
        margin-bottom: var(--spacing-xxs);
}

.chat-msg-nick {
    font-weight: 600;
    color: var(--c-text);
}

.chat-msg-time {
    color: var(--c-text-muted);
    font-size: var(--font-size-small);
}

.chat-msg-text {
    color: var(--c-text);
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Кнопка удаления сообщения (только для админа) */
.chat-msg-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    border: none;
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--font-size-medium);
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.5;
}

.chat-msg-delete:hover {
    color: var(--c-fail);
    opacity: 1;
}

.no-bids-msg, .chat-msg-empty {
    color: var(--c-text-muted);
    font-style: italic;
    font-size: var(--font-size-small);
    text-align: center;
    padding: var(--spacing-sm);
}

/* Строка ввода */
.chat-widget-input-row {
    display: flex;
        padding: var(--spacing-sm);
    border-top: 1px solid var(--c-border-light);
}

.chat-widget-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-block);
    font-size: var(--font-size-base);
    color: var(--c-text);
}

.chat-widget-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

.chat-widget-send {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-block);
    background: var(--c-primary);
    color: var(--c-text-bright);
    font-size: var(--font-size-large);
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.btn-delete:hover, .scroll-text::-webkit-scrollbar-thumb:hover, .chat-widget-toggle:hover, .chat-widget-send:hover {
    background: var(--c-primary-hover);
}

.chat-widget-send:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Адаптивность: на мобильных чат на всю ширину экрана, прижат к низу.
   Кнопка-«пузырь» (в свёрнутом состоянии) остаётся в правом нижнем углу.

   TODO 2.28: контейнер растянут на всю ширину низа экрана, поэтому его
   прозрачная часть перехватывала клики, не давая нажать кнопки в
   плавающем PiP-видео (левый нижний угол). Делаем сам контейнер
   «прозрачным» для указателя, а клики включаем только на реальных
   интерактивных элементах — панели и кнопке-«пузыре». */
@media (max-width: 768px) {
    .chat-widget {
        left: 0;
        right: 0;
        bottom: 0;
        align-items: flex-end;
        pointer-events: none;
    }

    .chat-widget-panel,
    .chat-widget-toggle {
        pointer-events: auto;
    }

    .chat-widget-panel {
        width: 100%;
        max-width: none;
        border-radius: var(--radius-block) var(--radius-block) 0 0;
    }
}

/* ========== УТИЛИТЫ: замены gap во flex (Chromium 68) ========== */
.settings-actions > *:not(:last-child), .inline-buttons > *:not(:last-child), .form-inline > *:not(:last-child), .lots-mobile-header > *:not(:last-child) { margin-right: var(--spacing-sm); }
.input-with-btn > *:not(:last-child), .video-controls-group > *:not(:last-child) { margin-right: 4px; }
.toolbar > *:not(:last-child), .streamer-overlay > *:not(:last-child) { margin-right: 6px; }
/* ВАЖНО: для flex-wrap-контейнеров НЕ используем негативные margin у
   родителя (иначе контейнер вылезает за родителя/свой padding).
   Центрированные/переносимые контейнеры — симметричные margin у детей;
   остальные — margin только между детьми (`:not(:last-child)`). */
.tile > * { margin: 0 10px 20px; }
.tile.catalog-view-list > * { margin: 0 0 1px; }
.catalog-header > *:not(:last-child) { margin-right: var(--spacing-md); }
.view-toggle > *:not(:last-child), .checkbox-label > *:not(:last-child), .radio-label > *:not(:last-child), .datetime-picker-wrapper > *:not(:last-child), .datetime-picker-time > *:not(:last-child), .datetime-picker-footer > *:not(:last-child), .lot-sidebar-content > *:not(:last-child), .chat-msg-meta > *:not(:last-child), .chat-widget-input-row > *:not(:last-child) { margin-right: var(--spacing-xs); }
.auction_catalog_item.auction-list-item > *:not(:last-child), .auction_catalog_item.auction-list-item > a > *:not(:last-child), .auc_list_item-meta > *:not(:last-child), .modal-footer > *:not(:last-child) { margin-right: var(--spacing-md); }
.auc_list_item-content > *:not(:last-child), .radio-group > *:not(:last-child), .chat-widget-messages > *:not(:last-child) { margin-bottom: var(--spacing-xs); }
/* половинный margin с каждой стороны даёт между элементами --lot-gap (как было при gap) */
.lot > * { margin: calc(var(--lot-gap) / 2); }
.lot-info > *:not(:last-child) { margin-bottom: var(--spacing-md); }
.lot-price-info-row > * { margin-bottom: var(--spacing-sm); }
.lot-price-info-row > *:not(:last-child) { margin-right: var(--spacing-sm); }
.actions-buttons > *:not(:last-child), .bid-block > *:not(:last-child), .image-viewer-container > *:not(:last-child), .chat-widget > *:not(:last-child) { margin-bottom: var(--spacing-sm); }
.tab-controls-container > *:not(:last-child) { margin-right: var(--spacing-sm); }
.auction-filters > *:not(:last-child) { margin-right: var(--spacing-sm); }
.auction-filters .datetime-picker-wrapper > *:not(:last-child) { margin-right: var(--spacing-xxs); }
.auction-info-content > *:not(:last-child) { margin-right: var(--spacing-lg); }
#auc_video_controls > *:not(:last-child) { margin-right: 4px; }
.notification-toast > *:not(:last-child) { margin-right: 12px; }