:root { 
        --primary-blue: #1e3a8a; --accent-blue: #0ea5e9; --hover-blue: #e0f2ff;
        --bg-gray: #f9fafb; --surface: #ffffff; --text-main: #111827; 
        --text-muted: #6b7280; --border-color: #e5e7eb; 
        --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
    }
    
    /* Стили для темной темы оформления */
    [data-theme="dark"] {
        --bg-gray: #0f172a;       /* Глубокий темно-синий/серый фон */
        --surface: #1e293b;       /* Цвет карточек и панелей */
        --text-main: #f8fafc;     /* Мягкий белый цвет для основного текста */
        --text-muted: #94a3b8;    /* Приглушенный текст */
        --border-color: #334155;  /* Темные границы элементов */
        --hover-blue: #1e3a8a;    /* Фоновое выделение при наведении */
        --primary-blue: #38bdf8;  /* Более яркий голубой для контраста ссылок/акцентов */
    }

/* Полная адаптация медицинских модулей и панелей под темную тему */
    
    /* 1. Вкладки навигации («Жалобы», «Анамнез», разделы программы и т.д.) */
    [data-theme="dark"] .tab-button,
    [data-theme="dark"] .tab-btn,
    [data-theme="dark"] .nav-tab,
    [data-theme="dark"] .tabs-container button {
        background: #111827 !important;
        color: var(--text-muted) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme="dark"] .tab-button:hover,
    [data-theme="dark"] .tab-btn:hover {
        background: #1e293b !important;
        color: var(--text-main) !important;
    }
    [data-theme="dark"] .tab-button.active,
    [data-theme="dark"] .tab-btn.active,
    [data-theme="dark"] .nav-tab.active,
    [data-theme="dark"] .tabs-container button.active {
        background: var(--hover-blue) !important;
        color: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
    }

    /* 2. Переключатели и блоки выбора пола */
    [data-theme="dark"] .gender-btn,
    [data-theme="dark"] .gender-option,
    [data-theme="dark"] .gender-selector label,
    [data-theme="dark"] .gender-group > div {
        background: #111827 !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme="dark"] .gender-btn.active,
    [data-theme="dark"] .gender-option.active,
    [data-theme="dark"] .gender-option.selected,
    [data-theme="dark"] input[type="radio"]:checked + label {
        background: var(--primary-blue) !important;
        color: #0f172a !important;
        border-color: var(--primary-blue) !important;
        font-weight: bold;
    }

    /* 3. Нижняя комбо-панель кнопок «Шаблоны» */
    [data-theme="dark"] .archive-combo-wrapper {
        background: transparent !important;
    }
    [data-theme="dark"] .archive-main,
    [data-theme="dark"] .archive-trigger {
        background: var(--surface) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme="dark"] .archive-main:hover,
    [data-theme="dark"] .archive-trigger:hover {
        background: var(--hover-blue) !important;
        border-color: var(--primary-blue) !important;
    }
    [data-theme="dark"] .archive-dropup {
        background: var(--surface) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4) !important;
    }
    [data-theme="dark"] .archive-dropup button {
        background: transparent !important;
        color: var(--text-main) !important;
    }
    [data-theme="dark"] .archive-dropup button:hover {
        background: var(--hover-blue) !important;
    }

    /* 4. Системные кнопки управления («Экспорт», «Очистить всё» и др.) */
    [data-theme="dark"] .control-button,
    [data-theme="dark"] .modal-content button.control-button {
        background: #111827 !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme="dark"] .control-button:hover {
        background: var(--hover-blue) !important;
        border-color: var(--primary-blue) !important;
    }
    [data-theme="dark"] .control-button[onclick*="clear"],
    [data-theme="dark"] .control-button[style*="red"] {
        color: #f87171 !important; /* Более мягкий красный оттенок для темной темы */
    }
    [data-theme="dark"] .control-button[onclick*="clear"]:hover {
        background: #7f1d1d !important;
        color: #fca5a5 !important;
        border-color: #f87171 !important;
    }
    
    /* Стили для кнопки переключения темы */
    .theme-toggle-btn {
        background: var(--bg-gray);
        border: 1px solid var(--border-color);
        color: var(--text-main);
        padding: 8px 12px;
        border-radius: var(--radius-md);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .theme-toggle-btn:hover {
        background: var(--hover-blue);
        border-color: var(--primary-blue);
    }
    
    /* Дополнительная оптимизация инпутов и текстареа для темной темы */
    [data-theme="dark"] input, 
    [data-theme="dark"] textarea, 
    [data-theme="dark"] select {
        background-color: #111827 !important;
        color: #f8fafc !important;
        border-color: #4b5563 !important;
    }
    [data-theme="dark"] .modal-content {
        background-color: var(--surface) !important;
        color: var(--text-main) !important;
    }
    
    .app-wrapper { background: var(--bg-gray); color: var(--text-main); min-height: calc(100vh - 70px); padding: 15px 0 40px 0; }
    .main-app-container { max-width: 98%; width: 100%; margin: 0 auto; padding: 0 10px; display: flex; flex-direction: column; gap: 15px; box-sizing: border-box; }
    .modern-card, .text-area-container { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 16px 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
    
    .unified-header { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
    .patient-inputs { display: flex; flex-wrap: wrap; gap: 15px; flex-grow: 1; }
    .input-group { display: flex; flex-direction: column; flex-grow: 1; min-width: 140px; }
    .input-group label { font-size: 0.8em; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
    .input-group input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.95em; box-sizing: border-box; background: var(--bg-gray); transition: all 0.2s; color: var(--text-main); font-family: inherit; height: 40px; }
    .input-group input:focus { outline: none; border-color: var(--accent-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }
    
    .system-controls { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; height: 40px; }
    .lang-switch {position: relative; display: flex; background: var(--surface); padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); z-index: 1; width: 140px;}
    .lang-switch a {flex: 1; text-align: center; text-decoration: none; padding: 4px 0; border-radius: 4px; color: var(--text-muted); font-size: 0.85em; font-weight: 500; 
    transition: color 0.3s ease; z-index: 2; position: relative;
    display: flex; align-items: center; justify-content: center;
}

    .lang-switch::before {content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); background: var(--primary-blue); border-radius: 4px; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1;}
    .lang-switch:has(a[data-lang="ru"].active)::before { transform: translateX(0); }
    .lang-switch:has(a[data-lang="uz_lat"].active)::before { transform: translateX(100%); }
    .lang-switch:has(a[data-lang="uz_cyr"].active)::before { transform: translateX(200%); }
    .lang-switch a.active { color: white; background: transparent !important; box-shadow: none !important; transform: none !important; }
    .lang-switch a:hover { transform: none !important; box-shadow: none !important; background: transparent !important; }
    .lang-switch:has(a:hover) a:hover:not(.active) { color: var(--primary-blue); }

    .auth-panel { font-size: 0.9em; display: flex; gap: 8px; align-items: center; font-weight: 500; }
    .auth-panel span { color: var(--primary-blue); }
    .auth-panel button { padding: 6px 12px; border: 1px solid var(--primary-blue); background: transparent; color: var(--primary-blue); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; transition: all 0.2s; height: 34px; display: flex; align-items: center; gap: 6px; }
    .auth-panel button:hover { background: var(--hover-blue); }
    .auth-panel button.pro-badge { background: #10b981; color: white; border: none; cursor: default; }
    .auth-panel button.demo-badge { background: #f59e0b; color: white; border: none; cursor: default; }

/* --- СОВРЕМЕННЫЕ ВКЛАДКИ (РАСШИРЕНИЕ + ИКОНКА) --- */

/* Контейнер вкладок */
.section-tabs { 
    display: flex; flex-wrap: wrap; gap: 8px; 
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); 
    padding: 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.5); 
    box-shadow: none !important; /* Убираем тень контейнера для максимального минимализма */
}

/* Базовая кнопка */
.section-button {
    position: relative; 
    background: transparent; 
    color: var(--text-muted); 
    border: 1px solid transparent; 
    border-radius: 10px; 
    padding: 10px 18px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 0.95em; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.3s ease-in-out; 
    box-shadow: none !important; /* Строго без теней */
    transform: none !important; /* Убираем эффекты подпрыгивания */
}

/* --- СКРЫТАЯ ИКОНКА (Готовится к появлению) --- */
.section-button::before {
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900; /* Solid стиль иконок */
    font-size: 1.05em;
    opacity: 0; 
    max-width: 0; /* Скрываем ширину */
    transform: scale(0.5); /* Уменьшаем для эффекта вырастания */
    overflow: hidden; 
    white-space: nowrap; 
    transition: all 0.3s ease-in-out; 
    margin-right: 0;
}

/* --- НАЗНАЧЕНИЕ ИКОНОК ПО ТОЧНОМУ ID ВКЛАДКИ ИЗ JS --- */
#tab-jalobi::before { content: '\f06a'; }          /* circle-exclamation (Жалобы) */
#tab-anamnes::before { content: '\f1da'; }         /* history (Анамнез) */
#tab-osmotr::before { content: '\f0f1'; }          /* stethoscope (Осмотр) */
#tab-rezultat::before { content: '\f0c3'; }        /* flask (Обследование) */
#tab-diagnoz::before { content: '\f058'; }         /* circle-check (Диагноз) */
#tab-dorilar::before { content: '\f484'; }    /* pills (Лечение) */
#tab-recomendations::before { content: '\f46d'; }  /* clipboard-list (Рекомендации) */

/* --- АНИМАЦИЯ РАСШИРЕНИЯ (ПРИ HOVER И АКТИВНОЙ ВКЛАДКЕ) --- */
/* Показываем иконку не только при наведении, но и оставляем её на выбранной вкладке */
.section-button:hover::before,
.section-button.active::before { 
    opacity: 1; 
    max-width: 24px; /* Даем место иконке (кнопка плавно расширяется) */
    transform: scale(1); 
    margin-right: 8px; /* Плавно отодвигаем текст вправо */
}

/* --- ЦВЕТА СОСТОЯНИЙ --- */
/* При наведении */
.section-button:hover { 
    background: var(--hover-blue); 
    color: var(--primary-blue); 
}

/* Ранее заполненная вкладка */
.section-button.selected:not(.active) { 
    color: var(--primary-blue); 
    background: #f0f9ff; 
}

/* Активная вкладка */
.section-button.active { 
    background: var(--primary-blue); 
    color: white; 
    border-color: var(--primary-blue);
}



    .text-area-container { position: relative; padding-top: 50px; display: none; }
    .text-area-container.active { display: block; animation: fadeIn 0.3s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    
    .text-area-container h3 { position: absolute; top: 16px; left: 20px; margin: 0; font-size: 1.1em; color: var(--primary-blue); }
    .textarea-controls { position: absolute; top: 12px; right: 20px; display: flex; gap: 8px; }
    
    .control-button { background: var(--bg-gray); border: 1px solid var(--border-color); height: 34px; min-width: 34px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); transition: all 0.2s; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
    .control-button:hover { background: var(--hover-blue); color: var(--primary-blue); border-color: var(--accent-blue); }
    
    textarea.main-area { width: 100%; min-height: 320px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1em; font-family: inherit; resize: vertical; box-sizing: border-box; line-height: 1.6; color: var(--text-main); background: var(--bg-gray); transition: border-color 0.2s; }
    textarea.main-area:focus { outline: none; border-color: var(--accent-blue); background: var(--surface); }

    .list-builder { display: flex; flex-direction: column; gap: 15px; width: 100%; margin-top: 5px; }
    .list-input-group { display: flex; gap: 10px; }
    .list-input-group input { flex-grow: 1; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1em; background: var(--bg-gray); transition: all 0.2s; color: var(--text-main); font-family: inherit; }
    .list-input-group input:focus { border-color: var(--accent-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); outline: none; }
    .btn-add { padding: 0 24px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.95em; transition: 0.2s; display: flex; align-items: center; gap: 8px; }
    .btn-add:hover { background: #172a6b; }
    
    .sortable-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
    .sortable-item { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid transparent; padding: 4px 8px; border-radius: var(--radius-sm); transition: 0.2s; border-bottom: 1px solid var(--border-color); }
    .sortable-item:hover { background: var(--bg-gray); border-color: var(--border-color); }
    
    .sortable-item .drag-handle { color: #cbd5e1; cursor: grab; display: flex; align-items: center; justify-content: center; width: 20px; font-size: 1.1em; transition: 0.2s; }
    .sortable-item:hover .drag-handle { color: #94a3b8; }
    .sortable-item .drag-handle:active { cursor: grabbing; color: var(--primary-blue); }
    
    .item-text { flex-grow: 1; display: grid; gap: 6px; align-items: center; }
    .grid-mode1 { grid-template-columns: 1.2fr 1fr 1fr 150px 110px 0.7fr 1.5fr 1.5fr; }
    .item-text.mode2 { grid-template-columns: 1fr 4fr 1.5fr; }
    .item-text.mode3 { grid-template-columns: 1fr; }
    
    .item-cell { padding: 6px 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 0.9em; line-height: 1.4; word-break: break-word; outline: none; transition: 0.2s; display: flex; align-items: center; }
    .item-cell[contenteditable="true"]:focus, .item-cell[contenteditable="true"]:hover { background: #fff; border-color: var(--accent-blue); box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.2); }
    
    .compact-input { width: 100%; border: 1px solid transparent; background: transparent; padding: 6px 8px; font-size: 0.9em; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.2s; color: var(--text-main); font-family: inherit; }
    .compact-input:focus, .compact-input:hover { border-color: #cbd5e1; background: #fff; }
    .compact-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(14,165,233,0.1); outline: none; }
    
    .time-toggles { display: flex; gap: 2px; background: #e2e8f0; padding: 2px; border-radius: 6px; justify-content: space-between; align-items: center;}
    .time-btn { flex-grow: 1; border: none; background: transparent; padding: 4px; border-radius: 4px; cursor: pointer; transition: 0.2s; font-size: 1.1em; filter: grayscale(100%); opacity: 0.4; display: flex; align-items:center; justify-content:center;}
    .time-btn.active { filter: grayscale(0%); opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
    .time-btn:hover { opacity: 0.8; }
    
    .time-inputs { display: flex; width: 100%; gap: 2px; justify-content: space-between; }
    .time-inputs input[type="time"] { flex: 1; min-width: 0; padding: 2px 0; text-align: center; font-size: 0.75em; border: 1px solid transparent; border-radius: 4px; outline: none; background: transparent; transition: 0.2s; color: var(--text-muted); font-weight: 600; }
    .time-inputs input[type="time"]:focus, .time-inputs input[type="time"]:hover { border-color: #cbd5e1; background: #fff; color: var(--text-main); }
    .time-inputs input[type="time"]::-webkit-calendar-picker-indicator, .time-inputs input[type="time"]::-webkit-inner-spin-button, .time-inputs input[type="time"]::-webkit-clear-button { display: none; }

    .sortable-item .delete-btn { background: transparent; border: none; color: #ef4444; cursor: pointer; transition: 0.2s; padding: 6px; font-size: 1.1em; opacity: 0; pointer-events: none; }
    .sortable-item:hover .delete-btn { opacity: 0.6; pointer-events: auto; }
    .sortable-item .delete-btn:hover { opacity: 1; background: #fee2e2; border-radius: 4px; }
    
    .empty-list-msg { text-align: center; color: var(--text-muted); font-size: 0.9em; padding: 25px; border: 2px dashed var(--border-color); border-radius: var(--radius-sm); background: var(--bg-gray); }
    
    .action-buttons-footer { background: var(--surface); padding: 15px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; position: sticky; bottom: 15px; flex-wrap: wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 100; }
    .action-buttons-footer button { padding: 10px 20px; border-radius: 50px; cursor: pointer; font-weight: 600; border: 1px solid transparent; transition: all 0.2s; display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
    
    .action-buttons-footer button.export-trigger { background: var(--surface); color: var(--primary-blue); border-color: var(--primary-blue); }
    .action-buttons-footer button.export-trigger:hover { background: var(--hover-blue); }
    #copy-all-button { background: var(--primary-blue); color: white; }
    #copy-all-button:hover { background: #172a6b; box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3); transform: translateY(-2px); }
    #clear-all-button { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
    #clear-all-button:hover { background: #fca5a5; color: #991b1b; }

    .modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(4px); z-index: 2000; align-items: center; justify-content: center; padding: 15px;}
    .modal-content { background: #fff; padding: 30px; border-radius: var(--radius-lg); width: 100%; max-width: 450px; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}
    .modal-content.large { max-width: 900px; }
    .modal-content h2 { margin-top: 0; margin-bottom: 25px; color: var(--primary-blue); font-size: 1.5em; }
    .modal-content label { display: block; font-size: 0.85em; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
    .modal-content input[type="text"], .modal-content input[type="password"], .modal-content input[type="number"], .modal-content input[type="email"], .modal-content textarea, .modal-content select { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-sizing: border-box; font-family: inherit; background: var(--bg-gray); transition: all 0.2s;}
    .modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus { outline: none; border-color: var(--accent-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);}
    .modal-content button.btn-primary { width: 100%; padding: 14px; background: var(--accent-blue); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: bold; font-size: 1em; transition: background 0.2s;}
    .modal-content button.btn-primary:hover { background: #0284c7; }
    .close-modal { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 1.2em; color: #9ca3af; transition: color 0.2s;}
    .close-modal:hover { color: var(--text-main); }
    
    .export-card { border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 15px; cursor: pointer; transition: 0.2s; flex: 1; text-align: center; background: var(--bg-gray); }
    .export-card:hover { border-color: var(--primary-blue); background: var(--hover-blue); box-shadow: 0 4px 10px rgba(14,165,233,0.1); }
    .export-card:hover span { color: var(--primary-blue); font-weight: bold; }
    .exp-preview { height: 70px; background: #fff; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
    .exp-preview.mode1 .h { background: #e0f2ff; height: 8px; width: 100%; border-radius: 2px; }
    .exp-preview.mode1 .r { border: 1px solid #e2e8f0; height: 6px; width: 100%; border-radius: 2px; }
    .exp-preview.mode2 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2px; }
    .exp-preview.mode2 .c { border: 1px solid #e2e8f0; height: 100%; border-radius: 2px; }
    .exp-preview.mode2 .c.hd { background: #f1f5f9; }
    .exp-preview.mode3 .l { display: flex; align-items: center; gap: 4px; height: 8px; }
    .exp-preview.mode3 .l:before { content: ''; display: block; width: 4px; height: 4px; background: #94a3b8; border-radius: 50%; }
    .exp-preview.mode3 .l:after { content: ''; display: block; height: 4px; width: 80%; background: #e2e8f0; border-radius: 2px; }

    .pin-container { display: none; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 15px; border-radius: var(--radius-sm); margin-bottom: 15px; }
    @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
    .recording { background: #ef4444 !important; color: white !important; animation: pulse-red 1.5s infinite; border-color: #ef4444 !important; }
    .ui-autocomplete { z-index: 3000 !important; max-height: 250px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
    .template-list-btn { background: var(--bg-gray); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 16px; cursor: pointer; color: var(--text-main); transition: all 0.2s; display: flex; align-items: center; justify-content: space-between; flex-grow: 1; text-align: left; font-size: 1.05em; margin-bottom:8px;}
    .template-list-btn:hover { background: var(--hover-blue); border-color: var(--accent-blue); }
    .template-list-btn b { color: var(--primary-blue); font-weight: 600; }

/* --- Меню автоперевода --- */
.translate-btn-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 10; }
.translate-btn-wrapper .translate-btn { position: relative; z-index: 2; cursor: default; }
.translate-edit-dropdown { 
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); 
    background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); 
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15); z-index: 110; padding: 4px; min-width: 45px; 
    opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; flex-direction: column; gap: 2px; 
}
.translate-btn-wrapper.active .translate-edit-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(5px); }
.translate-edit-dropdown button { 
    background: transparent; border: none; color: var(--text-main); cursor: pointer; 
    font-size: 0.9em; font-weight: 600; display: flex; align-items: center; justify-content: center; 
    border-radius: 4px; transition: all 0.2s; width: 100%; height: 30px; padding: 0 10px; 
}
.translate-edit-dropdown button:hover { background: var(--hover-blue); color: var(--primary-blue); }
.translate-edit-dropdown .divider { height: 1px; background: var(--border-color); margin: 2px 0; width: 100%; }

    .edit-row-input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: monospace; font-size: 14px; background: var(--surface); color: var(--text-main); margin-bottom: 5px; }
    .edit-row-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(14,165,233,0.1); }
    .edit-row-wrapper { display:flex; align-items:center; gap:8px; margin-bottom:5px; background:var(--bg-gray); padding:5px 10px; border-radius:4px; border:1px solid var(--border-color); }

/* --- СТИЛИ КНОПКИ "АРХИВ" (Прозрачный стиль с анимацией вибрации) --- */

.archive-combo-wrapper {
    position: relative;
    display: flex;
    border-radius: 15px; 
    background: transparent;
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
    height: 40px; 
}

.archive-combo-wrapper:hover {
    background: #f3f4f6; 
    border-color: #e5e7eb;
    box-shadow: 0 5px 12px rgba(156, 163, 175, 0.2);
    z-index: 2;
}

.archive-combo-wrapper > button {
    background: transparent !important;
    border: none !important;
    color: #9ca3af !important; 
    box-shadow: none !important;
    transform: none !important; /* Отключаем любые сдвиги */
    font-size: 0.85em !important;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.archive-combo-wrapper:hover > button {
    color: #4b5563 !important;
}

.archive-combo-wrapper .archive-main { padding: 8px 8px 8px 16px; border-radius: 15px 0 0 15px; }
.archive-combo-wrapper .archive-trigger { padding: 8px 12px 8px 6px; border-radius: 0 15px 15px 0; }

/* Вращение стрелочки при открытии меню (оставляем, так как это функциональная анимация) */
.archive-combo-wrapper .archive-trigger i { transition: transform 0.3s ease; }
.archive-combo-wrapper.active .archive-trigger i { transform: rotate(180deg); }

@keyframes archive-shake {
    0% { transform: rotate(-12deg) scale(1.1); }
    100% { transform: rotate(12deg) scale(1.1); }
}

/* Вращение стрелочки при открытии меню */
.archive-combo-wrapper .archive-trigger i { transition: transform 0.3s ease; }
.archive-combo-wrapper.active .archive-trigger i { transform: rotate(180deg); }

/* --- Выпадающее меню (Dropup) --- */
.archive-dropup {
    position: absolute;
    bottom: 100%;
    right: 50%; /* Центрирование над кнопкой */
    transform: translateX(50%) translateY(15px);
    margin-bottom: 15px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1; 
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.archive-combo-wrapper.active .archive-dropup {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
    z-index: 110;
}

/* Кнопки внутри выпадающего меню */
.archive-dropup button {
    background: transparent !important;
    color: var(--text-main) !important;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 15px;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    font-size: 1em !important;
    border: none !important;
}

.archive-dropup button:hover {
    background: var(--hover-blue) !important;
    color: var(--primary-blue) !important;
}

/* Списки внутри модального окна Архива (остаются как были) */
.archive-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--border-color); transition: 0.2s; }
.archive-item:hover { background: var(--bg-gray); }

/* Увеличение ширины модального окна / меню архива */
#archive-combo .translate-edit-dropdown,
#archive-combo .combo-content {
    min-width: 600px !important; /* Увеличено примерно в 2 раза (подстройте при необходимости) */
    width: 60vw !important;
    max-width: 800px;
}

/* Если архив реализован через классическое модальное окно (.modal-content) */
#archiveModal .modal-content {
    max-width: 800px !important;
}

/* --- Стили для панели Экспорта / Печати --- */
.export-combo-wrapper { position: relative; display: flex; }
.export-btn-main {
    background: var(--surface); color: var(--primary-blue); border: 1px solid var(--primary-blue);
    padding: 10px 20px; border-radius: 50px; cursor: pointer; font-weight: 600;
    display: flex; align-items: center; gap: 8px; transition: all 0.2s; font-size: 0.9em;
}
.export-btn-main:hover { background: var(--hover-blue); }

.export-dropup {
    position: absolute; bottom: 100%; right: 0; margin-bottom: 15px;
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 0; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 110; width: 350px; overflow: hidden;
}
.export-combo-wrapper.active .export-dropup { opacity: 1; visibility: visible; transform: translateY(0); }

.exp-views-container { display: flex; width: 200%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.exp-view { width: 50%; flex-shrink: 0; padding: 15px; box-sizing: border-box; }

.exp-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.export-card-mini {
    position: relative; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 12px 5px; text-align: center; cursor: pointer; transition: 0.2s; background: var(--bg-gray);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 85px;
}
.export-card-mini:hover { border-color: var(--primary-blue); background: var(--hover-blue); box-shadow: 0 4px 6px rgba(14,165,233,0.1); }
.export-card-mini span { font-size: 0.75em; line-height: 1.1; font-weight: 600; color: var(--text-main); }

.exp-badge {
    position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    background: var(--primary-blue); color: white; font-size: 0.65em; padding: 3px 8px;
    border-radius: 10px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.exp-clear-btn {
    position: absolute; top: -8px; right: -8px; background: #ef4444; color: white;
    border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 0.75em; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: 0.2s; z-index: 2;
}
.exp-clear-btn:hover { background: #dc2626; transform: scale(1.15); }

    .diag-tab-btn { padding: 8px 16px; border: none; background: transparent; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 600; color: var(--text-muted); transition: 0.2s; font-size:0.95em; }
    .diag-tab-btn:hover { color: var(--primary-blue); }
    .diag-tab-btn.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }
    
    .calc-tab-btn { padding:8px 16px; border:none; background:var(--bg-gray); border-radius:var(--radius-sm); cursor:pointer; font-weight:600; color:var(--text-muted); transition:0.2s; }
    .calc-tab-btn.active { background:var(--primary-blue); color:white; }
    .calc-nav-btn { display:block; width:100%; text-align:left; padding:10px; border:1px solid transparent; background:transparent; border-radius:var(--radius-sm); cursor:pointer; color:var(--text-main); font-size:0.95em; transition:0.2s; }
    .calc-nav-btn:hover { background:var(--hover-blue); }
    .calc-nav-btn.active { background:var(--hover-blue); border-color:var(--accent-blue); color:var(--primary-blue); font-weight:600; }
    .calc-result-box { background:#f0fdf4; border:1px solid #bbf7d0; padding:15px; border-radius:var(--radius-sm); margin-top:15px; display:none; }
    .calc-result-box.danger { background:#fef2f2; border-color:#fecaca; }
    .calc-result-box.warn { background:#fffbeb; border-color:#fde68a; }
    .calc-checkbox-label { display:flex; align-items:center; gap:8px; margin-bottom:8px; cursor:pointer; font-size:0.95em; }
    .calc-checkbox-label input { width:auto; margin:0; }
    .score-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; margin-top:12px; border: 1px solid rgba(0,0,0,0.1); position:relative; }
    .score-bar div { transition: 0.3s; }
    .score-marker { position:absolute; top:-2px; bottom:-2px; width:4px; background:#000; border-radius:2px; box-shadow:0 0 4px rgba(0,0,0,0.5); transition: 0.3s; }

    .diag-split { display:flex; gap:15px; min-height: 400px; height: 100%; }
    .diag-list { width: 35%; border-right: 1px solid var(--border-color); padding-right: 10px; overflow-y: auto; max-height: 500px; display: flex; flex-direction: column; gap: 8px; }
    .diag-results { width: 65%; padding-left: 10px; overflow-y: auto; max-height: 500px; display: flex; flex-direction: column; gap: 15px; }
    .diag-group-title { font-size: 0.9em; font-weight: bold; color: var(--primary-blue); margin: 10px 0 5px 0; border-bottom: 1px solid var(--hover-blue); padding-bottom: 3px; }
    .diag-item-label { display: flex; align-items: center; gap: 8px; font-size: 0.95em; cursor: pointer; transition: 0.2s; padding: 4px; border-radius: 4px; }
    .diag-item-label:hover { background: var(--hover-blue); }
    .diag-item-label.selected { background: #e0f2fe; color: var(--primary-blue); font-weight: bold; }
    .diag-item-label input[type="checkbox"] { margin: 0; cursor: pointer; }
    
    .diag-res-box { background: var(--bg-gray); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px; display: none; }
    .diag-res-box.active { display: block; animation: fadeIn 0.2s ease; }
    .diag-res-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: bold; color: var(--text-main); }
    .diag-res-norm { font-size: 0.8em; color: var(--text-muted); font-weight: normal; }
    .diag-res-input { width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; box-sizing: border-box; font-family: inherit; }
    .diag-res-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15); }
    .diag-res-textarea { width: 100%; min-height: 80px; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; box-sizing: border-box; resize: vertical; font-family: inherit; line-height: 1.4; }
    .badge-norm { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; font-weight: bold; margin-left: 8px; }
    .badge-high { background: #fee2e2; color: #dc2626; }
    .badge-low { background: #dbeafe; color: #2563eb; }
    .badge-ok { background: #dcfce3; color: #16a34a; }

    .struct-item-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border-color); transition:0.2s;}
    .struct-item-row:hover { background: var(--hover-blue); }
    .struct-item-row .info { display:flex; flex-direction:column; gap:4px; }
    
    .diag-results { display: flex; flex-direction: column; gap: 0 !important; }
    .obs-compact-row { 
    display: grid !important; 
    /* 1:Название(1fr) | 2:Дата(125px) | 3:Результат(90px) | 4:Статус(35px) | 5:Норма(120px) */
    grid-template-columns: 1fr 125px 90px 35px 120px !important; 
    align-items: center; 
    width: 100%; 
    gap: 25px !important; /* Увеличиваем расстояние (gap) между полями */
}
    .obs-compact-input { width: 100%; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.9em; text-align: center; color: var(--primary-blue); font-weight: 600; background: #ffffff; height: 28px; transition: all 0.2s ease; }
    .obs-compact-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15); }
    .obs-compact-norm { font-size: 0.8em; color: var(--text-muted); text-align: right; line-height: 1.2; }
    
    .gender-toggle {position: relative; display: flex; background: #e5e7eb; border-radius: var(--radius-sm); height: 40px; box-sizing: border-box; padding: 3px; gap: 0; z-index: 1;}
    .gender-toggle input[type="radio"] { display: none; }
    .gender-toggle label {flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9em; font-weight: 600; color: var(--text-muted); margin: 0; border-radius: 4px; text-transform: none; letter-spacing: normal; transition: color 0.3s ease; z-index: 2; }
    .gender-toggle::before {content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px;width: calc(50% - 3px); background: var(--surface); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1;}
    .gender-toggle:has(#gender-m:checked)::before { transform: translateX(0); }
    .gender-toggle:has(#gender-f:checked)::before { transform: translateX(100%); }
    .gender-toggle input[type="radio"]:checked + label { background: transparent !important; box-shadow: none !important; transform: none !important; color: var(--primary-blue); }
    .gender-toggle input[type="radio"]#gender-f:checked + label { color: #db2777; }
    .gender-toggle label:hover { transform: none !important; background: transparent !important; }
    .gender-toggle:has(label:hover) label:hover { color: var(--primary-blue); }

    .btn-modal-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary-blue); color: #ffffff; border: none; border-radius: var(--radius-sm); padding: 0 20px; font-size: 0.95em; font-weight: 600; cursor: pointer; transition: background 0.2s ease; height: 40px; box-sizing: border-box; flex-shrink: 0; }
    .btn-modal-add:hover { background: #172a6b; }
    
    .sort-disabled .drag-handle { display: none !important; }

    .toggle-switch { position: relative; display: flex !important; align-items: center; cursor: pointer; gap: 8px; font-size: 0.95em; font-weight: 600; color: var(--text-main); user-select: none; margin: 0 !important; height: 40px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; margin: 0; }
    .toggle-slider { position: relative; display: block; flex-shrink: 0; width: 44px; height: 24px; background-color: var(--border-color); border-radius: 34px; transition: background-color 0.3s; }
    .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .toggle-switch input:checked + .toggle-slider { background-color: var(--primary-blue); }
    .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }
    .toggle-switch span[data-i18n] { display: block; line-height: 1; transform: translateY(1px); }
    
    .global-loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(3px); z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease-in-out; }
    .global-loader.active { opacity: 1; }

.text-loader { 
    font-size: 1.25em; 
    font-weight: 600; 
    color: var(--primary-blue); 
    animation: text-pulse 1.5s infinite ease-in-out; 
}
.text-loader::after { 
    content: ''; 
    display: inline-block; 
    width: 1.5em; /* Фиксируем ширину, чтобы текст не прыгал */
    text-align: left; 
    animation: text-dots 1.5s infinite steps(4, end); 
}

/* Анимация пульсации (прозрачность) */
@keyframes text-pulse { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.5; } 
}

/* Бегущие точки */
@keyframes text-dots { 
    0% { content: ''; } 
    25% { content: '.'; } 
    50% { content: '..'; } 
    75% { content: '...'; } 
    100% { content: ''; } 
}

/* --- Новая стилистика нижней панели кнопок --- */
.action-buttons-footer {
    display: flex;
    justify-content: center; /* Центрируем всё */
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 30px;
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto;
    position: sticky;
    bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Общий стиль для второстепенных кнопок (Архив и Очистить) */
.btn-secondary-minimal {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    padding: 8px 16px !important;
    font-size: 0.85em !important;
    border-radius: 15px !important;
    height: 40px !important;
    box-shadow: none !important;
}
.btn-secondary-minimal:hover {
    background: #e5e7eb !important;
    color: #1f2937 !important;
    transform: none !important;
}

/* Особый стиль для "Очистить всё" (еще более тусклый) */
#clear-all-button {
    background: transparent !important;
    color: #9ca3af !important; 
    border: 1px solid #f3f4f6 !important;
    transform: none !important;
}

/* Ховер: только изменение цвета на красноватый, без сдвига */
#clear-all-button:hover {
    background: #fef2f2 !important; 
    color: #dc2626 !important; 
    border-color: #fecaca !important;
    box-shadow: 0 5px 12px rgba(220, 38, 38, 0.15) !important;
    transform: none !important;
}

#clear-all-button:hover i {
    color: #ef4444; /* Иконка просто меняет цвет без вибрации */
}

#clear-all-button:active {
    transform: none !important; /* Отключаем эффект прожатия, если он был */
}
/* --- ВАРИАНТ 3: МЕДИЦИНСКИЙ РАДАР (SONAR PULSE) --- */
.export-btn-float {
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 50% !important;
    background: #0284c7 !important;
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
}

/* Создаем два невидимых круга для волн */
.export-btn-float::before, 
.export-btn-float::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #38bdf8; /* Голубой контур */
    z-index: -1;
    opacity: 0;
}

/* Запуск волн при наведении */
.export-btn-float:hover {
    background: #0369a1 !important;
    transform: translateY(-3px);
}

.export-btn-float:hover::before {
    animation: sonar-wave 1.5s ease-out infinite;
}
.export-btn-float:hover::after {
    animation: sonar-wave 1.5s ease-out 0.75s infinite; /* Вторая волна с задержкой */
}

.export-btn-float i { font-size: 1.6em; transition: 0.3s; }
.export-btn-float:hover i { transform: scale(1.1); text-shadow: 0 0 8px rgba(255,255,255,0.8); }

@keyframes sonar-wave {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.export-dropup, .archive-dropup {right: 50%; transform: translateX(50%) translateY(15px);}
.export-combo-wrapper.active .export-dropup, 
.archive-combo-wrapper.active .archive-dropup { transform: translateX(50%) translateY(0);}

@keyframes spin-gear-smooth {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.auth-panel button[onclick*="settingsModal"] i {    transition: transform 0.3s ease-in-out;    display: inline-block;}
.auth-panel button[onclick*="settingsModal"]:hover i {    animation: spin-gear-smooth 2.5s linear infinite;}
.auth-panel button[onclick*="logout"] i {    transition: transform 0.3s ease-in-out;    display: inline-block;}
.auth-panel button[onclick*="logout"]:hover i {    transform: translateX(4px);}

.skeleton-box {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.skeleton-box::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmer 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes shimmer { 
    100% { transform: translateX(100%); } 
}

/* --- СОВРЕМЕННЫЙ ДИЗАЙН ДЛЯ ПОЛЕЙ ДАТЫ В ОБСЛЕДОВАНИЯХ --- */
input[type="date"].obs-compact-input {
    /* Современный системный шрифт (Apple, Windows, Android) */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    
    /* Аккуратный фон и границы */
    background-color: #f1f5f9 !important; /* Очень мягкий серо-голубой оттенок */
    border: 1px solid transparent !important;
    border-radius: 6px !important; /* Мягкие скругления */
    padding: 4px 8px !important;
    outline: none !important;
    
    /* Плавная анимация */
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
}

/* Эффект при наведении и клике */
input[type="date"].obs-compact-input:hover,
input[type="date"].obs-compact-input:focus {
    background-color: #ffffff !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; /* Легкое свечение */
}

/* Стилизация самой иконки календарика (для Chrome/Safari) */
input[type="date"].obs-compact-input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="date"].obs-compact-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.1); /* Иконка слегка увеличивается */
}

:root {
  /* Цвета лоадера */
  --loader-bg: #f9fafb;
  --loader-primary: #030303; 
  --loader-accent: #c70000; 
}

#modern-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--loader-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999; /* Поверх всех элементов */
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Класс для плавного скрытия */
#modern-preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Внешнее кольцо */
.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--loader-primary);
  border-right-color: var(--loader-primary);
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Внутреннее кольцо */
.spinner-ring.inner {
  width: 65%;
  height: 65%;
  border-top-color: var(--loader-accent);
  border-right-color: transparent;
  border-left-color: var(--loader-accent);
  border-bottom-color: transparent;
  animation: spin-reverse 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Пульсирующий центр */
.pulse-dot {
  width: 12px;
  height: 12px;
  background: var(--loader-accent);
  border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}

/* Ключевые кадры анимации */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Принудительное расширение окна (флаг !important перебьет любые старые стили) */
#calcModal .modal-content {
    max-width: 1300px !important; 
    width: 98% !important;        
    padding: 30px !important;     
    transition: all 0.3s ease;
}

/* Оптимизация распределения колонок на большой ширине */
.calc-split-container {
    display: flex;
    gap: 40px;         /* Увеличенный зазор между вводом и результатом */
    align-items: flex-start;
}

/* Левая колонка (Ввод) — теперь чуть шире для комфортного расположения чекбоксов */
.calc-inputs-column {
    flex: 1.4;         
    min-width: 400px;
}

/* Правая колонка (Результат и Инфо) */
.calc-info-column {
    flex: 1;
    position: sticky;
    top: 20px;
    background: #f8fafc;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Сетка чекбоксов теперь может быть в 3 колонки на очень широких экранах */
@media (min-width: 1200px) {
    .calc-inputs-column div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* Правая колонка: Информация и результат (закреплена при скролле) */
.calc-info-column {
    flex: 1;
    position: sticky;
    top: 10px;
    background: #f1f5f9;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

/* 2. Эффект Lightbox для изображений */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.9); /* Глубокий темный фон */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000000;
    cursor: zoom-out;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.lightbox-img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-overlay.active { display: flex; }
.lightbox-overlay.active .lightbox-img { transform: scale(1); }

/* Индикатор возможности клика на матрицу */
.zoom-trigger {
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zoom-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Стили для водяного знака при печати */
@media print {
    /* Фоновый водяной знак (диагональный) */
    .has-watermark::before {
        content: "CARDIOGRAM.UZ";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 80pt;
        color: rgba(0, 0, 0, 0.04) !important; /* Очень бледный, чтобы не мешать тексту */
        z-index: -1;
        white-space: nowrap;
        pointer-events: none;
    }

    /* Подпись в футере каждой страницы */
    .has-watermark::after {
        content: "Документ сформирован на платформе CARDIOGRAM.UZ";
        position: fixed;
        bottom: 10mm;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 9pt;
        color: #888 !important;
        border-top: 0.5pt solid #eee;
        padding-top: 5px;
    }
}

/* Скрываем эти элементы в обычном интерфейсе браузера */
.watermark-footer { display: none; }

/* Простая и надежная кнопка PRO */
.btn-pro-simple {
    background-color: #f59e0b !important; /* Классический золотой/янтарный */
    color: #ffffff !important;
    border: 1px solid #d97706 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    margin: 0 5px;
    height: auto !important; /* Защита от сплющивания */
}

.btn-pro-simple:hover {
    background-color: #d97706 !important;
}

/* --- COOKIE BANNER --- */
.cookie-banner {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 650px;
    background: var(--surface); /* Белый фон */
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); /* Мягкая тень как на скриншоте */
    border-radius: var(--radius-md);
    padding: 12px 20px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    z-index: 1900;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner-text {
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--text-main);
    margin: 0;
    flex-grow: 1;
}

.cookie-banner-btn {
    background: var(--primary-blue); /* Темно-синяя кнопка */
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
    transition: all 0.2s;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-banner-btn:hover {
    background: var(--accent-blue);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        bottom: 15px;
    }
    .cookie-banner-btn {
        width: 100%;
    }
}

/* ========================================================= */
/* ИНТЕРАКТИВНАЯ СЕТКА ВЫБОРА РЕЖИМОВ (С ЕДИНОЙ ВЫСОТОЙ) */
/* ========================================================= */

.mode-row-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch; /* Рамки карточек всегда одинаковой высоты */
    margin-bottom: 10px;
}

@media (max-width: 900px) {
    .mode-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mode-card-v2 {
    background: var(--surface, #ffffff);
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 24px 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.mode-card-v2:hover {
    border-color: var(--accent-blue, #3b82f6);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15);
    background: #f8fafc; /* Легкая подсветка фона при наведении */
}

/* Рамка эскизов */
.mode-sketch-box {
    width: 72px;
    height: 52px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.mode-card-v2:hover .mode-sketch-box {
    transform: scale(1.05);
}

.mode-card-v2 .mode-title {
    font-weight: 700;
    font-size: 0.95em;
    color: var(--text-main, #1e293b);
    line-height: 1.3;
    text-align: center;
}

/* === МАГИЯ АНИМАЦИИ БЕЗ СКАЧКОВ === */
/* 1. Исходное состояние: контент полностью свернут */
.mode-hover-details {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px dashed transparent;
}

/* 2. При наведении на ЛЮБУЮ часть сетки — раздвигаем высоту у ВСЕХ карточек */
.mode-row-grid:hover .mode-hover-details {
    max-height: 400px;
    margin-top: 16px;
    padding-top: 16px;
}

/* 3. Текст и линия появляются ТОЛЬКО у карточки, на которую навели */
.mode-card-v2:hover .mode-hover-details {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    border-top-color: #cbd5e1;
}

.mode-desc-text { 
    font-size: 0.85em; 
    color: var(--text-muted, #64748b); 
    line-height: 1.4; 
}

.mode-pro-tag { 
    font-size: 0.75em; 
    font-weight: 600; 
    color: #059669; 
    background: #d1fae5; 
    padding: 4px 8px; 
    border-radius: 4px; 
    width: fit-content; 
}

.mode-warn-tag { 
    font-size: 0.75em; 
    font-weight: 500; 
    color: #b45309; 
    background: #fef9c3; 
    border: 1px solid #fde047; 
    padding: 8px; 
    border-radius: 6px; 
    line-height: 1.3;
    display: flex; 
    gap: 6px; 
    align-items: flex-start;
}

.mode-danger-tag { 
    font-size: 0.75em; 
    font-weight: 500; 
    color: #dc2626; 
    background: #fee2e2; 
    border: 1px solid #fca5a5; 
    padding: 8px; 
    border-radius: 6px; 
    line-height: 1.3;
    display: flex; 
    gap: 6px; 
    align-items: flex-start;
}

/* --- ИСПРАВЛЕНИЕ СПИСКА ПРЕПАРАТОВ (SORTABLE LIST) ДЛЯ ТЕМНОЙ ТЕМЫ --- */

/* 1. Ячейки с текстом (названия препаратов, дозировки) */
[data-theme="dark"] .item-cell {
    background-color: #111827 !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Ячейки при наведении и редактировании */
[data-theme="dark"] .item-cell[contenteditable="true"]:focus, 
[data-theme="dark"] .item-cell[contenteditable="true"]:hover {
    background-color: #1e293b !important;
    border-color: var(--primary-blue) !important;
}

/* 2. Компактные инпуты внутри строк при наведении */
[data-theme="dark"] .compact-input:focus, 
[data-theme="dark"] .compact-input:hover {
    background-color: #111827 !important;
    border-color: var(--primary-blue) !important;
}

/* 3. Блок переключения времени (утро/день/вечер/ночь) */
[data-theme="dark"] .time-toggles {
    background-color: #1e293b !important; /* Темный фон подложки кнопок */
}

/* Активная кнопка времени (выбранная) */
[data-theme="dark"] .time-btn.active {
    background-color: var(--primary-blue) !important; 
    color: white !important;
}

/* 4. Поля ввода точного времени (часы:минуты) */
[data-theme="dark"] .time-inputs input[type="time"]:focus, 
[data-theme="dark"] .time-inputs input[type="time"]:hover {
    background-color: #111827 !important;
    border-color: var(--primary-blue) !important;
    color: var(--text-main) !important;
}

/* 5. Дополнительно: компактные поля в Обследованиях (если они тоже оставались белыми) */
[data-theme="dark"] .obs-compact-input {
    background-color: #111827 !important;
    border-color: var(--border-color) !important;
    color: var(--primary-blue) !important;
}
[data-theme="dark"] .obs-compact-input:focus,
[data-theme="dark"] .obs-compact-input:hover {
    background-color: #1e293b !important;
    border-color: var(--primary-blue) !important;
}

/* --- ИСПРАВЛЕНИЕ ОСТАВШИХСЯ СВЕТЛЫХ БЛОКОВ (ВКЛАДКИ, ПОЛ, ФУТЕР) --- */

/* 1. Блок выбора пола (.gender-toggle) */
[data-theme="dark"] .gender-toggle {
    background: #0f172a !important; /* Очень темный фон самой подложки */
    border: 1px solid var(--border-color) !important;
}
/* Ползунок внутри уже использует var(--surface), поэтому он станет правильного темно-синего цвета #1e293b автоматически */
[data-theme="dark"] .gender-toggle label {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .gender-toggle input[type="radio"]:checked + label {
    color: var(--primary-blue) !important; /* Оставляем красивый голубой/розовый для активного пола */
}

/* 2. Контейнер современных вкладок (.section-tabs) */
[data-theme="dark"] .section-tabs {
    background: rgba(30, 41, 59, 0.85) !important; /* Темный полупрозрачный фон (вместо белого rgba) */
    border-color: var(--border-color) !important;
}
/* Ранее заполненная вкладка (которая была светло-голубой #f0f9ff) */
[data-theme="dark"] .section-button.selected:not(.active) { 
    background: #0f172a !important; 
    color: var(--primary-blue) !important; 
}

/* 3. Нижняя плавающая панель с кнопками (.action-buttons-footer) */
[data-theme="dark"] .action-buttons-footer {
    background: rgba(30, 41, 59, 0.95) !important; /* Глубокий темный полупрозрачный цвет */
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Второстепенные кнопки внутри футера (Архив, Очистить) */
[data-theme="dark"] .btn-secondary-minimal,
[data-theme="dark"] #clear-all-button {
    background: #0f172a !important;
    color: var(--text-main) !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .btn-secondary-minimal:hover {
    background: #334155 !important;
    color: #ffffff !important;
}
[data-theme="dark"] #clear-all-button:hover {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #f87171 !important;
}

/* --- ИСПРАВЛЕНИЕ ПОЛЕЙ ОБСЛЕДОВАНИЙ И ВЫБРАННЫХ ДИАГНОЗОВ ДЛЯ ТЕМНОЙ ТЕМЫ --- */

/* 1. Поля ввода в разделе "Обследования" (текст, цифры и даты) */
[data-theme="dark"] .obs-compact-input,
[data-theme="dark"] input[type="date"].obs-compact-input {
    background-color: #111827 !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .obs-compact-input:focus,
[data-theme="dark"] input[type="date"].obs-compact-input:focus {
    background-color: #1e293b !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

/* 2. Элементы списка в разделе "Диагноз" */
[data-theme="dark"] .diag-item-label:hover {
    background-color: #1e293b !important; /* Темный фон при наведении */
}

[data-theme="dark"] .diag-item-label.selected {
    background-color: #1e3a8a !important; /* Глубокий синий фон для выбранного пункта */
    color: #38bdf8 !important; /* Яркий голубой текст для контраста */
}

/* --- ГАРАНТИРОВАННОЕ ЗАТЕМНЕНИЕ ВСЕХ ПОЛЕЙ OBS-COMPACT-INPUT --- */

/* Основное состояние для всех типов полей (текст, селекты, даты) */
[data-theme="dark"] .obs-compact-input,
[data-theme="dark"] input.obs-compact-input,
[data-theme="dark"] select.obs-compact-input,
[data-theme="dark"] input[type="date"].obs-compact-input {
    background-color: #111827 !important;
    color: var(--primary-blue) !important;
    border-color: var(--border-color) !important;
}

/* Состояние при наведении курсора (hover) и фокусе */
[data-theme="dark"] .obs-compact-input:hover,
[data-theme="dark"] .obs-compact-input:focus,
[data-theme="dark"] input.obs-compact-input:hover,
[data-theme="dark"] input.obs-compact-input:focus,
[data-theme="dark"] select.obs-compact-input:hover,
[data-theme="dark"] select.obs-compact-input:focus,
[data-theme="dark"] input[type="date"].obs-compact-input:hover,
[data-theme="dark"] input[type="date"].obs-compact-input:focus {
    background-color: #1e293b !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

/* На всякий случай затемним и текст нормы рядом с полями */
[data-theme="dark"] .obs-compact-norm {
    color: var(--text-muted) !important;
}

/* --- ИСПРАВЛЕНИЕ КАРТОЧЕК РЕЖИМОВ (MODE-CARD И MODE-HOVER-DETAILS) --- */

/* 1. Убираем белую вспышку фона при наведении на карточку */
[data-theme="dark"] .mode-card-v2:hover {
    background-color: #0f172a !important; /* Темный фон вместо белого #f8fafc */
    border-color: var(--primary-blue) !important;
}

/* 2. Линия-разделитель в выпадающем блоке деталей */
[data-theme="dark"] .mode-card-v2:hover .mode-hover-details {
    border-top-color: #334155 !important; /* Темная пунктирная линия вместо светлой */
}

/* 3. Адаптация цветных тегов (PRO, Внимание, Опасность) под темную тему */
[data-theme="dark"] .mode-pro-tag {
    background-color: #064e3b !important; /* Темно-зеленый фон */
    color: #34d399 !important; /* Светло-зеленый текст */
}

[data-theme="dark"] .mode-warn-tag {
    background-color: #422006 !important; /* Темно-желтый/коричневый фон */
    color: #fde047 !important; /* Желтый текст */
    border-color: #713f12 !important;
}

[data-theme="dark"] .mode-danger-tag {
    background-color: #450a0a !important; /* Темно-красный фон */
    color: #fca5a5 !important; /* Мягкий красный текст */
    border-color: #7f1d1d !important;
}

/* ==========================================================================
   АДАПТИВНОЕ ОГРАНИЧЕНИЕ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (Планшеты и Смартфоны)
   ========================================================================== */

/* 1. Стилизация блока предупреждения (по умолчанию скрыт на десктопах) */
.mobile-restriction-warning {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 30px;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    margin: 40px auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    max-width: 600px;
    width: 90%;
}

.mobile-restriction-warning .icon-wrapper {
    background-color: var(--hover-blue);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.mobile-restriction-warning i {
    font-size: 2.8rem;
    color: var(--primary-blue);
}

.mobile-restriction-warning h2 {
    font-size: 1.6rem;
    color: var(--text-main);
    margin-bottom: 12px;
    font-weight: 600;
}

.mobile-restriction-warning p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Поддержка вашей темной темы для окна предупреждения */
[data-theme="dark"] .mobile-restriction-warning {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .mobile-restriction-warning .icon-wrapper {
    background-color: rgba(56, 189, 248, 0.1); /* Полупрозрачный акцентный цвет */
}
[data-theme="dark"] .mobile-restriction-warning i {
    color: var(--primary-blue);
}

/* 2. Медиа-запрос: Точка срабатывания 992px (планшеты и устройства меньше) */
@media screen and (max-width: 992px) {
    /* Полностью скрываем весь рабочий функционал */
    .main-workspace-container {
        display: none !important;
    }

    /* Показываем красиво оформленное сообщение с плавной анимацией */
    .mobile-restriction-warning {
        display: flex !important;
        animation: fadeInBlock 0.5s ease-in-out;
    }
}

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