@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    /* Основной фон сайта (сделали чуть светлее для контраста) */
    --bg-color: #181818;
    --header-bg: rgba(24, 24, 24, 0.85);
    --card-bg: #222222;
    --card-hover: #2a2a2a;
    --text-color: #e0e0e0;
    --text-muted: #808080;
    --border-color: #333333;
    --border-dashed: #444444;
    --btn-bg: #222222;
    --btn-hover: #2a2a2a;
    --btn-text: #e0e0e0;
    
    /* Неоновый кибер-голубой акцент */
    --accent-color: #00e5ff;
    --accent-text: #000000;
    --accent-hover: #00b3cc;
    --accent-shadow: #008899;
    
    --dropzone-hover: rgba(0, 229, 255, 0.08);
    --danger-hover: #ff4d4d;
    --danger-shadow: #cc0000;
    
    /* Цвета тиров (ТЕМНАЯ ТЕМА) */
    --tier-border: #000000;    
    --tier-bg: #121212;        
    --tier-action-bg: #121212; 
}

body.light-theme {
    /* Светлая тема в стиле Twitch */
    --bg-color: #f1f5f9;
    --header-bg: rgba(241, 245, 249, 0.85);
    --card-bg: #ffffff;
    --card-hover: #f8fafc;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --border-color: #cbd5e1;
    --border-dashed: #94a3b8;
    --btn-bg: #ffffff;
    --btn-hover: #f1f5f9;
    --btn-text: #0f172a;
    
    --accent-color: #7c3aed;
    --accent-text: #ffffff;
    --accent-hover: #6d28d9;
    --accent-shadow: #5b21b6;
    
    --dropzone-hover: rgba(124, 58, 237, 0.05);
    --danger-hover: #ef4444;
    --danger-shadow: #b91c1c;
    
    /* Цвета тиров (СВЕТЛАЯ ТЕМА) */
    --tier-border: #ffffff;    
    --tier-bg: #e2e8f0;        
    --tier-action-bg: #f1f5f9; 
}

/* ================= БАЗОВЫЕ НАСТРОЙКИ ================= */
* { box-sizing: border-box; user-select: none; }

/* Железобетонно фиксируем ширину экрана */
html {
    overflow-y: scroll; 
}

/* 🎨 КАСТОМИЗИРУЕМ ГЛОБАЛЬНЫЙ СКРОЛЛБАР */
::-webkit-scrollbar { 
    width: 8px; /* Тонкий и аккуратный */
}
::-webkit-scrollbar-track { 
    background: transparent; /* Делаем дорожку ПОЛНОСТЬЮ ПРОЗРАЧНОЙ! Теперь пустой скролл невидим */
}
::-webkit-scrollbar-thumb { 
    background: var(--border-dashed); /* Цвет самого ползунка */
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: var(--accent-color); /* Неоновое свечение при наведении */
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color); color: var(--text-color);
    margin: 0; padding: 0; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

input, button, select, textarea {
    font-family: 'Inter', system-ui, sans-serif !important;
}

body.modal-open { 
    overflow: hidden; 
    padding-right: 8px; /* Равно ширине нашего нового скроллбара */
}
body.titles-hidden .item-title-overlay { display: none !important; }

/* ================= ЛЕЙАУТ И ШАПКА ================= */
header {
    width: 100%; 
    max-width: none;
    min-height: 60px; /* Увеличили высоту (было 50px) */
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    padding: 8px 26px; /* Увеличили отступы (было 6px 24px) */
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1500; 
    background-color: var(--header-bg); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: none;
    transition: background-color 0.2s ease;
}

.page { 
    width: 100%; max-width: none !important; 
    padding: 0 30px 40px 30px; display: none; 
    flex-direction: column; align-items: stretch; 
}
.page.active { display: flex; }

#builder-page { max-width: 1400px !important; margin: 0 auto; }
.section-title { width: 100%; font-size: 22px; font-weight: 700; margin-bottom: 20px; text-align: left; }

.header-left, .header-right { 
    display: flex; align-items: center; gap: 10px; 
    height: 44px; /* <--- Жестко фиксируем высоту верхнего ряда */
} 

/* Минималистичные кнопки в шапке (Язык и Тема) */
header .theme-icon-btn {
    width: 36px !important; height: 36px !important; 
    font-size: 15px !important; 
    border-radius: 50% !important; /* Делаем круглыми */
    background: transparent !important; /* Убираем фон */
    border: none !important; /* Убираем рамки */
    box-shadow: none !important; /* Убираем 3D-тени */
    transition: background 0.15s ease, transform 0.1s ease !important;
}
header .theme-icon-btn:hover { 
    background: rgba(255, 255, 255, 0.06) !important; /* Мягкая подсветка как у поиска */
    transform: scale(1.05) !important; /* Легкое увеличение при наведении */
}
body.light-theme header .theme-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}
header .theme-icon-btn:active { 
    transform: scale(0.95) !important; /* Мягко "вдавливается" при клике */
}

/* ================= ГЛОБАЛЬНЫЙ ПОИСК В ШАПКЕ ================= */
.header-center {
    flex: 1; display: flex; justify-content: center; 
    align-items: center; 
    max-width: 580px; margin: 0 20px;
    height: 44px; /* <--- Фиксируем высоту, чтобы поиск перестал прыгать */
}

