/* =================================
   1. ОБЩИЕ СТИЛИ И ПЕРЕМЕННЫЕ
   ================================= */

:root {
    --bg-color: #f0f2f5;
    --surface-color: #ffffff;
    --text-color: #0b0b0b;
    --text-color-secondary: #65676b;
    --border-color: #ced0d4;
    --primary-color: #1877f2;
    --primary-color-hover: #166fe5;
    --danger-color: #fa383e;
    --shadow-dark: rgba(0, 0, 0, 0.15);
    --shadow-light: rgba(255, 255, 255, 0.7);
    --bg-color-depressed: #e6e9ef;
}

body.dark-theme {
    --bg-color: #18191a;
    --surface-color: #242526;
    --text-color: #e4e6eb;
    --text-color-secondary: #b0b3b8;
    --border-color: #3a3b3c;
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --shadow-light: rgba(255, 255, 255, 0.05);
    --bg-color-depressed: #1c1d1f;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* =================================
   2. ШАПКА САЙТА (HEADER)
   ================================= */

.site-header, .focus-mode-header {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.site-header .container, .focus-mode-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    margin-right: 1.5rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-button, .nav-button-icon {
    background-color: var(--bg-color);
    border: 1px solid transparent; /* Убираем видимую рамку */
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px; /* Чуть мягче углы */
    
    /* "Выпуклая" тень, как у вас на сайте */
    box-shadow: 5px 5px 10px var(--shadow-dark), 
                -5px -5px 10px var(--shadow-light);

    /* Плавный переход для всех свойств */
    transition: all 0.15s ease-in-out;
}

.nav-button-icon {
    padding: 0.5rem;
}

.nav-button:hover, .nav-button-icon:hover {
    /* При наведении тень становится чуть мягче, создавая эффект "приподнимания" */
    box-shadow: 7px 7px 14px var(--shadow-dark), 
                -7px -7px 14px var(--shadow-light);
}

.nav-button:active, .nav-button-icon:active {
    color: var(--primary-color); /* Меняем цвет текста при нажатии */
    transform: translateY(1px); /* Легкое смещение вниз */

    /* Тень меняется на "вдавленную" */
    box-shadow: inset 3px 3px 6px var(--shadow-dark), 
                inset -3px -3px 6px var(--shadow-light);
}

.nav-button-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--surface-color);
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1001;
    border-radius: 8px;
    overflow: hidden;
}

.dropdown-content a, .dropdown-content button {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
}

.dropdown-content a:hover, .dropdown-content button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-content.show {
    display: block;
}

.focus-mode-header {
    display: none;
}


/* =================================
   3. ОСНОВНОЙ КОНТЕНТ (MAIN)
   ================================= */

.title-block {
    text-align: center;
    padding: 1rem 0; /* Оставляем вертикальные отступы */
    position: relative;
    cursor: pointer; /* << Добавлено */
    min-height: 40px; /* << Добавлено: Резервируем высоту */
    transition: background-color 0.2s; /* << Добавлено: Плавный переход */
}

.constructor-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.wheel-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    overflow: visible;
}

.wheel-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    overflow: visible;
}

#wheelCanvas {
    width: 100%;
    height: auto;
     visibility: hidden;
}

/* Этот класс будет добавлен через JS, чтобы показать колесо */
#wheelCanvas.loaded {
    visibility: visible;
}

/* 1. РОДИТЕЛЬ: "Логическая" точка и якорь для позиционирования */
.wheel-pointer {
    position: absolute;
    top: 50%;
    /* Ставим якорь ровно на 3 часа, как и ожидает JS */
    right: 0; 
    transform: translateY(-50%);
    
    /* У якоря нет видимых размеров */
    width: 0;
    height: 0;
    
    z-index: 10;
    
    /* JS по-прежнему будет менять цвет фона этого невидимого якоря */
    background-color: var(--danger-color);
    transition: background-color 0.2s ease;
}

/* 2. ПОТОМОК: Видимая стрелка */
.wheel-pointer-visual {
    width: 30px; 
    height: 40px;
    background-color: inherit; /* << Наследует цвет от родителя */
    
    /* Позиционируется относительно якоря */
    position: absolute;
    top: 0;
    left: 0;
    
    /* 
     * Теперь transform позиционирует стрелку ОТНОСИТЕЛЬНО якоря.
     * Значения нужно подобрать в пикселях, а не процентах,
     * так как родитель не имеет размера.
     * translate(-30px, -20px) - сдвигает стрелку влево на всю ее ширину и вверх на половину высоты.
    */
    transform: translate(-20px, -22px) rotate(180deg);
    
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    filter: drop-shadow(-2px 4px 4px rgba(0, 0, 0, 0.25));
}

