@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
    
    :root {
        --brand-50: #f0fbf9;
        --brand-100: #ccf2ec;
        --brand-500: #0d9488; 
        --brand-600: #0b3c4d; 
        --brand-700: #0a2d37; 
        --brand-accent: #10b981; 
        --brand-gold: #d4af37;
        --brand-danger: #ef4444;
        --brand-warning: #f59e0b;
        --text-light: #f0fbf9;
        --text-muted: #a2d3d0;
    }

    /* Стили для Тильды - важно для переопределения базовых стилей*/
    #allrecords, .t-records, .vr-dashboard-wrapper {
        background-color: var(--brand-700) !important;
    }
    .t-btn { /* Базовая кнопка Тильды */
        color: var(--brand-700) !important;
        background-color: var(--brand-accent) !important;
        border: none !important;
    }
    .t-btn:hover {
        background-color: var(--brand-500) !important;
    }
    body { /* Фон всей страницы */
        background-color: var(--brand-700) !important;
    }

    .vr-dashboard {
        font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        background-color: var(--brand-700) !important;
        color: var(--text-light) !important;
        min-height: 100vh;
        padding-bottom: 60px;
        transition: filter 0.5s ease;
    }

    /* Стили экрана авторизации */
    .auth-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(10, 45, 55, 0.9);
        backdrop-filter: blur(10px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    .auth-card {
        background: var(--brand-600); /* ИСПРАВЛЕНО ЗДЕСЬ */
        border: 2px solid var(--brand-accent);
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
        border-radius: 28px;
        padding: 40px;
        max-width: 400px;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .auth-input, .vrs-input { /* Единый стиль для инпутов */
        background: rgba(10, 45, 55, 0.6);
        border: 1px solid rgba(204, 242, 236, 0.2);
        border-radius: 12px;
        padding: 14px;
        color: #fff;
        width: 100%;
        font-size: 16px;
        margin-bottom: 20px;
        outline: none;
        text-align: center;
        box-sizing: border-box;
    }
    .vrs-input {
        margin-bottom: unset; /* чтобы не перекрывало другие стили */
        font-size: 14px;
        text-align: left;
    }
    .auth-input:focus, .vrs-input:focus {
        border-color: var(--brand-accent);
    }
    .auth-input::placeholder, .vrs-input::placeholder {
        color: var(--text-muted);
    }
    /* Подписи полей анкеты образа жизни */
    .svy-label {
        display: block;
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 6px;
        font-weight: 600;
    }
    select.vrs-input {
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }
    select.vrs-input option {
        background: var(--brand-600);
        color: #fff;
    }
    /* Встроенные психотесты */
    .vrs-test-block {
        margin-top: 8px;
        padding: 16px;
        border: 1px solid rgba(16, 185, 129, 0.25);
        border-radius: 14px;
        background: rgba(10, 45, 55, 0.35);
    }
    .svy-test-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 2px; }
    .svy-test-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
    .svy-q { margin-bottom: 10px; }
    .svy-q-text { font-size: 12px; color: var(--text-light); margin-bottom: 5px; }
    .svy-test-score {
        margin-top: 10px;
        font-size: 13px;
        font-weight: 700;
        color: var(--brand-accent);
        text-align: center;
    }
    /* Модалка ручного ввода анализов */
    .manual-card {
        background: var(--brand-600);
        border: 1px solid var(--brand-accent);
        border-radius: 24px;
        padding: 24px;
        width: 100%;
        max-width: 680px;
        max-height: 88vh;
        overflow-y: auto;
        box-sizing: border-box;
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.25);
    }
    .manual-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
    .manual-close {
        background: rgba(239, 68, 68, 0.15); color: var(--brand-danger);
        border: none; border-radius: 10px; width: 36px; height: 36px;
        font-size: 16px; cursor: pointer; flex-shrink: 0;
    }
    .manual-section-title {
        font-size: 13px; font-weight: 800; color: var(--brand-accent);
        text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 10px;
    }
    .manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .manual-field label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    @media (max-width: 600px) { .manual-grid { grid-template-columns: 1fr; } }


    /* Размытие дашборда до авторизации */
    .dashboard-locked {
        filter: blur(8px);
        pointer-events: none;
    }

    .vrs-nav {
        background: var(--brand-600);
        border-bottom: 1px solid rgba(204, 242, 236, 0.1);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .vrs-nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* Меню «Разделы» в шапке ЛК (строит ensureNav) */
    .vrs-navmenu { position: relative; display: inline-flex; margin-left: auto; margin-right: 14px; }
    .vrs-navmenu-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: .15s; }
    .vrs-navmenu-btn:hover { background: rgba(255,255,255,.15); }
    .vrs-navmenu-btn > svg:first-child { width: 15px; height: 15px; flex: none; }
    .vrs-navmenu-caret { width: 13px; height: 13px; opacity: .75; transition: transform .2s; flex: none; }
    .vrs-navmenu.open .vrs-navmenu-caret { transform: rotate(180deg); }
    .vrs-navmenu-drop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: #0d2b33; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; box-shadow: 0 22px 50px rgba(0,0,0,.5); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .16s; z-index: 200; }
    .vrs-navmenu.open .vrs-navmenu-drop { opacity: 1; visibility: visible; transform: translateY(0); }
    .vrs-navmenu-drop a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #dbe9e7; padding: 10px 11px; border-radius: 9px; text-decoration: none; white-space: nowrap; transition: .13s; }
    .vrs-navmenu-drop a:hover { background: rgba(255,255,255,.1); color: #fff; }
    .vrs-navmenu-drop a svg { width: 16px; height: 16px; color: #34d399; flex: none; }
    @media (max-width: 560px) { .vrs-navmenu-lbl { display: none; } .vrs-navmenu { margin-right: 8px; } }

    .vrs-container {
        max-width: 1200px;
        margin: 40px auto 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .vrs-grid-12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 24px;
        align-items: stretch;
    }

    .vrs-panel, .vrs-card { /* Объединяем стили для панелей и карточек */
        background: var(--brand-600);
        border: 1px solid rgba(204, 242, 236, 0.1);
        border-radius: 28px;
        padding: 32px;
        box-shadow: 0 20px 40px rgba(10, 45, 55, 0.3);
        position: relative;
        overflow: hidden;
    }

    /* Био-аватар */
    .avatar-container {
        display: flex;
        gap: 24px;
        align-items: center;
        flex-wrap: wrap;
        background: radial-gradient(ellipse at 35% 35%, rgba(16,185,129,0.10), rgba(10,45,55,0.45));
        padding: 20px;
        border-radius: 24px;
        border: 1px solid rgba(204, 242, 236, 0.06);
        margin-top: 20px;
    }
    /* Голографическая сцена аватара (статичная, синий «каркас») */
    .avatar-stage {
        position: relative;
        width: 210px;
        height: 392px;
        flex-shrink: 0;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        background:
            radial-gradient(ellipse 60% 40% at 50% 78%, rgba(56,214,255,0.12), transparent 70%),
            radial-gradient(ellipse at 50% 40%, rgba(10,30,55,0.55), rgba(4,12,26,0.9));
    }
    /* Фон с частицами/боке */
    .avatar-stage::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(2px 2px at 18% 22%, rgba(150,225,255,0.7), transparent),
            radial-gradient(2px 2px at 78% 16%, rgba(150,225,255,0.5), transparent),
            radial-gradient(1.5px 1.5px at 30% 70%, rgba(150,225,255,0.5), transparent),
            radial-gradient(1.5px 1.5px at 85% 60%, rgba(150,225,255,0.45), transparent),
            radial-gradient(1px 1px at 60% 30%, rgba(150,225,255,0.6), transparent),
            radial-gradient(2.5px 2.5px at 12% 55%, rgba(120,200,255,0.35), transparent),
            radial-gradient(1.5px 1.5px at 92% 82%, rgba(150,225,255,0.4), transparent),
            radial-gradient(1px 1px at 45% 88%, rgba(150,225,255,0.5), transparent);
        pointer-events: none;
    }
    .avatar-rings, .avatar-float, .avatar-hologram {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    /* Видео-аватар */
    .avatar-video {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        display: block;
    }

    /* Полупрозрачный силуэт-«стекло» */
    .av-body { fill: rgba(56, 214, 255, 0.05); stroke: rgba(56,214,255,0.55); stroke-width: 1; stroke-linejoin: round; }
    .av-bust { fill: none; stroke: rgba(56,214,255,0.45); stroke-width: 0.9; }

    /* Каркасная сетка тела */
    .av-mesh {
        fill: none;
        stroke: #38d6ff;
        stroke-width: 0.7;
        opacity: 0.9;
        filter: drop-shadow(0 0 1.5px #38d6ff) drop-shadow(0 0 4px rgba(56,214,255,0.55));
    }
    .av-node { fill: #c8f5ff; filter: drop-shadow(0 0 3px #38d6ff); }
    .av-core { fill: #eafdff; filter: drop-shadow(0 0 5px #7fe9ff) drop-shadow(0 0 12px #38d6ff); }
    /* Неоновый контур силуэта (из CC0-ассета) */
    .av-outline {
        fill: none;
        stroke: #7fe9ff;
        stroke-width: 1.6;
        vector-effect: non-scaling-stroke;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 2px #38d6ff) drop-shadow(0 0 6px rgba(56,214,255,0.6));
    }

    /* Энергетическая платформа */
    .av-platform { fill: none; stroke: #38d6ff; filter: drop-shadow(0 0 4px rgba(56,214,255,0.7)); }

    /* Зоны подсветки органов (статичное свечение) */
    .glow-zone {
        --glow: #38d6ff;
        opacity: 0.28;
        transition: opacity 0.5s ease, filter 0.5s ease;
        fill: rgba(56, 214, 255, 0.05);
        stroke: var(--glow);
        stroke-width: 1.1;
    }
    .glow-zone.active {
        opacity: 1;
        fill: rgba(255, 255, 255, 0.05);
        filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 9px var(--glow));
    }

    .avatar-legend {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
        min-width: 150px;
    }
    .zone-legend-item {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 10.5px;
        line-height: 1.25;
        color: #fff;
        background: rgba(255, 255, 255, 0.03);
        padding: 5px 9px;
        border-radius: 8px;
    }
    .zone-dot {
        width: 8px; height: 8px; border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 0 6px currentColor;
    }

    .vrs-btn-header {
        background: var(--brand-accent);
        color: var(--brand-700) !important;
        font-weight: 800;
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase; padding: 12px 24px;
        border-radius: 12px;
        border: none;
        cursor: pointer;
        box-sizing: border-box; /* чтобы width:100% учитывал padding и кнопка не вылезала */
        transition: all 0.2s ease;
    }
    .vrs-btn-header:hover {
        background: #ffffff;
        transform: translateY(-1px);
    }
    .vrs-btn-card { /*Кнопки внутри карточек, например, для выбора файлов */
        background: rgba(16, 185, 129, 0.1);
        border: 1px dashed var(--brand-accent);
        color: var(--brand-accent);
        font-weight: 700;
        font-size: 14px;
        padding: 14px;
        border-radius: 12px;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }
    .vrs-btn-card:hover {
        background: rgba(16, 185, 129, 0.2);
    }

    /* RPG XP Bar */
    .rpg-bar-container {
        background: rgba(255, 255, 255, 0.08);
        height: 14px;
        border-radius: 7px;
        padding: 2px;
        overflow: hidden;
        margin-top: 10px;
    }
    .rpg-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--brand-accent), #2dd4bf);
        border-radius: 5px;
        width: 0%;
        transition: width 1.5s ease-in-out;
    }

    .vrs-archive-list {
        background: rgba(11, 60, 77, 0.4);
        border: 1px solid rgba(204, 242, 236, 0.1);
        border-radius: 24px;
        overflow: hidden;
    }
    .vrs-archive-item {
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(204, 242, 236, 0.05);
    }
    .vrs-archive-item:last-child { border-bottom: none; } /* Исправлено, чтобы не было лишней полоски */

    .text-title-lg { font-size: 28px; font-weight: 800; color: #ffffff; margin: 0; line-height: 1.2; }
    .text-title-md { font-size: 20px; font-weight: 700; color: #ffffff; margin: 0; }
    .text-body-sm { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }

    /* Стили для списка загруженных файлов */
    #fileList {
        font-size: 11px; 
        color: var(--text-muted); 
        min-height: 20px; 
        padding: 0 5px;
        max-height: 150px; /* Ограничиваем высоту */
        overflow-y: auto; /* Добавляем прокрутку, если файлов много */
        margin-bottom: 10px;
    }
    #fileList::-webkit-scrollbar { width: 6px; }
    #fileList::-webkit-scrollbar-track { background: rgba(204, 242, 236, 0.05); border-radius: 3px; }
    #fileList::-webkit-scrollbar-thumb { background: var(--brand-accent); border-radius: 3px; }

    /* Добавлено: стили для кнопок-вкладок графиков */
    .chart-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap; /* Для мобилок */
    }
    .chart-tab-btn {
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.4);
        color: var(--brand-accent);
        padding: 10px 20px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        transition: all 0.2s ease;
        flex-grow: 1; /* Чтобы кнопки занимали всю ширину, если их мало */
        text-align: center;
    }
    .chart-tab-btn:hover {
        background: rgba(16, 185, 129, 0.2);
    }
    .chart-tab-btn.active {
        background: var(--brand-accent);
        color: var(--brand-700) !important;
        border-color: var(--brand-accent);
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    }
    .chart-container-wrapper {
        position: relative;
        width: 100%;
        height: 400px; /* Фиксированная высота для всех графиков */
        overflow-x: auto; /* Добавляем прокрутку, если график широкий */
    }
    .chart-canvas {
        display: none; /* Скрываем по умолчанию, показывать будем через JS */
        width: 100%; /* Изначальная ширина, потом корректируется JS */
        height: 100%;
    }
    .chart-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-muted);
        font-size: 14px;
        text-align: center;
        background: rgba(11, 60, 77, 0.4);
        border-radius: 20px;
        padding: 20px;
    }

    @media(max-width: 1024px) {
        .vrs-grid-12 { display: flex; flex-direction: column; }
        .avatar-container { flex-direction: column; }
        .vrs-panel, .vrs-card { padding: 24px; border-radius: 20px; }
        .auth-card { padding: 30px; border-radius: 20px; }
        .chart-tab-btn { flex-grow: unset; width: 100%; } /* На мобилках кнопки друг под другом */
    }