.global-search-container {
    display: flex; align-items: center; width: 100%;
    background: rgba(255, 255, 255, 0.04); 
    border: 1px solid transparent;
    border-radius: 30px; 
    padding: 4px 16px; /* Вернули комфортную высоту (было 2px 14px) */
    transition: background 0.2s ease, border-color 0.2s ease;
}

.global-search-container:focus-within {
    background: transparent;
    border-color: var(--border-color);
    box-shadow: none;
}
body.light-theme .global-search-container { background: rgba(0, 0, 0, 0.04); }
body.light-theme .global-search-container:focus-within { background: transparent; border-color: var(--border-color); box-shadow: none; }

#global-search-input {
    flex: 1; background: transparent; border: none; color: var(--text-color);
    font-size: 15px; /* Увеличили текст ввода (было 13px) */
    outline: none; 
    padding: 6px 0; /* Сделали зону клика по тексту больше */
    min-width: 0; 
}
#global-search-input::placeholder { color: var(--text-muted); font-weight: 400; }

.search-icon-btn {
    background: transparent; border: none; color: var(--text-muted);
    font-size: 16px; /* Увеличили лупу (было 14px) */
    margin-left: 4px; cursor: pointer; padding: 5px; transition: color 0.15s ease;
}
.search-icon-btn:hover { color: var(--text-color); }

.search-actions {
    display: flex; gap: 4px; margin-left: 6px; border-left: none; padding-left: 0;
}

.search-action-btn {
    background: transparent; border: none; color: var(--text-muted); 
    border-radius: 50%; 
    width: 28px; height: 28px; /* Увеличили кнопку шестеренки (было 24x24) */
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; 
    font-size: 15px; /* Увеличили иконку шестеренки (было 13px) */
    transition: color 0.15s ease, background 0.15s ease;
}
.search-action-btn:hover { color: var(--text-color); background: rgba(255,255,255,0.05); }
body.light-theme .search-action-btn:hover { background: rgba(0,0,0,0.05); }

/* ================= СЕТКА ШАБЛОНОВ (ПРЕМИАЛЬНАЯ ГАЛЕРЕЯ) ================= */
.templates-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Сделали карточки чуть шире */
    gap: 24px; /* Увеличили "воздух" между карточками */
    width: 100%; 
    margin-bottom: 40px; 
    padding-top: 10px; /* ИСПРАВЛЕНИЕ БАГА: Дали место сверху, чтобы рамка не обрезалась */
    align-content: start;
}
.templates-grid::-webkit-scrollbar { width: 8px; }
.templates-grid::-webkit-scrollbar-track { background: transparent; }
.templates-grid::-webkit-scrollbar-thumb { background: var(--border-dashed); border-radius: 4px; }
.templates-grid::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

.template-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color); 
    border-radius: 14px; 
    overflow: hidden; 
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 0; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
    
    /* 1. Заменили прыгучий cubic-bezier на плавный ease-out и синхронизировали время (0.4s) */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, border-color 0.4s ease;
}

/* Эффект парения при наведении */
.template-card:hover {
    transform: translateY(-4px); /* 2. Снизили подъем с -6px до -4px. Это более деликатно */
    border-color: rgba(255, 255, 255, 0.25); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    z-index: 10;
}
body.light-theme .template-card:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }

/* Изображение сверху */
.template-card-img {
    position: relative; 
    width: 100%;
    aspect-ratio: 16 / 9; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    filter: saturate(0.7) brightness(0.8);
    
    /* 3. Включили аппаратное ускорение видеокартой, чтобы убрать дрожание пикселей */
    will-change: transform, filter; 
    /* 4. Синхронизировали анимацию зума с движением самой карточки */
    transition: filter 0.4s ease, transform 0.4s ease-out;
}

/* При наведении картинка возвращает цвета и плавно увеличивается ВНУТРИ рамки */
.template-card:hover .template-card-img {
    filter: saturate(1) brightness(1);
    transform: scale(1.04); /* 5. Уменьшили масштаб с 1.06 до 1.04 для строгой эстетики */
}

/* Блок с текстом СНИЗУ (больше никаких градиентов поверх картинок) */
.template-card-content {
    position: relative;
    background: transparent;
    padding: 14px 16px;
    display: flex; flex-direction: column; z-index: 2;
    border-top: 1px solid var(--border-color); /* Тонкая линия отсекает картинку от текста */
}

.template-card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0; 
    color: var(--text-color); /* Текст теперь цвета интерфейса, а не белый */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: left; /* Текст слева выглядит более по-журнальному */
    text-shadow: none; /* Убрали тени за ненадобностью */
}

