/* ========================================
   THEME VARIABLES
   ======================================== */
:root[data-theme="dark"] {
    /* Backgrounds & surfaces */
    --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --panel-bg: rgba(255, 255, 255, 0.1);
    --surface-bg: rgba(255, 255, 255, 0.1);
    --surface-hover: rgba(255, 255, 255, 0.15);
    --surface-active: rgba(255, 255, 255, 0.2);
    --lot-bg: rgba(255, 255, 255, 0.1);
    --lot-hover: rgba(255, 255, 255, 0.15);
    --add-row-bg: rgba(46, 204, 113, 0.1);
    --add-row-border: rgba(46, 204, 113, 0.5);
    --status-bg: rgba(255, 255, 255, 0.05);
    --switch-bg: rgba(255, 255, 255, 0.1);
    --modal-bg: linear-gradient(135deg, #2a2a4e 0%, #1e2a4e 100%);
    --overlay-bg: rgba(0, 0, 0, 0.7);

    /* Text */
    --text-primary: #fff;
    --switch-btn-color: rgba(255, 255, 255, 0.7);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.2);
    --modal-border: rgba(255, 255, 255, 0.1);

    /* Inputs */
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-color: #1a1a2e;

    /* Accents */
    --accent: #f39c12;
    --accent-2: #e67e22;
    --accent-danger: #e74c3c;
    --accent-danger-dark: #c0392b;
    --accent-success: #2ecc71;
    --accent-success-dark: #27ae60;
    --accent-info: #3498db;
    --accent-warning: #f1c40f;
    --accent-glow: rgba(243, 156, 18, 0.4);
    --accent-glow-soft: rgba(243, 156, 18, 0.3);
    --highlight-bg: rgba(243, 156, 18, 0.2);
    --result-bg: rgba(243, 156, 18, 0.2);

    /* Buttons */
    --btn-secondary-bg: rgba(255, 255, 255, 0.2);
    --btn-secondary-hover: rgba(255, 255, 255, 0.3);

    /* Scrollbars */
    --scrollbar-track: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);

    /* Shadows */
    --modal-shadow: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
    /* [FIXED LIGHT THEME - ИСПРАВЛЕН КОНТРАСТ] */
    --bg-gradient: linear-gradient(135deg, #eef2f7 0%, #d9e2ec 100%); /* Сделан глубже, чтобы белые панели выделялись */
    --panel-bg: rgba(250, 250, 250, 0.9); /* Увеличена плотность белого */
    --surface-bg: rgba(0, 0, 0, 0.06); /* Сделан темнее для читаемости слоев */
    --surface-hover: rgba(0, 0, 0, 0.10);
    --surface-active: rgba(0, 0, 0, 0.15);
    --lot-bg: rgba(255, 255, 255, 0.6); /* Светлая подложка лота для контраста */
    --lot-hover: rgba(255, 255, 255, 0.85);
    --add-row-bg: rgba(39, 174, 96, 0.08);
    --add-row-border: rgba(39, 174, 96, 0.4);
    --status-bg: rgba(0, 0, 0, 0.05);
    --switch-bg: rgba(0, 0, 0, 0.08);
    --modal-bg: linear-gradient(135deg, #ffffff 0%, #f4f6fa 100%);
    --overlay-bg: rgba(15, 23, 42, 0.4); /* Мягкое благородное затемнение */

    /* Text */
    --text-primary: #121824; /* Более глубокий контрастный цвет текста */
    --switch-btn-color: rgba(18, 24, 36, 0.7);

    /* Borders */
    --border-subtle: rgba(0, 0, 0, 0.16); /* Границы стали четче */
    --modal-border: rgba(0, 0, 0, 0.15);

    /* Inputs */
    --input-bg: #ffffff;
    --input-color: #121824;

    /* Accents - Оптимизированы под светлый фон */
    --accent: #d35400; /* Более темный оранжевый, не режет глаза */
    --accent-2: #e67e22;
    --accent-danger: #c0392b;
    --accent-danger-dark: #962d22;
    --accent-success: #1e8449;
    --accent-success-dark: #145a32;
    --accent-info: #2980b9;
    --accent-warning: #b9770e;
    --accent-glow: rgba(211, 84, 0, 0.2);
    --accent-glow-soft: rgba(211, 84, 0, 0.1);
    --highlight-bg: rgba(211, 84, 0, 0.12);
    --result-bg: rgba(211, 84, 0, 0.12);

    /* Buttons */
    --btn-secondary-bg: rgba(0, 0, 0, 0.06);
    --btn-secondary-hover: rgba(0, 0, 0, 0.12);

    /* Scrollbars */
    --scrollbar-track: rgba(0, 0, 0, 0.04);
    --scrollbar-thumb: rgba(0, 0, 0, 0.25);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.4);

    /* Shadows */
    --modal-shadow: rgba(12, 17, 29, 0.15);
}

