/* =========================================================
   ЛАПОТЕКА PRO — структура CSS-разделов
   ========================================================= */

/* 
   БЛОК 1: ПОДКЛЮЧЕНИЕ ШРИФТОВ                         → @import url()
   БЛОК 2: CSS-ПЕРЕМЕННЫЕ (СВЕТЛАЯ ТЕМА)              → :root {}
   БЛОК 3: ТЁМНАЯ ТЕМА                                 → body.dark-theme {}
   БЛОК 4: ГЛОБАЛЬНЫЕ СТИЛИ BODY                       → body {}
   БЛОК 5: ДЕКОРАТИВНЫЕ ФОНОВЫЕ ЭЛЕМЕНТЫ               → body::before, body::after
   БЛОК 6: ВЕРХНЯЯ ПАНЕЛЬ (TOP BAR)                    → .top-bar, .top-logo
   БЛОК 7: ОСНОВНОЙ КОНТЕЙНЕР И САЙДБАР                → .container, .sidebar
   БЛОК 8: СПИСОК ПИТОМЦЕВ В САЙДБАРЕ                 → .pet-list-title, .pet-list, .pet-item
   БЛОК 9: НАВИГАЦИОННОЕ МЕНЮ                          → .nav-menu, .nav-item
   БЛОК 10: ОСНОВНОЙ КОНТЕНТ                           → .main-content, .content-card, h2
   БЛОК 11: ТАБЛИЦЫ                                    → table, th, td
   БЛОК 12: ИНФОРМАЦИОННЫЕ КАРТОЧКИ (INFO-BOX)         → .info-grid, .info-box
   БЛОК 13: ЗДОРОВЬЕ - ВКЛАДКИ                         → .health-tabs, .h-tab
   БЛОК 14: ПРАВАЯ ПАНЕЛЬ (RIGHT ASIDE)                → .right-aside
   БЛОК 15: КАЛЕНДАРЬ                                  → .calendar-nav, .calendar-grid, .cal-day
   БЛОК 16: МИНИ-ПЛАНЫ В ПРАВОЙ ПАНЕЛИ                 → .aside-subtitle, .plan-mini
   БЛОК 17: КНОПКИ (ВСЕ ТИПЫ)                          → .btn, .btn-outline, .btn-primary, .btn-sm
   БЛОК 18: ПОЛЯ ВВОДА (INPUTS)                        → .res-input, .is-danger
   БЛОК 19: МЕТРИКИ И ГРАФИКИ                          → .metrics-selector, .metrics-info, .metrics-chart-container
   БЛОК 20: ЛАБОРАТОРИИ И КЛИНИКИ                      → .labs-grid, .lab-card, .lab-map-link
   БЛОК 21: АРХИВ                                      → .section-title, .archive-item
   БЛОК 22: ПЕРЕКЛЮЧАТЕЛЬ (TOGGLE SWITCH)              → .switch, .slider
   БЛОК 23: НАСТРОЙКИ                                  → .settings-item
   БЛОК 24: ТАРИФЫ И ПОДПИСКИ                          → .tariff-grid, .tariff-card, .subscription-banner
   БЛОК 25: ПРОФИЛЬ (АВАТАР, КОНТАКТЫ, РАСХОДЫ)       → .profile-avatar, .contacts-grid, .expense-summary
   БЛОК 26: КНОПКА ПРОФИЛЯ В ШАПКЕ И ВЫПАДАЮЩЕЕ МЕНЮ   → .header-profile-btn, .profile-dropdown
   БЛОК 27: МОДАЛЬНЫЕ ОКНА                             → .modal-overlay, .modal-container, .modal-header
   БЛОК 28: АНИМАЦИИ                                   → @keyframes fadeIn, slideIn, slideUp
   БЛОК 29: АЛЬБОМ ПИТОМЦЕВ                            → .pet-album-button, .album-modal, .album-pet-item
   БЛОК 30: МЕДИА-ЗАПРОСЫ (АДАПТИВНОСТЬ)               → @media (max-width: 992px), (768px), (480px)
   БЛОК 31: ПЕЧАТЬ                                     → @media print
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Montserrat:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

/* =========================================================
   БЛОК 0: СТИЛИ РАЗДЕЛА "ПРИЛОЖЕНИЕ"
   ========================================================= */

/* Основная сетка: два вертикальных блока + нижний горизонтальный */
.app-layout {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.app-layout-left {
    flex: 1;
    min-width: 0;
}

.app-layout-right {
    flex: 0 0 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-layout-bottom {
    width: 100%;
}

/* Карточка описания приложения */
.app-description-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    height: 100%;
}

.app-description-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.app-description-icon {
    font-size: 48px;
    line-height: 1;
}

.app-description-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.app-description-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.app-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-main);
}

.app-features-list li::before {
    content: '✅';
    flex-shrink: 0;
}

/* Блок разделов (кнопки) */
.app-sections-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}

.app-sections-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 16px 0;
}

.app-sections-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.app-section-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    width: 100%;
    flex-shrink: 0;
}

.app-section-btn:hover {
    transform: translateX(4px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(45, 95, 158, 0.15);
    background: var(--accent-light);
}

.app-section-btn-icon {
    font-size: 20px;
    flex-shrink: 0;
}

/* Блок "О программе" */
.app-about-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.app-about-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-about-info {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.app-about-info p {
    margin: 0 0 8px 0;
}

.app-about-info strong {
    color: var(--text-main);
}

.app-about-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

/* Кнопка "Поделиться" с выпадающим меню */
.share-button-wrapper {
    position: relative;
}

.share-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 100;
    display: none;
}

.share-dropdown.active {
    display: block;
}

.share-link-input {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    background: var(--input-bg);
    color: var(--text-main);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.share-social-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.share-social-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 10px;
    font-size: 12px;
}

/* Адаптивность: на мобильных блоки идут вертикально */
@media (max-width: 992px) {
    .app-layout {
        flex-direction: column;
    }
    .app-layout-right {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .app-description-card,
    .app-sections-card,
    .app-about-card {
        padding: 16px;
    }
    .app-description-icon {
        font-size: 36px;
    }
    .app-description-title {
        font-size: 20px;
    }
    .app-section-btn {
        padding: 12px 14px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .about-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .about-btn {
        padding: 16px 8px;
        border-radius: 12px;
    }
    .about-btn-icon {
        font-size: 24px;
    }
    .about-btn-text {
        font-size: 11px;
    }

    .symptom-card {
        position: relative;
        cursor: pointer;
    }
    .symptom-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .symptom-card-row {
        flex-direction: column;
    }
    .symptom-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .symptom-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .symptom-card-date {
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .symptom-card-btns,
    .symptom-card .btn-edit-contact,
    .symptom-card .btn-delete-contact {
        display: none !important;
    }
    .symptom-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .symptom-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }

    .vaccine-card {
        position: relative;
        cursor: pointer;
    }
    .vaccine-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .vaccine-card-row {
        flex-direction: column;
    }
    .vaccine-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .vaccine-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .vaccine-card-date {
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .vaccine-card-btns,
    .vaccine-card .btn-edit-contact,
    .vaccine-card .btn-delete-contact {
        display: none !important;
    }
    .vaccine-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .vaccine-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }

    .med-card {
        position: relative;
        cursor: pointer;
    }
    .med-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .med-card-row {
        flex-direction: column;
    }
    .med-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .med-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .med-card-date {
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .med-card-btns,
    .med-card .btn-edit-contact,
    .med-card .btn-delete-contact {
        display: none !important;
    }
    .med-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .med-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }

    .planner-card {
        position: relative;
        cursor: pointer;
    }
    .planner-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .planner-card-row {
        flex-direction: column;
    }
    .planner-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .planner-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .planner-card-date {
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .planner-card-btns,
    .planner-card .btn-edit-contact,
    .planner-card .btn-delete-contact {
        display: none !important;
    }
    .planner-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .planner-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }

    .expense-card {
        position: relative;
        cursor: pointer;
    }
    .expense-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .expense-card-row {
        flex-direction: column;
    }
    .expense-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .expense-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .expense-card-date {
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .expense-card-btns,
    .expense-card .btn-edit-contact,
    .expense-card .btn-delete-contact {
        display: none !important;
    }
    .expense-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .expense-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }

    .gastro-card {
        position: relative;
        cursor: pointer;
    }
    .gastro-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .gastro-card-row {
        flex-direction: column;
    }
    .gastro-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .gastro-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .gastro-card-date {
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .gastro-card-btns,
    .gastro-card .btn-edit-contact,
    .gastro-card .btn-delete-contact {
        display: none !important;
    }
    .gastro-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .gastro-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }

    .contact-card {
        position: relative;
        cursor: pointer;
    }
    .contact-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .contact-card-row {
        flex-direction: column;
    }
    .contact-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .contact-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .contact-card-date {
        display: block;
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .contact-card-btns,
    .contact-card .btn-edit-contact,
    .contact-card .btn-delete-contact {
        display: none !important;
    }
    .contact-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .contact-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }

    .link-card {
        position: relative;
        cursor: pointer;
    }
    .link-card:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    .link-card-row {
        flex-direction: column;
    }
    .link-card-info {
        flex: 1 1 100%;
        min-width: 0;
        padding-top: 26px;
    }
    .link-card-meta {
        height: 0;
        width: 100%;
        overflow: hidden;
    }
    .link-card-date {
        position: absolute;
        top: 12px;
        left: 12px;
        max-width: 65%;
        white-space: normal;
        word-break: break-word;
        text-align: left;
        z-index: 1;
    }
    .link-card-btns,
    .link-card .btn-edit-link,
    .link-card .btn-delete-link {
        display: none !important;
    }
    .link-card-del {
        display: flex;
        position: absolute;
        top: 8px;
        right: 10px;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: #ef4444;
        line-height: 1;
        z-index: 2;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.08);
    }
    .link-card-del:active {
        background: rgba(239, 68, 68, 0.2);
    }
}

/* =========================================================
   БЛОК 0: СТИЛИ РЕДАКТОРА НОРМ
   ========================================================= */
.norm-editor-input {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    text-align: center;
    width: 70px;
    transition: border-color 0.2s;
}

.norm-editor-input:focus {
    outline: none;
    border-color: #2D5F9E;
    box-shadow: 0 0 0 2px rgba(45, 95, 158, 0.1);
}

.norm-editor-add-btn {
    font-size: 13px;
    padding: 6px 14px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.norm-editor-add-btn:hover {
    background: #059669;
}

.norm-editor-custom-param {
    width: 140px;
    text-align: left;
}

.norm-editor-custom-min,
.norm-editor-custom-max {
    width: 70px;
    text-align: center;
}

.norm-editor-custom-unit {
    width: 60px;
    text-align: center;
}

.norm-editor-del-btn:hover {
    opacity: 0.7;
}

/* SVG-иконки — стиль как в меню навигации */
.svg-icon,
.category-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.svg-icon svg,
.category-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

/* Иконки в лейблах */
label .svg-icon {
    margin-right: 4px;
}

/* Иконки в заголовках таблиц/секций */
h4 .svg-icon,
.section-title .svg-icon {
    margin-right: 6px;
}


/* =========================================================
   БЛОК 2: CSS-ПЕРЕМЕННЫЕ (СВЕТЛАЯ ТЕМА)
   ========================================================= */
:root { 
    --bg: #F4F6FA; 
    --accent: #2D5F9E; 
    --accent-light: rgba(45, 95, 158, 0.08);   
    --accent-mid: rgba(45, 95, 158, 0.15);
    --sidebar: #FFFFFF; 
    --text-main: #1A2A3A; 
    --text-secondary: #5A6E7C; 
    --border: #E2E6EA; 
    --border-dark: #C5CDD4;
    --danger: #D9534F; 
    --success: #2E7D32;
    --success-accent: #2E7D32;
    --warning: #ED6C02;
    --card-bg: #FFFFFF;
    --input-bg: #FFFFFF;
    --hover-bg: #F8F9FA;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 1px rgba(0,0,0,0.02);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 2px 2px rgba(0,0,0,0.02);
    --success-light: #E8F5E9;
    --success-border: #C8E6C9;
    --success-text: #2E7D32;
    --table-header-bg: #F8FAFC;
    --table-stripe-bg: #F1F5F9;
    --table-border: #CBD5E1;
    --status-abnormal-bg: #FEF2F2;
    --status-warning-bg: #FFFBEB;
    --status-info-bg: #EEF2FF;
    --banner-success-bg: #ECFDF5;
    --banner-success-border: #A7F3D0;
    --banner-success-text: #059669;
    --banner-info-bg: #EEF2FF;
    --banner-info-border: #93C5FD;
    --banner-info-text: #1E40AF;
    --banner-warning-bg: #FEF3C7;
    --banner-warning-border: #FBBF24;
    --banner-warning-text: #92400E;
    /* Типографика (общий стандарт) */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --font-accent: 'Caveat', 'Marck Script', cursive;
    --fs-body: 14px;
    --fs-h2: 22px;
    --fs-h3: 16px;
}


/* =========================================================
   БЛОК 3: ТЁМНАЯ ТЕМА (ПЕРЕОПРЕДЕЛЕНИЕ ПЕРЕМЕННЫХ)
   ========================================================= */
body.dark-theme {
    --bg: #121826;
    --soft-blue: #1A2332;
    --sidebar: #1A2332;
    --text-main: #E8EDF2;
    --text-secondary: #9AAEBB;
    --border: #2D3748;
    --border-dark: #4A5568;
    --card-bg: #1A2332;
    --input-bg: #222C3A;
    --hover-bg: #222C3A;
    --accent-light: rgba(77, 144, 218, 0.12);
    --accent-mid: rgba(77, 144, 218, 0.2);
    --success-light: #1B3A1C;
    --success-border: #2D5A2E;
    --success-text: #A5D6A7;
    --success-accent: #66BB6A;
    --table-header-bg: #1E293B;
    --table-stripe-bg: #222C3A;
    --table-border: #3D4A5C;
    --status-abnormal-bg: #3B1010;
    --status-warning-bg: #3D2E00;
    --status-info-bg: #1A2440;
    --banner-success-bg: #0F2F1A;
    --banner-success-border: #2D5A2E;
    --banner-success-text: #6EE7B7;
    --banner-info-bg: #1A2440;
    --banner-info-border: #2A4070;
    --banner-info-text: #93C5FD;
    --banner-warning-bg: #3D2E00;
    --banner-warning-border: #8B6914;
    --banner-warning-text: #FCD34D;
}


/* =========================================================
   БЛОК 4: ГЛОБАЛЬНЫЕ СТИЛИ BODY
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-main);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* динамическая высота: учитывает адресную строку на мобильных */
    overflow: hidden;
    overflow-x: hidden;
    position: relative; /* для absolute-позиционирования мобильного меню */
    font-size: var(--fs-body);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.01em;
    max-width: 100vw;
}


/* =========================================================
   БЛОК 5: ДЕКОРАТИВНЫЕ ФОНОВЫЕ ЭЛЕМЕНТЫ
   ========================================================= */
body::before {
    content: "";
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%232D5F9E' fill-opacity='0.02' d='M150,140c-8,0-15-6-18-14c-3,8-10,14-18,14c-10,0-18-8-18-18c0-15,10-28,22-36c-2-6-3-12-1-18c-12,6-22,16-28,28c-6-12-16-22-28-28c2,6,1,12-1,18c12,8,22,21,22,36c0,10-8,18-18,18c-8,0-15-6-18-14c-3,8-10,14-18,14c-10,0-18-8-18-18c0-15,10-28,22-36...'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 40px 40px;
    opacity: 0.3;
}
body.dark-theme::before { opacity: 0.08; }
body::after {
    content: "";
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 200px;
    height: 200px;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%232D5F9E' fill-opacity='0.04' d='M30,50c-4,0-7-3-7-7c0-4,3-7,7-7c4,0,7,3,7,7C37,47,34,50,30,50z M45,40c-3,0-5-2-5-5c0-3,2-5,5-5c3,0,5,2,5,5C50,38,48,40,45,40z M55,45c-3,0-5-2-5-5c0-3,2-5,5-5c3,0,5,2,5,5C60,43,58,45,55,45z M70,50c-4,0-7-3-7-7c0-4,3-7,7-7c4,0,7,3,7,7C77,47,74,50,70,50z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: 0.15;
}
body.hide-background::before, body.hide-background::after { display: none !important; }


/* =========================================================
   БЛОК 5.5: СТАРТОВАЯ СЕКЦИЯ (STARTUP SCREEN)
   ========================================================= */

/* Основной контейнер стартовой секции */
.startup-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    overflow: hidden;
}

/* Фоновое изображение с полупрозрачным наложением */
.startup-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/startup-bg.svg') center center / cover no-repeat;
    z-index: 1;
}