/* Стеклянный бейджик (Glassmorphism) */
.template-item-count {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 12px; font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px; /* Форма капсулы */
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Карточка "Создать шаблон" --- */
.template-card.create-new-card {
    border: 2px dashed var(--border-dashed);
    background: transparent;
    box-shadow: none;
    aspect-ratio: auto;
    height: 100%;
    min-height: 180px; 
}
.template-card.create-new-card:hover {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
    transform: translateY(-4px);
}
body.light-theme .template-card.create-new-card:hover { background: rgba(0, 0, 0, 0.02); }

.create-new-content {
    width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.create-new-content .plus-icon { font-size: 32px; font-weight: 300; color: var(--text-muted); margin-bottom: 6px; transition: color 0.2s; }
.create-new-content .create-text { font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color 0.2s; }
.template-card.create-new-card:hover .plus-icon, .template-card.create-new-card:hover .create-text { color: var(--accent-color); }

/* ================= ССЫЛКИ ================= */
.btn-link {
    background: transparent; border: none; color: var(--text-muted); font-size: 14px;
    font-weight: 600; cursor: pointer; padding: 4px 8px; transition: color 0.2s ease; box-shadow: none;
}
.btn-link:hover { color: var(--accent-color); transform: translateX(3px); }

/* ================= КНОПКИ И ЭЛЕМЕНТЫ УПРАВЛЕНИЯ ================= */
.btn {
    background: var(--btn-bg); color: var(--btn-text); border: 2px solid var(--border-color);
    padding: 10px 18px; border-radius: 8px; font-weight: 500; cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px;
    box-shadow: 0 4px 0 var(--border-color); transform: translateY(0);
}
.btn:hover { background: var(--btn-hover); transform: translateY(1px); box-shadow: 0 3px 0 var(--border-color); }
.btn:active { transform: translateY(4px) !important; box-shadow: 0 0 0 transparent !important; transition: all 0.05s !important; }

.btn-primary { background: var(--accent-color); color: var(--accent-text); border-color: var(--accent-shadow); box-shadow: 0 4px 0 var(--accent-shadow); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 3px 0 var(--accent-shadow); }
.btn-danger { color: #fff; background: var(--danger-hover); border-color: var(--danger-shadow); box-shadow: 0 4px 0 var(--danger-shadow); }
.btn-danger:hover { background: #ff3333; box-shadow: 0 3px 0 var(--danger-shadow); }
body.light-theme .btn-danger:hover { background: #dc2626; }

.builder-header { width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }

.title-input {
    flex-grow: 1; width: auto; background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-color);
    font-size: 28px; font-weight: 500; padding: 10px 0; outline: none; transition: border-color 0.2s, text-shadow 0.2s;
}
.title-input:focus { border-bottom-color: var(--accent-color); text-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }
body.light-theme .title-input:focus { text-shadow: none; }
.title-input::placeholder { color: var(--text-muted); font-weight: 600; }

/* Слегка уменьшим отступ, так как у кнопок исчезли рамки */
.icon-controls { display: flex; align-items: center; gap: 4px; } 

/* Минималистичные кнопки конструктора */
.icon-btn, .theme-icon-btn {
    background: transparent; border: none; 
    border-radius: 50%; /* Строгий круглый дизайн */
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; color: var(--text-color);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; 
    padding: 0; outline: none; box-shadow: none; /* Убили все 3D-тени и рамки */
}

/* Эффекты наведения (мягкое свечение) */
.icon-btn:hover, .theme-icon-btn:hover { 
    background: rgba(255, 255, 255, 0.06); 
    transform: scale(1.05); 
}
body.light-theme .icon-btn:hover, body.light-theme .theme-icon-btn:hover { 
    background: rgba(0, 0, 0, 0.06); 
}

.icon-btn:active, .theme-icon-btn:active { 
    transform: scale(0.95) !important; 
}

/* Цветные подсветки для специфичных кнопок (Удалить, Сохранить) */
.icon-btn.primary-hover:hover { 
    color: var(--accent-color); 
    background: rgba(0, 229, 255, 0.1); 
}
.icon-btn.danger-hover:hover { 
    color: #ff4d4d; 
    background: rgba(255, 77, 77, 0.1); 
}
body.light-theme .icon-btn.primary-hover:hover { 
    background: rgba(124, 58, 237, 0.1); 
}

/* Выпадающие меню (Игровой UI) */
.hover-dropdown { position: relative; display: inline-block; }
.hover-dropdown::after { content: ''; position: absolute; top: 100%; left: -10px; right: -10px; height: 25px; }
.dropdown-menu {
    position: absolute; top: calc(100% + 15px); right: 0; width: 240px;
    background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease-out; z-index: 200; overflow: hidden;
}
.hover-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.icon-controls:hover .hover-dropdown:not(:hover) .dropdown-menu { transition: none; opacity: 0; visibility: hidden; transform: translateY(-10px); }

.menu-item {
    background: transparent; border: none; text-align: left; padding: 14px 16px; width: 100%; display: block;
    color: var(--text-color); cursor: pointer; font-size: 14px; font-weight: 600; outline: none; transition: background 0.1s, padding-left 0.2s;
}
.menu-item:not(:last-child) { border-bottom: 2px solid var(--border-color); }
.menu-item:hover { background: var(--card-hover); color: var(--accent-color); padding-left: 20px; }


/* ================= ТИР-ЛИСТЫ И КОНТЕЙНЕРЫ (Монолитный стиль) ================= */
#capture-area, #view-capture-area { width: 100%; max-width: 100%; background-color: var(--bg-color); padding: 15px; border-radius: 12px; transition: background-color 0.2s ease; }

.tier-container { 
    display: flex; flex-direction: column; gap: 0; 
    border: 1px solid var(--tier-border); 
    background-color: var(--tier-border); 
    border-radius: 8px; overflow: hidden; 
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tier-row {
    display: flex; min-height: 80px; height: auto;
    border-bottom: 1px solid var(--tier-border); 
    position: relative;
    transition: border-color 0.2s ease;
}
.tier-row:last-child { border-bottom: none; }

.tier-label-wrapper {
    position: relative; width: 100px; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; overflow: hidden; 
    border-right: 1px solid var(--tier-border);
    transition: border-color 0.2s ease;
}
.tier-label {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: #111; text-align: center; padding: 10px; word-break: break-word; outline: none; cursor: text;
}
.view-only-label { cursor: default !important; }

.color-picker-btn {
    position: absolute; top: 5px; right: 5px; opacity: 0; transition: opacity 0.2s; cursor: pointer; background: rgba(0,0,0,0.6); border-radius: 6px;
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.tier-label-wrapper:hover .color-picker-btn { opacity: 1; }
.color-input { position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; }

.tier-actions {
    width: 38px; display: flex; flex-direction: column; 
    background: var(--tier-action-bg); 
    border-left: 1px solid var(--tier-border); 
    transition: background 0.2s ease, border-color 0.2s ease; 
    min-height: 80px;
}
.tier-action-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 0;
    color: var(--text-muted); cursor: pointer; transition: background 0.1s, color 0.1s; font-size: 15px; min-height: 26px;
}
.tier-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-color); }
body.light-theme .tier-action-btn:hover { background: rgba(124, 58, 237, 0.08); }
.tier-drag-handle { cursor: grab; }
.tier-drag-handle:active { cursor: grabbing; }

.drag-icon-svg { stroke: currentColor; opacity: 0.6; transition: opacity 0.2s; }
.tier-action-btn:hover .drag-icon-svg { opacity: 1; color: var(--accent-color); }

.tier-dropzone {
    flex-grow: 1; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; 
    min-height: 80px; transition: background 0.2s;
}
#tier-container .tier-dropzone, #view-tier-container .tier-dropzone { 
    gap: 0; padding: 0; 
    background: var(--tier-bg); 
    transition: background 0.2s ease;
}
#pool-dropzone { 
    gap: 8px; 
    padding: 10px 5px; 
    border-radius: 6px; 
    justify-content: center; 
}

.add-tier-big-btn {
    width: 100%; margin-top: 0; padding: 4px; background: transparent; border: none; border-top: 1px dashed var(--border-dashed); 
    border-radius: 0 0 8px 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; 
    align-items: center; justify-content: center; transition: all 0.15s ease; min-height: 24px; opacity: 0.6;
}
.add-tier-big-btn:hover { opacity: 1; background: rgba(0, 229, 255, 0.05); color: var(--accent-color); border-top-color: var(--accent-color); }

/* ================= ПАНЕЛЬ ЭЛЕМЕНТОВ (POOL) ================= */
.pool-container {
    width: 100%; max-width: 100%; margin-top: 10px; background: var(--card-bg); border-radius: 12px;
    padding: 10px 15px; border: 2px dashed var(--border-dashed); transition: border-color 0.2s ease;
}

/* ================= ЗОНЫ УДАЛЕНИЯ ЭЛЕМЕНТОВ (КОРЗИНЫ) ================= */
.delete-dropzone, .tier-delete-dropzone {
    position: fixed; top: 0; right: 0; width: 155px; height: 100vh;
    background: rgba(255, 77, 77, 0.1); border-left: 3px dashed rgba(255, 77, 77, 0.3); color: #ff4d4d; font-weight: 700; text-align: center;
    z-index: 2000; backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s, visibility 0.25s, background 0.2s, border-color 0.2s;
    display: block; 
}
.delete-dropzone.active-zone, .tier-delete-dropzone.active-zone { opacity: 1; visibility: visible; pointer-events: auto; }
.delete-dropzone.drag-over, .tier-delete-dropzone.drag-over { background: rgba(255, 77, 77, 0.2); border-left-color: #ff4d4d; }

.delete-dropzone::before, .tier-delete-dropzone::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }

.delete-text-label {
    position: absolute; top: calc(50% + 20px); left: 0; width: 100%;
    font-size: 13px !important; padding: 0 10px !important; line-height: 1.3 !important; 
    transform: translateY(-50%); pointer-events: none; z-index: 10;
    opacity: 1;
    transition: opacity 0.2s ease 0.4s; 
}

.delete-dropzone:hover .delete-text-label,
.tier-delete-dropzone:hover .delete-text-label,
.delete-dropzone:has(.sortable-ghost) .delete-text-label,
.tier-delete-dropzone:has(.sortable-ghost-tier) .delete-text-label,
.delete-dropzone:has(.strike) .delete-text-label,
.tier-delete-dropzone:has(.strike) .delete-text-label {
    opacity: 0;
    transition: opacity 0.1s ease 0s; 
}

/* ================= СТРУКТУРА КАРТОЧЕК И ИЗОБРАЖЕНИЙ ================= */
.item-wrapper, .tier-drag-handle, .tier-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

.item-wrapper { 
    position: relative; width: 80px; height: 80px; cursor: grab; background-color: transparent; flex-shrink: 0; 
    contain: layout style; 
}

.sortable-drag { will-change: transform; }
.item-wrapper:active { cursor: grabbing; }

#tier-container .item-wrapper, #view-tier-container .item-wrapper { margin: 0; vertical-align: top; }

.item-content {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; overflow: hidden;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease; background-color: transparent; border: none; box-shadow: none;
}

#tier-container .item-content, #view-tier-container .item-content { border-radius: 0; } 

.item-wrapper:not(.sortable-drag):hover .item-content { transform: scale(1.08); box-shadow: none !important; background-color: transparent !important; }

.item { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

.add-item-card {
    width: 80px; height: 80px; border-radius: 8px; border: 2px dashed var(--border-dashed);
    background: var(--card-bg); color: var(--text-muted); font-size: 32px; font-weight: 300;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    transition: transform 0.1s, background 0.1s, color 0.1s; order: 9999;
}
.add-item-card:hover { border-color: var(--accent-color); color: var(--accent-color); background: var(--card-hover); transform: scale(1.05); }
#file-input { display: none; }

.item-title-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    padding: 6px; padding-bottom: 8px; 
    text-align: center; color: #ffffff; font-size: 11px;
    font-weight: 700; word-break: break-word; 
    
    opacity: 1; 
    transform: scale(1); 
    transition: opacity 0.15s, transform 0.15s; 
    
    background: transparent; 
    
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0px  3px 5px rgba(0,0,0,0.9);
}

.item-title-overlay[contenteditable="true"] { opacity: 1; transform: scale(1); background: rgba(0, 0, 0, 0.8); border: 2px solid var(--accent-color); }

/* Уведомления */
.toast {
    position: fixed; bottom: 25px; right: 25px; background: var(--card-bg); color: var(--text-color);
    border: 2px solid var(--border-color); padding: 14px 20px; border-radius: 12px; font-size: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5); opacity: 0; transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s; pointer-events: none; z-index: 9999 !important; 
    display: flex; flex-direction: column; gap: 3px; font-weight: 500;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-title { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.toast-subtitle { font-size: 12px; color: var(--accent-color); font-weight: 600; }

/* ================= АНИМАЦИИ СОРТИРОВКИ И DRAG & DROP ================= */
.sortable-ghost { opacity: 1 !important; }
.sortable-ghost .item-content { opacity: 0.3 !important; transform: scale(0.9) !important; border: none !important; filter: grayscale(1); }
.sortable-ghost-tier { opacity: 0.3 !important; background-color: var(--card-bg) !important; border: none !important; border-radius: 8px !important; }

.sortable-drag .item-content { transform: scale(1.15); box-shadow: none !important; background-color: transparent !important; transition: transform 0.1s ease-out; }
.sortable-drag-tier { opacity: 0.95 !important; background: var(--card-hover) !important; box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 0 2px var(--accent-color) !important; cursor: grabbing !important; z-index: 9999 !important; }

#delete-zone .sortable-ghost, #tier-delete-zone .sortable-ghost-tier { display: none !important; }
#delete-zone .item-wrapper { position: absolute !important; left: 50% !important; top: 50% !important; margin-left: -40px !important; margin-top: -40px !important; pointer-events: none !important; z-index: 100 !important; }
#tier-delete-zone .tier-row { position: absolute !important; left: 10px !important; right: 10px !important; width: auto !important; top: 50% !important; margin-top: -40px !important; pointer-events: none !important; z-index: 100 !important; }

.item-wrapper:not(.sortable-drag):active .item-content { transform: scale(0.85) !important; box-shadow: none !important; background-color: transparent !important; transition: transform 0.05s cubic-bezier(0.4, 0, 0.2, 1) !important; }

@keyframes popIn { 0% { transform: scale(0.6) translateY(-10px); opacity: 0; } 50% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.item-pop .item-content { animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes tierPop { 0% { transform: scale(0.98); } 50% { transform: scale(1.01); } 100% { transform: scale(1); } }
.tier-pop { animation: tierPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

.drag-over-file, .sortable-dragover { background-color: var(--dropzone-hover) !important; box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.1) !important; border-radius: 8px !important; transition: all 0.15s ease; }
.pool-container.drag-over-file { box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.2) !important; border-color: var(--accent-color) !important; }

@keyframes slideInTier { 0% { opacity: 0; transform: scaleY(0.5) translateY(-30px); transform-origin: top; } 100% { opacity: 1; transform: scaleY(1) translateY(0); transform-origin: top; } }
.tier-row.animate-in { animation: slideInTier 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes slideOutTier { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.95); margin-bottom: -110px; border-color: transparent; } }
.tier-row.animate-out { animation: slideOutTier 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; pointer-events: none; }

@keyframes suckInItem { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(0) rotate(180deg); opacity: 0; } }
.sucking-in .item-content { animation: suckInItem 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }

@keyframes suckInTier { 0% { transform: scale(1); opacity: 1; filter: blur(0); } 100% { transform: scale(0) rotate(15deg); opacity: 0; filter: blur(5px); } }
.tier-row.sucking-in-tier { animation: suckInTier 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; pointer-events: none; }

@keyframes fallDownItem {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    20% { transform: translateY(-15px) scale(1.05) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) scale(0.5) rotate(var(--fall-rot, 15deg)); opacity: 0; }
}