:root[data-theme="emerald"] {
    /* [NEW THEME: CYBERPUNK EMERALD] */
    --bg-gradient: linear-gradient(135deg, #0a1f1d 0%, #071413 100%); /* Глубокий хвойно-черный */
    --panel-bg: rgba(16, 44, 41, 0.4); /* Полупрозрачный изумрудный пластик */
    --surface-bg: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(46, 204, 113, 0.15); /* Мягкое неоновое подсвечивание при ховере */
    --surface-active: rgba(46, 204, 113, 0.25);
    --lot-bg: rgba(16, 44, 41, 0.3);
    --lot-hover: rgba(46, 204, 113, 0.1);
    --add-row-bg: rgba(0, 235, 136, 0.06);
    --add-row-border: rgba(0, 235, 136, 0.4);
    --status-bg: rgba(255, 255, 255, 0.03);
    --switch-bg: rgba(46, 204, 113, 0.15);
    --modal-bg: linear-gradient(135deg, #0f332f 0%, #0a1f1d 100%);
    --overlay-bg: rgba(4, 11, 10, 0.8);

    /* Text */
    --text-primary: #e6f4f1; /* Слегка мятно-белый текст для снижения усталости глаз */
    --switch-btn-color: rgba(230, 244, 241, 0.7);

    /* Borders */
    --border-subtle: rgba(46, 204, 113, 0.25); /* Тонкие мятные границы */
    --modal-border: rgba(46, 204, 113, 0.3);

    /* Inputs */
    --input-bg: #102c29;
    --input-color: #00f088; /* Неоново-зеленый текст при вводе */

    /* Accents - Смещены в сторону Киберпанк-Мяты и Изумруда */
    --accent: #00ff88; /* Главный светящийся мятный акцент */
    --accent-2: #2ecc71;
    --accent-danger: #ff4757;
    --accent-danger-dark: #ff6b81;
    --accent-success: #00ff88;
    --accent-success-dark: #2ecc71;
    --accent-info: #00b4d8;
    --accent-warning: #ffd166;
    --accent-glow: rgba(0, 255, 136, 0.35);
    --accent-glow-soft: rgba(0, 255, 136, 0.2);
    --highlight-bg: rgba(0, 255, 136, 0.15);
    --result-bg: rgba(0, 255, 136, 0.15);

    /* Buttons */
    --btn-secondary-bg: rgba(46, 204, 113, 0.15);
    --btn-secondary-hover: rgba(46, 204, 113, 0.25);

    /* Scrollbars */
    --scrollbar-track: rgba(10, 31, 29, 0.5);
    --scrollbar-thumb: rgba(46, 204, 113, 0.3);
    --scrollbar-thumb-hover: rgba(0, 255, 136, 0.5);

    /* Shadows */
    --modal-shadow: rgba(0, 0, 0, 0.6);
}

:root[data-theme="nordic"] {
    /* [NEW THEME: NORDIC FROST - МАТОВЫЙ АРКТИЧЕСКИЙ] */
    --bg-gradient: linear-gradient(135deg, #2e3440 0%, #242933 100%); /* Глубокий матовый серо-синий */
    --panel-bg: rgba(143, 149, 160, 0.2); /* Приглушенные холодные панели */
    --surface-bg: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(136, 192, 208, 0.12); /* Мягкий ледяной ховер */
    --surface-active: rgba(136, 192, 208, 0.2);
    --lot-bg: rgba(43, 49, 60, 0.4);
    --lot-hover: rgba(136, 192, 208, 0.08);
    --add-row-bg: rgba(163, 190, 140, 0.08);
    --add-row-border: rgba(163, 190, 140, 0.4);
    --status-bg: rgba(255, 255, 255, 0.03);
    --switch-bg: rgba(136, 192, 208, 0.15);
    --modal-bg: linear-gradient(135deg, #3b4252 0%, #2e3440 100%);
    --overlay-bg: rgba(15, 20, 30, 0.7);

    /* Text */
    --text-primary: #d8dee9; /* Мягкий пастельно-белый, не бьет по глазам */
    --switch-btn-color: rgba(216, 222, 233, 0.7);

    /* Borders */
    --border-subtle: rgba(136, 192, 208, 0.2); /* Сдержанные ледяные границы */
    --modal-border: rgba(136, 192, 208, 0.25);

    /* Inputs */
    --input-bg: #3b4252;
    --input-color: #88c0d0; /* Приглушенный ледяной синий при вводе */

    /* Accents - Пастельные и спокойные тона */
    --accent: #88c0d0; /* Спокойный ледяной синий */
    --accent-2: #81a1c1; /* Дымчато-синий */
    --accent-danger: #bf616a; /* Приглушенный красный */
    --accent-danger-dark: #ab545c;
    --accent-success: #a3be8c; /* Пастельный оливково-зеленый */
    --accent-success-dark: #8fbcbb;
    --accent-info: #81a1c1;
    --accent-warning: #ebcb8b;
    --accent-glow: rgba(136, 192, 208, 0.2);
    --accent-glow-soft: rgba(136, 192, 208, 0.1);
    --highlight-bg: rgba(136, 192, 208, 0.12);
    --result-bg: rgba(136, 192, 208, 0.12);

    /* Buttons */
    --btn-secondary-bg: rgba(136, 192, 208, 0.1);
    --btn-secondary-hover: rgba(136, 192, 208, 0.2);

    /* Scrollbars */
    --scrollbar-track: rgba(36, 41, 51, 0.5);
    --scrollbar-thumb: rgba(136, 192, 208, 0.2);
    --scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);

    /* Shadows */
    --modal-shadow: rgba(15, 20, 30, 0.5);
}

:root[data-theme="monochrome"] {
    /* [NEW THEME: MONOCHROME TECH - СТИЛЬНЫЙ ГРАФИТ] */
    --bg-gradient: linear-gradient(135deg, #16161a 0%, #0b0b0c 100%); /* Глубокий угольно-черный */
    --panel-bg: rgba(34, 34, 40, 0.65); /* Плотный темный графит для подложек */
    --surface-bg: rgba(255, 255, 255, 0.05); /* Легкий контрастный слой */
    --surface-hover: rgba(255, 255, 255, 0.12); /* Четкий отклик при наведении */
    --surface-active: rgba(255, 255, 255, 0.18);
    --lot-bg: rgba(28, 28, 32, 0.8); /* Выделение карточек лотов */
    --lot-hover: rgba(44, 44, 50, 0.9);
    --add-row-bg: rgba(255, 255, 255, 0.04); /* Без зелени, чисто структурно */
    --add-row-border: rgba(255, 255, 255, 0.4);
    --status-bg: rgba(255, 255, 255, 0.06);
    --switch-bg: rgba(255, 255, 255, 0.1);
    --modal-bg: linear-gradient(135deg, #222227 0%, #16161a 100%);
    --overlay-bg: rgba(0, 0, 0, 0.85); /* Глубокое премиальное затемнение */

    /* Text */
    --text-primary: #f2f2f7; /* Чистый, слегка мягкий белый текст */
    --switch-btn-color: rgba(255, 255, 255, 0.7);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.15); /* Аккуратные, но заметные границы */
    --modal-border: rgba(255, 255, 255, 0.25);

    /* Inputs */
    --input-bg: #1c1c21;
    --input-color: #ffffff;

    /* Accents - Весь фокус перенесен на белый и серебряный матовый */
    --accent: #ffffff; /* Главный акцент — контрастный белый */
    --accent-2: #cccccc; /* Серебряный металлик */
    --accent-danger: #ff6b6b; /* Приглушенный пастельно-красный для алертов */
    --accent-danger-dark: #e55353;
    --accent-success: #57cc99; /* Приглушенный мятно-зеленый */
    --accent-success-dark: #3db885;
    --accent-info: #8ab4d8;
    --accent-warning: #d4b16a;
    --accent-glow: rgba(255, 255, 255, 0.25); /* Аккуратное белое свечение */
    --accent-glow-soft: rgba(255, 255, 255, 0.12);
    --highlight-bg: rgba(255, 255, 255, 0.1);
    --result-bg: rgba(255, 255, 255, 0.1);

    /* Buttons */
    --btn-secondary-bg: rgba(255, 255, 255, 0.08);
    --btn-secondary-hover: rgba(255, 255, 255, 0.18);

    /* Scrollbars */
    --scrollbar-track: rgba(22, 22, 26, 0.5);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);

    /* Shadows */
    --modal-shadow: rgba(0, 0, 0, 0.75);
}

/* ========================================
 *   THEME: DEEP SPACE NEBULA
 *   ======================================== */
:root[data-theme="nebula"] {
    /* Backgrounds & surfaces */
    --bg-gradient: linear-gradient(135deg, #0b001a 0%, #12002b 50%, #1a003c 100%);
    --panel-bg: rgba(147, 51, 234, 0.07);
    --surface-bg: rgba(147, 51, 234, 0.1);
    --surface-hover: rgba(147, 51, 234, 0.18);
    --surface-active: rgba(147, 51, 234, 0.25);
    --lot-bg: rgba(255, 255, 255, 0.04);
    --lot-hover: rgba(147, 51, 234, 0.12);
    --add-row-bg: rgba(6, 182, 212, 0.1);
    --add-row-border: rgba(6, 182, 212, 0.4);
    --status-bg: rgba(147, 51, 234, 0.05);
    --switch-bg: rgba(255, 255, 255, 0.08);
    --modal-bg: linear-gradient(135deg, #1c0035 0%, #0f0022 100%);
    --overlay-bg: rgba(5, 1, 15, 0.85);

    /* Text */
    --text-primary: #f8fafc;
    --switch-btn-color: rgba(248, 250, 252, 0.7);

    /* Borders */
    --border-subtle: rgba(147, 51, 234, 0.25);
    --modal-border: rgba(236, 72, 153, 0.3);

    /* Inputs */
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-color: #0b001a;

    /* Accents (Neon Pink & Cyan) */
    --accent: #d63283;
    --accent-2: #db2777;
    --accent-danger: #ef4444;
    --accent-danger-dark: #b91c1c;
    --accent-success: #10b981;
    --accent-success-dark: #047857;
    --accent-info: #22d3ee;
    --accent-warning: #fbbf24;
    --accent-glow: rgba(236, 72, 153, 0.45);
    --accent-glow-soft: rgba(147, 51, 234, 0.4);
    --highlight-bg: rgba(236, 72, 153, 0.15);
    --result-bg: rgba(6, 182, 212, 0.15);

    /* Buttons */
    --btn-secondary-bg: rgba(147, 51, 234, 0.2);
    --btn-secondary-hover: rgba(147, 51, 234, 0.35);

    /* Scrollbars */
    --scrollbar-track: rgba(11, 0, 26, 0.5);
    --scrollbar-thumb: rgba(236, 72, 153, 0.3);
    --scrollbar-thumb-hover: rgba(236, 72, 153, 0.6);

    /* Shadows */
    --modal-shadow: rgba(0, 0, 0, 0.7);
}

:root[data-theme="eucalyptus"] {
    /* Backgrounds & surfaces */
    --bg-gradient: linear-gradient(135deg, #2b3a36 0%, #1e2624 100%);
    --panel-bg: rgba(255, 255, 255, 0.05);
    --surface-bg: rgba(255, 255, 255, 0.06);
    --surface-hover: rgba(255, 255, 255, 0.1);
    --surface-active: rgba(255, 255, 255, 0.14);
    --lot-bg: rgba(255, 255, 255, 0.04);
    --lot-hover: rgba(255, 255, 255, 0.08);
    --add-row-bg: rgba(163, 190, 140, 0.08);
    --add-row-border: rgba(163, 190, 140, 0.4);
    --status-bg: rgba(255, 255, 255, 0.03);
    --switch-bg: rgba(255, 255, 255, 0.06);
    --modal-bg: linear-gradient(135deg, #32433e 0%, #222d2a 100%);
    --overlay-bg: rgba(18, 24, 22, 0.75);

    /* Text */
    --text-primary: #e2e8f0;
    --switch-btn-color: rgba(226, 232, 240, 0.65);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.12);
    --modal-border: rgba(255, 255, 255, 0.08);

    /* Inputs */
    --input-bg: #f1f5f9;
    --input-color: #1e2624;

    /* Accents (Soft Sage & Dusty Amber) */
    --accent: #a3be8c;
    --accent-2: #8fa87a;
    --accent-danger: #bf616a;
    --accent-danger-dark: #a14b53;
    --accent-success: #a3be8c;
    --accent-success-dark: #8fa87a;
    --accent-info: #7fa8b8;
    --accent-warning: #d9b382;
    --accent-glow: rgba(163, 190, 140, 0.25);
    --accent-glow-soft: rgba(208, 135, 112, 0.2);
    --highlight-bg: rgba(208, 135, 112, 0.15); /* Мягкий янтарный для выделения */
    --result-bg: rgba(163, 190, 140, 0.15);

    /* Buttons */
    --btn-secondary-bg: rgba(255, 255, 255, 0.08);
    --btn-secondary-hover: rgba(255, 255, 255, 0.15);

    /* Scrollbars */
    --scrollbar-track: rgba(0, 0, 0, 0.15);
    --scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);

    /* Shadows */
    --modal-shadow: rgba(0, 0, 0, 0.4);
}

/* Автоматическая инверсия текста для акцентных элементов в Monochrome теме */
:root[data-theme="monochrome"] .btn-primary,
:root[data-theme="monochrome"] .switch-btn.active,
:root[data-theme="monochrome"] .strategy-btn.merge
{
    color: #16161a !important; /* Угольно-черный текст на белом фоне */
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans', 'Roboto', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    background: var(--bg-gradient);
    min-height: 100vh;
    color: var(--text-primary);
}

/* ========================================
   LAYOUT STRUCTURE
   ======================================== */
.container {
    display: flex;
    padding: 20px;
    gap: 20px;
    max-width: 1800px;
    margin: 0 auto;
    min-height: 100vh;  /* the columns fill the window, not just their content */
}

.main-panel {
    flex: 1;
    min-width: 500px;
    /* Column layout so the visualization area can absorb the leftover height. */
    display: flex;
    flex-direction: column;
}

/* Everything else in the center column keeps its natural height — the title
   (`main.title`), the result/stats block and the controls panel stay fully
   visible; only the visualization area is elastic. */
.main-panel > * {
    flex-shrink: 0;
}

/* Elastic, but never below the canvas floor: without an explicit min-height:0 the
   box cannot shrink under its content, so the card never clips the canvas. */
.main-panel > .canvas-container {
    flex: 1 1 auto;
}

.sidebar {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.left-panel {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
}

/* ========================================
   TYPOGRAPHY & HEADINGS
   ======================================== */
h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.5em;
    background: linear-gradient(90deg, var(--accent), var(--accent-danger));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.panel h3 {
    margin-bottom: 15px;
    color: var(--accent);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 10px;
}

/* ========================================
   SETTINGS HEADER ROW WITH TOGGLE BUTTON
   ======================================== */

.settings-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.settings-header-row h3 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.settings-toggle-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 1.4em;
    cursor: pointer;
    padding: 5px 10px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.settings-toggle-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ========================================
   COLLAPSIBLE SUB-BLOCK
   ======================================== */

.settings-main-block {
    margin-bottom: 15px;
}

.settings-sub-block {
    padding-top: 15px;
    border-top: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
}

.settings-sub-block.hidden {
    display: none;
}

.settings-sub-block h4 {
    color: var(--accent);
    font-size: 0.95em;
    margin-bottom: 12px;
    opacity: 0.8;
}

/* ========================================
   PANELS & CONTAINERS
   ======================================== */
.panel {
    background: var(--panel-bg);
    border-radius: 15px;
    padding: 20px;
}

/* Lots panel - flex container to keep add row at bottom */
.left-panel .panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);  /* Constrain by viewport minus margins/padding */
    overflow: hidden;  /* Don't scroll the panel itself */
}

/* Scrollable wrapper for lots list only */
#lots-list-wrapper {
    flex: 1;  /* Grow to fill available space */
    overflow-y: auto;  /* Only this scrolls */
    min-height: 0;  /* Required for nested scrolling in flex containers */
    padding-bottom: 8px;  /* Space between last lot and add row */
}

#lots-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Add row stays at bottom, always visible */
.left-panel .panel > .lot-item.add-row {
    flex-shrink: 0;  /* Don't shrink */
    margin-top: auto;  /* Push to bottom of flex container */
    background: var(--add-row-bg);
    border: 1px dashed var(--add-row-border);
}

.canvas-container {
    background: var(--panel-bg);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    /* Column flex so the canvas fills the whole (stretched) box. */
    display: flex;
    flex-direction: column;
}

#roulette-canvas {
    width: 100%;
    /* Fills the visualization area; the floor keeps the strip field (band height
       + frame + its captions) fully visible in a short window — the page scrolls
       instead of clipping the visualization. */
    flex: 1 1 auto;
    min-height: 400px;
    display: block;
    background: transparent;
    border-radius: 8px;
}

/* ========================================
   INFO CONTAINER (Result + Stats)
   ======================================== */
#info-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    height: 120px; /* Fixed height to prevent layout shift */
}

#result-display, #stats-display {
    flex: 1;
    background: var(--result-bg);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#result-text {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--accent);
}