/* Полупрозрачное наложение */
.startup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 95, 158, 0.7);
    z-index: 2;
}

/* Модальное окно — строго по центру */
.startup-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* Контент модального окна */
.startup-modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px;
    width: 500px;
    max-width: 90vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: startupModalIn 0.5s ease-out;
}

/* Анимация появления модального окна */
@keyframes startupModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Логотип и заголовок */
.startup-logo {
    margin-bottom: 32px;
}

.startup-logo svg {
    margin-bottom: 16px;
}

.startup-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.startup-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

/* Контейнер кнопок */
.startup-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Стили кнопок */
.startup-btn {
    flex: 1;
    max-width: 200px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.startup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45, 95, 158, 0.3);
}

/* Панели экранов */
.startup-screen-panel {
    animation: startupFadeIn 0.3s ease-out;
}

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

/* Блок "Что внутри приложения" на стартовом экране */
.startup-features {
    margin-top: 24px;
    text-align: center;
}
.startup-features summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2D5F9E;
    padding: 10px 18px;
    border: 1px solid rgba(45, 95, 158, 0.25);
    border-radius: 10px;
    background: rgba(45, 95, 158, 0.08);
    transition: all 0.2s ease;
}
.startup-features summary::-webkit-details-marker { display: none; }
.startup-features summary:hover {
    background: rgba(45, 95, 158, 0.15);
}
.startup-features summary .chev {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.startup-features[open] summary .chev {
    transform: rotate(90deg);
}
.startup-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 14px;
    max-height: 48vh;
    overflow-y: auto;
    padding-right: 4px;
}
.feature-card {
    background: #F4F6FA;
    border: 1px solid #E2E6EA;
    border-radius: 12px;
    padding: 14px;
    text-align: left;
}
.feature-card .feature-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: #1A2A3A;
    margin-bottom: 6px;
}
.feature-card .feature-icon {
    font-size: 18px;
    line-height: 1;
}
.feature-card .feature-desc {
    font-size: 12.5px;
    color: #5A6E7C;
    line-height: 1.5;
    margin: 0 0 8px;
}
.feature-card .feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.feature-card .feature-list li {
    position: relative;
    padding-left: 15px;
    font-size: 12px;
    color: #1A2A3A;
    line-height: 1.5;
    margin-bottom: 3px;
}
.feature-card .feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2E7D32;
    font-weight: 700;
}

/* Юридический текст под модальным окном */
.startup-legal-text {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    text-align: center;
    max-width: 560px;
    width: 90vw;
    line-height: 1.6;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 600px) {
    .startup-legal-text {
        bottom: 120px;
        font-size: 9px;
        line-height: 1.5;
        max-width: 90vw;
    }
}

/* Cookie-баннер: полоса согласия внизу экрана блокировки */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(26, 35, 50, 0.97);
    color: #E8EDF2;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    animation: cookieBannerIn 0.35s ease-out;
}

@keyframes cookieBannerIn {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

.cookie-banner-text {
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

.cookie-banner-text a {
    color: #8FB6E6;
    text-decoration: underline;
}

.cookie-banner-text a:hover {
    color: #A8CCEC;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-banner-btn {
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.cookie-banner .btn-primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
}

.cookie-banner .btn-primary:hover {
    background: #24507f;
    color: #fff;
    transform: translateY(-1px);
}

.cookie-banner .btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #E8EDF2;
}

.cookie-banner .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

/* Адаптив cookie-баннера */
@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }
    .cookie-banner-text {
        font-size: 12px;
    }
    .cookie-banner-actions .cookie-banner-btn {
        flex: 1;
    }
}

/* Заголовок формы с кнопкой назад */
.startup-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.startup-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.startup-back-btn:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.startup-form-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

/* Форма */
.startup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.startup-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--text-main);
    background: white;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.startup-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Обёртка для поля пароля с кнопкой-глазом */
.startup-password-wrapper {
    position: relative;
    width: 100%;
}

.startup-password-input {
    padding-right: 44px;
}

.startup-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.startup-password-toggle:hover {
    color: var(--accent);
}

.startup-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.startup-form-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin: -4px 0 0 0;
}

.startup-form-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

.startup-form-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    margin-top: 8px;
}

/* OAuth разделитель */
.startup-oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.startup-oauth-divider::before,
.startup-oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.startup-oauth-divider span {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* OAuth кнопки */
.startup-oauth-buttons {
    display: flex;
    gap: 12px;
}

.startup-oauth-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--text-main);
    transition: all 0.2s ease;
}

.startup-oauth-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(45, 95, 158, 0.15);
}

.startup-google-btn:hover {
    border-color: #4285F4;
    background: #f8f9ff;
}

.startup-yandex-btn {
    background: #FC3F1D;
    border-color: #FC3F1D;
    color: white;
}

.startup-yandex-btn:hover {
    background: #e03518;
    border-color: #e03518;
    box-shadow: 0 2px 8px rgba(252, 63, 29, 0.3);
}

.startup-form-switch {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 8px 0 0 0;
}

.startup-form-forgot {
    text-align: center;
    margin: 4px 0 0 0;
}

/* Чекбоксы согласия на форме регистрации */
.startup-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
    margin: 4px 0;
    text-align: left;
}
.startup-consent input[type="checkbox"] {
    margin: 3px 0 0 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}
.startup-consent b {
    color: var(--text-main);
    font-weight: 600;
}
.startup-consent a {
    color: var(--accent);
    text-decoration: underline;
}

.startup-link-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    padding: 0;
}

.startup-link-btn:hover {
    color: var(--accent-dark, #1a3a6e);
}

/* Адаптивность стартовой секции — планшеты */
@media (max-width: 768px) {
    .startup-modal-content {
        padding: 32px 24px;
        width: 450px;
    }
    
    .startup-title {
        font-size: 28px;
    }
    
    .startup-subtitle {
        font-size: 14px;
    }
    .startup-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .startup-oauth-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    
    .startup-btn {
        max-width: 100%;
    }
}

/* Адаптивность стартовой секции — мобильные */
@media (max-width: 480px) {
    .startup-modal-content {
        padding: 24px 20px;
        width: 95vw;
        border-radius: 20px;
    }
    
    .startup-logo svg {
        width: 48px;
        height: 48px;
    }
    
    .startup-title {
        font-size: 24px;
    }
    
    .startup-subtitle {
        font-size: 13px;
    }
    
    .startup-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* Адаптивность стартовой секции — очень маленькие экраны */
@media (max-width: 360px) {
    .startup-modal-content {
        padding: 20px 16px;
    }
    
    .startup-title {
        font-size: 20px;
    }
}


/* =========================================================
   БЛОК 5.6: ЭКРАН «О ПРИЛОЖЕНИИ»
   ========================================================= */

/* Кнопка «О приложении» — правый верхний угол экрана блокировки */
.startup-about-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10002;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
}
.startup-about-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.startup-about-btn:active {
    transform: translateY(0);
}

/* Полноэкранный контейнер «О приложении» */
.about-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 10003;
    background: var(--bg);
    overflow-y: auto;
    animation: aboutScreenIn 0.4s ease-out;
}
@keyframes aboutScreenIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Шапка экрана «О приложении» */
.about-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: var(--sidebar);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
.about-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--accent-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.about-back-btn:hover {
    background: var(--accent-mid);
    transform: translateX(-2px);
}
.about-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}
.about-header-logo {
    font-size: 22px;
    line-height: 1;
}
.about-auth-buttons {
    margin-left: auto;
    display: flex;
    gap: 10px;
    opacity: 0;
    animation: aboutAuthIn 0.5s ease both;
    animation-delay: 0.8s;
}
@keyframes aboutAuthIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.about-auth-btn {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
}

/* Контент экрана «О приложении» */
.about-body {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 28px 64px;
}

/* Хиро-блок */
.about-hero {
    text-align: center;
    margin-bottom: 40px;
    opacity: 0;
    animation: aboutHeroIn 0.6s ease both;
    animation-delay: 0.1s;
}
@keyframes aboutHeroIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.about-hero img {
    box-shadow: 0 12px 32px rgba(45, 95, 158, 0.25);
}
.about-hero-title {
    margin: 18px 0 6px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--accent) 0%, #4A8FE7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.about-hero-sub {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--text-secondary);
}
.about-hero-desc {
    margin: 0 auto;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Сетка карточек — три блока в ряд */
.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Карточка раздела */
.about-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    overflow: hidden;
    opacity: 0;
    animation: aboutCardIn 0.7s cubic-bezier(0.22, 0.8, 0.36, 1) both;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #4A8FE7);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.about-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 16px 36px rgba(45, 95, 158, 0.14);
}
.about-card:hover::before {
    opacity: 1;
}
@keyframes aboutCardIn {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.about-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.about-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 24px;
    background: var(--accent-light);
    border-radius: 12px;
}
.about-card-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.5;
    letter-spacing: 0.08em;
}
.about-card-title {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}
.about-card-desc {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}
.about-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.about-card-list li {
    position: relative;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: 5px;
}
.about-card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--success);
    font-weight: 700;
}

/* Адаптивность экрана «О приложении» */
@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    .about-header {
        padding: 12px 16px;
        flex-wrap: wrap;
    }
    .about-header-title {
        font-size: 16px;
    }
    .about-auth-buttons {
        width: 100%;
        margin-left: 0;
        order: 3;
    }
    .about-auth-btn {
        flex: 1;
    }
    .startup-about-btn {
        top: 14px;
        right: 14px;
        padding: 9px 16px;
        font-size: 13px;
    }
    .about-body {
        padding: 28px 16px 48px;
    }
    .about-hero-title {
        font-size: 26px;
    }
}

/* =========================================================
   БЛОК 6: ВЕРХНЯЯ ПАНЕЛЬ (TOP BAR)
   ========================================================= */
.top-bar {
    height: 64px; min-height: 64px; max-height: 64px;
    background: var(--sidebar); display: flex; justify-content: space-between; align-items: center;
    padding: 0 28px; border-bottom: 1px solid var(--border); z-index: 100; backdrop-filter: blur(8px);
    flex-shrink: 0;
}
.top-logo {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.header-title {
    display: flex; flex-direction: column; line-height: 1.2;
}
.header-title-main {
    font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: 0.02em;
    text-transform: uppercase; font-family: var(--font-body);
    background: linear-gradient(135deg, var(--accent) 0%, #4A8FE7 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.header-title-sub {
    font-size: 11px; font-weight: 400; font-family: var(--font-accent);
    letter-spacing: 0.5px; color: var(--text-secondary); text-transform: uppercase;
}
.header-buttons {
    display: flex; gap: 12px; align-items: center;
    flex-shrink: 0; position: relative;
}
.desktop-btn { display: inline-flex; }
.burger-btn { display: none !important; }
.burger-dropdown { display: none; }
.top-bar-pet { display: none; }
.header-buttons .btn {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   БЛОК 7: ОСНОВНОЙ КОНТЕЙНЕР И САЙДБАР
   ========================================================= */
.container { display: flex; flex-grow: 1; overflow: hidden; position: relative; z-index: 1; }
.sidebar { 
    width: 260px; background: var(--sidebar); border-right: 1px solid var(--border); 
    padding: 24px 20px; display: flex; flex-direction: column; flex-shrink: 0; backdrop-filter: blur(4px);
    overflow-y: auto;
}
.sidebar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   БЛОК 8: СПИСОК ПИТОМЦЕВ В САЙДБАРЕ
   ========================================================= */
.pet-list-title { 
    font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; 
    margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.06em;
}
.pet-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pet-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.pet-item.active { background: var(--accent-light); border-color: var(--accent); }
.pet-item-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pet-item-name { font-size: 14px; font-weight: 600; flex-grow: 1; color: var(--text-main); }


/* =========================================================
   БЛОК 9: НАВИГАЦИОННОЕ МЕНЮ
   ========================================================= */
.nav-menu { width: 100%; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.nav-item {
    padding: 10px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--text-secondary);
    font-size: 14px; text-align: left; border: none; background: none; font-family: var(--font-heading);
    transition: all 0.2s ease; display: flex; align-items: center; gap: 10px;
}
.nav-item.active { background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent); }
.nav-item:hover:not(.active) { background: var(--hover-bg); color: var(--accent); }
/* Перетаскивание пунктов меню */
.nav-item.draggable { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.nav-item.draggable:focus { outline: none; }
.nav-item.draggable:focus-visible { outline: none; }
.nav-item.drag-placeholder {
    visibility: hidden;
    user-select: none;
}
.nav-item.drag-float {
    position: fixed !important;
    z-index: 1000 !important;
    pointer-events: none;
    touch-action: none;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15);
    transform: scale(1.05);
    background: var(--card-bg);
    border: 2px solid var(--accent);
    border-radius: 8px;
    opacity: 0.95;
    cursor: grabbing;
}
.nav-item.drag-ready {
    touch-action: none;
    transform: scale(1.05);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 100;
    position: relative;
    background: var(--card-bg);
    cursor: grabbing;
    animation: menuPulse 0.8s ease-in-out infinite;
}
.nav-item.drag-ready:hover { transform: scale(1.05); }
.nav-item.drag-ready:active { transform: scale(1.05); }
@keyframes menuPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(45,95,158,0.2); }
    50% { box-shadow: 0 8px 32px rgba(45,95,158,0.45); }
}
.nav-item.drag-insert-before { border-top: 3px solid var(--accent); }
.nav-item.drag-insert-after { border-bottom: 3px solid var(--accent); }
/* Заблокированные на бесплатном тарифе пункты меню */
.nav-item.nav-locked .nav-lock-badge {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: var(--accent, #2D5F9E);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: auto;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}


/* =========================================================
   БЛОК 10: ОСНОВНОЙ КОНТЕНТ
   ========================================================= */
.main-content { flex-grow: 1; padding: 32px 36px; overflow-y: auto; background: var(--bg); }
.content-card { max-width: 1000px; margin: 0 auto; }
h2 { font-weight: 600; font-size: var(--fs-h2); margin-bottom: 24px; letter-spacing: -0.02em; color: var(--text-main); font-family: var(--font-heading); }


/* =========================================================
   БЛОК 11: ТАБЛИЦЫ
   ========================================================= */
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
th { text-align: left; padding: 12px 10px; color: var(--text-secondary); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
td { padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--text-main); font-weight: 400; }

.table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.table-scroll-container::-webkit-scrollbar {
    display: none;
}
.table-scroll-container table {
    white-space: nowrap;
}


/* =========================================================
   БЛОК 12: ИНФОРМАЦИОННЫЕ КАРТОЧКИ (INFO-BOX)
   ========================================================= */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.info-box { border: 1px solid var(--border); padding: 18px 20px; border-radius: 12px; background: var(--card-bg); box-shadow: var(--shadow-sm); }
.info-box span { display: block; font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.08em; }

/* Стили для выбранной строки в таблице процедур */
.vaccine-table-row.vaccine-row-selected {
    background: var(--accent-light) !important;
}
.vaccine-table-row:hover {
    background: var(--hover-bg);
}


/* =========================================================
   БЛОК 13: ЗДОРОВЬЕ - ВКЛАДКИ
   ========================================================= */
.health-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.h-tab { padding: 8px 18px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.2s ease; }
.h-tab.active { color: var(--accent); background: var(--accent-light); }


/* =========================================================
   БЛОК 14: ПРАВАЯ ПАНЕЛЬ (RIGHT ASIDE)
   ========================================================= */
.right-aside { width: 300px; background: var(--sidebar); border-left: 1px solid var(--border); padding: 24px; overflow-y: auto; flex-shrink: 0; }


/* =========================================================
   БЛОК 15: КАЛЕНДАРЬ
   ========================================================= */
.calendar-nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 16px; 
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 6px 12px;
}
.calendar-nav .month-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    padding: 6px 16px;
    border-radius: 30px;
    letter-spacing: 0.5px;
}
.calendar-nav .btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-nav .btn-outline:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.02);
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    margin-top: 12px;
    padding: 8px 14px 4px;
}
.weekday {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 0;
}
.weekday.weekend {
    color: var(--danger);
}
.calendar-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 6px; 
    text-align: center; 
    margin-top: 4px; 
    border: 2px solid var(--border-dark); 
    border-radius: 16px; 
    padding: 14px; 
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    overflow: hidden;
}
.cal-day { 
    aspect-ratio: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 13px; 
    font-weight: 500; 
    border-radius: 50%; 
    color: var(--text-main); 
    cursor: pointer; 
    position: relative; 
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1); 
    background: transparent;
}
.cal-day:hover { 
    background: var(--accent-light); 
    color: var(--accent);
    transform: scale(1.05);
}
.cal-day.today {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    border: 2px solid var(--accent);
    border-radius: 8px;
    box-shadow: none;
}
.cal-day.today:hover {
    background: var(--accent-light);
    transform: scale(1.05);
}
.cal-day.event { 
    position: relative;
}
.cal-day.event .dot { 
    position: absolute; 
    bottom: 4px; 
    width: 5px; 
    height: 5px; 
    background-color: var(--accent); 
    border-radius: 50%; 
}
.cal-day.today .dot {
    background-color: var(--accent);
}
.cal-day.weekend {
    color: var(--danger);
    font-weight: 600;
}
.cal-day.weekend:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger);
}
.cal-day.holiday {
    color: var(--danger);
    font-weight: 700;
}
.cal-day.holiday:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger);
}
.cal-day.weekend.holiday {
    color: var(--danger);
    font-weight: 700;
}