/* Блик для видимой стрелки (без изменений) */
.wheel-pointer-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%);
    clip-path: inherit;
}

.wheel-actions {
    display: flex;
    gap: 1rem;
}

#shareBtn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    
    /* Новые компактные отступы */
    padding: 8px 12px; /* 8px сверху/снизу, 12px по бокам для баланса */
    
    /* Настройка шрифта: делаем его более современным */
    font-family: 'Roboto', sans-serif; /* Берем основной шрифт сайта */
    font-size: 0.95rem; /* Чуть меньше, чем было */
    font-weight: 500; /* Medium вместо жирного Bold (700), чтобы не кричало */
    letter-spacing: 0.3px; /* Добавляем чуточку воздуха между буквами */
    
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    
    /* Выравниваем иконку и текст внутри кнопки */
    display: flex;
    align-items: center;
    gap: 6px; /* Расстояние между иконкой 🔗 и текстом */
}

/* Эффект при наведении */
#shareBtn:hover {
    background-color: var(--primary-color-hover);
    transform: translateY(-1px);
    box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
}

/* Эффект при клике */
#shareBtn:active {
    transform: translateY(1px);
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2);
}



/* =================================
   4. РЕДАКТОР (ПРАВАЯ КОЛОНКА)
   ================================= */

.editor-section {
    flex: 1;
    /* Убираем старый фон и рамку */
    min-width: 340px;
    background-color: var(--bg-color-depressed, #e6e9ef); /* Добавим fallback */
    border: none;
    border-radius: 12px; /* Чуть больше скругление */
    
    /* Главный эффект "вдавленности" из вашего файла */
    box-shadow: inset 4px 4px 8px var(--shadow-dark, #d1d9e6), 
                inset -4px -4px 8px var(--shadow-light, #ffffff);

    display: flex;
    flex-direction: column;
    height: 600px;
    overflow: hidden; /* Важно, чтобы внутренние элементы не вылезали */
}

.editor-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.tab-button {
    flex: 1;
    padding: 1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-color-secondary);
    border-bottom: 2px solid transparent;
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    flex-grow: 1;
    display: none; 
    flex-direction: column;
    padding: 1rem;
    overflow: hidden;
}
.tab-content.active {
    display: flex;
}

.editor-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.editor-toolbar button {
    background: none;
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    border-radius: 4px;
}

.editor-textarea, .advanced-editor-list, .results-list {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-y: auto;
}

.editor-textarea {
    resize: none;
    white-space: pre;  
    overflow-x: auto;
}

.add-entry-btn {
    margin-top: 1rem;
    width: 100%;
    padding: 0.5rem;
    flex-shrink: 0;
}

/* Расширенный режим */
.advanced-editor-list .advanced-editor-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0px; /* <--- Убрали отступы со всех сторон */
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background-color: var(--surface-color);
}

.drag-handle {
    cursor: grab;
    padding: 0px; /* <--- Убрали отступы */
    font-size: 1.2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* Задали жесткую ширину, чтобы иконка не плющилась */
}

.card-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* МАГИЯ 1: Разрешаем контейнеру сжиматься */
}
.card-image-wrapper {
    position: relative;
}
.card-thumbnail {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
}
.delete-card-image-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--danger-color);
    color: white;
    border: none;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
}
.card-text-input {
    flex-grow: 1;
    width: 100%;
    border: none;
    background: none;
    color: var(--text-color);
    
    /* МАГИЯ 2: Заставляем инпут сжиматься до любого размера */
    min-width: 0; 
    
    /* Делаем так, чтобы длинный текст аккуратно обрезался троеточием, а не распирал поле */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-controls {
    display: flex;
    gap: 0.25rem;
    
    /* МАГИЯ 3: Запрещаем блоку с иконками сжиматься! Он всегда будет своего размера */
    flex-shrink: 0; 
    
    /* Если экран совсем уж крошечный, разрешим иконкам перепрыгнуть на вторую строчку (по желанию) */
    flex-wrap: wrap;
    justify-content: flex-end;
}
.card-control-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.advanced-editor-card.dragging {
    opacity: 0.5;
}
.drag-over {
    background-color: var(--primary-color-hover) !important;
    opacity: 0.3;
}


/* =================================
   5. МОДАЛЬНЫЕ ОКНА
   ================================= */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex;
    animation: modalFadeIn 0.2s ease-out forwards;
}