/* ========================================
   STATS DISPLAY
   ======================================== */
.stat-item {
    padding: 15px;
}

#stats-display {
    display: flex;
    gap: 40px;
}

.stat-value {
    font-size: 2em;
    font-weight: bold;
    color: var(--accent);
}

.stat-label {
    font-size: 0.85em;
    opacity: 0.7;
}

/* ========================================
   FORMS & INPUTS
   ======================================== */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input, select {
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    background: var(--input-bg);
    color: var(--input-color);
}

input[type="color"] {
    height: 45px;
    cursor: pointer;
}

/* ========================================
   BUTTONS
   ======================================== */
button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: white;
    font-weight: bold;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--accent-glow);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--btn-secondary-hover);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   LOTS HEADER ROW (Title + Sort Switch)
   ======================================== */
.lots-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.lots-header-row h3 {
    margin-bottom: 0;
}

/* The header controls (active-only filter, sort switcher, ext column) must share
   ONE height. The switcher is the tallest, so the tool buttons stretch to the row
   instead of hard-coding a height that only approximates it. */
.lots-header-tools {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* ========================================
   EXT COLUMN (mode-provided extra info)
   ======================================== */
/* One compact box shared by the lots-header tool buttons (ext column, active-only).
   No height here: the buttons STRETCH to the row (.lots-header-tools), so they always
   equal the sort switcher — a content-driven height would make them differ. */
.header-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 0.85em;
    line-height: 1;
}

