/* 1. Определение CSS-переменных (Светлая тема по умолчанию) */
:root {
    --bg-color: #f3f4f6;
    --card-bg-color: #ffffff;
    --card-bg-color-toc: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --border-color: #e5e7eb;
    --border-color-dashed: #d1d5db;
    --border-color-light: #f3f4f6;
    --accent-blue: #2563eb;
    --accent-hover: #1d4ed8;
    --cta-bg: #eff6ff;
    --cta-border: #bfdbfe;
    --color-green: #166534;
    --color-red: #991b1b;
    
    /* Фон блока фильтров */
    --filter-bg: #f9fafb; 
    
    /* Специфичные для гайда */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --modal-overlay: rgba(0, 0, 0, 0.7);
}

/* ФИКС ДЛЯ STICKY: Родительские контейнеры не должны обрезать контент */
#interactive-quartz-guide .container,
#interactive-quartz-guide #quiz,
#interactive-quartz-guide #results {
    overflow: visible !important; 
}

/* 2. Переопределение переменных для темной темы */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #111827;
        --card-bg-color: #1f2937;
        --card-bg-color-toc: #374151;
        --text-primary: #f3f4f6;
        --text-secondary: #9ca3af;
        --border-color: #374151;
        --border-color-dashed: #4b5563;
        --border-color-light: #374151;
        --accent-blue: #6366f1;
        --accent-hover: #818cf8;
        --cta-bg: #1e293b;
        --cta-border: #334155;
        --color-green: #4ade80;
        --color-red: #f87171;
        
        --filter-bg: #111827;
        
        --shadow-color: rgba(0, 0, 0, 0.4);
        --input-bg: #374151;
        --input-border: #4b5563;
        --modal-overlay: rgba(0, 0, 0, 0.8);
    }
}

/* CRITICAL FIX FOR IFRAME SCROLLING & STICKY */
/* Переносим скролл с body на wrapper, чтобы sticky работал внутри iframe/модалки */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Отключаем скролл документа */
    -webkit-text-size-adjust: 100%;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
}

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* --- MAIN SCROLL CONTAINER --- */
#interactive-quartz-guide {
    color: var(--text-primary);
    height: 100%; /* Занимаем всю высоту iframe/окна */
    width: 100%;
    overflow-y: auto; /* Включаем скролл ЗДЕСЬ */
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    isolation: isolate;
    scroll-behavior: smooth;
}

#interactive-quartz-guide h1, 
#interactive-quartz-guide h2, 
#interactive-quartz-guide h3, 
#interactive-quartz-guide h4, 
#interactive-quartz-guide h5, 
#interactive-quartz-guide h6,
#interactive-quartz-guide label {
    color: var(--text-primary);
}

#interactive-quartz-guide p {
    color: var(--text-secondary);
}

#interactive-quartz-guide span:not(.badge):not(.rank-text-fix) {
    color: var(--text-secondary);
}
#interactive-quartz-guide .top-rank-button span {
    color: inherit !important;
}

/* --- LAYOUT & COMPONENTS --- */

#quiz, 
.result-card,
#collection-modal-content-wrapper,
#tooltip-content {
    background-color: var(--card-bg-color) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
}

#interactive-quartz-guide input, #interactive-quartz-guide select, #interactive-quartz-guide textarea { font-size: 16px; }


/* === ФИКС 1: ЛИПКОЕ МЕНЮ (МОБИЛЬНАЯ ВЕРСИЯ) === */
#interactive-quartz-guide .tech-nav-bar { 
    /* Компенсация safe-area не нужна, так как скролл внутри дива, но padding для красоты оставляем */
    padding-top: 0.5rem; 
    background-color: var(--card-bg-color) !important;
    border-bottom: 1px solid var(--border-color);
    
    /* Жесткая фиксация */
    position: -webkit-sticky !important; 
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important; /* Поверх контента, но ниже модалок */
}

/* === ОБЩИЙ ФОН ДЛЯ БЛОКА РЕЙТИНГОВ (ИСПРАВЛЕНИЕ: ПРИНУДИТЕЛЬНО) === */
#interactive-quartz-guide #ranks-wrapper {
    background-color: var(--card-bg-color) !important; /* Принудительно задаем фон */
    width: 100%;
    /* Добавляем небольшой padding снизу, чтобы отделить от контента, если нужно */
    padding-bottom: 10px; 
}