/* --- СЦЕНАРИИ АНИМАЦИЙ --- */

/* Фон плавно появляется из прозрачности */
@keyframes modalFadeIn {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.5); }
}

/* Окно выплывает снизу вверх с легким эффектом "пружинки" (scale) */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.modal-content {
    background-color: var(--bg-color); 
    border-radius: 12px; 
    box-shadow: 5px 5px 15px var(--shadow-dark), -5px -5px 15px var(--shadow-light);
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    /* ЖЕСТКИЙ ЛИМИТ ВЫСОТЫ (90% от экрана телефона) */
    max-height: 90vh; 
    border: 1px solid rgba(0,0,0,0.05); 
    animation: modalSlideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-content.large {
    max-width: 800px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-tabs {
    display: flex;
    gap: 1rem;
}

.modal-tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.close-btn {
    font-size: 1.5rem;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-secondary);
}

/* Стили для окна победителя */
.winner-popup .winner-popup-header {
    padding: 1rem 1.5rem;
    text-align: center;
    border: none;
    color: white; /* Текст всегда белый */
    /* ВОЗВРАЩАЕМ СКРУГЛЕНИЯ */
    border-top-left-radius: 12px;  
    border-top-right-radius: 12px;
    
}

.winner-popup .winner-popup-body {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    padding: 10px 1.5rem; /* Верх/низ по 10px, по бокам оставляем 1.5rem для "воздуха" */
}

/* Убираем стандартные отступы браузера у текста победителя */
#winnerText {
    margin-top: 0px;
    margin-bottom: 0px;
    word-break: break-word; /* Полезно, чтобы очень длинные слова не ломали окно */
}

/* --- НОВОЕ ПРАВИЛО: Убираем лишние отступы у текста заголовка --- */
.winner-popup .winner-popup-header h2 {
    margin-top: 0px;
    margin-bottom: 0px;
}


/* =================================
   6. ПОЛНОЭКРАННЫЙ РЕЖИМ (SPINTHEWHEEL ВАРИАНТ)
   ================================= */

/* Скрываем всё лишнее */
body.focus-mode .site-header,
body.focus-mode .editor-section,
body.focus-mode .wheel-actions,
body.focus-mode .text-content-block, /* << ДОБАВЛЯЕМ БЛОК С ВОПРОСАМИ */
body.focus-mode .main-footer, /* << ДОБАВЛЯЕМ ФУТЕР */
body.focus-mode .simple-banner /* << НА ВСЯКИЙ СЛУЧАЙ ПРЯЧЕМ И БАННЕР */ {
    display: none;
}

/* Показываем верхнюю панель и ставим ее выше всех */
body.focus-mode .focus-mode-header {
    display: block;
    position: fixed; /* Важно, чтобы была над всем */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

/* Главный контейнер становится полноэкранной flex-колонкой */
body.focus-mode main.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    display: flex;
    flex-direction: column; /* Ставим элементы в столбик */
    justify-content: flex-start; /* Начинаем сверху */
    align-items: center;
    padding: 60px 1rem 1rem 1rem; /* Отступы: 60px сверху, по 1rem по бокам и снизу */
    box-sizing: border-box;
}

/* Заголовок не должен сжиматься */
body.focus-mode .title-block {
    flex-shrink: 0; 
    padding-bottom: 1rem; /* Отступ между заголовком и колесом */
}

/* Сетка с колесом должна занять все оставшееся место */
body.focus-mode .constructor-layout {
    flex-grow: 1; /* <<<< Ключевое свойство */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

/* Секция с колесом тоже должна растягиваться */
body.focus-mode .wheel-section {
    height: 100%;
    width: 100%;
    max-height: none;
}

/* Контейнер колеса адаптируется, чтобы влезть в родителя */
body.focus-mode .wheel-container {
   width: auto; /* << ИЗМЕНЕНО */
   height: 100%;
   max-width: 100%; /* << ИЗМЕНЕНО */
   aspect-ratio: 1 / 1; /* << ДОБАВЛЕНО: Делает контейнер всегда квадратным */
   position: relative; 
}

/* Canvas должен занимать все место в контейнере, сохраняя пропорции */
body.focus-mode #wheelCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* <<<< Ключевое свойство */
}


/* =================================
   7. СТИЛИ ДЛЯ НАСТРОЕК
   ================================= */
hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

button, .modal-close-btn, .modal-save-btn {
    cursor: pointer;
    font-family: inherit;
}