.lot-ext {
    flex: 0 0 auto;
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
    opacity: 0.9;
    white-space: nowrap;
}

/* ========================================
   LOTS LIST
   ======================================== */
.lot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--lot-bg);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.lot-item:hover {
    background: var(--lot-hover);
}

.lot-item.inactive {
    opacity: 0.5;
}

/* Lot accents: one visual per kind, orthogonal to `.inactive`
   (an accented row can also be `.inactive`, e.g. an eliminated lot). */
.lot-item.accent-accent {
    border: 2px solid var(--accent);
    background: var(--highlight-bg);
}

.lot-item.accent-good {
    border: 2px solid var(--accent-success);
    background: color-mix(in srgb, var(--accent-success) 18%, transparent);
}

.lot-item.accent-bad {
    border: 2px solid var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 18%, transparent);
}

.lot-item.accent-info {
    border: 2px solid var(--accent-info);
    background: color-mix(in srgb, var(--accent-info) 18%, transparent);
}

.lot-item.accent-warning {
    border: 2px solid var(--accent-warning);
    background: color-mix(in srgb, var(--accent-warning) 18%, transparent);
}

/* Add row styling */
.lot-item.add-row {
    background: var(--add-row-bg);
    border: 1px dashed var(--add-row-border);
}

/* Add lot input fields */
.add-lot-input {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: var(--surface-bg);
    color: var(--text-primary);
}