/* === ФИКС 2: ЛИПКИЙ ХЕДЕР РЕЙТИНГА (ДЕСКТОП) === */
@media (min-width: 640px) {
    #interactive-quartz-guide #ranks-wrapper {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important; /* Поверх контента, но ниже модалок */
        /* background-color уже задан выше глобально */
        transition: box-shadow 0.3s ease-out;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 0; /* Сбрасываем padding на десктопе, если там он мешает */
    }
    
    #interactive-quartz-guide #ranks-wrapper.is-stuck { 
        box-shadow: 0 4px 12px var(--shadow-color); 
        opacity: 0.98;
    }
}

#interactive-quartz-guide .result-card { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; }

/* Modals */
#interactive-quartz-guide #video-modal.hidden, #interactive-quartz-guide #tooltip-modal.hidden, #interactive-quartz-guide #collection-modal.hidden { display: none; }
#interactive-quartz-guide #collection-modal, #tooltip-modal { background-color: var(--modal-overlay); }

/* === ФИКС Z-INDEX ДЛЯ МОДАЛЬНЫХ ОКОН === */
/* Устанавливаем z-index выше, чем у sticky-баров (900 и 1000) */
#interactive-quartz-guide #collection-modal,
#interactive-quartz-guide #video-modal,
#interactive-quartz-guide #tooltip-modal {
    z-index: 2000 !important;
}

/* Модальное окно контента */
#collection-modal-content-wrapper {
    -webkit-overflow-scrolling: touch;
}

/* Criterion Cards */
#interactive-quartz-guide .criterion-card { 
    transition: all 0.3s ease-in-out; 
    opacity: 0; 
    transform: translateY(10px);
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
}
#interactive-quartz-guide .criterion-card.visible { opacity: 1; transform: translateY(0); }
#interactive-quartz-guide .criterion-card:hover { transform: scale(1.02); box-shadow: 0 4px 15px var(--shadow-color); }

/* Rank Radios */
#interactive-quartz-guide .rank-radio-label { 
    transition: all 0.2s ease-in-out; 
    border-color: var(--border-color);
    color: var(--text-secondary);
    background-color: var(--card-bg-color);
}
#interactive-quartz-guide .rank-radio-input:checked + .rank-radio-label { 
    background-color: var(--accent-blue); 
    color: white; 
    border-color: var(--accent-blue); 
    transform: scale(1.1); 
}
#interactive-quartz-guide .rank-radio-input:disabled + .rank-radio-label { opacity: 0.4; cursor: not-allowed; background-color: var(--bg-color); border-color: var(--border-color); }

/* Preselect Buttons */
#interactive-quartz-guide .preselect-label { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 2.75rem; 
    padding: 0.375rem; 
    border: 2px solid var(--border-color); 
    border-radius: 0.5rem; 
    cursor: pointer; 
    transition: all 0.2s ease-in-out; 
    text-align: center; 
    font-size: 0.75rem; 
    line-height: 1rem; 
    user-select: none;
    color: var(--text-primary);
    background-color: var(--card-bg-color);
}
@media (min-width: 640px) { #interactive-quartz-guide .preselect-label { padding: 0.75rem; font-size: 1rem; } }
#interactive-quartz-guide .preselect-radio:checked + .preselect-label { 
    border-color: var(--accent-blue); 
    background-color: var(--cta-bg); 
    color: var(--accent-blue); 
    font-weight: 600; 
    box-shadow: 0 0 0 1px var(--accent-blue); 
}

/* Tooltips */
#interactive-quartz-guide .tooltip-trigger { transition: background-color 0.2s, color 0.2s; }
#interactive-quartz-guide .tooltip-trigger.tooltip-active { background-color: var(--cta-bg); color: var(--accent-blue); }
#js-tooltip {
    position: absolute;
    background-color: #111827;
    color: #f3f4f6;
    padding: 10px 14px;
    border-radius: 8px;
    z-index: 10000;
    width: max-content;
    max-width: 280px;
    overflow-wrap: break-word;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}
#js-tooltip.visible { opacity: 1; pointer-events: auto; }
#js-tooltip .highlight { background-color: var(--accent-blue); color: white; border-radius: 4px; padding: 4px 8px; margin: 4px 0; font-weight: 600; }
#js-tooltip .highlight-green { 
    background-color: var(--color-green); 
    color: white; 
    border-radius: 4px; 
    padding: 4px 8px; 
    margin: 4px 0; 
    font-weight: 600; 
}