.falling-down {
    z-index: 9999 !important;
    contain: none !important; 
}

.falling-down .item-content { 
    animation: fallDownItem 0.6s ease-in forwards !important; 
}

/* ================= АНИМАЦИЯ РАЗБИВАНИЯ НА ПИКСЕЛИ ================= */
.shatter-particle {
    opacity: 1;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
    transition: transform 0.6s cubic-bezier(0.15, 0.85, 0.35, 1), opacity 0.5s ease-in-out;
}
.shatter-particle.explode {
    transform: translate(var(--rx), var(--ry)) rotate(var(--rz)) scale(0);
    opacity: 0;
}

/* ================= АНИМАЦИЯ СМЕНЫ ТЕМЫ (GPU CSS) ================= */
::view-transition-group(root) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; opacity: 1; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; animation: theme-expand 0.5s ease-in-out forwards; }
html.theme-transition-shrinking::view-transition-old(root) { z-index: 2; animation: theme-shrink 0.5s ease-in-out forwards; }
html.theme-transition-shrinking::view-transition-new(root) { z-index: 1; animation: none; }

@keyframes theme-expand { 0% { clip-path: circle(0px at var(--click-x, 50%) var(--click-y, 50%)); } 100% { clip-path: circle(var(--click-r, 1500px) at var(--click-x, 50%) var(--click-y, 50%)); } }
@keyframes theme-shrink { 0% { clip-path: circle(var(--click-r, 1500px) at var(--click-x, 50%) var(--click-y, 50%)); } 100% { clip-path: circle(0px at var(--click-x, 50%) var(--click-y, 50%)); } }