.add-lot-amount {
    width: 110px;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: var(--surface-bg);
    color: var(--text-primary);
}

.add-lot-input:focus,
.add-lot-amount:focus {
    outline: none;
    background: var(--surface-active);
}

.lot-color-indicator {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Editable amount input */
.lot-amount-input {
    width: 80px;
    padding: 6px;
    border: none;
    border-radius: 4px;
    background: var(--surface-bg);
    color: var(--text-primary);
    text-align: right;
}

.lot-amount-input:focus {
    outline: none;
    background: var(--surface-active);
}

/* ========================================
   LOT ACTIONS (Edit/Delete Buttons)
   ======================================== */
.btn-delete {
    flex: 0 0 auto;
    padding: 3px 6px;
    font-size: 0.8em;
    background: var(--accent-danger);
    color: white;
}

/* Add button for new lot row */
.btn-add {
    background: var(--accent-success);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
}

.btn-add:hover:not(:disabled) {
    background: var(--accent-success-dark);
}

/* ========================================
   SETTINGS GROUPS & SLIDERS
   ======================================== */
.settings-group {
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.settings-group label {
    display: block;
    margin-bottom: 5px;
    opacity: 0.8;
}

.settings-group select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Select paired with an inline help icon on the same row (Game Mode,
   Easing Function). The select keeps the row width minus the icon. */
.select-with-help {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.select-with-help select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* "?" help icon: question mark drawn inside a bordered circle. */
.settings-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1;
    cursor: help;
    opacity: 0.7;
    flex-shrink: 0;
    position: relative;
    user-select: none;
    transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.settings-help:hover {
    opacity: 1;
    border-color: var(--accent);
    color: var(--accent);
}

/* Popup tooltip for the "?" help icons. Content comes from the
   `data-tooltip` attribute set by App (updateModeHelpTooltip /
   updateEasingHelpTooltip). Empty attributes hide the bubble so nothing
   flashes during the brief window before JS populates them. */
.settings-help[data-tooltip]:not([data-tooltip=""])::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: var(--modal-bg);
    color: var(--text-primary);
    border: 1px solid var(--modal-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.35;
    width: max-content;
    max-width: 220px;
    box-shadow: 0 4px 12px var(--modal-shadow);
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1000;
    text-align: left;
}

.settings-help:hover[data-tooltip]:not([data-tooltip=""])::after {
    opacity: 1;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap; /* Allow wrapping */
}

.slider-container input[type="range"] {
    flex: 1 1 auto;
    min-width: 100px; /* Prevents shrinking too much */
    height: 6px;
    padding: 0;
}

.slider-container input[type="number"].duration-number-input {
    width: 70px;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--input-color);
    font-size: 0.9em;
    text-align: center;
    flex-shrink: 0;
}

.slider-container input[type="number"].duration-number-input:focus {
    outline: none;
    background: var(--input-bg);
}

.slider-container .duration-value-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0; /* Number input + unit keep their natural size */
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.hidden {
    display: none !important;
}

.full-width {
    width: 100%;
}

/* Remove increment/decrement spinner buttons from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ========================================
   SCROLLBAR CUSTOMIZATION
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 900px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: auto;
    }

    .main-panel {
        min-width: auto;
    }
}

/* ========================================
   IMPORT MODAL DIALOG
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-content {
    background: var(--modal-bg);
    border-radius: 15px;
    padding: 25px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px var(--modal-shadow);
    border: 1px solid var(--modal-border);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.8em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

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

.modal-content h2 {
    margin-bottom: 20px;
    color: var(--accent);
    font-size: 1.6em;
    text-align: center;
}

/* ========================================
   TAB NAVIGATION
   ======================================== */

.tab-navigation {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 10px;
}

.tab-button {
    flex: 1;
    padding: 10px 15px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95em;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
    position: relative;
}

.tab-button:hover {
    opacity: 0.8;
}

.tab-button.active {
    opacity: 1;
    font-weight: bold;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ========================================
   TAB HEADER ROW (Instruction + Separator Switch)
   ======================================== */

.tab-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.tab-instruction {
    font-size: 0.9em;
    opacity: 0.8;
    margin: 0;
    flex: 1;
}

/* ========================================
   GENERIC SWITCH COMPONENT (Reusable Toggle/Switch UI)
   ======================================== */

.switch {
    display: inline-flex;
    background: var(--switch-bg);
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
}

.switch-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-size: 0.85em;
    cursor: pointer;
    background: transparent;
    color: var(--switch-btn-color);
    transition: all 0.2s ease;
    /* Inline spans inside a switch button (translated label + direction
       arrow) need flexbox alignment, and the arrow must keep its width
       even when empty so the button does not resize on sort toggles. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.switch-btn:hover {
    color: var(--text-primary);
}

.switch-btn.active {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 8px var(--accent-glow-soft);
}

.switch-btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.switch-btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Direction arrow span inside a sort switch button. Written only by
   LotListView.updateSortButtons(); the sibling .label-primary span holds
   the translated label and is never touched by the view. */
.switch-btn .sort-direction {
    display: inline-block;
    min-width: 0.8em;
    text-align: center;
}

/* ========================================
   CSV TAB CONTENT
   ======================================== */

#import-textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    background: var(--surface-bg);
    color: var(--text-primary);
    resize: vertical;
    margin-bottom: 15px;
}

#import-textarea:focus {
    outline: none;
    background: var(--surface-hover);
}

.import-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.import-actions button {
    flex: 1;
}

/* ========================================
   IMPORT STATUS LINE
   ======================================== */

.import-status {
    font-size: 0.85em;
    padding: 10px 15px;
    background: var(--status-bg);
    border-radius: 6px;
    margin-bottom: 15px;
}

.import-status #valid-count {
    color: var(--accent-success);
    font-weight: bold;
}