.primary, .modal-save-btn {
    background: linear-gradient(145deg, var(--primary-color), #005bb5); /* Градиент как на вашем сайте */
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px; /* Мягче углы */
    font-weight: 500;
    text-shadow: 0px -1px 1px rgba(0,0,0,0.2); /* Тень для текста */
    
    /* "Выпуклая" тень */
    box-shadow: 5px 5px 10px var(--shadow-dark), 
                -5px -5px 10px var(--shadow-light);

    transition: all 0.15s ease-in-out;
}

.primary:hover, .modal-save-btn:hover {
    background-color: var(--primary-color-hover);
}

.modal-close-btn {
     background-color: var(--bg-color);
     border: 1px solid transparent;
     color: var(--text-color);
     padding: 0.6rem 1.2rem;
     border-radius: 8px;
     
     /* "Выпуклая" тень, но без акцентного цвета */
     box-shadow: 5px 5px 10px var(--shadow-dark), 
                 -5px -5px 10px var(--shadow-light);
                 
     transition: all 0.15s ease-in-out;
}

.modal-save-btn:active, .modal-close-btn:active {
    transform: translateY(1px);
    /* Тень меняется на "вдавленную" */
    box-shadow: inset 3px 3px 6px var(--shadow-dark), 
                inset -3px -3px 6px var(--shadow-light);
}

.primary:hover, .modal-save-btn:hover {
     /* Убираем старый :hover, чтобы он не конфликтовал с новым */
     background-color: transparent;
     /* Делаем градиент чуть ярче при наведении */
     background: linear-gradient(145deg, #1a8cff, #006ce5);
}

.setting-group {
    margin-bottom: 1.5rem;
}

.setting-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.setting-group select, .setting-group input[type="text"], .setting-group input[type="range"] {
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    box-sizing: border-box;
}
.setting-group input[type="range"] {
    padding: 0;
}

.palette-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.image-upload-control, .sound-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.image-preview {
    width: 60px;
    height: 60px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-color);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.checkbox-group label, .checkbox-group.single-line label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}
.checkbox-group.single-line {
    margin-top: 0.5rem;
}

/* Стили для Color Picker (Pickr) */
.pickr {
    position: relative;
}
.pickr .pcr-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}
.pickr .pcr-button::before {
    border-radius: 50%;
}
.pcr-app {
    z-index: 1002; /* Выше чем фон модалки */
}
.color-picker-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    cursor: pointer;
}


/* =================================
   8. АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ================================= */

@media (max-width: 799px) {
    .container {
        ppadding-left: 20px;
        padding-right: 20px;
    }
    .text-content-block {
        padding-left: 20px;
        padding-right: 20px;
    }
    .constructor-layout {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .wheel-section, .editor-section {
        width: 100%;
    }
.editor-section {
        width: 100%;
        /* Новые "умные" правила для высоты */
        height: 50vh;           /* По умолчанию - 50% высоты экрана */
        min-height: 300px;      /* Но не меньше 300px */
        max-height: 600px;      /* И не больше 600px */
        margin: 20px 0;
    }
    .logo {
        font-size: 1.2rem;
        margin-right: 0.5rem;
    }
    .nav-button {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }
    .nav-button-icon {
        padding: 0.4rem;
    }
    .site-nav {
        gap: 0.25rem;
    }
       /* 1. Уменьшаем размер главного заголовка */
    #wheelTitle {
        font-size: 1.5rem; /* Делаем шрифт компактнее */
    }

    /* 2. Уменьшаем отступы в модальных окнах */
    .modal-body {
        padding: 1rem; /* Уменьшаем внутренние отступы */
    }
    .modal-header, .modal-footer {
        padding: 0.75rem 1rem; /* Уменьшаем отступы в шапке и подвале модалки */
    }
}

/* --- Стили для переключения вкладок в модальном окне --- */
.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }

/* --- Исправляем окно редактирования заголовка --- */
#titleModal .modal-body label {
    display: block; /* Заставляет метки занимать всю ширину */
    margin-bottom: 0.5rem; /* Небольшой отступ снизу */
}

#titleModal .modal-body input[type="text"],
#titleModal .modal-body textarea {
    display: block; /* Заставляет поля ввода занимать всю ширину */
    width: 100%;
    box-sizing: border-box; /* Важно для корректного расчета ширины */
    margin-bottom: 1.5rem; /* Отступ между полями */
}

#titleModal .modal-body textarea {
    min-height: 80px; /* Делаем поле описания чуть выше */
}

#titleBlock {
    padding-top: 0;
    padding-bottom: 0;
}

#wheelTitle {
    margin-bottom: 0;
}

#wheelDescription {
    margin-top: 0;
}