/* ================= МОДАЛЬНОЕ ОКНО ПОИСКА ================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 17, 21, 0.85); backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center; z-index: 3000; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.search-modal-content {
    background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 12px; width: 90%; max-width: 800px; 
    height: 750px; max-height: 85vh; display: flex; flex-direction: column; padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 20px rgba(0, 229, 255, 0.1); transform: scale(0.95); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; 
}
.modal-overlay.active .search-modal-content { transform: scale(1); }
body.light-theme .search-modal-content { box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 20px rgba(124, 58, 237, 0.15); }

.search-modal-header, .search-tabs, .search-input-group { flex-shrink: 0; }
.search-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.search-modal-header h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-color); }

.search-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
.search-tabs::-webkit-scrollbar { height: 4px; }
.search-tabs::-webkit-scrollbar-thumb { background: var(--border-dashed); border-radius: 4px; }
.search-tab {
    background: var(--btn-bg); color: var(--text-muted); border: 2px solid transparent; padding: 8px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; 
    transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0; font-size: 14px; box-shadow: 0 4px 0 var(--border-color); transform: translateY(0);
}
.search-tab:hover { background: var(--card-hover); color: var(--text-color); transform: translateY(1px); box-shadow: 0 3px 0 var(--border-color); }
.search-tab:active { transform: translateY(4px) !important; box-shadow: 0 0 0 transparent !important; }
.search-tab.active { background: rgba(0, 229, 255, 0.05); color: var(--accent-color); border-color: var(--accent-shadow); box-shadow: 0 4px 0 var(--accent-shadow); }
body.light-theme .search-tab.active { background: rgba(124, 58, 237, 0.05); }

.search-input-group { display: flex; gap: 10px; margin-bottom: 20px; }
.search-input-group input { flex-grow: 1; margin: 0; padding: 10px 15px; border-bottom: 2px solid var(--border-color); }

.search-results-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 15px; overflow-y: auto; 
    padding: 5px 10px 10px 5px; flex-grow: 1; align-content: start; overscroll-behavior: contain;
}
.search-results-grid::-webkit-scrollbar { width: 8px; }
.search-results-grid::-webkit-scrollbar-track { background: var(--bg-color); border-radius: 4px; }
.search-results-grid::-webkit-scrollbar-thumb { background: var(--border-dashed); border-radius: 4px; }
.search-results-grid::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

.search-result-card {
    position: relative; border-radius: 8px; overflow: hidden; border: 2px solid var(--border-color); cursor: pointer; width: 100%;
    height: 0; padding-bottom: 100%; transition: all 0.15s ease; background: var(--btn-bg);
}
.search-result-card:hover { border-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 10px rgba(0, 229, 255, 0.3); }
.search-result-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.search-result-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.8); color: #fff; font-size: 13px; font-weight: 700; 
    padding: 6px; text-align: center; opacity: 0; transition: all 0.15s ease; text-shadow: 0 1px 3px #000; z-index: 10;
}
.search-result-card:hover .search-result-overlay { opacity: 1; }
.search-loading { text-align: center; padding: 40px; color: var(--accent-color); font-weight: 700; font-size: 18px; flex-shrink: 0; }

@keyframes addFlash { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(0.92); filter: brightness(1.3) saturate(1.5); border-color: #00ff88; } 100% { transform: scale(1); filter: brightness(1); } }
.search-result-card.added-success { animation: addFlash 0.4s ease-out; border-color: #00ff88; }
.search-result-card.added-success .search-result-overlay { opacity: 1; background: rgba(0, 255, 136, 0.9); color: #000; text-shadow: none; }

.pagination-container { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 15px; flex-shrink: 0; padding-top: 15px; border-top: 2px solid var(--border-color); }
.page-btn { background: var(--btn-bg); color: var(--text-color); border: 2px solid var(--border-color); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; transition: all 0.15s; font-size: 14px; }
.page-btn:hover:not(:disabled) { background: var(--card-hover); border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.page-btn:active:not(:disabled) { transform: translateY(1px); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: transparent; }
.page-info { font-weight: 800; color: var(--accent-color); font-size: 15px; min-width: 60px; text-align: center; }

.search-result-title-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; 
    align-items: flex-end; 
    justify-content: center; 
    padding: 6px; padding-bottom: 25px; 
    text-align: center; color: #ffffff; 
    font-size: 11px; font-weight: 700; word-break: break-word; 
    
    pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 5;
    
    background: transparent;
    
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0px  3px 5px rgba(0,0,0,0.9);
}
body.modal-titles-visible .search-result-title-overlay { opacity: 1; }

/* ================= РЕАЛИСТИЧНАЯ ВЕКТОРНАЯ МОЛНИЯ ================= */
.real-lightning {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; z-index: 10;
    display: flex; justify-content: center; align-items: center; overflow: hidden;
}