/* ===== ОБЩИЙ ПОДВАЛ VR Клиники ===== */
.vrfoot{background:#0a2d37; color:#cfe1e0; padding:56px 0 28px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.vrfoot *{box-sizing:border-box}
.vrfoot-wrap{max-width:1200px; margin:0 auto; padding:0 22px}
.vrfoot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1)}
.vrfoot-brand{display:flex; align-items:center; gap:13px}
.vrfoot-brand img{width:44px; height:44px; border-radius:50%; object-fit:cover; background:#fff}
.vrfoot-fn{display:block; font-size:19px; font-weight:800; color:#fff; line-height:1.05}
.vrfoot-fs{display:block; font-size:12px; font-weight:700; color:#8fbfbb; letter-spacing:.1em; text-transform:uppercase; margin-top:4px}
.vrfoot-contacts{display:flex; gap:48px; flex-wrap:wrap}
.vrfoot-lbl{display:block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6f9d99; margin-bottom:7px}
.vrfoot-c a{font-size:16px; font-weight:700; color:#fff; text-decoration:none; white-space:nowrap}
.vrfoot-c a:hover{color:#0d9488}
.vrfoot-bottom{display:flex; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; padding-top:22px; font-size:12.5px; color:#7ba09c}
@media (max-width:1040px){
  .vrfoot-top{flex-direction:column; gap:26px}
  .vrfoot-contacts{gap:28px}
  .vrfoot-bottom{flex-direction:column; gap:8px}
}

.vh-hidden{display:none!important}
.vrs-hub{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px;margin:6px 0 26px}
.vh-card{display:flex;flex-direction:column}
@media(max-width:760px){.vrs-hub{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.vrs-hub{grid-template-columns:1fr}}
.vh-card{background:rgba(11,60,77,.45);border:1px solid rgba(204,242,236,.12);border-radius:16px;padding:16px;cursor:pointer;transition:transform .12s,border-color .15s;font-family:'Plus Jakarta Sans',sans-serif}
.vh-card:hover{transform:translateY(-2px);border-color:rgba(16,185,129,.4)}
.vh-card.locked{background:rgba(11,60,77,.25)}
.vh-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.vh-ico svg{width:21px;height:21px}
.vh-title{font-weight:700;font-size:15px;margin-top:12px;color:var(--text-light)}
.vh-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.vh-cta{margin-top:12px;width:100%;box-sizing:border-box;background:rgba(212,175,55,.14);color:var(--brand-gold);border:1px solid rgba(212,175,55,.4);border-radius:10px;padding:9px 6px;font-weight:700;font-size:11px;line-height:1.3;white-space:normal;word-break:break-word;cursor:pointer;font-family:inherit}
.vh-back{background:transparent;color:var(--text-muted);border:1px solid rgba(204,242,236,.12);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.vh-panel{background:rgba(11,60,77,.45);border:1px solid rgba(204,242,236,.12);border-radius:16px;padding:18px;margin-top:14px}
.vh-trk{position:relative;height:8px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.vh-opt{position:absolute;top:0;height:100%;background:rgba(16,185,129,.28)}
.vh-mk{position:absolute;top:-3px;width:4px;height:14px;border-radius:3px;transform:translateX(-2px)}
.vh-in{width:100%;background:rgba(10,45,55,.6);border:1px solid rgba(204,242,236,.12);border-radius:9px;color:var(--text-light);padding:9px 11px;font-family:inherit;font-size:14px;box-sizing:border-box}
.vh-btn{background:var(--brand-accent);color:var(--brand-700);border:none;border-radius:10px;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;box-sizing:border-box;max-width:100%}
.vh-btn.ghost{background:transparent;color:var(--brand-accent);border:1px solid rgba(16,185,129,.4)}
.vh-demo{font-size:11px;color:var(--brand-gold);background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3);border-radius:8px;padding:8px 11px;margin-bottom:12px}