/* Кнопка "Очистить" в модальном окне заголовка */
#titleModal .modal-footer #titleModalClearBtn {
    margin-right: auto; /* Прижимает кнопку к левому краю */
    background-color: var(--danger-color);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 500;
}
/* --- Убираем лишние крестики --- */
#titleModal .modal-header {
    justify-content: center; /* Центрируем заголовок в окне #titleModal */
}

#titleModal .close-btn,
#customizeModal .close-btn {
    display: none; /* Скрываем крестики в обоих окнах */
}

/* Подсветка для блока заголовка при наведении */
.title-block:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

#addEntryBtn {
    display: none;
}

.dropdown-item-icon {
    display: flex;
    align-items: center;
    gap: 12px; /* Отступ между иконкой и текстом */
}
.dropdown-item-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
/* --- НАЧАЛО НОВОГО БЛОКА СТИЛЕЙ ДЛЯ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ --- */

/* 1. Стилизация вкладок в модальном окне */
.modal-tab-button {
    background: var(--bg-color);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
    
    /* "Выпуклый" вид по умолчанию */
    box-shadow: 3px 3px 6px var(--shadow-dark), 
                -3px -3px 6px var(--shadow-light);
    transition: all 0.15s ease-in-out;
}

.modal-tab-button:hover {
    transform: translateY(-1px);
}

.modal-tab-button.active {
    color: var(--primary-color);
    transform: translateY(1px);
    /* "Вдавленный" вид для активной вкладки */
    box-shadow: inset 2px 2px 5px var(--shadow-dark), 
                inset -2px -2px 5px var(--shadow-light);
}

/* 2. Стилизация выпадающих списков (select) */
.setting-group select {
    background-color: var(--bg-color-depressed, #e6e9ef);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    color: var(--text-color);
    width: 100%;
    
    /* "Вдавленный" вид */
    box-shadow: inset 2px 2px 5px var(--shadow-dark), 
                inset -2px -2px 5px var(--shadow-light);
    
    /* Убираем стандартную стрелку (может не работать во всех браузерах) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Добавляем свою "кастомную" стрелку */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

@media (max-height: 700px) {
    .editor-section {
        width: 100%;
        /* Новые "умные" правила для высоты */
        height: 50vh;           /* По умолчанию - 50% высоты экрана */
        min-height: 300px;      /* Но не меньше 300px */
        max-height: 600px;      /* И не больше 600px */
        margin: 20px 0;
    }
}


/* --- СТИЛИ ДЛЯ АДАПТИВНОЙ ШАПКИ  --- */

/* По умолчанию (на десктопе) прячем мобильную панель */
.mobile-only {
    display: none; /* <-- Добавили !important, чтобы перебить встроенные стили */
}


/* Стили для выпадающего меню бургера */
#burger-menu {
    position: relative;
}

/* --- ИСПРАВЛЕНИЕ: Делаем кнопку-бургер квадратной --- */
#burgerBtn {
    width: 42px; /* Задаем одинаковую ширину и высоту */
    height: 42px;
    padding: 0; /* Убираем внутренние отступы, чтобы символ был по центру */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Увеличиваем сам значок "☰" */
}

#mobileDropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    /* Уменьшили минимальную ширину с 220px до 180px */
    min-width: 180px; 
    /* Добавили white-space, чтобы текст не переносился, а задавал ширину сам */
    white-space: nowrap; 
    background-color: var(--bg-color);
    box-shadow: 10px 10px 15px var(--shadow-dark), -10px -10px 15px var(--shadow-light);
    border-radius: 12px;
    padding: 0.5rem;
    z-index: 1002;
    display: none;
}

#mobileDropdown.show {
    display: block;
}

/* --- ИСПРАВЛЕНИЕ: Новый стиль для пунктов меню --- */
.dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500; /* Делаем текст чуть жирнее */
    display: block; /* Важно для тегов <a> */
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: var(--bg-color-depressed);
    color: var(--primary-color);
}
.dropdown-separator {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.5rem 0;
}


/* Правила для мобильных экранов */
@media (max-width: 799px) {
    .desktop-nav {
        display: none !important;
    }
    .mobile-only {
        display: flex !important;
        align-items: center;
        gap: 5px;
    }
}