/* =========================================================
   БЛОК 16: МИНИ-ПЛАНЫ В ПРАВОЙ ПАНЕЛИ
   ========================================================= */
.aside-subtitle { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; margin-top: 28px; margin-bottom: 12px; letter-spacing: 0.06em; }
.plan-mini {
    padding: 12px 14px;
    border-radius: 10px;
    border: 2px solid var(--success-border);
    background: var(--success-light);
    margin-top: 8px;
    font-size: 13px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.plan-mini:hover {
    border-width: 2px;
    border-color: var(--success-accent);
    transform: translateY(-1px);
}
.plan-mini b {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.plan-mini span {
    font-weight: 500;
    color: var(--text-main);
}
.plan-mini div {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}


/* =========================================================
   БЛОК 17: КНОПКИ (ВСЕ ТИПЫ)
   ========================================================= */
.btn { background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent); padding: 10px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; font-size: 13px; transition: all 0.2s ease; font-family: var(--font-body); }
.btn:hover { background: var(--accent); color: white; transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-main); }
.btn-outline:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.btn-primary, .btn-accent { background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent); }
.btn-primary:hover, .btn-accent:hover { background: var(--accent); color: white; }
.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 10px 0 0;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.btn-link:hover {
    color: var(--accent);
    text-decoration: underline;
}
.btn-sm { font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; background: transparent; border: 1px solid var(--border); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; box-sizing: border-box; }
.btn-sm:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.btn-sm.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-sm.btn-danger:hover { background: rgba(244, 67, 54, 0.1); border-color: var(--danger); color: var(--danger); }

/* Кнопка-таб в шапке справочника (Помощник / Нормы) */
.bot-tab-btn {
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.2s ease;
}
.bot-tab-btn:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-1px);
}
.bot-tab-btn:active {
    transform: translateY(0);
}

/* Стили для полей ввода даты в фильтре расходов */
.date-filter-input {
    cursor: pointer;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-body);
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-main);
    transition: all 0.2s ease;
    height: auto;
    min-width: 140px;
}
.date-filter-input:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}
.date-filter-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
    outline: none;
}
/* Убираем placeholder "дд.мм.гггг" для date input */
.date-filter-input::-webkit-datetime-edit {
    color: var(--text-main);
}
.date-filter-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}
.date-filter-input::-webkit-datetime-edit-text {
    visibility: hidden;
}
.date-filter-input::-webkit-datetime-edit-month-field,
.date-filter-input::-webkit-datetime-edit-day-field,
.date-filter-input::-webkit-datetime-edit-year-field {
    color: var(--text-main);
}
.date-filter-input:blank {
    color: transparent;
}


/* =========================================================
   БЛОК 18: ПОЛЯ ВВОДА (INPUTS)
   ========================================================= */
.res-input { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-family: var(--font-body); font-weight: 400; width: 100%; box-sizing: border-box; outline: none; font-size: 13px; background: var(--input-bg); color: var(--text-main); transition: all 0.2s ease; }
.res-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.is-danger { color: var(--danger) !important; border-color: var(--danger) !important; background: rgba(217, 83, 79, 0.05) !important; }

/* Time Picker (Часы для выбора времени) */
.time-picker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 8px;
}

.time-picker-clock {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--input-bg), var(--card-bg));
    border: 2px solid var(--border);
    cursor: pointer;
    user-select: none;
}

.time-picker-clock .hour-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 50px;
    background: var(--accent);
    border-radius: 2px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
    transition: transform 0.1s ease;
}

.time-picker-clock .minute-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 70px;
    background: var(--text-secondary);
    border-radius: 1.5px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
    transition: transform 0.1s ease;
}

.time-picker-clock .center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.time-picker-clock .hour-marker {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.time-picker-clock .hour-marker:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.time-picker-clock .hour-marker.active {
    background: var(--accent);
    color: white;
}

.time-picker-clock .minute-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.time-picker-clock .minute-marker:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.time-picker-clock .minute-marker.active {
    background: var(--accent);
    color: white;
}

.time-picker-display {
    font-size: 24px;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-body);
    padding: 8px 16px;
    background: var(--accent-light);
    border-radius: 8px;
    min-width: 100px;
    text-align: center;
}

.time-picker-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-secondary);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.time-picker-toggle-btn:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.time-picker-wrapper {
    position: relative;
}

.time-input-with-picker {
    position: relative;
}

.time-input-with-picker .res-input {
    padding-right: 40px;
}

.time-picker-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    margin-top: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 15px;
}

.time-picker-popup.visible {
    display: block;
}

.time-picker-popup .time-picker-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.time-picker-popup .time-picker-actions button {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-main);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.time-picker-popup .time-picker-actions button:hover {
    background: var(--accent-light);
    border-color: var(--accent);
}

.time-picker-popup .time-picker-actions button.primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Time Slot Rows (для нескольких времен приема) */
.time-slot-row {
    position: relative;
}

.time-select-wrapper {
    display: flex;
    gap: 4px;
    align-items: center;
}

.time-select {
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    background: var(--input-bg, #fff);
    color: var(--text-main, #333);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.time-select:hover {
    border-color: var(--accent, #2196f3);
}

.time-select:focus {
    outline: none;
    border-color: var(--accent, #2196f3);
    box-shadow: 0 0 0 2px var(--accent-light, rgba(33, 150, 243, 0.2));
}

/* Старые стили для time picker (оставлены для обратной совместимости) */
.time-slot-row .time-input-with-picker {
    flex: 1;
}

.time-slot-row .time-picker-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.time-slot-row .time-picker-toggle-btn:hover {
    background: var(--accent-light);
    border-radius: 4px;
}

/* Стили для 24-часового циферблата (оставлены для обратной совместимости) */
.time-picker-clock .hour-marker.outer-hour {
    background: var(--accent);
    color: white;
    font-weight: bold;
    font-size: 11px;
}

.time-picker-clock .hour-marker.inner-hour {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: bold;
    font-size: 11px;
}

.time-picker-clock .hour-marker.outer-hour:hover {
    background: var(--accent-dark, #1a4a7a);
}

.time-picker-clock .hour-marker.inner-hour:hover {
    background: var(--accent);
    color: white;
}

.time-picker-clock .hour-marker.outer-hour.active {
    background: var(--accent-dark, #1a4a7a);
    box-shadow: 0 0 8px var(--accent);
}

.time-picker-clock .hour-marker.inner-hour.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 0 8px var(--accent);
}


/* =========================================================
   БЛОК 18.5: ФОРМА ПРЕПАРАТА (ЛЕЧЕНИЕ) — FLEX-СТРОКИ
   ========================================================= */

.med-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.med-form-row-labels {
    margin-bottom: 4px;
    align-items: flex-end;
}

.med-form-row-labels label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2px;
    display: block;
}

.med-form-col {
    display: flex;
    flex-direction: column;
}

.med-form-col label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.med-form-col .res-input {
    height: 40px;
}

/* Time slot boxes (5 фиксированных полей времени) */
.time-slots-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.time-slot-box {
    width: 72px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.time-slot-box.active {
    background: #E8F5E9;
    border-color: #C8E6C9;
    color: #2E7D32;
    cursor: pointer;
}

.time-slot-box.active:hover {
    background: #C8E6C9;
    border-color: #A5D6A7;
}

.time-slot-box.inactive {
    background: #F5F5F5;
    border-color: #E0E0E0;
    color: #BDBDBD;
    cursor: default;
}

/* Inactive field styling */
.med-input-inactive {
    background: #F5F5F5 !important;
    color: #9E9E9E !important;
    cursor: not-allowed;
}

/* Time picker overlay (барабаны часы/минуты) */
.med-time-picker-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

.med-time-picker-overlay.visible {
    display: flex;
}

.med-time-picker-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 24px;
    min-width: 300px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}

.med-tp-header {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.med-tp-wheels {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin: 16px 0 4px 0;
}

.med-tp-wheel-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.med-tp-wheel-col label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.med-tp-wheel {
    height: 160px;
    overflow-y: auto;
    width: 72px;
    border: 1px solid var(--border);
    border-radius: 12px;
    scroll-snap-type: y mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--input-bg);
}

.med-tp-wheel::-webkit-scrollbar {
    display: none;
}

.med-tp-wheel-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-secondary);
    scroll-snap-align: center;
    cursor: pointer;
    transition: color 0.15s, font-size 0.15s;
    user-select: none;
}

.med-tp-wheel-item.selected {
    color: var(--accent);
    font-weight: 700;
    font-size: 22px;
}

.med-tp-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}

/* Переключение текста лейблов десктоп / мобилка */
.med-label-mob { display: none; }
.med-label-desk { display: inline; }

/* ---- Mobile: Раз в сутки + Время приема ---- */
@media (max-width: 768px) {
    .med-label-desk { display: none; }
    .med-label-mob { display: inline; }

    .med-form-row--times-fields {
        flex-wrap: wrap;
    }

    .med-form-row--times-fields .times-select-col,
    .med-form-row--times-fields .time-slots-field-col {
        flex: 0 0 100% !important;
    }

    .time-slots-field-col .time-slots-row {
        justify-content: space-between;
    }

    .time-slots-field-col .time-slot-box {
        flex: 1;
        max-width: none;
        width: auto;
    }

    .med-form-row--dates-fields {
        flex-wrap: wrap;
    }

    .med-form-row--dates-fields .med-date-col-start,
    .med-form-row--dates-fields .med-date-col-end {
        flex: 0 0 calc(50% - 10px) !important;
        min-width: 0;
    }

    .med-form-row--dates-fields .med-date-col-start input,
    .med-form-row--dates-fields .med-date-col-end input {
        min-width: 0;
    }

    .med-form-row--dates-fields .med-date-col-days {
        flex: 0 0 100% !important;
    }
}

/* Medication form container spacing */
.medication-form-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 15px;
    background: var(--bg-secondary, #f9f9f9);
}

.med-date-col-start,
.med-date-col-end,
.med-date-col-days {
    display: flex;
    flex-direction: column;
}

.med-date-col-start label,
.med-date-col-end label,
.med-date-col-days label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.med-date-col-start .res-input,
.med-date-col-end .res-input,
.med-date-col-days .res-input {
    height: 40px;
}

.medication-form-item .form-group:last-child {
    margin-bottom: 0;
}

.medication-form-item .form-group {
    margin-bottom: 20px;
}

.medication-form-item .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.medication-form-item .form-group .res-input {
    height: 40px;
}

.medication-form-item .form-group textarea.res-input {
    height: 80px;
}

/* Error validation */
.med-input-error {
    border-color: #F44336 !important;
    box-shadow: 0 0 0 1px #F44336 !important;
}


/* =========================================================
   БЛОК 19: МЕТРИКИ И ГРАФИКИ
   ========================================================= */
.metrics-selector { background: var(--card-bg); padding: 20px; border-radius: 12px; margin-bottom: 24px; border: 1px solid var(--border); }
.metrics-selector select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-main); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-body); }
.metrics-info { margin-top: 15px; padding: 12px; background: var(--accent-light); border-radius: 8px; border-left: 3px solid var(--accent); }
.metrics-chart-container { padding: 20px; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); }
.metrics-empty { text-align: center; padding: 40px; color: var(--text-secondary); background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); }


/* =========================================================
   БЛОК 20: ЛАБОРАТОРИИ И КЛИНИКИ
   ========================================================= */
.labs-header { margin-bottom: 24px; }
.labs-subtitle { color: var(--text-secondary, #6b7280); font-size: 14px; margin-top: -12px; margin-bottom: 20px; }
.labs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin-bottom: 30px; }
.lab-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.2s ease; }
.lab-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lab-card-header { background: var(--accent-light); padding: 14px 18px; border-bottom: 1px solid var(--border); }
.lab-type-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.lab-type-badge.laboratory { background: rgba(45, 95, 158, 0.12); color: var(--accent); }
.lab-type-badge.clinic { background: rgba(46, 125, 50, 0.12); color: var(--success); }
.lab-card-header h3 { margin: 6px 0 0; font-size: 17px; font-weight: 600; }
.lab-card-body { padding: 14px 18px; }
.lab-info-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.lab-info-icon { width: 18px; font-size: 14px; flex-shrink: 0; }
.lab-info-text { color: var(--text-secondary); line-height: 1.4; }
.lab-hours { background: var(--accent-light); padding: 6px 10px; border-radius: 6px; margin: 10px 0; font-size: 12px; }
.lab-card-footer { padding: 12px 18px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.lab-map-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 500; transition: all 0.2s ease; }
.lab-map-link:hover { background: var(--accent); color: white; }
.lab-site-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 500; transition: all 0.2s ease; }
.lab-site-link:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

/* Кнопки действий для клиник в карточках */
.lab-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.btn-edit-lab, .btn-delete-lab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(45, 95, 158, 0.3);
    background: transparent;
    color: var(--accent, #2D5F9E);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.btn-edit-lab:hover {
    background: rgba(45, 95, 158, 0.1);
    border-color: var(--accent, #2D5F9E);
    opacity: 1;
}

.btn-delete-lab {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.btn-delete-lab:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    opacity: 1;
}


/* =========================================================
   БЛОК 21: АРХИВ
   ========================================================= */
.section-title { margin: 32px 0 16px; font-size: var(--fs-h3); font-weight: 600; font-family: var(--font-heading); display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--accent); padding-left: 12px; }

/* Двухколоночная структура архива */
.archive-layout {
    display: flex;
    gap: 20px;
    min-height: 500px;
}

/* Левая панель с кнопками категорий */
.archive-sidebar-left {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.archive-category-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.archive-category-btn:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    transform: translateX(4px);
}

.archive-category-btn.active {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 2px 8px rgba(45, 95, 158, 0.2);
}

.archive-category-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.archive-category-info {
    flex: 1;
    min-width: 0;
}

.archive-category-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.archive-category-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.archive-upload-btn {
    margin-top: auto;
    padding: 12px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-align: center;
}

.archive-upload-btn:hover {
    background: var(--accent-dark, #1e4a7a);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Секция пользовательских папок */
.archive-folders-section {
    margin-top: 12px;
    margin-bottom: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.archive-folders-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 12px;
}

.archive-folder-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    margin-bottom: 6px;
    position: relative;
}

.archive-folder-btn:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    transform: translateX(4px);
}

.archive-folder-btn.active {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 2px 8px rgba(45, 95, 158, 0.2);
}

.archive-folder-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.archive-folder-info {
    flex: 1;
    min-width: 0;
}

.archive-folder-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-folder-count {
    font-size: 11px;
    color: var(--text-secondary);
}

.archive-folder-delete {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.archive-folder-delete:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Правая панель с контентом */
.archive-content-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Мобильный архив: пошаговая навигация (список → контент → назад) */
@media (max-width: 768px) {
    .archive-layout {
        flex-direction: column;
    }
    .archive-sidebar-left {
        width: 100%;
    }
    .archive-content-right {
        width: 100%;
    }
    .archive-layout:not(.archive-category-selected) .archive-content-right {
        display: none;
    }
    .archive-layout.archive-category-selected .archive-sidebar-left {
        display: none;
    }
    .archive-mobile-back {
        display: inline-flex;
    }
}
.archive-mobile-back {
    display: none;
}

/* Заголовок правой панели */
.archive-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.archive-content-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Карточка превью категории */
.archive-preview-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
}

.archive-preview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.archive-preview-icon {
    font-size: 48px;
    line-height: 1;
}

.archive-preview-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.archive-preview-count {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Последняя запись в превью */
.archive-preview-last-item {
    padding: 12px;
    background: var(--accent-light);
    border-radius: 8px;
    margin-bottom: 16px;
}

.archive-preview-last-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}