.real-lightning svg {
    width: 65px; 
    height: 120%; 
}

.delete-dropzone.active-zone, .tier-delete-dropzone.active-zone {
    box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.1);
}

.delete-dropzone:hover, .tier-delete-dropzone:hover,
.delete-dropzone:has(.sortable-ghost), .tier-delete-dropzone:has(.sortable-ghost-tier) {
    box-shadow: inset 0 0 40px rgba(0, 229, 255, 0.3);
    background: rgba(0, 229, 255, 0.03);
}

@keyframes real-strike {
    0%   { opacity: 0; }
    5%   { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 15px #fff); } 
    10%  { opacity: 0; } 
    15%  { opacity: 0.8; transform: scaleX(-1); } 
    20%  { opacity: 0; }
    35%  { opacity: 0.4; transform: scaleX(1); filter: brightness(1.2) drop-shadow(0 0 10px #00e5ff); } 
    100% { opacity: 0; }
}

.real-lightning.strike { animation: real-strike 0.4s ease-out forwards; }

/* ================= АДАПТИВНОСТЬ (МОБИЛЬНАЯ ВЕРСИЯ) ================= */
@media (max-width: 768px) {
    header { flex-direction: column; gap: 10px; padding: 10px 15px; }
    
    /* Сбрасываем жесткую высоту на телефонах */
    .header-left, .header-right { justify-content: center; width: 100%; height: auto; }
    .header-right { flex-wrap: wrap; }
    
    /* Опускаем строку поиска под логотип и кнопки */
    .header-center { 
        height: auto; width: 100%; max-width: 100%; 
        margin: 5px 0 0 0; order: 3; 
    }
    
    .page { padding: 0 10px 40px 10px; }
    
    .builder-header { flex-direction: column; align-items: stretch; gap: 15px; margin-bottom: 15px; }
    .title-input { font-size: 20px; text-align: center; }
    .icon-controls { justify-content: center; }
    
    .dropdown-menu { right: 50%; transform: translateX(50%) translateY(-10px); }
    .hover-dropdown:hover .dropdown-menu { transform: translateX(50%) translateY(0); }
    
    .tier-label-wrapper { width: 70px; }
    .tier-label { font-size: 16px; padding: 5px; }
    
    .tier-actions { width: 34px; }
    .tier-action-btn { font-size: 14px; min-height: 28px; }

    .delete-dropzone, .tier-delete-dropzone {
        top: auto; bottom: 0; width: 100%; height: 110px; border-left: none; border-top: 3px dashed rgba(255, 77, 77, 0.5); display: flex; flex-direction: row; justify-content: center; gap: 15px; padding: 0;
    }
 
    .delete-text-label { 
        position: relative; top: auto; left: auto; transform: none; width: auto; font-size: 14px !important; padding: 0 !important; 
    }
    
    #tier-delete-zone .tier-row { top: 50% !important; margin-top: -40px !important; }
}

.delete-dropzone > div:not(.trash-icon):not(.item-wrapper):not(.sortable-ghost):not(.tier-row),
.tier-delete-dropzone > div:not(.trash-icon):not(.item-wrapper):not(.sortable-ghost):not(.tier-row) {
    font-size: 13px !important; 
    padding: 0 10px !important; 
    line-height: 1.3 !important; 
}

@media (max-width: 768px) {
    .delete-dropzone > div:not(.trash-icon):not(.item-wrapper):not(.sortable-ghost):not(.tier-row),
    .tier-delete-dropzone > div:not(.trash-icon):not(.item-wrapper):not(.sortable-ghost):not(.tier-row) {
        font-size: 14px !important; 
        padding: 0 !important; 
    }
}

/* ================= ЛОГОТИП ================= */
.logo { font-size: 20px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 7px; letter-spacing: -0.5px; } /* Шрифт 20px вместо 18px */
.logo span { color: var(--accent-color); text-shadow: 0 0 10px rgba(0, 229, 255, 0.3); }
body.light-theme .logo span { text-shadow: none; }

.puzzle-grid { 
    display: grid; 
    grid-template-columns: 7px 7px; /* Увеличили кубики (было 6х6) */
    gap: 2.5px; 
    transform: rotate(45deg); 
    margin: 0 4px; 
    position: relative; 
    top: -9px; /* Скорректировали центровку */
}
.puzzle-grid div { width: 7px; height: 7px; border-radius: 1.5px; }
.pg-piece { background: var(--text-color); transition: background 0.2s ease; }
.pg-accent { background: var(--accent-color); transform: translate(2px, 2px); box-shadow: 0 0 8px rgba(0, 229, 255, 0.4); }
body.light-theme .pg-accent { box-shadow: 0 0 8px rgba(124, 58, 237, 0.4); }
.logo:hover .pg-accent { transform: translate(0, 0); transition: transform 0.2s ease; }

.sortable-chosen,
.sortable-drag,
.sortable-ghost {
    box-shadow: none !important;
    border-color: var(--tier-border) !important;
    outline: none !important;
}

.tier-action-btn:active .drag-icon-svg,
.tier-drag-handle:active {
    color: var(--text-color) !important;
}

.tooltip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: var(--border-color);
    color: var(--text-muted); font-size: 13px; font-weight: 800; cursor: help; margin-left: auto;
    transition: background 0.15s, color 0.15s;
}
.tooltip-icon:hover { background: var(--accent-color); color: #000; }

/* ================= ОНБОРДИНГ ================= */
.onboarding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 10px; }
.onboarding-card {
    background: var(--btn-bg); border: 2px solid var(--border-color); border-radius: 10px; padding: 15px 10px;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 4px 0 var(--border-color);
}
.onboarding-card:hover { transform: translateY(-2px); border-color: var(--accent-color); }
.onboarding-card.selected { background: rgba(0, 229, 255, 0.1); border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 4px 0 var(--accent-shadow); transform: translateY(2px); }
body.light-theme .onboarding-card.selected { background: rgba(124, 58, 237, 0.1); color: var(--accent-color); }


/* ================= ПРЕМИАЛЬНАЯ ПАНЕЛЬ И ФИЛЬТРЫ ================= */
.advanced-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0 0 0; /* Отступ внутри шапки */
    margin: 0; /* Убрали старые внешние отступы */
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .advanced-toolbar { 
        padding: 5px 0 0 0; 
        gap: 10px; 
    }
}

/* --- Стили для выпадающего списка (Sort) --- */
.sort-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.premium-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    border: 1px solid transparent;
    padding: 8px 40px 8px 16px; /* Оставили место справа под SVG галочку */
    font-size: 14px;
    font-weight: 500;
    border-radius: 30px; /* Форма идеальной капсулы, как у поиска */
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}
.premium-select:hover, .premium-select:focus {
    background: rgba(255, 255, 255, 0.08);
}
body.light-theme .premium-select { background: rgba(0, 0, 0, 0.04); }
body.light-theme .premium-select:hover { background: rgba(0, 0, 0, 0.08); }

