/**
 * ============================================================
 * pages/home/home.css - СТИЛИ ГЛАВНОЙ СТРАНИЦЫ
 * ============================================================
 *
 * Содержит только стили структуры страницы и панелей.
 * Стили компонентов вынесены в shared/components/.
 *
 * Единый стиль интерфейса:
 * - карточки на мягкой подложке со скруглением 20px;
 * - заголовки карточек — обычный регистр, тёмный, средний вес;
 * - поля: пилюли с подписью внутри;
 * - чипы-переключатели (табы) для выбора источника данных.
 *
 * Используется в: pages/home/index.js
 * ============================================================
 */

/* ============================================================
   1. ИКОНКИ
   ============================================================ */

.lock-icon {
    width: 16px;
    height: 16px;
    fill: var(--error);
    display: block;
}

.walk-icon,
.run-icon,
.bike-icon,
.swimming-icon,
.training-icon {
    width: 16px;
    height: 16px;
    fill: var(--accent);
    display: block;
}


/* ============================================================
   2. ОСНОВНАЯ СТРУКТУРА
   ============================================================ */

.home-main {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

.home-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
}

.home-body-row {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 20px;
}

.home-body > .timeline-bar {
    width: auto;
    margin-left: 14px;
    margin-right: 14px;
}

.home-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    --scene-gutter: 14px;
    padding: var(--scene-gutter);
    overflow: hidden;
    background: transparent;
}

.home-body-row > .home-center {
    padding-bottom: 0;
}


/* ============================================================
   3. ПАНЕЛИ
   ============================================================ */

.home-panel {
    flex: 0 0 280px;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-panel.right {
    flex: 0 0 30vw;
    border-left: none;
    padding: var(--scene-gutter, 14px) var(--scene-gutter, 14px) 0;
}

.home-panel::-webkit-scrollbar {
    width: 6px;
}

.home-panel::-webkit-scrollbar-thumb {
    background: var(--border-color, #e4e6ea);
    border-radius: 6px;
}

.home-panel::-webkit-scrollbar-track {
    background: transparent;
}


/* ============================================================
   4. 3D-ВЬЮВЕР
   ============================================================ */

.viewport {
    flex: 1;
    position: relative;
    background: var(--surface);
    cursor: grab;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

.viewport:active {
    cursor: grabbing;
}

.viewport canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    /* ВАЖНО: убираем собственный фон canvas, чтобы просвечивал фон контейнера */
    background: transparent !important;
}


/* ============================================================
   5. СЕКЦИИ ПАНЕЛЕЙ
   ============================================================ */

.panel-section {
    background: var(--surface);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.home-panel.right > #params {
    padding: 12px 14px 10px;
}

.panel-section#params {
    background: var(--surface);
}

.panel-section#daily {
    background: var(--surface);
}

.panel-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.home-panel.right > #params .panel-section-head {
    margin-bottom: 18px;
}

.panel-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary, #17181c);
    letter-spacing: -0.1px;
    margin-bottom: 12px;
}

.panel-section-head {
    flex-wrap: nowrap;
    align-items: center;
}

.panel-section-head .panel-section-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.panel-section-head .source-toggle {
    flex: 0 0 auto;
}

.source-note {
    font-size: 0.68rem;
    color: var(--text-tertiary, #7c828c);
    margin: -6px 0 10px;
    line-height: 1.4;
}

/* --- Чипы-переключатели (табы) --- */

.source-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--surface-strong, #ffffff);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
}

.source-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-tertiary, #8b9096);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.source-btn:hover:not(:disabled) {
    color: var(--text-primary, #17181c);
}