.archive-preview-last-content {
    font-size: 14px;
    color: var(--text-primary);
}

/* Кнопка открытия детального вида */
.archive-open-details-btn {
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.archive-open-details-btn:hover {
    background: var(--accent-dark, #1e4a7a);
    transform: translateY(-2px);
}

/* Детальный вид — список записей */
.archive-detail-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archive-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.archive-back-btn {
    padding: 6px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    animation: slideInLeft 0.3s ease-out;
}

.archive-back-btn:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
    transform: translateX(-3px);
}

/* Сетка папок в архиве (старый стиль, для совместимости) */
.archive-folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Карточка папки (старый стиль) */
.archive-folder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    min-height: 140px;
}

.archive-folder:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    background: var(--accent-light);
}

.archive-folder-icon {
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 1;
}

.archive-folder-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.archive-folder-count {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--border);
    border-radius: 10px;
    padding: 2px 10px;
    min-width: 24px;
}

/* Стили для вложенных папок внутри категории "Другое" */
.archive-folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    padding: 8px 0;
}

.archive-folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    text-align: center;
    background: var(--card-bg);
    border: 2px solid var(--border);
}

.archive-folder-item:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.archive-folder-item.selected {
    background: var(--accent-light);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.archive-folder-item .archive-folder-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.archive-folder-item .archive-folder-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    word-break: break-word;
    max-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.archive-folder-item .archive-folder-count {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--border);
    border-radius: 10px;
    padding: 2px 8px;
    min-width: 20px;
}

/* Стили для файлов в стиле проводника Windows */
.archive-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    padding: 8px 0;
}

.archive-file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    text-align: center;
}

.archive-file-item:hover {
    background: var(--accent-light);
}

.archive-file-item.selected {
    background: var(--accent-light);
    outline: 2px solid var(--accent);
}

.archive-file-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
}

.archive-file-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.archive-file-name {
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-main);
    word-break: break-word;
    max-height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    width: 100%;
}

.archive-file-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.archive-file-meta-dsk { display: none; }
.archive-file-ext-label { display: none; }

/* ═══════════════════════════════════════════
   ДЕСКТОПНАЯ ВЕРСИЯ: АРХИВ В ОДНУ СТРОКУ
   ═══════════════════════════════════════════ */

@media (min-width: 769px) {
    .archive-file-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    .archive-file-item {
        flex-direction: row;
        align-items: center;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        text-align: left;
        gap: 0;
    }
    .archive-file-item:last-child {
        border-bottom: none;
    }
    .archive-file-item:hover {
        background: var(--accent-light);
    }
    .archive-file-icon {
        display: none;
    }
    .archive-file-ext-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #2D5F9E;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 0 6px;
        border-radius: 4px;
        margin-right: 8px;
        flex-shrink: 0;
        height: 20px;
        min-width: 30px;
        letter-spacing: 0.3px;
    }
    .archive-file-text {
        display: flex;
        flex-direction: row;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
    }
    .archive-file-name {
        font-size: 14px;
        max-height: none;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }
    .archive-file-meta-mob {
        display: none;
    }
    .archive-file-meta-dsk {
        display: block;
        font-size: 12px;
        color: var(--text-secondary);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 16px;
    }
    .archive-file-actions {
        opacity: 0;
        position: static;
        margin-left: 8px;
        flex-shrink: 0;
    }
    .archive-file-item:hover .archive-file-actions {
        opacity: 1;
    }
}

.archive-file-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.archive-file-item:hover .archive-file-actions {
    opacity: 1;
}

.archive-file-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: all 0.1s ease;
}

.archive-file-action-btn:hover {
    background: var(--card-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.archive-file-action-btn--danger:hover {
    background: var(--card-bg);
    border-color: var(--danger);
    color: var(--danger);
}

/* Иконки файлов в стиле Windows 11 для нового формата */
.archive-file-icon .file-type-icon {
    width: 48px;
    height: 56px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.archive-file-icon .file-type-icon::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #e8e8e8 50%, #d0d0d0 50%);
    border-bottom-left-radius: 3px;
}

.archive-file-icon .file-type-icon .file-label {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.archive-file-icon .file-type-icon .file-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

.archive-file-icon .file-type-icon .file-content .line {
    height: 2px;
    border-radius: 1px;
}

.archive-file-icon .file-type-icon .file-content .line:nth-child(1) { width: 24px; }
.archive-file-icon .file-type-icon .file-content .line:nth-child(2) { width: 18px; }
.archive-file-icon .file-type-icon .file-content .line:nth-child(3) { width: 20px; }

/* Цвета для типов файлов */
.file-type-pdf .file-label { background: #e74c3c; }
.file-type-pdf .file-content .line { background: #e74c3c; }
.file-type-pdf::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e74c3c;
}

.file-type-excel .file-label { background: #27ae60; }
.file-type-excel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #27ae60;
}

.file-type-word .file-label { background: #2980b9; }
.file-type-word .file-content .line { background: #2980b9; }
.file-type-word::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2980b9;
}

.file-type-powerpoint .file-label { background: #e67e22; }
.file-type-powerpoint::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e67e22;
}

.file-type-video .file-label { background: #9b59b6; }
.file-type-video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #9b59b6;
}

.file-type-audio .file-label { background: #e74c3c; }
.file-type-audio::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e74c3c;
}

.file-type-image .file-label { background: #3498db; }
.file-type-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #3498db;
}

.file-type-text .file-label { background: #95a5a6; }
.file-type-text .file-content .line { background: #95a5a6; }
.file-type-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #95a5a6;
}

.file-type-archive .file-label { background: #f39c12; }
.file-type-archive::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #f39c12;
}

.file-type-other .file-label { background: #7f8c8d; }
.file-type-other::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #7f8c8d;
}

/* ═══════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ: АРХИВ
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .archive-file-ext-label {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        background: #2D5F9E;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 0 7px;
        border-radius: 6px;
        letter-spacing: 0.3px;
        min-width: 36px;
        flex-shrink: 0;
    }

    .archive-file-grid {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .archive-file-item {
        flex-direction: row;
        align-items: center;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card-bg);
        gap: 8px;
    }
    .archive-file-item:hover {
        background: var(--card-bg);
    }
    .archive-file-icon {
        display: none;
    }
    .archive-file-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        text-align: left;
    }
    .archive-file-name {
        font-size: 14px;
        font-weight: 600;
        max-height: none;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .archive-file-meta {
        font-size: 11px;
        color: var(--text-secondary);
        margin-top: 2px;
    }
    .archive-file-actions {
        opacity: 1;
        position: static;
    }
}

.archive-item { transition: all 0.2s ease; }
.archive-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* PDF иконка в стиле Windows 11 */
.pdf-icon-windows11 {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    position: relative;
    overflow: hidden;
}

.pdf-icon-windows11::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
}

.pdf-icon-document {
    width: 48px;
    height: 58px;
    background: white;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.pdf-icon-document::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #e8e8e8 50%, #d0d0d0 50%);
    border-bottom-left-radius: 3px;
}

.pdf-icon-label {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: 0.3px;
    margin-top: 4px;
    text-transform: uppercase;
}

.pdf-icon-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 3px;
}

.pdf-icon-line {
    height: 2px;
    background: #d0d0d0;
    border-radius: 1px;
}

.pdf-icon-line:nth-child(1) { width: 22px; }
.pdf-icon-line:nth-child(2) { width: 18px; }
.pdf-icon-line:nth-child(3) { width: 20px; }

/* Универсальные стили для иконок файлов в стиле Windows 11 Pro */
.file-icon-windows11 {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    position: relative;
    overflow: hidden;
}

.file-icon-windows11::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--file-color, #7f8c8d);
}

.file-icon-document {
    width: 48px;
    height: 58px;
    background: white;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    gap: 3px;
}

.file-icon-document::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #e8e8e8 50%, #d0d0d0 50%);
    border-bottom-left-radius: 3px;
}

.file-icon-label {
    background: var(--file-color, #7f8c8d);
    color: white;
    font-size: 7px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

/* Видео иконка */
.file-icon-video .file-icon-play {
    font-size: 18px;
    color: var(--file-color, #9b59b6);
}

/* Аудио иконка */
.file-icon-audio .file-icon-music {
    font-size: 16px;
}

/* Excel иконка */
.file-icon-excel .file-icon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-bottom: 3px;
}

.file-icon-excel .file-icon-cell {
    width: 8px;
    height: 6px;
    background: var(--file-color, #27ae60);
    border-radius: 1px;
    opacity: 0.6;
}

/* Word иконка */
.file-icon-word .file-icon-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 3px;
}

.file-icon-word .file-icon-line {
    height: 2px;
    background: var(--file-color, #2980b9);
    border-radius: 1px;
}

.file-icon-word .file-icon-line:nth-child(1) { width: 22px; }
.file-icon-word .file-icon-line:nth-child(2) { width: 18px; }
.file-icon-word .file-icon-line:nth-child(3) { width: 20px; }

/* PowerPoint иконка */
.file-icon-powerpoint .file-icon-slide {
    font-size: 16px;
}

/* Текстовая иконка */
.file-icon-text .file-icon-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 3px;
}

.file-icon-text .file-icon-line {
    height: 2px;
    background: var(--file-color, #95a5a6);
    border-radius: 1px;
}

.file-icon-text .file-icon-line:nth-child(1) { width: 22px; }
.file-icon-text .file-icon-line:nth-child(2) { width: 18px; }
.file-icon-text .file-icon-line:nth-child(3) { width: 20px; }

/* Архив иконка */
.file-icon-archive .file-icon-box {
    font-size: 16px;
}

/* Generic иконка */
.file-icon-other .file-icon-generic {
    font-size: 16px;
}

/* Цвета для разных типов файлов */
.file-icon-pdf { --file-color: #e74c3c; }
.file-icon-excel { --file-color: #27ae60; }
.file-icon-word { --file-color: #2980b9; }
.file-icon-powerpoint { --file-color: #e67e22; }
.file-icon-video { --file-color: #9b59b6; }
.file-icon-audio { --file-color: #e74c3c; }
.file-icon-image { --file-color: #3498db; }
.file-icon-text { --file-color: #95a5a6; }
.file-icon-csv { --file-color: #2ecc71; }
.file-icon-archive { --file-color: #f39c12; }
.file-icon-other { --file-color: #7f8c8d; }

/* Кнопки действий с файлами */
.archive-file-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
    padding: 0;
}

.archive-file-btn:hover {
    background: var(--card-bg);
    border-color: var(--accent);
}

.archive-file-btn--danger {
    color: var(--danger);
}

.archive-file-btn--danger:hover {
    background: var(--card-bg);
    border-color: var(--danger);
}

.archive-upload-area { transition: all 0.2s; }
.archive-upload-area:hover { border-color: var(--accent); background: var(--accent-light); }

/* Стили для медицинских записей в архиве */
.medical-record-card {
    transition: all 0.2s ease;
}
.medical-record-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.medical-record-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.medical-record-actions button {
    padding: 4px 8px;
    font-size: 12px;
}
.medical-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: white;
}
.medical-status-active {
    background: var(--danger);
}
.medical-status-remission {
    background: var(--warning);
}
.medical-status-inactive {
    background: var(--success);
}
.no-reminders-box { margin-top: 24px; background: var(--success-light) !important; border: 1px solid var(--success-border) !important; color: var(--success-text) !important; text-align: center; border-left: 3px solid var(--accent) !important; }


/* =========================================================
   БЛОК 22: ПЕРЕКЛЮЧАТЕЛЬ (TOGGLE SWITCH)
   ========================================================= */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}
.switch.small {
    width: 38px;
    height: 20px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-dark);
    transition: 0.3s;
    border-radius: 26px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch.small .slider:before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
}
input:checked + .slider {
    background-color: var(--accent);
}
input:checked + .slider:before {
    transform: translateX(24px);
}
.switch.small input:checked + .slider:before {
    transform: translateX(18px);
}


/* =========================================================
   БЛОК 23: НАСТРОЙКИ
   ========================================================= */
.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    gap: 20px;
    flex-wrap: wrap;
}
.settings-item > div:first-child {
    flex: 1;
    font-weight: 500;
}
.settings-item select {
    width: auto;
    min-width: 100px;
}
.settings-item.small {
    padding: 10px 0;
}
.settings-item.small span {
    font-size: 13px;
}
.settings-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}


/* =========================================================
   БЛОК 24: ТАРИФЫ И ПОДПИСКИ
   ========================================================= */
.tariff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.tariff-card { border: 2px solid var(--border); border-radius: 16px; padding: 24px; background: var(--card-bg); transition: all 0.3s ease; position: relative; }
.tariff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tariff-card.popular { border-color: var(--accent); background: linear-gradient(135deg, var(--card-bg) 0%, var(--accent-light) 100%); }
.tariff-badge { position: absolute; top: -12px; right: 20px; background: var(--accent); color: white; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.tariff-name { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.tariff-price { font-size: 32px; font-weight: 800; color: var(--accent); margin: 15px 0; }
.tariff-period { font-size: 13px; color: var(--text-secondary); }
.tariff-features { list-style: none; padding: 0; margin: 20px 0; }
.tariff-features li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 13px; }

@media (max-width: 768px) {
    .tariff-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }
    .tariff-card {
        padding: 16px;
    }
    .tariff-card:hover { transform: none; }
    .tariff-name { font-size: 17px; margin-bottom: 6px; }
    .tariff-price { font-size: 24px; margin: 8px 0; }
    .tariff-features li { font-size: 12px; padding: 6px 0; }

    .tariff-compare {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px !important;
        border-radius: 12px;
    }
    .tariff-compare table {
        min-width: 520px;
        font-size: 11px;
    }
    .tariff-compare th,
    .tariff-compare td {
        padding: 6px 8px;
        white-space: nowrap;
    }
    .tariff-compare h3 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
}
.tariff-features li::before { content: "✓"; color: var(--success); font-weight: bold; }
.tariff-btn { width: 100%; margin-top: 15px; }

/* Промокод */
.promo-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.promo-code-input {
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    width: 180px;
    background: var(--card-bg);
    color: var(--text-primary);
}
.promo-code-input:focus {
    border-color: var(--accent);
}
.promo-code-input::placeholder {
    color: #94a3b8;
}
.promo-code-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #2D5F9E 0%, #1E4A7A 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.promo-code-btn:hover {
    opacity: 0.9;
}
.promo-code-msg {
    font-size: 13px;
    min-height: 20px;
    margin-bottom: 8px;
}
.promo-code-msg--success {
    color: #059669;
}
.promo-code-msg--error {
    color: #dc2626;
}
.subscription-banner { background: linear-gradient(135deg, var(--accent-light), var(--card-bg)); border: 1px solid var(--accent); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 20px; }
.subscription-status { font-size: 14px; margin-top: 10px; }
.status-active { color: var(--success); }
.status-expired { color: var(--danger); }
.status-trial { color: var(--warning); }
.demo-badge { background: var(--warning); color: white; padding: 2px 8px; border-radius: 12px; font-size: 10px; margin-left: 8px; }
.locked-feature { opacity: 0.6; cursor: not-allowed; position: relative; }
.locked-feature::after { content: "🔒"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; }

/* Убираем иконку замочка у кнопки БОТ помощник */
.header-buttons .btn[onclick="openBot()"]::after,
.header-buttons .btn[onclick="openBot()"].locked-feature::after {
    content: none !important;
}
.header-buttons .btn[onclick="openBot()"] {
    opacity: 1 !important;
    cursor: pointer !important;
}


/* =========================================================
   БЛОК 25: ПРОФИЛЬ (АВАТАР, КОНТАКТЫ, РАСХОДЫ)
   ========================================================= */
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--accent-light); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 48px; border: 2px solid var(--accent); }
.contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.contact-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: all 0.2s ease; }
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-card h3 { margin: 0 0 8px 0; font-size: 16px; }
.contact-card p { margin: 6px 0; font-size: 13px; color: var(--text-secondary); }
.contact-card a { color: var(--accent); text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.contact-notes { font-style: italic; font-size: 12px !important; color: var(--text-secondary); opacity: 0.85; }
.contact-actions { margin-top: 12px; display: flex; gap: 8px; }
.expense-summary { background: var(--accent-light); padding: 20px; border-radius: 12px; margin-bottom: 20px; text-align: center; }
.expense-total { font-size: 36px; font-weight: 800; color: var(--accent); }
.expense-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--border); }
.expense-category { font-weight: 600; }
.expense-amount { color: var(--accent); font-weight: 600; }
.expense-date { font-size: 11px; color: var(--text-secondary); }


/* =========================================================
   БЛОК 26: КНОПКА ПРОФИЛЯ В ШАПКЕ И ВЫПАДАЮЩЕЕ МЕНЮ
   ========================================================= */
.header-profile-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-family: var(--font-body);
}
.header-profile-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.header-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    min-width: 320px;
    z-index: 1000;
    overflow: hidden;
    border: 2px solid var(--accent);
    backdrop-filter: blur(2px);
    display: none;
}
.profile-dropdown.active {
    display: block;
    animation: fadeInDropdown 0.2s ease;
}
@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.profile-dropdown-content {
    padding: 20px;
}
.profile-dropdown-content .info-box {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.compact-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.compact-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #1E4A7A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    color: white;
    border: 3px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.compact-profile-info {
    flex: 1;
}
.compact-profile-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 4px;
}
.compact-profile-email {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
}
.compact-subscription {
    background: var(--success-light);
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--success-border);
}
.compact-subscription-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--success-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.compact-subscription-status {
    font-size: 14px;
    font-weight: 700;
    color: var(--success-text);
    margin-bottom: 6px;
}
.dropdown-btn {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    text-align: center;
}
.dropdown-btn-primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: white;
}
.dropdown-btn-primary:hover {
    background: var(--accent);
    opacity: 0.9;
    transform: translateY(-1px);
}
.dropdown-btn-outline {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.dropdown-btn-outline:hover {
    background: var(--accent-light);
}
.dropdown-btn-danger {
    background: transparent;
    border: 2px solid #f44336;
    color: #d32f2f;
}
.dropdown-btn-danger:hover {
    background: rgba(244, 67, 54, 0.1);
}
.compact-form-input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font-body);
    background: var(--input-bg);
    transition: all 0.2s ease;
    box-sizing: border-box;
    color: var(--text-main);
}
.compact-form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.compact-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 8px;
    font-family: var(--font-body);
}
.compact-link:hover {
    color: var(--accent);
    opacity: 0.8;
}
body.dark-theme .header-profile-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #1E4A7A 100%);
}