.premium-select option {
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 500;
}

.select-chevron {
    position: absolute;
    right: 14px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none; /* Чтобы клик проходил сквозь иконку прямо по select */
    transition: color 0.2s ease;
}
.sort-wrapper:hover .select-chevron { color: var(--text-color); }

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 4px;
}

/* --- Стили для кнопок категорий (Chips) --- */
.chip-filters-wrapper { width: 100%; padding: 10px 0 0 0; }
@media (max-width: 768px) { .chip-filters-wrapper { padding: 5px 0 0 0; } }

.chip-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 5px 0;
}

.filter-chip {
    background-color: transparent; /* По умолчанию кнопка невидима */
    color: var(--text-muted); 
    border: none; 
    padding: 8px 16px;
    border-radius: 30px; /* Капсула */
    font-size: 14px; 
    font-weight: 500; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    flex-shrink: 0; 
}

.filter-chip:hover { 
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.06); /* Мягкое свечение при наведении */
}
body.light-theme .filter-chip:hover { background-color: rgba(0, 0, 0, 0.06); }

/* Выбранная категория */
.filter-chip.active { 
    background-color: var(--text-color); 
    color: var(--bg-color); 
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Добавляет легкий объем */
}

.chip-divider { width: 1px; height: 24px; background-color: var(--border-color); margin: 0 4px; flex-shrink: 0; }