/* Стили для "опасных" кнопок (Удалить, Очистить) */
.danger {
    background: linear-gradient(145deg, #e53935, #b71c1c); /* Красный градиент */
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 500;
    text-shadow: 0px -1px 1px rgba(0,0,0,0.2);
    
    /* "Выпуклая" тень */
    box-shadow: 5px 5px 10px var(--shadow-dark), 
                -5px -5px 10px var(--shadow-light);

    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.danger:hover {
     background: linear-gradient(145deg, #f44336, #c62828);
}

.danger:active {
    transform: translateY(1px);
    /* "Вдавленная" тень */
    box-shadow: inset 3px 3px 6px var(--shadow-dark), 
                inset -3px -3px 6px var(--shadow-light);
}

/* --- СТИЛИ ДЛЯ ПОЛЕЙ ФОРМЫ --- */
.setting-group textarea,
.setting-group input[type="text"],
.setting-group input[type="email"] {
    background-color: var(--bg-color-depressed, #e6e9ef);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box; /* Важно для правильного расчета ширины */
    
    /* "Вдавленный" вид */
    box-shadow: inset 2px 2px 5px var(--shadow-dark), 
                inset -2px -2px 5px var(--shadow-light);
    
    font-family: inherit; /* Наследуем шрифт от body */
    font-size: 1rem;
    resize: vertical; /* Разрешаем менять высоту textarea */
}
.honeypot-field {
    position: absolute;
    left: -5000px; /* Сдвигаем далеко за пределы экрана */
    top: -5000px;
    opacity: 0;
    pointer-events: none; /* Делаем некликабельным */
}

.faq-content {
    display: none; /* Ответ по умолчанию скрыт */
}
.faq-item.open .faq-content {
    display: block; /* Показываем ответ, когда у родителя есть класс .open */
}

/* --- НАЧАЛО БЛОКА: СТИЛИ ДЛЯ FAQ --- */

.faq-section {
    margin-top: 3rem;
}

.faq-item {
    background-color: var(--bg-color);
    border-radius: 12px;
    padding: 1.5rem; /* <<<< ВОТ ГЛАВНЫЙ ВИНОВНИК */
    box-shadow: 5px 5px 10px var(--shadow-dark), 
                -5px -5px 10px var(--shadow-light);
}

.faq-item h3 {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0; /* Убираем лишний отступ */
    text-align: left;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
}

.faq-item h3::after {
    content: '▼';
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    display: inline-block;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-item.open {
    background-color: var(--bg-color-depressed);
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

.faq-item.open h3 {
    color: var(--primary-color);
    padding-bottom: 1rem;
}

.faq-item.open h3::after {
    transform: rotate(180deg);
}

.faq-content { /* Переименовываем из div[itemprop="acceptedAnswer"] для простоты */
    display: none;
    padding: 0 1.5rem 1.25rem 1.5rem;
    border-top: 1px solid var(--shadow-dark);
    padding-top: 1rem;
}

.faq-item.open .faq-content {
    display: block;
}

/* --- НАЧАЛО БЛОКА: СТИЛИ ДЛЯ ФУТЕРА --- */

.main-footer {
    background-color: var(--bg-color);
    color: var(--text-color-secondary);
    text-align: center;
    margin-top: 2rem; /* Добавим отступ от FAQ */
    padding: 1rem 0;
    border-top: 1px solid var(--border-color); /* Легкий разделитель */
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
    padding: 1rem 0;
}

.footer-contact, .footer-social, .footer-copyright, .footer-about {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Сбрасываем лишние отступы у текстов и ссылок в футере */
.footer-email, 
.footer-copyright p, 
.footer-link,
.footer-contact p, /* ДОБАВЛЕНО: убирает отступы у "Связь с нами:" */
.footer-social p   /* ДОБАВЛЕНО: убирает отступы у "Поделиться:" */
{
    font-size: 0.8rem;
    color: var(--text-color-secondary);
    margin: 0; /* Это заменяет margin-bottom: 0px и margin-top: 0px */
}


.footer-email:hover, .footer-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Чуть больше расстояние */
}

.social-icons a svg {
    width: 24px;
    height: 24px;
    fill: var(--text-color-secondary);
    transition: transform 0.2s ease, fill 0.2s ease;
}

.social-icons a:hover svg {
    fill: var(--primary-color);
    transform: scale(1.1);
}

@media (min-width: 768px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* --- КОНЕЦ БЛОКА: СТИЛИ ДЛЯ ФУТЕРА --- */

.text-content-block {
    /* 1. Ограничиваем максимальную ширину для читаемости */
    max-width: 800px; 
    
    /* 2. Центрируем блок с помощью автоматических отступов по бокам */
    margin-left: auto;
    margin-right: auto;
    
    /* Добавляем немного "воздуха" и разделитель сверху */
    margin-top: 3rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
}
/* --- НАЧАЛО НОВЫХ СТИЛЕЙ ДЛЯ СТАТИЧНОГО FAQ --- */

/* Стили для всей секции */
.faq-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Расстояние между карточками */
    margin-top: 2rem;
}

/* 1. Стилизуем "карточку" вопроса */
.faq-item {
    background-color: var(--bg-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 5px 5px 10px var(--shadow-dark), 
                -5px -5px 10px var(--shadow-light);
}

/* Стилизуем заголовок вопроса */
.faq-item h3 {
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1rem; /* Отступ между вопросом и ответом */
    color: var(--primary-color);
}

/* 2. Делаем ответы видимыми (безопасный способ) */
.faq-section .faq-content {
    display: block; /* <<<< ГЛАВНОЕ ПРАВИЛО */
    padding: 0;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

/* Убираем лишний div внутри ответа */
.faq-section .faq-content div {
    line-height: 1.6;
    color: var(--text-color-secondary);
}

/* 3. Убираем стрелочку (если она была) */
.faq-item h3::after {
    display: none;
}

.text-content-block h2 {
    text-align: center; /* <<<< ГЛАВНАЯ КОМАНДА */
}

.text-content-block h3 {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* --- ФИКС КНОПКИ ИЗОБРАЖЕНИЙ В ТУЛБАРЕ --- */
#imageDropdownContainer {
    display: flex;
    align-items: center;
    position: relative; /* ВАЖНО: держит меню привязанным к кнопке */
}

#imageDropdownContainer .dropdown-content {
    top: 100%;
    /* Меняем выравнивание, чтобы оно висело ровно под кнопкой или сдвигалось красиво */
    left: 0; 
    right: auto;
    margin-top: 5px;
    border: 1px solid var(--border-color); /* Аккуратная тонкая рамка */
    border-radius: 8px;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Мягкая тень */
    overflow: hidden;
    z-index: 1005;
}


/* --- СТИЛИ ДЛЯ НОВОГО УМНОГО РЕДАКТОРА --- */
div#simpleEditor {
    outline: none;
    overflow-y: auto;
    white-space: pre-wrap; /* Сохраняем переносы строк */
}
div#simpleEditor:empty:before {
    content: attr(data-placeholder);
    color: var(--text-color-secondary);
    pointer-events: none;
    display: block;
}
.simple-editor-thumbnail {
    height: 24px;
    width: 24px;
    object-fit: cover;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 8px;
    user-select: none; /* Защита от багов выделения */
}
div#simpleEditor div {
    /* Убрали flex, чтобы переносы строк работали нормально */
    min-height: 28px; 
    line-height: 28px; /* Выравнивает картинку и текст по центру */
}
/* --- СТИЛИ ДЛЯ DRAG & DROP (SortableJS) --- */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--bg-color-depressed) !important;
    border: 2px dashed var(--primary-color);
}
.sortable-drag {
    cursor: grabbing !important; /* Курсор "сжатой руки" */
}
.drag-handle {
    cursor: grab;
    padding: 0px; /* Сделал зону захвата чуть шире, чтобы легче было попасть */
    font-size: 1.2rem; /* Чуть увеличим иконку для удобства */
    
    /* БРОНЕБОЙНАЯ ЗАЩИТА: Запрещаем выделять этот символ мышкой */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-handle:active {
    cursor: grabbing;
}

/* --- TOAST УВЕДОМЛЕНИЕ (СКОПИРОВАНО) --- */
#toastNotification {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 2000;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}

#toastNotification.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* Слегка всплывает вверх */
}
/* --- СТИЛИ ДЛЯ ВКЛАДКИ ПРЕСЕТОВ (Компактные) --- */
.presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* Было 140px, стало 110px (поместится больше) */
    gap: 0.5rem; /* Уменьшили дырки между карточками */
    padding: 0.5rem 0;
    overflow-y: auto; 
}

.preset-card {
    background-color: var(--bg-color);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.8rem 0.5rem; /* Сделали карточку ниже и тоньше */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}

.preset-card:hover {
    transform: translateY(-2px);
    color: var(--primary-color);
}

.preset-card:active {
    transform: translateY(1px);
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

.preset-icon {
    font-size: 1.5rem; /* Уменьшили иконку с 2rem */
}

.preset-name {
    font-size: 0.85rem; /* Немного уменьшили текст */
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
}

/* --- СТИЛИ ДЛЯ КОМПАКТНЫХ МОДАЛЬНЫХ ОКОН (Сохранение) --- */

/* Делаем само окно более узким */
.modal-content.compact-modal {
    max-width: 400px; /* Уменьшили ширину с 500px до 400px */
}

/* Центрируем заголовок (когда нет крестика) и убираем отступы */
.modal-header.center-header {
    justify-content: center;
    padding: 1.5rem 0 0.5rem 0; /* Оставляем только верхний отступ и чуть-чуть снизу */
}

/* Прижимаем сам текст заголовка, чтобы он не создавал лишней пустоты */
.modal-header.center-header h2 {
    margin: 0;
}

/* Стилизуем текст инструкции, чтобы он не выглядел громоздко */
.modal-instruction {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    text-align: center; /* Центрируем текст для красоты */
}

/* Убираем лишние отступы внутри этого конкретного окна */
#saveFileModal .modal-body {
    padding-bottom: 0.5rem; /* Прижимаем контент ближе к кнопкам */
}

/* Делаем поле сообщения в Обратной связи компактнее */
#feedbackMessage {
    min-height: 80px; /* Минимальная высота */
    height: 100px;    /* Начальная высота (пользователь сможет растянуть) */
}