body.dark-theme .startup-input,
body.dark-theme .startup-password-input {
    background: var(--input-bg);
}

body.dark-theme .therapy-action-btn:hover {
    background: var(--hover-bg);
}
body.dark-theme .therapy-action-btn--danger:hover {
    background: rgba(220, 38, 38, 0.15);
}
body.dark-theme .therapy-progress-bar {
    background: #374151;
}
body.dark-theme .therapy-next-appointment {
    background: var(--hover-bg);
}
body.dark-theme .therapy-schedule-item {
    background: var(--card-bg);
    color: var(--text-secondary);
}
body.dark-theme .therapy-completed-badge {
    background: var(--success-light);
}
body.dark-theme .therapy-medications-count {
    background: #374151;
}

body.dark-theme .archive-file-icon .file-type-icon {
    background: var(--card-bg);
}
body.dark-theme .pdf-icon-document,
body.dark-theme .file-icon-document {
    background: var(--card-bg);
}


/* =========================================================
   БЛОК 26.1: ПРОФИЛЬ — ДВА РАЗДЕЛЬНЫХ БЛОКА
   ========================================================= */

/* Контейнер для двух блоков */
.profile-blocks-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* Каждый блок одинакового размера */
.profile-blocks-row .info-box {
    flex: 1;
    min-width: 0;
    min-height: 180px;
}

/* Заголовки блоков */
.profile-block-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    display: block;
}

/* Ссылка восстановления пароля */
.password-reset-link {
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.password-reset-link:hover {
    color: var(--accent);
    opacity: 0.8;
}

/* Кнопка редактирования представителя */
.edit-representative-btn {
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 6px;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .profile-blocks-row {
        flex-direction: column;
        gap: 16px;
    }
}


/* =========================================================
   БЛОК 27: МОДАЛЬНЫЕ ОКНА
   (определения находятся ниже, строки ~5337: .modal-overlay, .modal-container)
   ========================================================= */

/* =========================================================
   БЛОК 28: АНИМАЦИИ
   ========================================================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   БЛОК 29: АЛЬБОМ ПИТОМЦЕВ
   ========================================================= */
.pet-album-button {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--card-bg) 100%);
    border: 2px solid var(--accent);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