/* ================= ФОРМАТЫ КАРТИНОК (Монолит) ================= */
body.ratio-1-1 .item-wrapper, body.ratio-1-1 .add-item-card { width: 80px; height: 80px; }
body.ratio-16-9 .item-wrapper, body.ratio-16-9 .add-item-card { width: 142px; height: 80px; }
body.ratio-9-16 .item-wrapper, body.ratio-9-16 .add-item-card { width: 80px; height: 142px; }

body:not(.ratio-16-9):not(.ratio-9-16):not(.ratio-1-1) .item-wrapper, 
body:not(.ratio-16-9):not(.ratio-9-16):not(.ratio-1-1) .add-item-card { width: 80px; height: 80px; }

@media (max-width: 768px) {
    body.ratio-1-1 .item-wrapper, body.ratio-1-1 .add-item-card { width: 65px; height: 65px; }
    body.ratio-16-9 .item-wrapper, body.ratio-16-9 .add-item-card { width: 116px; height: 65px; }
    body.ratio-9-16 .item-wrapper, body.ratio-9-16 .add-item-card { width: 65px; height: 116px; }
    
    body:not(.ratio-16-9):not(.ratio-9-16):not(.ratio-1-1) .item-wrapper, 
    body:not(.ratio-16-9):not(.ratio-9-16):not(.ratio-1-1) .add-item-card { width: 65px; height: 65px; }
}

#delete-zone .item-wrapper {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    margin: 0 !important; pointer-events: none !important; z-index: 100 !important;
}
@media (max-width: 768px) { #delete-zone .item-wrapper { left: 50% !important; } }