.import-status #error-count {
    color: var(--accent-danger);
    font-weight: bold;
}

/* ========================================
   PREVIEW CONTAINER
   ======================================== */

.preview-container {
    margin-top: 15px;
}

.preview-container h4 {
    color: var(--accent);
    font-size: 0.95em;
    margin-bottom: 10px;
}

#preview-lots-list {
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
}

/* ========================================
   LINK TAB INPUT CONTAINER
   ======================================== */
.link-input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.link-input-container input {
    flex: 1; /* Input takes remaining space */
}

.link-input-container button {
    flex-shrink: 0; /* Button doesn't shrink */
}

/* ========================================
   PLACEHOLDER TEXT FOR LINK TAB
   ======================================== */

.placeholder-text {
    text-align: center;
    opacity: 0.6;
    padding: 30px;
    font-style: italic;
}

/* ========================================
   CONFLICT RESOLUTION DIALOG STYLES
   ======================================== */

.conflict-message {
    text-align: center;
    margin-bottom: 25px;
}

.conflict-message p {
    font-size: 1em;
    line-height: 1.6;
    opacity: 0.9;
}

.strategy-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.strategy-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.strategy-btn .strategy-desc {
    font-size: 0.85em;
    opacity: 0.7;
    margin-left: 10px;
}

.strategy-btn.replace {
    background: linear-gradient(90deg, var(--accent-danger), var(--accent-danger-dark));
    color: white;
}

.strategy-btn.replace:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

.strategy-btn.merge {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: white;
}

.strategy-btn.merge:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--accent-glow);
}

.strategy-btn.cancel {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
}

.strategy-btn.cancel:hover {
    background: var(--btn-secondary-hover);
}

/* ========================================
   ERROR DIALOG STYLES
   ======================================== */

.error-message {
    text-align: center;
    padding: 20px;
}

.error-message p {
    font-size: 1em;
    line-height: 1.6;
    color: var(--accent-danger);
    margin-bottom: 0;
}

.error-actions {
    display: flex;
    justify-content: center;
    padding-top: 15px;
}

.error-actions button {
    min-width: 120px;
}