.source-btn.active {
    background: var(--brand);
    color: var(--on-brand, #ffffff);
    box-shadow: none;
}

/* Кнопка источника недоступна (нет входа / нет подписки).
   НЕ используем disabled — иначе браузер не генерирует click,
   и мы не можем показать модалку. */
.source-btn.is-unavailable {
    opacity: 0.45;
    cursor: pointer;
}

.source-btn.is-unavailable:hover {
    color: var(--text-tertiary, #8b9096);
}

.panel-section.source-readonly .field input {
    color: var(--text-secondary, #4b5563);
    background: var(--surface-strong, rgba(255, 255, 255, 0.7));
    cursor: default;
}

.panel-section.source-readonly .weight-slider {
    opacity: 0.72;
}

.panel-section.source-readonly .weight-slider input[type="range"] {
    pointer-events: none;
}

.panel-section.source-readonly .weight-slider-label,
.panel-section.source-readonly .weight-slider-value {
    color: var(--text-secondary, #8b9096);
}

.panel-section.source-readonly .field input[type="range"]::-webkit-slider-thumb {
    border-color: var(--text-tertiary, #9aa0a6);
    cursor: default;
}

.panel-section.source-readonly .field input[type="range"]::-moz-range-thumb {
    border-color: var(--text-tertiary, #9aa0a6);
    cursor: default;
}

.panel-section.source-readonly .type-btn {
    cursor: default;
    opacity: 0.8;
}

.panel-subsection {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}

.panel-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #17181c);
    margin-bottom: 10px;
}


/* ============================================================
   5.1 ВКЛАДКИ «ЕДА / СПОРТ» В КАРТОЧКЕ #daily
   ============================================================ */

#daily {
    /* Фиксированная минимальная высота, чтобы при переключении
       вкладок карточка не дёргалась: контент «Еды» и «Спорта»
       отличается по высоте. */
    display: flex;
    flex-direction: column;
    min-height: 340px;
}

.tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    background: var(--bg-field, var(--bg-input));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
}

.tab {
    padding: 7px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tab:hover:not(.is-active) {
    background: var(--bg-hover);
    color: var(--text-primary, #17181c);
}

.tab.is-active {
    background: var(--accent);
    color: var(--text-on-accent, #17181c);
}

.tab-panel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.tab-panel.is-active {
    display: flex;
}

.tab-panel-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}


/* ============================================================
   6. ПОЛЯ ВВОДА
   ============================================================ */

.field {
    margin-bottom: 8px;
}

.field:last-child {
    margin-bottom: 0;
}

/* Пикер воды — последняя строка в «Еде»: отделяем от БЖУ */
#daily [data-tab-panel="nutrition"] > .field-stepper:last-child {
    margin-top: 18px;
}

.field label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 18px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 5px;
}

.field label .unit {
    font-size: 0.72rem;
    color: var(--text-tertiary, #8b8f98);
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.field input[type="range"] {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--track, #e6e8eb);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-strong, #ffffff);
    cursor: pointer;
    border: 2px solid var(--brand);
    box-shadow: none;
}

.field input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-strong, #ffffff);
    cursor: pointer;
    border: 2px solid var(--brand);
    box-shadow: none;
}

.field input[type="number"] {
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--bg-field, var(--bg-input));
    color: var(--text-primary, #17181c);
    outline: none;
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field input[type="number"]:focus {
    border-color: var(--accent-border, var(--border-strong, #d8dade));
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(245, 224, 80, 0.14));
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--text-tertiary, #b0b5bb);
    margin-top: 3px;
}

.field:has(#protein) label .unit {
    background: var(--pink);
    color: var(--pink-text);
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.field:has(#fat) label .unit {
    background: var(--peach);
    color: var(--peach-text);
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.field:has(#carbs) label .unit {
    background: var(--mint);
    color: var(--mint-text);
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
}

:root[data-theme="dark"] .field:has(#protein) label .unit,
:root[data-theme="dark"] .field:has(#fat) label .unit,
:root[data-theme="dark"] .field:has(#carbs) label .unit {
    background: transparent;
    color: var(--text-tertiary, #8b8f98);
    padding: 0;
}


/* ============================================================
   6.1 СТЕППЕР (стрелки ← значение →)
   ============================================================ */

.field-stepper {
    position: relative;
}

.stepper-input {
    display: none !important;
}

.stepper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: var(--pill-control-h, 36px);
    padding: 0 3px;
    background: var(--bg-field, var(--bg-input));
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.stepper-btn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #b4b4b4);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.stepper-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary, #f5f5f5);
}

.stepper-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.stepper-btn svg {
    width: 15px;
    height: 15px;
    display: block;
}

.stepper-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #f5f5f5);
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: 5ch;
    text-align: center;
    pointer-events: none;
}


/* ============================================================
   6.2 ИНДИКАТОР СТРЕССА
   ============================================================ */

.stress-range {
    display: none;
}

.stress-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 3px;
    width: 100%;
    height: var(--pill-control-h, 36px);
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.stress-seg {
    flex: 0 1 7px;
    min-width: 3px;
    min-height: 0;
    border-radius: 999px;
    background: var(--bg-hover);
    transition: background 0.12s ease, opacity 0.12s ease;
}

.stress-seg:hover {
    opacity: 0.85;
}

.stress-seg.filled {
    opacity: 1;
}

.stress-bar:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.stress-bar.is-disabled {
    cursor: default;
    opacity: 0.6;
}

.stress-bar.is-disabled .stress-seg:hover {
    opacity: 1;
}


/* ============================================================
   6.2b ПРОДОЛЖИТЕЛЬНОСТЬ СНА — ПИКЕР СО СТРЕЛКАМИ
   ============================================================ */

.field-stepper-compact {
    margin-top: 4px;
    padding-top: 10px;
}

.field-stepper-compact > label {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 17.6px;
    margin-bottom: 5px;
}

.field-stepper-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: var(--pill-control-h, 36px);
    padding: 0 3px;
    background: var(--bg-field, var(--bg-input));
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.field-stepper-compact .stepper-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.field-stepper-compact .stepper-value {
    position: static;
    transform: none;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #f5f5f5);
}


/* Слайдеры-пилюли внутри вкладок: тот же вид, что у веса */
#daily .tab-panel .weight-slider {
    margin-top: 10px;
}

#daily .tab-panel .weight-slider:first-of-type {
    margin-top: 0;
}

#daily .tab-panel .weight-slider .weight-slider-label {
    left: 10px;
    font-size: 0.76rem;
}

#daily .tab-panel .weight-slider .weight-slider-value {
    right: 12px;
    font-size: 0.66rem;
}

.weight-slider.is-tight .weight-slider-label {
    display: none;
}


/* ============================================================
   7. ВЕС — СЛАЙДЕР-ПИЛЮЛЯ
   ============================================================ */

.weight-slider {
    --weight-thumb: 3px;
    --pill-track-left: 14px;
    --pill-track-right: 100%;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    margin-top: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(
        to right,
        var(--bg-hover) 0 var(--weight-fill, 0px),
        var(--bg-muted) var(--weight-fill, 0px) 100%
    );
}

#targetWeightSliderWrap {
    margin-top: 10px;
}


/* ============================================================
   7b. ПРОГНОЗ ДОСТИЖЕНИЯ ЦЕЛИ
   ============================================================ */

.goal-forecast {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.goal-forecast-text {
    display: block;
}

.goal-forecast[data-status="ok"] {
    background: var(--mint);
    color: var(--mint-text);
    border-color: transparent;
}

.goal-forecast[data-status="stable"],
.goal-forecast[data-status="wrong-direction"],
.goal-forecast[data-status="too-far"] {
    background: var(--peach);
    color: var(--peach-text);
    border-color: transparent;
}

.goal-forecast[data-status="reached"] {
    background: var(--pink);
    color: var(--pink-text);
    border-color: transparent;
}

.weight-slider-label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #f5f5f5);
    pointer-events: none;
}

.weight-slider-value {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #f5f5f5);
    white-space: nowrap;
    pointer-events: none;
    text-align: right;
    min-width: 74px;
}

#weightSliderWrap .weight-slider-value { min-width: 74px; }
#targetWeightSliderWrap .weight-slider-value { min-width: 74px; }
#proteinWrap .weight-slider-value     { min-width: 62px; }
#fatWrap .weight-slider-value         { min-width: 62px; }
#carbsWrap .weight-slider-value       { min-width: 70px; }
#walkStepsWrap .weight-slider-value   { min-width: 66px; }
#walkPaceWrap .weight-slider-value    { min-width: 88px; }
#runDistanceWrap .weight-slider-value { min-width: 62px; }
#runPaceWrap .weight-slider-value     { min-width: 88px; }

.weight-slider-marker {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 20px;
    width: var(--weight-thumb);
    border-radius: 2px;
    background: var(--text-secondary, #b4b4b4);
    pointer-events: none;
}

.weight-slider input[type="range"] {
    position: absolute;
    left: var(--pill-track-left);
    right: calc(100% - var(--pill-track-right));
    top: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: none;
}


/* ============================================================
   7c. ОБРАЗ ЖИЗНИ — ИКОНКА «?» И ПОДСКАЗКА
   ============================================================ */

.lifestyle-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--text-tertiary, #9ca3af);
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary, #9ca3af);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    flex: 0 0 auto;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.lifestyle-info:hover,
.lifestyle-info:focus-visible {
    color: var(--text-primary, #17181c);
    border-color: var(--text-primary, #17181c);
    outline: none;
}

.field-lifestyle {
    position: relative;
}

.lifestyle-hint {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 10px 12px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-secondary, #6b7280);
    text-align: left;
}

.lifestyle-hint p {
    margin: 0 0 6px;
}

.lifestyle-hint ul {
    margin: 0;
    padding-left: 16px;
}

.lifestyle-hint li {
    margin-bottom: 4px;
}

.lifestyle-hint li:last-child {
    margin-bottom: 0;
}

.lifestyle-hint strong {
    color: var(--text-primary, #17181c);
    font-weight: 600;
}


/* ============================================================
   10. АКТИВНОСТИ: ПРОГУЛКА И БЕГ
   ============================================================ */

.activity-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}

.activity-item:first-of-type {
    padding-top: 2px;
}

.activity-item:last-of-type {
    padding-bottom: 6px;
}

.activity-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    min-width: 0;
}

.activity-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

:root[data-theme="dark"] .activity-icon {
    filter: brightness(0) invert(1);
}

.activity-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #17181c);
}

.activity-sum {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary, #8b8f98);
    white-space: nowrap;
}

.activity-details .field:last-child {
    margin-bottom: 0;
}


/* ============================================================
   10b. ИТОГО ПО АКТИВНОСТЯМ
   ============================================================ */

.activity-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding-top: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
}

.activity-total strong {
    color: var(--text-primary, #17181c);
    font-size: 0.9rem;
    font-weight: 700;
}


/* ============================================================
   11. ДИНАМИКА ВЕСА — ОВЕРЛЕЙ НА 3D-МОДЕЛИ
   ============================================================ */

.viewport-weight-dynamics {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;

    /* ФИКСИРОВАННАЯ ширина — карточка не тянется под содержимое */
    width: 196px;
    box-sizing: border-box;

    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.55;
    pointer-events: none;
}

.weight-dynamics-title {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.weight-dynamics-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    /* Фиксированная высота строки, чтобы «83.5 кг» и «100.0 кг»
       занимали одинаковое место */
    min-height: 1.55em;
    height: 1.55em;
}

.weight-dynamics-row strong {
    display: inline-block;
    /* Фиксированная ширина под «00.0 кг» + tabular-nums:
       цифры не «прыгают» при смене значения */
    min-width: 6.4ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.weight-dynamics-label {
    white-space: nowrap;
}

.viewport-weight-dynamics strong {
    color: var(--text-primary, #17181c);
    font-size: 0.8rem;
}

.viewport-weight-dynamics #weightCurrent {
    color: var(--text-primary, #17181c);
    font-size: 0.95rem;
    font-weight: 700;
}

.weight-dynamics-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    min-height: 1.55em;
    height: 1.55em;
}

.weight-dynamics-footer #weightDelta {
    display: inline-block;
    /* Фиксированная ширина под «(+12.3 кг)» */
    min-width: 8.5ch;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trend {
    flex: 0 0 auto;
    min-width: 9.5ch;
    text-align: right;
    font-size: 0.65rem;
    color: var(--text-tertiary, #9ca3af);
    margin-left: 0;
    white-space: nowrap;
}


/* ============================================================
   12. ПРАВАЯ ПАНЕЛЬ — ПАРАМЕТРЫ + ВКЛАДКИ
   ============================================================ */

.home-panel.right {
    --pill-control-h: 36px;
    --pill-label-h: 23px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.home-panel.right > #params {
    flex: 0 0 auto;
}


/* ============================================================
   12.1 СЖАТИЕ ПРАВОЙ ПАНЕЛИ ПЕРЕД СКРОЛЛОМ
   ============================================================ */

.home-panel.right.is-compressed {
    gap: 10px;
    padding: 10px var(--scene-gutter, 14px) 0;
}

.home-panel.right.is-compressed .panel-section {
    padding: 12px;
}

.home-panel.right.is-compressed[data-compress="2"] .panel-section-head {
    margin-bottom: 4px;
}

.home-panel.right.is-compressed[data-compress="2"] .weight-slider {
    height: 34px;
    margin-top: 6px;
}

.home-panel.right.is-compressed[data-compress="2"] .activity-item {
    padding: 6px 0;
}

.home-panel.right.is-compressed[data-compress="2"] .activity-header {
    margin-bottom: 4px;
}

.home-panel.right.is-compressed[data-compress="2"] {
    --pill-control-h: 32px;
}

.home-panel.right.is-compressed[data-compress="2"] .field,
.home-panel.right.is-compressed[data-compress="2"] .params-grid {
    margin-bottom: 6px;
}

.home-panel.right.is-compressed[data-compress="2"] .activity-total {
    padding-top: 6px;
    font-size: 0.74rem;
}

.home-panel.right.is-compressed[data-compress="2"] .goal-forecast {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 0.68rem;
}

.home-panel.right.is-compressed[data-compress="3"] .goal-forecast {
    margin-top: 5px;
    padding: 5px 9px;
    font-size: 0.66rem;
}

.home-panel.right.is-compressed[data-compress="4"] .goal-forecast {
    margin-top: 4px;
    padding: 4px 8px;
    font-size: 0.64rem;
}

.home-panel.right.is-compressed[data-compress="3"] .weight-slider {
    height: 30px;
    margin-top: 5px;
}

.home-panel.right.is-compressed[data-compress="3"] .weight-slider-marker {
    top: 7px;
    bottom: 7px;
}

.home-panel.right.is-compressed[data-compress="3"] {
    --pill-control-h: 30px;
    --pill-label-h: 21px;
    padding: 10px var(--scene-gutter, 14px) 0;
    gap: 10px;
}

.home-panel.right.is-compressed[data-compress="3"] .panel-section {
    padding: 11px;
}

.home-panel.right.is-compressed[data-compress="3"] .panel-section-head {
    margin-bottom: 3px;
}

.home-panel.right.is-compressed[data-compress="3"] .activity-item {
    padding: 6px 0;
}

.home-panel.right.is-compressed[data-compress="3"] .activity-header {
    margin-bottom: 5px;
}

.home-panel.right.is-compressed[data-compress="3"] .activity-total {
    padding-top: 6px;
}

.home-panel.right.is-compressed[data-compress="3"] .params-grid,
.home-panel.right.is-compressed[data-compress="3"] .field {
    margin-bottom: 6px;
}

.home-panel.right.is-compressed[data-compress="3"] .field-stepper-compact > label,
.home-panel.right.is-compressed[data-compress="3"] .field > label,
.home-panel.right.is-compressed[data-compress="3"] .weight-slider-label,
.home-panel.right.is-compressed[data-compress="3"] .weight-slider-value {
    font-size: 0.7rem;
}

.home-panel.right.is-compressed[data-compress="3"] .panel-section-title {
    font-size: 0.8rem;
}

.home-panel.right.is-compressed[data-compress="3"] .field-bmr-label {
    font-size: 0.68rem;
}

.home-panel.right.is-compressed[data-compress="3"] .source-toggle {
    padding: 2px;
}

.home-panel.right.is-compressed[data-compress="3"] .source-btn {
    padding: 4px 7px;
    font-size: 0.64rem;
}

.home-panel.right.is-compressed[data-compress="3"] .type-switch .type-btn,
.home-panel.right.is-compressed[data-compress="3"] .lifestyle-switch .type-btn {
    padding: 5px 2px;
}

.home-panel.right.is-compressed[data-compress="3"] .params-grid {
    gap: 6px 12px;
}

.home-panel.right.is-compressed[data-compress="3"] .lifestyle-hint {
    font-size: 0.66rem;
    padding: 8px 10px;
}

.home-panel.right.is-compressed[data-compress="3"] .tab {
    padding: 5px 6px;
    font-size: 0.72rem;
}

.home-panel.right.is-compressed[data-compress="3"] .tabs {
    padding: 2px;
    margin-bottom: 6px;
}

.home-panel.right.is-compressed[data-compress="4"] {
    --pill-control-h: 26px;
    --pill-label-h: 19px;
    padding: 8px var(--scene-gutter, 14px) 0;
    gap: 6px;
}

.home-panel.right.is-compressed[data-compress="4"] .panel-section {
    padding: 10px;
}

.home-panel.right.is-compressed[data-compress="4"] .panel-section-head {
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 3px;
}

.home-panel.right.is-compressed[data-compress="4"] .field-bmr-label {
    font-size: 0.64rem;
}

.home-panel.right.is-compressed[data-compress="4"] .panel-section-head .panel-section-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.8rem;
}

.home-panel.right.is-compressed[data-compress="4"] .source-toggle {
    flex: 0 0 auto;
    padding: 2px;
}

.home-panel.right.is-compressed[data-compress="4"] .source-btn {
    padding: 3px 6px;
    font-size: 0.62rem;
}

.home-panel.right.is-compressed[data-compress="4"] .weight-slider {
    height: 26px;
    margin-top: 4px;
}

.home-panel.right.is-compressed[data-compress="4"] .activity-total {
    padding-top: 4px;
}

.home-panel.right.is-compressed[data-compress="4"] .field-stepper-compact > label,
.home-panel.right.is-compressed[data-compress="4"] .panel-section-head {
    margin-bottom: 2px;
}

.home-panel.right.is-compressed[data-compress="4"] .weight-slider-marker {
    top: 5px;
    bottom: 5px;
}

.home-panel.right.is-compressed[data-compress="4"] .stepper-btn {
    width: 20px;
    height: 20px;
}

.home-panel.right.is-compressed[data-compress="4"] .panel-section-head {
    gap: 4px;
}

.home-panel.right.is-compressed[data-compress="4"] .params-grid {
    gap: 2px 12px;
    margin-bottom: 2px;
}

.home-panel.right.is-compressed[data-compress="4"] .activity-item {
    padding: 4px 0;
}

.home-panel.right.is-compressed[data-compress="4"] .activity-header {
    margin-bottom: 3px;
}

.home-panel.right.is-compressed[data-compress="4"] .activity-total {
    padding-top: 4px;
    font-size: 0.7rem;
}

.home-panel.right.is-compressed[data-compress="4"] .activity-total strong {
    font-size: 0.8rem;
}

.home-panel.right.is-compressed[data-compress="4"] .field {
    margin-bottom: 4px;
}

.home-panel.right.is-compressed[data-compress="4"] .field-stepper-compact > label {
    margin-bottom: 2px;
}

.home-panel.right.is-compressed[data-compress="4"] .type-switch .type-btn,
.home-panel.right.is-compressed[data-compress="4"] .lifestyle-switch .type-btn {
    padding: 4px 2px;
}

.home-panel.right.is-compressed[data-compress="4"] .lifestyle-hint {
    font-size: 0.64rem;
    padding: 7px 9px;
}

.home-panel.right.is-compressed[data-compress="4"] .tab {
    padding: 4px 5px;
    font-size: 0.68rem;
}

.home-panel.right.is-compressed[data-compress="4"] .tabs {
    padding: 2px;
    margin-bottom: 4px;
}

.home-panel.right.is-compressed[data-compress="4"] #daily {
    min-height: 300px;
}


/* --- Сетка физических параметров: три колонки --- */

.params-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px 16px;
    align-items: start;
}

.params-grid > .params-col:not(.params-col-wide):not(.params-col-bmr-row):not(.params-col-sleep):not(.params-col-stress):not(.params-col-type):not(.params-col-lifestyle) > .field,
.params-grid > .params-col:not(.params-col-wide):not(.params-col-bmr-row):not(.params-col-sleep):not(.params-col-stress):not(.params-col-type):not(.params-col-lifestyle) > .field-stepper {
    grid-column: span 2;
}

.params-col-sleep > .field-stepper > label {
    font-size: 0.88rem;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: break-word;
}

.params-col-sleep-row > .params-col {
    display: contents;
}

.params-col-sleep > .field-stepper {
    grid-column: span 2;
    grid-row: auto;
    width: 100%;
    align-self: start;
    margin-top: 0;
    padding-top: 0;
}

#weightSliderWrap {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

#targetWeightSliderWrap {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
}

.params-col-wide > .field,
.params-col-wide > .field-stepper {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

.params-col-stress > .field-stress {
    grid-column: 1 / 3;
    grid-row: 4;
    align-self: end;
    width: 100%;
    margin-bottom: 0;
}

.params-col-bmr-row > .field-bmr-inline {
    grid-column: 3 / -1;
    grid-row: 4;
    align-self: end;
    width: 100%;
    margin-bottom: 0;
}

.field-bmr-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: var(--pill-control-h, 36px);
    padding: 0 12px;
    background: var(--bg-field, var(--bg-input));
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.field-bmr-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, #b4b4b4);
}

.field-bmr-value {
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #f5f5f5);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.params-grid .field-type {
    grid-column: 1 / -1;
    grid-row: 5;
}

.params-grid .field-lifestyle {
    grid-column: 1 / -1;
    grid-row: 6;
}

.params-col {
    display: contents;
}


/* --- Тройной переключатель типа ожирения --- */

.type-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    background: var(--bg-field, var(--bg-input));
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.type-switch .type-btn {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 7px 2px;
    border: none;
    border-radius: 8px;
    background: transparent;
    text-align: center;
    line-height: 1.2;
}

.type-switch .type-btn:hover {
    background: var(--bg-hover);
}

.type-switch .type-btn.active {
    background: var(--accent);
    color: var(--text-on-accent, #17181c);
}

.type-switch-label {
    display: block;
    max-width: 100%;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary, #17181c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: -0.1px;
}

.type-switch .type-btn small {
    display: block;
    max-width: 100%;
    font-size: 0.6rem;
    line-height: 1.2;
    color: var(--text-tertiary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.type-switch .type-btn.active .type-switch-label {
    color: var(--text-on-accent, #17181c);
}

.type-switch .type-btn.active small {
    color: var(--text-on-accent, #17181c);
    opacity: 0.75;
}


/* --- Тройной переключатель образа жизни --- */

.lifestyle-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    background: var(--bg-field, var(--bg-input));
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.lifestyle-switch .type-btn {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 7px 2px;
    border: none;
    border-radius: 8px;
    background: transparent;
    text-align: center;
    line-height: 1.2;
}

.lifestyle-switch .type-btn:hover:not(:disabled) {
    background: var(--bg-hover);
}

.lifestyle-switch .type-btn.active {
    background: var(--accent);
    color: var(--text-on-accent, #17181c);
}

.lifestyle-switch .type-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.lifestyle-switch .type-switch-label {
    display: block;
    max-width: 100%;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary, #17181c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: -0.1px;
}

.lifestyle-switch .type-btn.active .type-switch-label {
    color: var(--text-on-accent, #17181c);
}


/* ============================================================
   13. АДАПТИВНОСТЬ
   ============================================================ */

@media (max-width: 1500px) {
    /* Вкладки — не колонки, тут ничего перестраивать не нужно */
}

@media (max-width: 1200px) {
    .home-panel {
        flex: 0 0 220px;
    }

    .home-panel.right {
        flex: 0 0 260px;
    }

    .params-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .params-col-bmr-row > .field-bmr-inline,
    .params-grid .field-type,
    .params-grid .field-lifestyle,
    .params-col-wide > .field,
    .params-col-wide > .weight-slider,
    .params-col-wide > .field-stepper,
    .params-col-sleep > .field-stepper,
    .params-col-stress > .field-stress {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 1024px) {
    .home-main {
        flex-direction: column;
    }

    .home-panel {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        max-height: 200px;
        overflow-y: auto;
        padding: 8px;
        gap: 8px;
    }

    .home-panel .panel-section {
        flex: 1;
        min-width: 160px;
    }

    .home-panel.right {
        flex: none;
        padding: 8px;
        overflow-y: auto;
        max-height: none;
        display: block;
    }

    .home-panel.right > #params {
        margin-bottom: 8px;
    }

    .params-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .params-col-bmr-row > .field-bmr-inline,
    .params-grid .field-type,
    .params-grid .field-lifestyle,
    .params-col-wide > .field,
    .params-col-wide > .weight-slider,
    .params-col-wide > .field-stepper,
    .params-col-sleep > .field-stepper,
    .params-col-stress > .field-stress {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .home-center {
        min-height: 400px;
        padding: 8px;
    }
}

@media (max-width: 600px) {
    .home-panel {
        max-height: 150px;
    }

    .home-panel .panel-section {
        padding: 12px 14px;
        min-width: 120px;
    }

    .panel-section-title {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }

    .field label {
        font-size: 0.72rem;
    }

    .field input[type="number"] {
        padding: 7px 12px;
        font-size: 0.78rem;
    }

    .type-btn {
        font-size: 0.7rem;
        padding: 8px 12px;
    }

    .home-center {
        min-height: 300px;
    }

    .activity-item {
        padding: 8px 0;
    }

    .activity-name {
        font-size: 0.72rem;
    }

    .activity-sum {
        font-size: 0.66rem;
    }

    .activity-icon {
        width: 16px;
        height: 16px;
    }

    .activity-total {
        font-size: 0.7rem;
    }

    .activity-total strong {
        font-size: 0.8rem;
    }

    .viewport-weight-dynamics {
        right: 12px;
        bottom: 12px;
        min-width: 140px;
        padding: 8px 12px;
        font-size: 0.65rem;
    }

    .viewport-weight-dynamics #weightProjected {
        font-size: 0.85rem;
    }

    .weight-dynamics-title {
        font-size: 0.55rem;
        margin-bottom: 2px;
    }
}

@media (max-height: 700px) and (max-width: 600px) {
    .home-panel {
        max-height: 120px;
    }

    .home-panel .panel-section {
        padding: 10px 12px;
    }

    .home-center {
        min-height: 200px;
    }

    .field {
        margin-bottom: 6px;
    }

    .field label {
        font-size: 0.65rem;
    }

    .field input[type="number"] {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .type-btn {
        font-size: 0.62rem;
        padding: 6px 10px;
    }

    .activity-item {
        padding: 6px 0;
    }
}

/* Кнопка источника, которая визуально active, но по факту недоступна
   — после отмены модалки возвращаем в «Вручную». */
.source-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* На время показа модалки блокируем повторные клики */
.source-toggle.is-locked .source-btn {
    pointer-events: none;
}