/* --- ГЛОБАЛЬНАЯ "СУШКА" МОДАЛЬНЫХ ОКОН (Компактность) --- */

/* 1. Убираем лишний воздух у заголовков h2 внутри ЛЮБОЙ модалки */
.modal-header h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;       /* Занимает всю ширину... */
    text-align: center; /* ...чтобы отцентрироваться */
}

/* 2. Уменьшаем внутренние отступы тела модалки (верх/низ) */
.modal-body {
    padding-top: 10px;
    padding-bottom: 10px;
    /* Оставляем 1.5rem по бокам, чтобы текст не прилипал к рамке */
    padding-left: 1.5rem; 
    padding-right: 1.5rem;
    overflow-y: auto; /* Скролл остается */
}

/* 3. Сужаем расстояние между полями ввода (Setting groups) */
.setting-group {
    margin-bottom: 10px; /* Было 1.5rem (24px) */
}

/* Дополнительная магия: Уменьшаем отступ у самих подписей к полям */
.setting-group label {
    margin-bottom: 3px; /* Было 0.5rem (8px) */
    font-size: 0.95rem; /* Чуть уменьшаем шрифт подписей */
}

/* 4. Центрируем саму шапку, если там нет крестика (как мы делали для окна Сохранения) */
.modal-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: center; /* Принудительно центрируем содержимое шапки */
    align-items: center;
}