.pet-album-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
    background: var(--accent-light);
}
.pet-album-icon {
    font-size: 32px;
    background: var(--accent);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pet-album-info {
    flex: 1;
}
.pet-album-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.pet-album-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.pet-album-arrow {
    font-size: 20px;
    color: var(--accent);
    font-weight: 600;
    opacity: 0.7;
}
.album-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.album-container {
    background: var(--card-bg);
    border-radius: 28px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.album-header {
    padding: 20px 24px;
    background: var(--accent);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.album-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.album-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
    opacity: 0.8;
    transition: 0.2s;
}
.album-close:hover {
    opacity: 1;
    transform: scale(1.1);
}
.album-list {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}
.album-pet-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    margin-bottom: 10px;
    background: var(--card-bg);
}
.album-pet-item:hover {
    background: var(--accent-light);
    transform: translateX(4px);
    border-color: var(--accent);
}
.album-pet-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    cursor: grab;
    color: var(--text-secondary);
    font-size: 18px;
    user-select: none;
    touch-action: none;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.album-pet-drag-handle:hover {
    background: var(--hover-bg);
    color: var(--accent);
}
.album-pet-drag-handle:active {
    cursor: grabbing;
}
.album-pet-click-area {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.album-drag-active {
    cursor: grabbing !important;
    user-select: none;
    border: 2px solid var(--accent) !important;
}
.album-drag-active:hover {
    transform: none !important;
}
.album-drag-ghost {
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}
.album-grid-drag-handle {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--text-secondary);
    font-size: 16px;
    user-select: none;
    touch-action: none;
    border-radius: 4px;
    z-index: 2;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(2px);
    transition: background 0.15s, color 0.15s;
}
.album-grid-drag-handle:hover {
    background: var(--hover-bg);
    color: var(--accent);
}
.album-grid-drag-handle:active {
    cursor: grabbing;
}
.album-pet-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 2px solid var(--accent);
    overflow: hidden;
}
.album-pet-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.album-pet-info {
    flex: 1;
}
.album-pet-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}
.album-pet-details {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.album-pet-active {
    background: var(--accent-light);
    border: 2px solid var(--accent);
}
.active-badge {
    background: var(--accent);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}
.album-add-btn {
    margin: 16px;
    padding: 14px;
    background: var(--accent-light);
    border: 2px dashed var(--accent);
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    font-weight: 600;
    color: var(--accent);
}
.album-add-btn:hover {
    background: var(--accent);
    color: white;
    border-style: solid;
}


/* =========================================================
   БЛОК 30: МЕДИА-ЗАПРОСЫ (АДАПТИВНОСТЬ)
   ========================================================= */

/* Планшеты в горизонтальном положении (до 1200px) */
@media (max-width: 1200px) and (min-width: 993px) {
    .right-aside {
        width: 210px;
        padding: 14px;
    }
}

/* Планшеты (до 992px) */
@media (max-width: 992px) {
    .sidebar {
        width: 220px;
        padding: 16px;
    }
    .right-aside {
        width: 220px;
        padding: 14px;
    }
    .main-content {
        padding: 20px;
    }
    .info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .labs-grid {
        grid-template-columns: 1fr;
    }
    /* Адаптация календаря под узкую правую панель */
    .calendar-weekdays {
        padding: 6px 8px 2px;
        gap: 4px;
    }
    .weekday {
        font-size: 9px;
    }
    .calendar-grid {
        padding: 8px;
        gap: 4px;
    }
    .cal-day {
        font-size: 11px;
    }
}

/* Планшеты (до 992px) */
@media (max-width: 992px) {
    .header-title-sub {
        display: none;
    }
    .header-title-main {
        font-size: 18px;
    }
    .top-logo svg {
        width: 30px;
        height: 30px;
    }
}

/* Телефоны (до 768px) */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .container {
        flex-direction: column;
    }
    .top-bar {
        padding: 0 12px;
        height: 56px;
        min-height: 56px;
        max-height: 56px;
    }
    .top-bar-pet {
        display: block;
        flex: 1;
        cursor: pointer;
    }
    .top-logo {
        flex: 0 0 auto;
        justify-content: center;
    }
    .header-buttons {
        flex: 1;
        justify-content: flex-end;
    }
    .header-title-main {
        font-size: 16px;
    }
    .header-title-sub {
        display: none;
    }
    .top-bar-pet {
        display: block;
        flex: 1;
        cursor: pointer;
    }
    .desktop-btn {
        display: none !important;
    }
    .burger-btn {
        display: inline-flex !important;
        font-size: 22px;
        padding: 6px 10px;
    }
    .burger-dropdown {
        display: none;
        position: absolute;
        top: 56px;
        right: 8px;
        background: var(--sidebar);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 8px;
        z-index: 200;
        flex-direction: column;
        gap: 4px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    .burger-dropdown .btn {
        width: 100%;
        text-align: left;
        font-size: 13px;
        padding: 10px 14px;
        border-radius: 8px;
    }
    .burger-item {
        font-size: 13px;
        font-weight: 600;
        padding: 12px 16px;
        cursor: pointer;
        border-radius: 8px;
        border-bottom: 1px solid var(--border);
    }
    .burger-item:last-child {
        border-bottom: none;
    }
    .header-right {
        display: none !important;
    }
    .top-logo svg {
        width: 28px;
        height: 28px;
    }
    .top-logo {
        gap: 8px;
    }
    .header-buttons {
        gap: 6px;
    }
    .header-buttons .btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    .header-buttons .btn svg {
        width: 14px;
        height: 14px;
    }
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 4px 12px 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        order: 2;
        flex-shrink: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar::-webkit-scrollbar {
        height: 3px;
    }
    .sidebar::-webkit-scrollbar-thumb {
        background: var(--border-dark);
        border-radius: 3px;
    }
    .pet-list-title {
        visibility: hidden;
        height: 32px;
        margin-bottom: 0;
        flex-shrink: 0;
        pointer-events: none;
    }
    .pet-list {
        visibility: hidden;
        height: 36px;
        display: flex;
        flex-direction: row;
        gap: 8px;
        max-height: none;
        overflow: hidden;
        margin-bottom: 0;
        padding-bottom: 0;
        flex: 0 0 auto;
        min-width: 0;
    }
    .pet-list::-webkit-scrollbar {
        height: 3px;
    }
    .pet-list::-webkit-scrollbar-thumb {
        background: var(--border-dark);
        border-radius: 3px;
    }
    .pet-item {
        padding: 6px 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .pet-item-avatar {
        width: 24px;
        height: 24px;
    }
    .pet-item-name {
        font-size: 12px;
    }
    .nav-menu {
        width: calc(100% + 24px);
        margin: 0 -12px;
        background: var(--sidebar);
        border-top: 1px solid var(--border);
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 10px 8px 12px;
        gap: 6px;
        z-index: 100;
        border-radius: 0;
        display: flex !important;
        min-height: 60px;
    }
    .nav-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        font-size: 10px;
        gap: 4px;
        white-space: nowrap;
        min-width: 52px;
        flex-shrink: 0;
    }
    .nav-item svg {
        width: 18px;
        height: 18px;
    }
    .nav-item.draggable { touch-action: pan-x; }
    /* Кнопка «Добавить питомца» — только в мобильной нижней панели */
    .nav-mobile-add-pet {
        display: flex !important;
        color: var(--accent);
        font-weight: 700;
    }
    .main-content {
        order: 1;
        padding: 12px;
        padding-bottom: 70px;
        max-height: calc(100vh - 170px);
        max-height: calc(100dvh - 170px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .content-card {
        max-width: 100%;
        width: 100%;
    }
    h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .right-aside {
        display: none;
    }
    .info-box {
        padding: 12px;
        margin-bottom: 12px;
        width: 100%;
    }
    .info-box span {
        font-size: 9px;
    }
    .info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .info-box table,
    .data-table {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        font-size: 11px;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .info-box table::-webkit-scrollbar,
    .data-table::-webkit-scrollbar {
        height: 3px;
    }
    .info-box table::-webkit-scrollbar-thumb,
    .data-table::-webkit-scrollbar-thumb {
        background: var(--border-dark);
        border-radius: 3px;
    }
    th, td {
        padding: 6px 8px;
        white-space: nowrap;
    }
    table {
        width: 100%;
        min-width: 0;
    }
    .btn, .btn-outline {
        padding: 8px 12px;
        font-size: 12px;
    }
    .btn-sm {
        padding: 4px 8px;
        font-size: 10px;
    }
    .res-input {
        font-size: 12px;
        padding: 8px 10px;
    }
    .health-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .h-tab {
        padding: 6px 12px;
        font-size: 11px;
    }
    .calendar-weekdays {
        padding: 6px 8px 2px;
    }
    .weekday {
        font-size: 9px;
    }
    .calendar-grid {
        padding: 8px;
        gap: 4px;
    }
    .cal-day {
        font-size: 11px;
    }
    .metrics-chart-container {
        padding: 12px;
    }
    .metrics-selector {
        padding: 12px;
    }
    .header-profile-btn span:not(#profileBtnText) {
        display: none;
    }
    .header-profile-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    .profile-dropdown {
        position: fixed;
        top: auto;
        bottom: 70px;
        right: 12px;
        left: 12px;
        width: auto;
        min-width: auto;
        max-width: none;
    }
    .compact-profile-avatar {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    .pet-album-button {
        padding: 10px 12px;
        margin-bottom: 12px;
    }
    .pet-album-icon {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    .pet-album-title {
        font-size: 10px;
    }
    .pet-album-count {
        font-size: 12px;
    }
    .album-container {
        width: 95%;
        max-height: 85vh;
    }
    .album-pet-item {
        padding: 10px 12px;
    }
    .album-pet-avatar {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
    /* Модальные окна на мобильных — строго по центру экрана */
    .modal-overlay {
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .modal-container {
        width: 92%;
        max-width: 480px;
        border-radius: 20px;
        max-height: 85vh;
        overflow-y: auto;
    }
    .modal-header {
        padding: 16px 20px;
    }
    .modal-header h3 {
        font-size: 18px;
    }
    .modal-body {
        padding: 16px 20px;
    }
    .form-field {
        margin-bottom: 15px;
    }
}

/* Маленькие телефоны (до 480px) */
@media (max-width: 480px) {
    .top-bar {
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        padding: 0 8px;
    }
    .header-title-main {
        font-size: 14px;
    }
    .top-logo svg {
        width: 24px;
        height: 24px;
    }
    .top-logo {
        gap: 6px;
    }
    .header-buttons {
        gap: 4px;
    }
    .header-buttons .btn {
        padding: 5px 8px;
        font-size: 10px;
    }
    .header-buttons .btn svg {
        width: 13px;
        height: 13px;
    }
    .header-buttons .btn span:not(#profileBtnText) {
        display: none;
    }
    .pet-item-name {
        font-size: 11px;
    }
    .nav-item span:last-child {
        font-size: 9px;
    }
    .plan-mini {
        padding: 8px 10px;
        font-size: 11px;
    }
    .profile-dropdown {
        bottom: 80px;
    }
    .main-content {
        padding: 8px;
    }
    h2 {
        font-size: 16px;
    }
    .modal-header h3 {
        font-size: 16px;
    }
}


/* =========================================================
   БЛОК 31: ПЕЧАТЬ
   ========================================================= */
@media print {
    .top-bar, .sidebar, .right-aside, .btn, .btn-outline, .calendar-nav, .pet-list-title, body::before, body::after { display: none !important; }
    .container { display: block !important; }
    .main-content { padding: 0 !important; background: white; }
    body, body.dark-theme { background: white !important; }
    h2, td, th, .info-box, .plan-mini { color: black !important; background: white !important; }
    table { border: 1px solid #ccc !important; }
}
#print-section { display: none; }

/* ============================================================
   БЛОК 32: СТИЛИ РАЗДЕЛА "ЛЕЧЕНИЕ" - НОВЫЙ КОНСТРУКТИВ
   ============================================================ */

/* Контейнер курсов */
.therapy-courses {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

/* Карточка курса */
.therapy-course-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

/* Свёрнутая карточка курса */
.therapy-course-collapsed {
    padding-bottom: 12px;
}

.therapy-course-collapsed .therapy-course-header {
    margin-bottom: 0;
    padding-bottom: 8px;
    border-bottom: none;
}

/* Заголовок курса */
.therapy-course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.therapy-course-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.therapy-course-icon {
    font-size: 18px;
}

.therapy-course-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary, #333);
}

.therapy-course-actions {
    display: flex;
    gap: 4px;
}

.therapy-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.therapy-action-btn:hover {
    background: #f0f0f0;
}

.therapy-action-btn--danger:hover {
    background: #ffebee;
}

/* Прогресс-бар */
.therapy-progress-section {
    margin-bottom: 16px;
}

.therapy-progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.therapy-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6EC2BE, #4caf50);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.therapy-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

/* Блок следующего приёма */
.therapy-next-appointment {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 3px solid var(--accent, #6EC2BE);
}

.therapy-next-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.therapy-next-icon {
    font-size: 14px;
}

.therapy-next-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #333);
}

.therapy-next-schedule {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.therapy-schedule-item {
    font-size: 12px;
    padding: 4px 8px;
    background: #fff;
    border-radius: 4px;
    color: #555;
}

.therapy-time {
    font-weight: 600;
    color: var(--accent, #6EC2BE);
}

.therapy-med-name {
    font-weight: 600;
}

.therapy-dose {
    color: #888;
}

.therapy-form {
    color: #666;
}

.therapy-food-offset {
    color: #888;
    font-size: 11px;
}

/* Бейдж завершения */
.therapy-completed-badge {
    display: inline-block;
    padding: 6px 12px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Препараты */
.therapy-medications {
    margin-bottom: 12px;
}

.therapy-medications-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary, #333);
    border-radius: 10px;
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.therapy-medications:not([open]) .therapy-medications-summary {
    background: var(--card-bg, #fff);
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
}

.therapy-medications:not([open]) .therapy-medications-summary:hover {
    border-color: var(--border);
}

.therapy-medications-count {
    background: #e0e0e0;
    color: #666;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.therapy-edit-meds-btn {
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
}

.therapy-edit-meds-btn:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-1px);
}

.therapy-edit-meds-btn:active {
    transform: scale(0.98);
}

.therapy-medications-list {
    padding: 8px 0;
}

.therapy-no-meds {
    color: #888;
    font-size: 13px;
    padding: 8px 0;
}

.therapy-medication-item {
    background: var(--hover-bg, #f8f9fa);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.therapy-medication-item:hover {
    border-color: var(--border);
    background: var(--card-bg, #f8f9fa);
}

.therapy-medication-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.therapy-medication-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.therapy-medication-icon {
    font-size: 14px;
}

.therapy-medication-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #333);
}

.therapy-medication-actions {
    display: flex;
    gap: 4px;
}

.therapy-med-action-btn {
    background: var(--accent-light);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.therapy-med-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.05);
}

.therapy-med-action-btn--danger {
    background: rgba(217, 83, 79, 0.08);
}

.therapy-med-action-btn--danger:hover {
    background: #d9534f;
    border-color: #d9534f;
    color: white;
}

/* =========================================================
   БЛОК 32: СТИЛИ СТРАНИЦЫ "ГАСТРОДНЕВНИК"
   ========================================================= */

.gastro-container {
    max-width: 900px;
    margin: 0 auto;
}

.gastro-container h2 {
    margin-bottom: 8px;
    color: var(--text-primary, #333);
}

.gastro-description {
    color: var(--text-secondary, #666);
    margin-bottom: 24px;
    font-size: 14px;
}

.gastro-form {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.gastro-form h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--text-primary, #333);
}

.gastro-form .form-group {
    margin-bottom: 16px;
}

.gastro-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary, #333);
}

.gastro-form .form-group input,
.gastro-form .form-group select,
.gastro-form .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    font-size: 14px;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #333);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.gastro-form .form-group input:focus,
.gastro-form .form-group select:focus,
.gastro-form .form-group textarea:focus {
    outline: none;
    border-color: var(--accent, #2D5F9E);
    box-shadow: 0 0 0 3px rgba(45, 95, 158, 0.1);
}

.gastro-form .form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.gastro-history {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    padding: 20px;
}

.gastro-history h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--text-primary, #333);
}

.gastro-entries-list {
    min-height: 100px;
}

.gastro-entry {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    align-items: flex-start;
}

.gastro-entry:last-child {
    border-bottom: none;
}

.gastro-entry-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.gastro-entry-content {
    flex: 1;
}

.gastro-entry-date {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-bottom: 4px;
}

.gastro-entry-meal {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #333);
    margin-bottom: 4px;
}

.gastro-entry-details {
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.gastro-entry-notes {
    font-size: 13px;
    color: var(--text-secondary, #666);
    font-style: italic;
    margin-top: 4px;
}

.gastro-entry-delete {
    background: none;
    border: none;
    color: #d9534f;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.gastro-entry-delete:hover {
    background: rgba(217, 83, 79, 0.1);
}

.empty-message {
    color: var(--text-secondary, #666);
    text-align: center;
    padding: 20px;
    font-size: 14px;
}

/* =========================================================
   БЛОК 33: СТИЛИ СТРАНИЦЫ "ПОЛЕЗНЫЕ ССЫЛКИ"
   ========================================================= */

.links-description {
    color: var(--text-secondary, #666);
    margin-bottom: 24px;
    font-size: 14px;
}

/* Стили для таблицы полезных ссылок */
.links-table-container {
    overflow-x: auto;
    margin-top: 24px;
}

/* Поиск по ссылкам */
.links-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.links-description {
    margin: 0;
}

.links-search-container {
    margin: 0;
}

.links-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
}

.links-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary, #666);
    pointer-events: none;
}

.links-search-input {
    width: 100%;
    padding: 10px 40px 10px 40px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.links-search-input:focus {
    outline: none;
    border-color: var(--accent, #2D5F9E);
    box-shadow: 0 0 0 3px rgba(45, 95, 158, 0.1);
}

.links-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #666);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.links-search-clear:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary, #333);
}

.search-highlight {
    background: #fef08a;
    padding: 1px 2px;
    border-radius: 2px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary, #666);
}

.empty-state svg {
    margin-bottom: 16px;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

.link-empty {
    border: none !important;
}

.link-empty td {
    border: none !important;
    padding: 0 !important;
}

.links-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
}

.links-table thead {
    background: #548DC6;
    color: #fff;
}

.links-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    background: #548DC6;
}

.links-table th.links-table-actions {
    text-align: center;
    width: 60px;
}

.links-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--border, #e0e0e0);
    vertical-align: middle;
}

.links-table tbody tr:hover {
    background: rgba(45, 95, 158, 0.05);
}

/* ============================================================
   УНИФИКАЦИЯ ТАБЛИЦ: Симптомы, Процедуры, Клиники, Календарь,
   Гастродневник, Контакты — по образцу "Полезные ссылки"
   ============================================================ */

/* Единый padding для всех ячеек таблиц внутри info-box (переопределяет inline-стили) */
.info-box table tbody tr td,
.info-box table thead tr th {
    padding: 12px 16px !important;
}

/* Переопределение inline-стилей padding для ячеек таблицы процедур */
.vaccine-table-row td {
    padding: 12px 16px !important;
}

/* Единый border-top для всех ячеек таблиц внутри info-box, кроме ячеек с действиями */
.info-box table tbody td {
    border-top: 1px solid var(--border, #e0e0e0) !important;
    border-bottom: none !important;
}

/* Убираем лишние линии для ячеек с кнопками действий */
.info-box table tbody td.contact-actions,
.info-box table tbody td.gastro-actions,
.info-box table tbody td.link-actions,
.info-box table tbody td.symptoms-actions,
.info-box table tbody td.procedures-actions,
.info-box table tbody td.clinics-actions,
.info-box table tbody td.calendar-actions {
    border-top: none !important;
    border-bottom: none !important;
    vertical-align: middle;
}

/* Единый padding для всех ячеек таблиц с классами */
.contacts-table td,
.symptoms-table td,
.gastro-table td,
.clinics-table td,
.procedures-table td,
.calendar-table td,
.vaccine-table-row td {
    padding: 12px 16px !important;
    border-top: 1px solid var(--border, #e0e0e0);
    vertical-align: middle;
}

/* Убираем границы для ячеек с действиями в таблицах */
.clinics-table td.clinics-actions,
.contacts-table td.contact-actions,
.symptoms-table td.symptoms-actions,
.procedures-table td.procedures-actions,
.calendar-table td.calendar-actions {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Единый hover-эффект для всех таблиц */
.info-box table tbody tr:hover,
.contacts-table tbody tr:hover,
.symptoms-table tbody tr:hover,
.gastro-table tbody tr:hover,
.clinics-table tbody tr:hover,
.procedures-table tbody tr:hover,
.calendar-table tbody tr:hover,
.vaccine-table-row:hover {
    background: rgba(45, 95, 158, 0.05);
}

/* Убираем специальные правила, которые ломают линии-разделители */
.contacts-table tbody tr:last-child td {
    border-bottom: none;
}

/* Унификация кнопок действий во всех таблицах */
.contact-actions-buttons,
.gastro-actions-buttons,
.symptoms-actions-buttons,
.procedures-actions-buttons,
.clinics-actions-buttons,
.calendar-actions-buttons,
.link-actions-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-height: 44px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Унификация ширины колонки действий */
.contact-actions,
.gastro-actions,
.symptoms-actions,
.procedures-actions,
.clinics-actions,
.calendar-actions,
.link-actions {
    text-align: center;
    width: 100px;
    min-width: 100px;
    padding: 12px 8px !important;
}

.link-name {
    font-weight: 600;
    color: var(--text-primary, #333);
    max-width: 200px;
}

.link-url {
    max-width: 250px;
}

.link-anchor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent, #2D5F9E);
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
}

.link-anchor:hover {
    text-decoration: underline;
}

.link-anchor svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.link-comment {
    color: var(--text-secondary, #666);
    font-size: 13px;
    max-width: 300px;
}

.link-actions {
    text-align: center;
    width: 80px;
}

.link-actions-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-add-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--accent, #2D5F9E);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-link:hover {
    background: #1a3d63;
    transform: scale(1.1);
}

.btn-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(45, 95, 158, 0.3);
    background: transparent;
    color: var(--accent, #2D5F9E);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-edit-link:hover {
    background: var(--accent, #2D5F9E);
    border-color: var(--accent, #2D5F9E);
    color: white;
    opacity: 1;
}

.btn-delete-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: transparent;
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-delete-link:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    opacity: 1;
}

/* Стили для строки редактирования */
.link-row-editing {
    background: rgba(45, 95, 158, 0.05);
}

.link-row-editing td {
    padding: 8px 12px !important;
}

.link-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--accent, #2D5F9E);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    transition: all 0.2s ease;
}

.link-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(45, 95, 158, 0.2);
}

.btn-save-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #10b981;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-save-link:hover {
    background: rgba(16, 185, 129, 0.1);
    opacity: 1;
}

.btn-cancel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-cancel-link:hover {
    background: rgba(107, 114, 128, 0.1);
    opacity: 1;
}

/* Стили для таблицы контактов врачей */
.contacts-header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.contacts-description {
    color: var(--text-secondary, #666);
    margin: 0;
    font-size: 14px;
}

.contacts-search-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

.contacts-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
}

.contacts-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #9ca3af);
    pointer-events: none;
}

.contacts-search-input {
    width: 100%;
    min-width: 250px;
    padding: 10px 40px 10px 40px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-color, #fff);
    color: var(--text-color, #1f2937);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.contacts-search-input:focus {
    outline: none;
    border-color: var(--accent, #2D5F9E);
    box-shadow: 0 0 0 3px rgba(45, 95, 158, 0.1);
}

/* Мобильная версия: поле поиска компактное, рядом с кнопкой «Печать» */
@media (max-width: 768px) {
    .contacts-search-input-wrapper {
        max-width: none;
    }
    .contacts-search-input {
        min-width: 0;
        width: 130px;
        padding: 6px 32px 6px 30px;
        font-size: 12px;
    }
    .contacts-search-input-wrapper .contacts-search-icon {
        width: 14px;
        height: 14px;
        left: 8px;
    }
}

.contacts-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.contacts-search-clear:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-color, #1f2937);
}

.contacts-table-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: var(--bg-color, #fff);
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    font-size: 12px;
}

.contacts-table thead {
    background: #548DC6;
    color: #fff;
}

.contacts-table th {
    padding: 14px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
    background: #548DC6;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.contacts-table th:last-child {
    border-right: none;
}

.contacts-table th.contacts-table-actions {
    text-align: center;
    width: 80px;
}

/* Таблица симптомов — уменьшенный шрифт заголовков */
.symptoms-table th {
    font-size: 12px !important;
    padding: 10px 12px !important;
}

.contacts-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-table tbody tr:hover {
    background: rgba(45, 95, 158, 0.05);
}

.contacts-table tbody tr:last-child td {
    border-bottom: none;
}

.contact-name, .contact-specialty, .contact-clinic, .contact-phone, .contact-email, .contact-address, .contact-website, .contact-notes, .contact-hours {
    padding: 12px 16px !important;
}

.gastro-date, .gastro-meal-type, .gastro-food, .gastro-amount, .gastro-notes, .gastro-appetite {
    padding: 12px 16px !important;
}

.link-name, .link-url, .link-comment {
    padding: 12px 16px !important;
}

.contact-name {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-address {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-anchor {
    color: var(--accent, #2D5F9E);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.contact-anchor:hover {
    color: #1a3d63;
    text-decoration: underline;
}

.contact-anchor svg {
    flex-shrink: 0;
}

.contact-actions {
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.contact-actions-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    min-height: 28px;
}

.btn-view-lab, .btn-view-contact, .btn-edit-contact, .btn-delete-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    width: 38px;
    min-height: 38px;
    height: 38px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1;
}

.btn-view-lab {
    color: #64748b;
}

.btn-view-lab:hover {
    background: rgba(100, 116, 139, 0.1);
}

.btn-view-contact {
    color: #64748b;
}

.btn-view-contact:hover {
    background: rgba(100, 116, 139, 0.1);
    opacity: 1;
}

.btn-edit-contact {
    color: var(--accent, #2D5F9E);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(45, 95, 158, 0.3);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1;
}

.btn-edit-contact:hover {
    background: var(--accent, #2D5F9E);
    color: #fff;
    border-color: var(--accent, #2D5F9E);
}

.btn-delete-contact {
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1;
}

.btn-delete-contact:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* Стили для модального окна просмотра контакта */
.contact-view-modal {
    max-width: 500px;
}

.contact-view-body {
    padding: 20px;
}

.contact-view-field {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.contact-view-field:last-child {
    border-bottom: none;
}

.contact-view-label {
    flex: 0 0 120px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
}

.contact-view-value {
    flex: 1;
    color: var(--text-color, #1f2937);
    font-size: 14px;
    word-break: break-word;
}

.contact-view-value a {
    color: var(--accent, #2D5F9E);
    text-decoration: none;
}

.contact-view-value a:hover {
    text-decoration: underline;
}

/* Стили для модального окна "Анкета" */
.contact-anketa-modal {
    max-width: 550px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.contact-anketa-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.contact-anketa-body .form-field {
    margin-bottom: 15px;
}

.contact-anketa-body .form-field:last-child {
    margin-bottom: 0;
}

.contact-anketa-body .modal-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-color, #fff);
    color: var(--text-color, #1f2937);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.contact-anketa-body .modal-input:focus {
    outline: none;
    border-color: var(--accent, #2D5F9E);
    box-shadow: 0 0 0 2px var(--accent-light);
}

.contact-anketa-body .modal-input::placeholder {
    color: var(--text-secondary, #9ca3af);
}

.contact-anketa-body textarea.modal-input {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.btn-add-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-contact:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

.contact-empty td {
    padding: 40px 20px;
    text-align: center;
}

.contact-empty .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary, #666);
}

.contact-empty .empty-state svg {
    opacity: 0.3;
}

.contact-empty .empty-state p {
    margin: 0;
    font-size: 14px;
}

/* Стили для строки редактирования контактов */
.contact-row-editing {
    background: rgba(45, 95, 158, 0.05);
}

.contact-row-editing td {
    padding: 8px !important;
}

.contact-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-color, #fff);
    color: var(--text-color, #1f2937);
    transition: all 0.2s ease;
}

.contact-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(45, 95, 158, 0.2);
}

.contact-input[type="tel"], .contact-input[type="email"], .contact-input[type="url"] {
    font-family: inherit;
}

.btn-save-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #10b981;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-save-contact:hover {
    background: rgba(16, 185, 129, 0.1);
    opacity: 1;
}

.btn-cancel-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-cancel-contact:hover {
    background: rgba(107, 114, 128, 0.1);
    opacity: 1;
}

/* Стили для таблицы гастродневника */
.gastro-description {
    color: var(--text-secondary, #666);
    margin: 0;
    font-size: 14px;
}

.gastro-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.btn-print-gastro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border, #e0e0e0);
    background: #fff;
    color: var(--text-primary, #333);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-print-gastro:hover {
    background: var(--accent, #2D5F9E);
    color: #fff;
    border-color: var(--accent, #2D5F9E);
}

.btn-print-gastro svg {
    flex-shrink: 0;
}

.gastro-table-container {
    overflow-x: auto;
    margin-top: 24px;
}

.gastro-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
}

.gastro-table thead {
    background: transparent;
    color: var(--text-primary, #1A2A3A);
}

.gastro-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1A2A3A);
    background: transparent;
}

.gastro-table th.gastro-table-actions {
    text-align: center;
    width: 60px;
}

.gastro-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--border, #e0e0e0);
    vertical-align: middle;
}

.gastro-table tbody tr:hover {
    background: rgba(45, 95, 158, 0.05);
}

.gastro-table tbody tr td:last-child,
.gastro-table tbody tr td.gastro-actions,
.gastro-table tbody tr td.contact-actions {
    border-bottom: none !important;
}

.gastro-date {
    font-weight: 600;
    color: var(--text-primary, #333);
    white-space: nowrap;
}

.gastro-meal-type {
    color: var(--text-primary, #333);
}

.gastro-food {
    color: var(--text-primary, #333);
    max-width: 200px;
}

.gastro-amount {
    text-align: center;
    color: var(--text-primary, #333);
    white-space: nowrap;
}

.gastro-notes {
    color: var(--text-secondary, #666);
    font-size: 13px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gastro-appetite {
    white-space: nowrap;
}

.gastro-actions,
.contact-actions {
    text-align: center;
    width: 80px;
    border-bottom: none !important;
}

.gastro-actions-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-add-gastro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--accent, #2D5F9E);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-gastro:hover {
    background: #1a3d63;
    transform: scale(1.1);
}

.btn-edit-gastro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(45, 95, 158, 0.3);
    background: transparent;
    color: var(--accent, #2D5F9E);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-edit-gastro:hover {
    background: rgba(45, 95, 158, 0.1);
    border-color: var(--accent, #2D5F9E);
    opacity: 1;
}

.btn-delete-gastro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: transparent;
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-delete-gastro:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    opacity: 1;
}

.btn-save-gastro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #10b981;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-save-gastro:hover {
    background: rgba(16, 185, 129, 0.1);
    opacity: 1;
}

.btn-cancel-gastro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.btn-cancel-gastro:hover {
    background: rgba(107, 114, 128, 0.1);
    opacity: 1;
}

/* Стили для строки редактирования гастродневника */
.gastro-row-editing {
    background: rgba(45, 95, 158, 0.05);
}

.gastro-row-editing td {
    padding: 8px 12px !important;
}

.gastro-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--accent, #2D5F9E);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    transition: all 0.2s ease;
}

.gastro-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(45, 95, 158, 0.2);
}

.gastro-empty {
    border: none !important;
}

.gastro-empty td {
    border: none !important;
    padding: 0 !important;
}

.gastro-description {
    color: var(--text-secondary, #666);
    margin-bottom: 16px;
    font-size: 14px;
}

.therapy-medication-details {
    font-size: 12px;
    color: #666;
}

.therapy-medication-row {
    margin-bottom: 4px;
    font-size: 12px;
    color: #666;
}

.therapy-medication-times {
    font-size: 12px;
    color: #555;
}

.therapy-medication-dates {
    color: #888;
}

.therapy-medication-comment {
    font-style: italic;
    color: #555;
    margin-top: 4px;
}

.therapy-add-med-btn {
    background: none;
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    width: 100%;
    text-align: center;
    transition: all 0.2s;
}

.therapy-add-med-btn:hover {
    border-color: var(--accent, #6EC2BE);
    color: var(--accent, #6EC2BE);
    background: #f0f9f9;
}

/* Футер курса */
.therapy-course-footer {
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.therapy-mark-btn {
    background: var(--accent, #6EC2BE);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.therapy-mark-btn:hover {
    opacity: 0.9;
}

/* ============================================================
   МОДАЛЬНЫЕ ОКНА (как на картинке)
   ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.modal-container {
    background: var(--card-bg, white);
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--card-bg, white);
    border-bottom: 1px solid var(--border, #E2E6EA);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-main, #1A2A3A);
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-secondary, #5A6E7C);
    transition: 0.2s;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
}

.modal-close:hover {
    background: var(--accent-light, rgba(45, 95, 158, 0.08));
    color: var(--accent, #2D5F9E);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.form-field {
    margin-bottom: 15px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main, #1A2A3A);
}

.modal-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--input-bg, white);
    color: var(--text-main, #1A2A3A);
    transition: all 0.2s;
    box-sizing: border-box;
}
.modal-input:focus {
    outline: none;
    border-color: var(--accent, #2D5F9E);
    box-shadow: 0 0 0 2px var(--accent-light);
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px 24px;
    background: var(--card-bg, white);
    border-top: 1px solid var(--border, #E2E6EA);
}

.btn-save {
    background: var(--accent, #2D5F9E);
    border: none;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 14px;
    color: white;
    cursor: pointer;
    transition: 0.2s;
}

.btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 95, 158, 0.3);
}

.btn-cancel {
    background: transparent;
    border: 1.5px solid var(--border, #E2E6EA);
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary, #5A6E7C);
    cursor: pointer;
    transition: 0.2s;
}

.btn-cancel:hover {
    background: var(--accent-light, rgba(45, 95, 158, 0.08));
    border-color: var(--accent, #2D5F9E);
    color: var(--accent, #2D5F9E);
}

.modal-view-value {
    padding: 12px 14px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    font-size: 14px;
    color: var(--text-main, #1A2A3A);
    background: var(--input-bg, #F4F6FA);
    min-height: 20px;
    word-break: break-word;
}

/* ============================================================
   ИКОНКА СКРЕПКИ ДЛЯ МЕДИЦИНСКОЙ ФОРМЫ
   ============================================================ */
.medical-form-attach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
}

.medical-form-attach-icon:hover {
    opacity: 1 !important;
    transform: scale(1.15);
    background-color: rgba(45, 95, 158, 0.1);
}

.medical-form-attach-icon:active {
    transform: scale(0.95);
}

/* ============================================================
   КНОПКА СКРЕПКИ В ОБЛАСТИ ДЕЙСТВИЙ МОДАЛЬНОГО ОКНА
   ============================================================ */
.medical-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    font-size: 18px;
    transition: background-color 0.2s, transform 0.2s;
}

.medical-attach-btn:hover {
    background-color: rgba(45, 95, 158, 0.1);
    transform: scale(1.05);
}

.medical-attach-btn:active {
    transform: scale(0.95);
}

/* ============================================================
   СПИСОК ПРИКРЕПЛЁННЫХ ФАЙЛОВ
   ============================================================ */
.attachments-list {
    margin-top: 10px;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--accent-light);
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background-color 0.2s;
}

.attachment-item:hover {
    background-color: rgba(45, 95, 158, 0.15);
}

.attachment-icon {
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s;
}

.attachment-icon:hover {
    transform: scale(1.1);
}

.attachment-name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text-primary);
}

.attachment-name:hover {
    text-decoration: underline;
}

.attachment-delete-btn {
    padding: 2px 6px !important;
    font-size: 11px !important;
    color: var(--danger) !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    transition: opacity 0.2s;
}

.attachment-delete-btn:hover {
    opacity: 0.7;
}

/* ============================================================
   INLINE-ВЛОЖЕНИЯ В СПИСКЕ МЕДИЦИНСКИХ ЗАПИСЕЙ
   ============================================================ */
.inline-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--accent-light);
    border-radius: 6px;
    font-size: 12px;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.inline-attachment:hover {
    background-color: rgba(45, 95, 158, 0.2);
    transform: scale(1.02);
}

/* ============================================================
   СТИЛИ ДЛЯ ФУНКЦИИ ШАРИНГА ПАПКИ "ДРУГОЕ"
   ============================================================ */

/* Кнопка "Поделиться" */
.btn-share {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-body);
    line-height: 1;
    min-height: 26px;
    box-sizing: border-box;
}

.btn-share:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Модальное окно шаринга - единый дизайн */
.share-modal {
    max-width: 480px;
    border-radius: 16px;
    overflow: hidden;
}

.share-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.share-modal .modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.share-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.share-modal-close:hover {
    color: #333;
}

.share-modal-body {
    padding: 16px;
    background: #ffffff;
}

/* Карточки настроек - единый стиль */
.share-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.share-card:last-child {
    margin-bottom: 0;
}

.share-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.share-card-content {
    flex: 1;
    min-width: 0;
}

.share-card-title {
    font-weight: 600;
    font-size: 15px;
    color: #1a1a1a;
}

.share-card-desc {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
    line-height: 1.4;
}

.share-card-info {
    font-size: 16px;
    color: #667eea;
    flex-shrink: 0;
}

/* Переключатель (toggle switch) */
.share-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.share-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.share-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: 0.3s;
    border-radius: 28px;
}

.share-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.share-toggle-switch input:checked + .share-toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.share-toggle-switch input:checked + .share-toggle-slider:before {
    transform: translateX(20px);
}

/* Группа карточек */
.share-cards-group {
    margin-top: 0;
}

/* Поля ввода */
.share-card-field {
    padding: 0 4px;
    margin-bottom: 12px;
}

.share-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background: #ffffff;
    box-sizing: border-box;
}

.share-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Выпадающий список */
.share-select {
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background: #ffffff;
    cursor: pointer;
    min-width: 130px;
}

.share-select:focus {
    outline: none;
    border-color: #667eea;
}

/* Футер модального окна */
.share-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    background: #ffffff;
}

.share-btn-create {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn-create:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.share-btn-create:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Результат создания ссылки */
.share-result {
    margin-top: 16px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.share-result-success {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.share-result-icon {
    font-size: 24px;
}

.share-result-text {
    font-weight: 600;
    color: #2e7d32;
    font-size: 15px;
}

/* Группа URL */
.share-result-url-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.share-url-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 13px;
    background: #f8f9fa;
}

.share-btn-copy {
    background: #ffc107;
    color: #333;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.share-btn-copy:hover {
    background: #ffb300;
}

/* Действия с ссылкой */
.share-result-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.share-btn-action {
    background: #f5f5f5;
    color: #333;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.share-btn-action:hover {
    background: #e8e8e8;
}

.share-btn-revoke {
    color: #e53935;
}

.share-btn-revoke:hover {
    background: #ffebee;
}

/* Список активных ссылок */
.share-links-list {
    margin-top: 16px;
}

.share-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.share-link-info {
    flex: 1;
    min-width: 0;
}

.share-link-url {
    font-size: 13px;
    color: #667eea;
    word-break: break-all;
    margin-bottom: 4px;
}

.share-link-meta {
    font-size: 12px;
    color: #666;
}

/* Адаптивность */
@media (max-width: 520px) {
    .share-modal {
        max-width: 100%;
        margin: 16px;
        border-radius: 12px;
    }
    
    .share-modal-body {
        padding: 12px;
    }
    
    .share-card {
        padding: 12px;
    }
    
    .share-result-url-group {
        flex-direction: column;
    }
    
    .share-btn-copy {
        width: 100%;
    }
}

/* ===== НОВЫЙ ДИЗАЙН МОДАЛЬНОГО ОКНА ШАРИНГА ===== */

/* Модальное окно */
.share-modal-new {
    max-width: 480px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Заголовок модального окна */
.share-modal-header {
    padding: 24px 24px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.share-modal-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-modal-header h2::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.share-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 8px;
    transition: all 0.2s;
}

.share-modal-close:hover {
    background: #f5f5f5;
    color: #333;
}

/* Тело модального окна */
.share-modal-body-new {
    padding: 0 16px 16px;
    background: #ffffff;
}

/* Карточка просмотра */
.share-view-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 14px;
    margin-bottom: 12px;
}

.share-view-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    margin-right: 14px;
    flex-shrink: 0;
}

.share-view-content {
    flex: 1;
    min-width: 0;
}

.share-view-title {
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.share-view-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.share-view-info {
    flex-shrink: 0;
    color: #666;
}

/* Карточка настроек */
.share-settings-card {
    background: #f5f5f5;
    border-radius: 14px;
    padding: 8px 0;
    margin-bottom: 16px;
}

/* Строка настройки */
.share-setting-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    min-height: 56px;
}

.share-setting-row + .share-setting-row {
    border-top: 1px solid #ebebeb;
}

.share-setting-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    margin-right: 14px;
    flex-shrink: 0;
}

.share-setting-label {
    flex: 1;
    font-size: 15px;
    color: #1a1a1a;
}

/* Переключатель (toggle) */
.share-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}

.share-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.share-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d1d1;
    transition: 0.3s;
    border-radius: 26px;
}

.share-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.share-toggle input:checked + .share-toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.share-toggle input:checked + .share-toggle-slider:before {
    transform: translateX(18px);
}

/* Поля ввода */
.share-input-new {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background: #ffffff;
    box-sizing: border-box;
}

.share-input-new:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Выпадающий список */
.share-select-new {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    cursor: pointer;
    min-width: 120px;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.share-select-new:focus {
    outline: none;
}

/* Футер модального окна */
.share-modal-footer-new {
    padding: 16px;
    display: flex;
    gap: 10px;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
}

/* Кнопка копирования */
.share-btn-copy {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffd60a;
    color: #1a1a1a;
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn-copy:hover {
    background: #ffcc00;
    transform: translateY(-1px);
}

/* Кнопки действий */
.share-btn-action {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #333;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn-action:hover {
    background: #ebebeb;
}

/* Адаптивность */
@media (max-width: 520px) {
    .share-modal-new {
        max-width: 100%;
        margin: 16px;
        border-radius: 16px;
    }
    
    .share-modal-header {
        padding: 20px 20px 16px;
    }
    
    .share-modal-header h2 {
        font-size: 20px;
    }
    
    .share-modal-body-new {
        padding: 0 12px 12px;
    }
    
    .share-view-card,
    .share-setting-row {
        padding: 12px;
    }
    
    .share-modal-footer-new {
        padding: 12px;
        gap: 8px;
    }
    
    .share-btn-copy {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .share-btn-action {
        width: 44px;
        height: 44px;
    }
}

.btn-qr:hover {
    background: #7b1fa2;
}

.btn-revoke {
    background: #f44336;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-revoke:hover {
    background: #d32f2f;
}

/* Список активных ссылок */
.share-link-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 8px;
}

.share-link-info {
    flex: 1;
    min-width: 0;
}

.share-link-url {
    font-size: 12px;
    color: #667eea;
    word-break: break-all;
    margin-bottom: 4px;
}

.share-link-meta {
    font-size: 11px;
    color: #666;
}

/* Адаптивность */
@media (max-width: 600px) {
    .share-url-group {
        flex-direction: column;
    }

    .share-actions {
        flex-direction: column;
    }

    .share-actions button {
        width: 100%;
    }

    .share-link-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .share-link-item .btn-revoke {
        margin-top: 10px;
        width: 100%;
    }
}

/* Кнопки скачивания QR-кода */
.qr-download-btn {
    background: #f0f0f0;
    color: var(--text-main);
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    text-align: center;
    width: 100%;
}

.qr-download-btn:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

.qr-download-btn:active {
    transform: translateY(0);
}


/* =========================================================
   БЛОК 32: УТИЛИТАРНЫЕ КЛАССЫ (замена inline-стилей в JS)
   ========================================================= */

/* --- OAuth уведомления (showOAuthNotification) --- */
.oauth-notification-box {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success-accent, #4CAF50);
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font-body);
    z-index: 10001;
    animation: slideInRight 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 400px;
}
.oauth-notification-box--error {
    background: #e74c3c;
}
.oauth-notification-box--out {
    animation: slideOutRight 0.3s ease;
}
.oauth-notification-icon {
    font-size: 18px;
}

/* --- Полноэкранный loader (showLoading / hideLoading) --- */
.js-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.js-loader-box {
    background: var(--card-bg, #fff);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
}
.js-loader-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-main, #1A2A3A);
}
.js-loader-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #666);
}

/* --- Overlay для JS-модалок (замена повторяющегося style.cssText) --- */
.js-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.js-modal-overlay--scroll {
    overflow-y: auto;
}
.js-modal-overlay--z3k {
    z-index: 3000;
}
.js-modal-overlay--z5k {
    z-index: 5000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}
.js-modal-overlay--z10k {
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}
.js-modal-overlay--z100k {
    z-index: 100000;
}
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: fadeIn 0.2s ease;
}

/* --- Вложенная модалка внутри overlay --- */
.js-modal-box {
    background: var(--card-bg, white);
    border-radius: 16px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    overflow: hidden;
}
.js-modal-box--scroll {
    max-width: 500px;
    overflow-y: auto;
}

/* --- Кнопки действий внутри модалок (замена onmouseover/onmouseout) --- */
.modal-action-btn {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}
.modal-action-btn--cancel {
    background: transparent;
    border: 1px solid var(--border, #E2E6EA);
    color: var(--text-main, #1A2A3A);
}
.modal-action-btn--cancel:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.modal-action-btn--primary {
    background: var(--accent-light, rgba(45, 95, 158, 0.08));
    border: 1px solid var(--accent, #2D5F9E);
    color: var(--accent, #2D5F9E);
}
.modal-action-btn--primary:hover {
    background: var(--accent, #2D5F9E);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 95, 158, 0.3);
}
.modal-action-btn--danger {
    background: #f44336;
    border: 1px solid #f44336;
    color: #fff;
}
.modal-action-btn--danger:hover {
    background: #d32f2f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* --- Кнопка удаления в альбоме питомцев --- */
.album-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 53, 69, 0.9);
    border: none;
    border-radius: 20px;
    width: 28px;
    height: 28px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
}
.album-delete-btn:hover {
    background: #dc3545;
}

/* --- Карточка добавления питомца в альбоме --- */
.album-add-pet-card {
    border: 2px dashed var(--accent);
    border-radius: 12px;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 220px;
    transition: all 0.2s;
}
.album-add-pet-card:hover {
    background: var(--accent-light);
    transform: scale(1.02);
}

/* --- Кнопка ОК (простая, с opacity-эффектом) --- */
.btn-simple-hover {
    opacity: 1;
    transition: opacity 0.2s;
}
.btn-simple-hover:hover {
    opacity: 0.8;
}

/* --- Кнопка Отмена (светло-серая с hover) --- */
.btn-cancel-light {
    background: #f5f5f5;
    transition: background 0.2s;
}
.btn-cancel-light:hover {
    background: #e0e0e0;
}

/* --- Пустые состояния для графиков / метрик --- */
.metrics-empty-box {
    margin-top: 20px;
    padding: 40px;
    text-align: center;
    background: var(--hover-bg, #f8fafc);
    border-radius: 12px;
    color: var(--text-secondary, #666);
}

/* --- Удаление аккаунта: шапка модалки --- */
.account-delete-header {
    background: #f44336;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.account-delete-header__icon {
    font-size: 24px;
}
.account-delete-header__title {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}
.account-delete-body {
    padding: 24px;
}
.account-delete-body__text {
    margin: 0 0 16px 0;
    color: var(--text-main, #333);
    font-size: 14px;
    line-height: 1.6;
}
.account-delete-warning {
    background: #fef3cd;
    border-left: 3px solid #ffc107;
    padding: 12px 14px;
    border-radius: 6px;
    margin-top: 8px;
}
.account-delete-warning__head {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 4px;
}
.account-delete-warning__body {
    font-size: 13px;
    color: #7c2d12;
    line-height: 1.5;
}

/* =========================================================
   БЛОК 33: МОДАЛЬНОЕ ОКНО СОГЛАСИЯ НА АВТОПРОДЛЕНИЕ
   ========================================================= */

.tariff-consent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.tariff-consent-modal {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.tariff-consent-header {
    padding: 24px 24px 16px;
    border-bottom: 2px solid var(--border, #e0e0e0);
}

.tariff-consent-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent, #2D5F9E);
    margin: 0;
}

.tariff-consent-body {
    padding: 24px;
}

.tariff-consent-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #555);
}

.tariff-consent-text p {
    margin: 0 0 16px 0;
}

.tariff-consent-text p:last-child {
    margin-bottom: 0;
}

.tariff-consent-header-info {
    background: var(--accent-light, rgba(45, 95, 158, 0.1));
    border-left: 3px solid var(--accent, #2D5F9E);
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.tariff-consent-header-info strong {
    color: var(--accent, #2D5F9E);
    font-size: 16px;
}

.tariff-consent-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Бургер-меню действий в Лечении */
.therapy-burger-wrap { position: relative; display: inline-block; }
.therapy-burger-dropdown { display: none; position: absolute; top: 100%; right: 0; background: var(--sidebar); border: 1px solid var(--border); border-radius: 10px; padding: 4px 0; z-index: 200; min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.therapy-burger-item { padding: 8px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--border); }
.therapy-burger-item:last-child { border-bottom: none; }
.therapy-burger-item:hover { background: var(--accent-light); }

.event-delete-btn { color: #e74c3c; border-color: #e74c3c; }
.event-delete-btn:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }

.desktop-only { display: inline-flex; }
.mobile-only { display: none; }
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: inline-flex !important; }
}

/* ОНБОРДИНГ / ТУР */
.tour-welcome-overlay {
    position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
}
.tour-welcome-card {
    background: var(--card-bg); border-radius: 20px; padding: 32px; text-align: center;
    max-width: 360px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.tour-overlay {
    position: fixed; inset: 0; z-index: 19998; background: rgba(0,0,0,0.5);
}
.tour-spotlight {
    position: fixed; z-index: 19999; border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
    pointer-events: none; transition: all 0.3s ease;
}
.tour-tooltip {
    position: fixed; z-index: 20000; background: var(--card-bg);
    border-radius: 16px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    pointer-events: auto; display: none;
}
@media (max-width: 768px) {
    .tour-tooltip { max-width: 340px !important; }
    .tour-welcome-card { padding: 24px; }
}

/* Подсказки разделов (hover) */
.nav-hint-tooltip {
    position: fixed;
    z-index: 30000;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    display: none;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
    pointer-events: auto;
}
.nav-hint-tooltip .nav-hint-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--accent);
}
.nav-hint-tooltip .nav-hint-text {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 12px;
}
.nav-hint-tooltip .nav-hint-dismiss {
    display: block;
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: underline;
}
.nav-hint-tooltip .nav-hint-dismiss:hover { color: var(--accent); }

/* Подсветка пункта "Показывать подсказки при наведении" в Настройках */
.hint-row-highlight {
    animation: hintRowPulse 1.2s ease-in-out infinite;
}
.hint-row-highlight .settings-item-left span:last-child {
    animation: hintTextShimmer 1.2s linear infinite;
    font-weight: 700;
}
.hint-row-highlight input[type="checkbox"] {
    animation: hintRowPulse 1.2s ease-in-out infinite;
}
@keyframes hintRowPulse {
    0%, 100% { background: var(--accent-light); box-shadow: 0 0 0 0 rgba(45,95,158,0.45); }
    50% { background: var(--accent-mid); box-shadow: 0 0 0 5px rgba(45,95,158,0.12); }
}
@keyframes hintTextShimmer {
    0% { color: var(--accent); }
    33% { color: #f59e0b; }
    66% { color: #10b981; }
    100% { color: var(--accent); }
}

.trial-banner-overlay {
    position: fixed; inset: 0; z-index: 20001; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
}
.trial-banner-card {
    background: var(--card-bg); border-radius: 20px; padding: 32px; text-align: center;
    max-width: 440px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.trial-banner-card h2 { margin: 0 0 8px; font-size: 20px; }
.trial-banner-card p { margin: 0 0 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.trial-banner-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
    .trial-banner-card { padding: 24px; }
    .trial-banner-actions { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ: ЗДОРОВЬЕ
   ═══════════════════════════════════════════ */

.mh-date-list { display: flex; flex-direction: column; gap: 10px; }
.mh-date-card {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card-bg); border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer;
    transition: background 0.15s;
}
.mh-date-card:active { background: #f1f5f9; }
.mh-date-card-label { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.mh-date-card-arrow { font-size: 18px; color: #94a3b8; }

.mh-detail-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
    padding-bottom: 14px; border-bottom: 2px solid #e2e8f0;
}

.mh-detail-category { margin-bottom: 20px; }
.mh-detail-cat-header {
    font-size: 13px; font-weight: 600; color: #2D5F9E; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 10px; padding-left: 4px;
}

.mh-indicator-card {
    background: var(--card-bg); border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 8px;
}
.mh-indicator-name {
    font-size: 16px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 6px;
}
.mh-indicator-row {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; color: var(--text-secondary);
}
.mh-indicator-norm { color: #64748b; }
.mh-indicator-result { font-weight: 600; color: var(--text-primary); }

.mh-indicator-danger { border-left: 4px solid #ef4444; background: #fef2f2; }
.mh-deviation { font-size: 12px; margin-left: 6px; font-weight: 700; }
.mh-deviation-low { color: #ef4444; }
.mh-deviation-high { color: #ef4444; }

.mh-editing { cursor: default; }
.mh-edit-row { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.mh-edit-input {
    flex: 1 1 0; min-width: 0; padding: 8px 10px; border: 2px solid #2D5F9E;
    border-radius: 8px; font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.mh-edit-input:focus { outline: none; border-color: #2D5F9E; box-shadow: 0 0 0 3px rgba(45,95,158,0.15); }
.mh-edit-row .btn,
.mh-edit-row .btn-sm { flex-shrink: 0; padding: 6px 10px; font-size: 14px; min-width: 32px; }

/* Модальное окно ввода */
.mh-modal-card {
    background: var(--card-bg); border-radius: 20px; max-width: 500px;
    width: 92%; padding: 24px; max-height: 90vh; overflow-y: auto;
    margin: 20px auto;
}
.mh-modal-field { margin-bottom: 14px; }
.mh-modal-field label {
    display: block; font-weight: 500; font-size: 13px;
    color: var(--text-secondary); margin-bottom: 4px;
}
.mh-modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.mh-modal-actions .btn { flex: 1; }

.mh-pending-item {
    display: flex; align-items: center; justify-content: space-between;
    background: #f1f5f9; border-radius: 8px; padding: 8px 12px;
    margin-bottom: 6px; font-size: 13px;
}

/* ═══════════════════════════════════════════
   МИКРО-АНИМАЦИИ
   ═══════════════════════════════════════════ */

.symptom-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.symptom-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.symptom-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.symptom-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.symptom-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .symptom-card-del {
        display: none;
    }
}

.vaccine-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.vaccine-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.vaccine-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.vaccine-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.vaccine-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .vaccine-card-del {
        display: none;
    }
}

.med-card {
    position: relative;
    cursor: pointer;
}
.med-card:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}
.med-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.med-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.med-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.med-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.med-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .med-card-del {
        display: none;
    }
}

.planner-card {
    position: relative;
    cursor: pointer;
}
.planner-card:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}
.planner-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.planner-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.planner-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.planner-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.planner-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .planner-card-del {
        display: none;
    }
}

.expense-card {
    position: relative;
    cursor: pointer;
}
.expense-card:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}
.expense-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.expense-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.expense-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.expense-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.expense-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .expense-card-del {
        display: none;
    }
}

.gastro-card {
    position: relative;
    cursor: pointer;
}
.gastro-card:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}
.gastro-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.gastro-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.gastro-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.gastro-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.gastro-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .gastro-card-del {
        display: none;
    }
}

.contact-card {
    position: relative;
    cursor: pointer;
}
.contact-card:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}
.contact-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.contact-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.contact-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.contact-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
@media (min-width: 769px) {
    .contact-card-date { display: none; }
}
.contact-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .contact-card-del {
        display: none;
    }
}

.link-card {
    position: relative;
    cursor: pointer;
}
.link-card:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}
.link-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.link-card-info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.link-card-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.link-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
@media (min-width: 769px) {
    .link-card-date { display: none; }
}
.link-card-btns {
    display: flex;
    gap: 8px;
}

@media (min-width: 481px) {
    .link-card-del {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {

    /* Пульсация главных кнопок */
    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(45, 95, 158, 0.4); }
        50% { box-shadow: 0 0 0 8px rgba(45, 95, 158, 0); }
    }
    .btn-primary, .startup-form-btn, .tariff-card.popular .btn {
        animation: pulse-glow 2.5s ease-in-out infinite;
    }

    /* Перелив заголовков */
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }
    h2:not(.startup-form-title):not(.privacy-title):not(.pt),
    .tariff-name {
        background: linear-gradient(90deg, var(--text-main) 0%, var(--accent) 50%, var(--text-main) 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 4s ease-in-out infinite;
    }

    /* Плавное появление блоков */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .info-box, .tariff-card, .lab-card, .symptom-card, .vaccine-card,
    .contact-card, .expense-card, .gastro-card, .link-card, .med-card, .planner-card {
        animation: fadeInUp 0.4s ease-out both;
    }
    .info-box:nth-child(2), .tariff-card:nth-child(2), .lab-card:nth-child(2),
    .symptom-card:nth-child(2), .vaccine-card:nth-child(2) { animation-delay: 0.08s; }
    .info-box:nth-child(3), .tariff-card:nth-child(3), .lab-card:nth-child(3),
    .symptom-card:nth-child(3), .vaccine-card:nth-child(3) { animation-delay: 0.16s; }
    .info-box:nth-child(4), .tariff-card:nth-child(4), .lab-card:nth-child(4),
    .symptom-card:nth-child(4), .vaccine-card:nth-child(4) { animation-delay: 0.24s; }

    /* Тактильный отклик — микросжатие при клике */
    .btn:active, .btn-primary:active, .btn-outline:active,
    .btn-edit-contact:active, .btn-delete-contact:active, .btn-view-lab:active {
        transform: scale(0.94);
        transition: transform 0.1s ease;
    }

    /* Парение карточек */
    .tariff-card, .lab-card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .tariff-card:hover, .lab-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.1);
    }

    /* Мерцание бейджа "Популярный" */
    @keyframes badgeShine {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    .tariff-badge {
        animation: badgeShine 2s ease-in-out infinite;
    }

    /* Плавный вход модалок */
    .js-modal-overlay {
        animation: fadeIn 0.25s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .js-modal-overlay > div:first-child {
        animation: fadeInUp 0.3s ease-out;
    }

    /* Подсветка активного пункта меню */
    .nav-item {
        transition: background 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .nav-item:hover {
        transform: scale(1.08) translateY(-2px);
    }
    .nav-item:active {
        transform: scale(0.95);
    }

    /* Живое "шевеление" при наведении — лёгкий каскад */
    @keyframes wiggle {
        0%, 100% { transform: scale(1.08) translateY(-2px) rotate(0deg); }
        25% { transform: scale(1.08) translateY(-2px) rotate(0.5deg); }
        75% { transform: scale(1.08) translateY(-2px) rotate(-0.5deg); }
    }
    .nav-item:hover {
        animation: wiggle 0.6s ease-in-out;
    }

}

/* ═══════════════════════════════════════════
   СПЛЕШ-СКРИН
   ═══════════════════════════════════════════ */

#splash-screen {
    position: fixed; inset: 0; z-index: 100000;
    background: #1a3a5c;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.6s ease, transform 0.5s ease;
}
#splash-screen.fade-out {
    opacity: 0; transform: scale(1.05); pointer-events: none;
}
.splash-logo {
    animation: splashPulse 2s ease-in-out infinite;
}
@keyframes splashPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.08); opacity: 1; }
}
.splash-title {
    color: #fff; font-size: 32px; font-weight: 800; letter-spacing: 6px;
    margin-top: 20px;
    background: linear-gradient(90deg, #60a5fa, #fff, #60a5fa);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: splashShimmer 2s ease-in-out infinite;
}
@keyframes splashShimmer {
    0%, 100% { background-position: -200% center; }
    50% { background-position: 200% center; }
}
.splash-subtitle {
    color: rgba(255,255,255,0.7); font-size: 13px; margin-top: 12px;
    letter-spacing: 1px; animation: splashFadeIn 1.2s ease-out 0.5s both;
}
@keyframes splashFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) {
    .splash-logo img {
        width: 250px;
        height: 250px;
    }
    .splash-title {
        font-size: 48px;
        letter-spacing: 8px;
    }
    .splash-subtitle {
        font-size: 18px;
    }
}

/* Архив: выделение файла на мобильном */
.archive-file-selected {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
}
@media (max-width: 768px) {
    .archive-file-item {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    .archive-file-selected {
        outline-width: 3px;
        background: var(--accent-light);
    }
    .archive-action-bar-btn {
        font-size: 18px;
        min-width: 40px;
        min-height: 40px;
    }
    .therapy-medication-item {
        cursor: pointer;
    }
    .therapy-medication-actions {
        display: none;
    }
}