/* Tags & Filters */
#interactive-quartz-guide .filter-container {
    background-color: var(--filter-bg);
    border: 1px solid var(--border-color);
}

#interactive-quartz-guide .tag-filter-btn { 
    padding: 0.25rem 0.5rem; 
    border-radius: 0.5rem; 
    background-color: var(--card-bg-color); 
    color: var(--text-secondary); 
    font-size: 0.75rem; 
    line-height: 1rem; 
    font-weight: 600; 
    transition: all 0.2s ease-in-out; 
    border: 1px solid var(--border-color); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.25rem; 
    text-align: center; 
}
@media (min-width: 640px) { #interactive-quartz-guide .tag-filter-btn[data-form-factor] { flex-direction: column; min-width: 4.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } }
#interactive-quartz-guide .tag-filter-btn svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; color: var(--text-secondary); }
#interactive-quartz-guide .tag-filter-btn:hover:not(.active) { background-color: var(--border-color); }
#interactive-quartz-guide .tag-filter-btn.active { 
    background-color: var(--cta-bg); 
    color: var(--accent-blue); 
    border-color: var(--accent-blue); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}
#interactive-quartz-guide .tag-filter-btn.active svg { color: var(--accent-blue); }
#interactive-quartz-guide .tag-filter-btn:disabled { background-color: var(--bg-color); color: var(--text-secondary); opacity: 0.5; cursor: not-allowed; box-shadow: none; border-color: var(--border-color); }

/* Budget Slider */
#interactive-quartz-guide .dual-slider-container { position: relative; height: 20px; }
#interactive-quartz-guide .slider-track { position: absolute; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 3px; width: 100%; background-color: var(--border-color); }
#interactive-quartz-guide .slider-range { position: absolute; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 3px; width: 100%; background-color: var(--accent-blue); }
#interactive-quartz-guide .dual-slider-container input[type=range] { position: absolute; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; top: 50%; transform: translateY(-50%); }
#interactive-quartz-guide .dual-slider-container input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--accent-blue); cursor: pointer; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2); pointer-events: auto; }
#interactive-quartz-guide .dual-slider-container input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: var(--accent-blue); cursor: pointer; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2); pointer-events: auto; }

/* Table Styles */
#interactive-quartz-guide .collections-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; table-layout: fixed; }
#interactive-quartz-guide .collections-table th, #interactive-quartz-guide .collections-table td { border: 1px solid var(--border-color); padding: 0.75rem; vertical-align: middle; } 
#interactive-quartz-guide .collections-table th { 
    background-color: var(--card-bg-color-toc); 
    font-weight: 600; 
    font-size: 0.75rem; 
    color: var(--text-primary); 
    text-align: left; 
} 
#interactive-quartz-guide .collections-table td { font-size: 0.875rem; color: var(--text-primary); }
#interactive-quartz-guide .collections-table .icon-cell svg { display: inline-block; width: 1.5rem; height: 1.5rem; color: var(--text-secondary); }
#interactive-quartz-guide .collections-table tbody tr:hover { background-color: var(--bg-color); }
@media (min-width: 640px) { #interactive-quartz-guide .collections-table { table-layout: auto; } }

/* Sortable Headers */
#interactive-quartz-guide .sortable-header { cursor: pointer; position: relative; user-select: none; padding-right: 1.5rem; } 
#interactive-quartz-guide .sortable-header:hover { background-color: var(--border-color); }

/* Tabs & Navigation */
#interactive-quartz-guide .content-tab { background: transparent; border: none; cursor: pointer; }
#interactive-quartz-guide .content-tab.active { color: var(--accent-blue); border-bottom: 2px solid var(--accent-blue); }
#interactive-quartz-guide .content-tab:not(.active) { color: var(--text-secondary); }

#interactive-quartz-guide .characteristic-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; }

/* Recalc Form */
#interactive-quartz-guide .recalc-form {
    background-color: var(--filter-bg);
    border: 1px solid var(--border-color);
}
#interactive-quartz-guide .recalc-form h5, #interactive-quartz-guide .recalc-form label {
    color: var(--text-primary);
}

#close-modal, #close-tooltip { color: white; } 
.mobile-hint-text { color: var(--text-secondary); }