/* --- ЖЕСТКИЙ ФИКС ВЫПАДАЮЩЕГО МЕНЮ ИЗОБРАЖЕНИЙ (🖼️) --- */

/* 1. Родительский контейнер: держит меню привязанным к себе */
#imageDropdownContainer {
    position: relative !important;
    display: inline-block;
}

/* 2. Само меню: отрываем от левого края и прибиваем к ПРАВОМУ */
#imageDropdownContainer .dropdown-content {
    top: 100% !important;
    left: auto !important;   /* Отменяем левую привязку */
    right: 0 !important;     /* Прибиваем правый край меню к правому краю кнопки */
    margin-top: 8px !important;
    
    /* Делаем его аккуратным и компактным */
    min-width: 220px !important;
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    overflow: hidden !important;
    z-index: 1005 !important;
}

/* 3. УБИРАЕМ СЕРЫЕ ПОЛОСЫ (чистим кнопки внутри меню) */
#imageDropdownContainer .dropdown-item {
    background: none !important;      /* Никаких серых фонов по умолчанию */
    border: none !important;          /* Никаких рамок */
    border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* Очень легкий разделитель между кнопками */
    margin: 0 !important;             /* Убираем внешние отступы (они и делают полосы) */
    border-radius: 0 !important;      /* Убираем скругления внутри меню */
    padding: 12px 16px !important;
    text-align: left !important;
    width: 100% !important;
    color: var(--text-color) !important;
    transition: background-color 0.1s !important;
}

/* Убираем полоску у последней кнопки, чтобы было красиво */
#imageDropdownContainer .dropdown-item:last-child {
    border-bottom: none !important;
}

/* Эффект при наведении на кнопку (делаем его однородным) */
#imageDropdownContainer .dropdown-item:hover {
    background-color: var(--bg-color-depressed) !important;
}

/* 4. Чистим разделитель (если вы используете <div class="dropdown-separator">) */
#imageDropdownContainer .dropdown-separator {
    height: 1px !important;
    background-color: var(--border-color) !important;
    margin: 0 !important; /* Убираем отступы, чтобы не было толстых полос */
}