:root {
    --tg-bg: #0e1621;
    --tg-bg-secondary: #17212b;
    --tg-bg-elevated: #1e2a36;
    --tg-bg-input: #242f3d;
    --tg-bg-hover: #202b36;
    --tg-accent: #2b5278;
    --tg-accent-bright: #5288c1;
    --tg-accent-hover: #6ab2f2;
    --tg-text: #e1e6ec;
    --tg-text-secondary: #7d8b99;
    --tg-border: rgba(255, 255, 255, 0.06);
    --tg-radius: 12px;
    --tg-radius-sm: 8px;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--tg-bg);
    color: var(--tg-text);
    margin: 0;
    padding: 0;
    /* Масштаб всего интерфейса 67% как «родные» 100% (пользователь раньше ставил
       браузерные 67%). JS-код, который смешивает визуальные координаты
       (getBoundingClientRect/clientX) с layout-координатами (style.left, scroll),
       делит визуальные на этот масштаб — см. UI_ZOOM в goals.html / app.js. */
    zoom: 0.67;
}

.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--tg-bg-secondary);
    padding: 10px 20px;
    border-bottom: 1px solid var(--tg-border);
}

.topnav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px 16px;
    max-width: 1520px;
    margin: 0 auto;
}

.topnav-left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.topnav-center {
    display: flex;
    justify-content: center;
}

.topnav-right {
    display: flex;
    justify-content: flex-end;
}

.topnav-side-right {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
}

.version-link {
    color: var(--tg-text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8em;
    padding: 6px 12px;
    border-radius: var(--tg-radius-sm);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.version-link:hover {
    background: var(--tg-bg-hover);
    color: var(--tg-text);
}

.version-link.active {
    background: var(--tg-accent-bright);
    color: #fff;
}

.clock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: var(--tg-text-secondary);
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Шапка: 7 пунктов + переключатель дня не помещаются в одну строку уже при
   ~1080px — переносим в колонку раньше (было 800px и вылезало за экран). */
@media (max-width: 1080px) {
    .topnav-inner {
        grid-template-columns: 1fr;
        justify-items: start;
        padding-top: 44px;
    }

    .topnav-center,
    .topnav-right {
        justify-content: flex-start;
    }

    .topnav-left { flex-wrap: wrap; }

    /* абсолютные часы — в зарезервированную верхнюю полосу */
    .topnav-side-right { top: 6px; transform: none; }
    .clock { flex-direction: row; align-items: baseline; gap: 6px; }
}

/* На десктопе 1081–1640px справа абсолютом висят версия+часы — резервируем место
   (undo-кнопки слева убраны в v3.24, поэтому левого резерва больше нет). */
@media (min-width: 1081px) and (max-width: 1640px) {
    .topnav-inner { padding-right: 190px; }
}

/* Переключатель дня на телефоне: три nowrap-ссылки шире 375px — переносим. */
@media (max-width: 560px) {
    .day-nav { flex-wrap: wrap; justify-content: center; row-gap: 2px; width: 100%; }
    .day-nav .day-title { order: -1; flex: 1 1 100%; text-align: center; }
    .day-nav a { font-size: 0.8em; padding: 4px 8px; }
}

.topnav a {
    color: var(--tg-text-secondary);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 20px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.topnav a:hover {
    background: var(--tg-bg-hover);
    color: var(--tg-text);
}

.topnav a.active {
    background: var(--tg-accent-bright);
    color: #fff;
}

/* «Архив» — выпадающий список отложенных разделов в шапке (слева) */
.nav-archive { position: relative; }
.nav-archive > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    color: var(--tg-text-secondary); font-weight: 600; padding: 8px 16px 8px 18px;
    border-radius: 20px; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.nav-archive > summary::-webkit-details-marker { display: none; }
.nav-archive > summary::after { content: "▾"; font-size: 0.72em; opacity: 0.65; }
.nav-archive[open] > summary::after { content: "▴"; }
.nav-archive > summary:hover { background: var(--tg-bg-hover); color: var(--tg-text); }
.nav-archive.active > summary { background: var(--tg-accent-bright); color: #fff; }
.nav-archive.active > summary::after { opacity: 0.85; }
.nav-archive-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    background: var(--tg-bg-secondary); border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius); padding: 6px; min-width: 180px;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}
.topnav .nav-archive-menu a {
    padding: 8px 12px; border-radius: 8px; font-weight: 500;
    color: var(--tg-text-secondary);
}
.topnav .nav-archive-menu a:hover { background: var(--tg-bg-hover); color: var(--tg-text); }
.topnav .nav-archive-menu a.active { color: var(--tg-accent-bright); background: transparent; }

main {
    padding: 20px;
    max-width: 1520px;
    margin: 0 auto;
}

h1, h2, h3 {
    color: var(--tg-text);
    margin-top: 0;
}

a {
    color: var(--tg-accent-hover);
}

.day-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.day-nav a {
    color: var(--tg-accent-hover);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85em;
    padding: 6px 10px;
    border-radius: var(--tg-radius-sm);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.day-nav a:hover {
    background: var(--tg-bg-hover);
}

/* Центральный заголовок — это вкладка «Ввод дня»: клик открывает день */
.day-nav .day-title {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--tg-text);
    padding: 7px 14px;
}

.day-nav:not(.inactive) .day-title {
    background: var(--tg-accent-bright);
    color: #fff;
}

.day-nav:not(.inactive) .day-title:hover {
    background: var(--tg-accent-hover);
}

/* Деактивированный вид на страницах кроме дня */
.day-nav.inactive .day-title {
    color: var(--tg-text-secondary);
}

.day-nav.inactive a {
    color: var(--tg-text-secondary);
    opacity: 0.75;
}

.factor-columns {
    position: relative;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    /* Без этого короткая колонка (мало негативных факторов) растягивалась по
       высоте до размера длинной (много позитивных) — снизу оставалось пустое
       поле. align-items по умолчанию у flex — stretch. */
    align-items: flex-start;
}

.factor-block {
    flex: 1 1 460px;
    min-width: 320px;
    max-width: 480px;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 14px;
}

.factor-block h2 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tg-text-secondary);
    margin-bottom: 10px;
    text-align: center;
}

.factor-block.negative h2 { color: #ec5e6f; }
.factor-block.positive h2 { color: #6ad07a; }

.factor-table, .stats-table, .metrics-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
}

.factor-table th, .stats-table th, .metrics-table th {
    color: var(--tg-text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--tg-border);
}

.factor-table th {
    text-align: center;
}

.factor-table th:first-child,
.factor-table td:first-child {
    width: 45%;
}

.factor-table td, .metrics-table td {
    padding: 4px 6px;
}

.factor-table input {
    width: 100%;
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 7px 10px;
    border-radius: var(--tg-radius-sm);
    font-size: 0.95em;
    text-align: center;
    transition: border-color 0.15s;
}

.factor-table input:focus {
    outline: none;
    border-color: var(--tg-accent-bright);
}

.factor-table td:nth-child(2) input,
.factor-table td:nth-child(3) input {
    color: var(--tg-text-secondary);
}

.factor-table input[readonly] {
    cursor: default;
    background: var(--tg-bg-hover);
}

.factor-table input[readonly]:focus {
    border-color: transparent;
}

/* Таблица «Название | Шкала | Оценка» на странице дня */
.value-table th:first-child,
.value-table td:first-child {
    width: 32%;
}

.value-table .slider-cell {
    width: 48%;
}

.value-table .score-cell {
    width: 20%;
    text-align: center;
}

/* Шкала: линия проходит через центры кружков, флажок едет по ним */
.slider {
    position: relative;
    height: 20px;
}

.slider-rail {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
    background: var(--tg-bg-input);
}

.slider-ticks {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.slider-ticks span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tg-bg-hover);
}

.slider .factor-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
    cursor: pointer;
}

.slider .factor-slider:focus {
    outline: none;
}

.slider .factor-slider::-webkit-slider-runnable-track {
    height: 20px;
    background: transparent;
}

.slider .factor-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--tg-accent-bright);
    border: 2px solid #fff;
    cursor: pointer;
}

.slider .factor-slider::-moz-range-track {
    height: 20px;
    background: transparent;
}

.slider .factor-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tg-accent-bright);
    border: 2px solid #fff;
    cursor: pointer;
}

.value-table .factor-number {
    width: 56px;
    display: inline-block;
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 7px 6px;
    border-radius: var(--tg-radius-sm);
    font-size: 0.95em;
    text-align: center;
    font-family: inherit;
    transition: border-color 0.15s;
}

.value-table .factor-number:focus {
    outline: none;
    border-color: var(--tg-accent-bright);
}

.value-table .factor-number[type="number"]::-webkit-outer-spin-button,
.value-table .factor-number[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.value-table .factor-number[type="number"] {
    -moz-appearance: textfield;
}

.num-input {
    position: relative;
    display: flex;
    width: 95px;
    margin: 0 auto;
}

.num-input input {
    width: 100%;
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 7px 32px 7px 10px;
    border-radius: var(--tg-radius-sm);
    font-size: 0.95em;
    text-align: center;
    transition: border-color 0.15s;
}

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

.num-input input[type="number"]::-webkit-outer-spin-button,
.num-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-input input[type="number"] {
    -moz-appearance: textfield;
}

.stepper {
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 2px;
    width: 26px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stepper button {
    flex: 1;
    border: none;
    border-radius: 4px;
    background: var(--tg-bg-hover);
    color: var(--tg-text-secondary);
    font-size: 12px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.stepper button:hover {
    background: var(--tg-accent-bright);
    color: #fff;
}

.stepper button:active {
    background: var(--tg-accent-hover);
}

/* Блок «Дополнительно» — между факторами и отзывом, по центру */
.day-extra {
    margin: 16px auto 0;
    max-width: 976px;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 14px 18px;
}

.day-extra h2 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tg-text);
    margin-bottom: 12px;
}

.day-extra-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.day-extra-label {
    color: var(--tg-text);
    font-weight: 600;
    white-space: nowrap;
}

.day-extra-control {
    flex: 1;
    min-width: 0;
}

.day-extra .factor-number {
    width: 56px;
    flex: 0 0 auto;
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 7px 6px;
    border-radius: var(--tg-radius-sm);
    font-size: 0.95em;
    text-align: center;
    font-family: inherit;
}

.day-extra .factor-number:focus {
    outline: none;
    border-color: var(--tg-accent-bright);
}

.day-extra .factor-number[type="number"]::-webkit-outer-spin-button,
.day-extra .factor-number[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.day-extra .factor-number[type="number"] {
    -moz-appearance: textfield;
}

.save-row {
    margin-top: 16px;
    text-align: center;
}

.save-row button[type="submit"] {
    margin-top: 0;
    min-width: 220px;
}

/* Плашка восстановления несохранённого черновика дня (localStorage) */
.draft-restore {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--tg-accent-bright);
    border-radius: 10px;
    background: rgba(82, 136, 193, 0.12);
    color: var(--tg-text);
}
.draft-restore span { flex: 1 1 200px; }
.draft-restore button {
    flex: none;
    min-width: 0;
    margin: 0;
    padding: 6px 14px;
    font-size: 0.9em;
    border: none;
    border-radius: 8px;
    background: var(--tg-accent-bright);
    color: #fff;
    cursor: pointer;
}
.draft-restore button:hover { background: var(--tg-accent-hover); }
.draft-restore button.ghost {
    background: transparent;
    color: var(--tg-text-secondary);
    border: 1px solid var(--tg-accent);
}
.draft-restore button.ghost:hover { color: var(--tg-text); background: rgba(255, 255, 255, 0.04); }

/* Страница «Факторы»: вводный текст и кнопка сохранения справа (как на дне) */
.factors-title {
    margin-bottom: 0;
}

.factor-intro {
    max-width: 760px;
    margin: 16px 0;
}

.factor-intro .hint {
    margin: 0 0 8px;
}

.factor-intro .hint:last-child {
    margin-bottom: 0;
}

.factor-side {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

.factor-side button[type="submit"] {
    width: 100%;
    margin-top: 0;
}

@media (max-width: 1550px) {
    .factor-side {
        position: static;
        width: auto;
        margin-top: 16px;
        text-align: center;
    }
}

/* --- Факторы: единый список на общей шкале ценности --- */
.wfactors {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 820px;
    margin-bottom: 14px;
}

.wfactors-head,
.wfrow {
    display: grid;
    grid-template-columns: 28px minmax(120px, 1fr) minmax(140px, 240px) 100px 30px;
    align-items: center;
    gap: 12px;
}

.wfactors-head {
    padding: 0 12px 2px;
    color: var(--tg-text-secondary);
    font-size: 0.76em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wfh-bar, .wfh-weight { text-align: center; }

.wfrow {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius-sm);
    padding: 7px 12px;
}

.wf-sign {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.wf-sign.p { background: rgba(106, 208, 122, 0.16); color: #7ee08d; }
.wf-sign.n { background: rgba(236, 94, 111, 0.16); color: #f2788a; }

.wf-name {
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 7px 10px;
    border-radius: var(--tg-radius-sm);
    font-size: 0.95em;
    width: 100%;
}
.wf-name:focus { outline: none; border-color: var(--tg-accent-bright); }

.wslider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, var(--wc) var(--p, 0%), var(--tg-bg-input) var(--p, 0%));
    cursor: pointer;
    width: 100%;
}
.wslider.p { --wc: #6ad07a; }
.wslider.n { --wc: #ec5e6f; }
.wslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0e1621;
    cursor: pointer;
}
.wslider::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0e1621;
    cursor: pointer;
}

.wf-del {
    background: transparent;
    border: none;
    color: var(--tg-text-secondary);
    cursor: pointer;
    border-radius: 50%;
    width: 26px; height: 26px;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.wf-del:hover { background: #ec5e6f; color: #fff; }

.wf-add {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.wf-add-btn {
    background: var(--tg-bg-input);
    border: 1px dashed var(--tg-border);
    color: var(--tg-text);
    padding: 8px 14px;
    border-radius: var(--tg-radius-sm);
    cursor: pointer;
    font-size: 0.9em;
}
.wf-add-btn.p:hover { border-color: #6ad07a; color: #7ee08d; }
.wf-add-btn.n:hover { border-color: #ec5e6f; color: #f2788a; }

.factor-save { max-width: 820px; text-align: right; }
.factor-save button[type="submit"] { margin: 0; }

@media (max-width: 620px) {
    .wfactors-head { display: none; }
    .wfrow {
        grid-template-columns: 24px 1fr 96px 26px;
        gap: 8px;
    }
    .wslider { display: none; }
}

.review-block {
    margin: 16px auto 0;
    max-width: 976px;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-block label {
    color: var(--tg-text-secondary);
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.review-block input {
    flex: 1;
    width: 100%;
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 8px 12px;
    border-radius: var(--tg-radius-sm);
    font-family: inherit;
    font-size: 1em;
}

.review-block input:focus {
    outline: none;
    border-color: var(--tg-accent-bright);
}

button[type="submit"] {
    margin-top: 16px;
    background: var(--tg-accent-bright);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.15s;
}

button[type="submit"]:hover {
    background: var(--tg-accent-hover);
}

.metrics {
    margin: 20px auto 0;
    max-width: 976px;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 14px;
}

.metrics-table {
    max-width: 720px;
}

.metrics-table th, .metrics-table td {
    border-bottom: 1px solid var(--tg-border);
    text-align: center;
}

.metrics-table td.record {
    color: var(--tg-text-secondary);
    white-space: nowrap;
}

.exp-bar-block {
    margin-top: 16px;
}

.exp-bar-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
}

.exp-bar-label {
    color: var(--tg-text);
    font-size: 0.95em;
    font-weight: 600;
}

.exp-accum {
    color: var(--tg-text);
    font-weight: 700;
}

.exp-bar {
    width: 100%;
    height: 14px;
    background: var(--tg-bg-input);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.exp-bar-fill {
    height: 100%;
    background: #6ad07a;
    transition: width 0.3s;
}

.exp-bar-added {
    height: 100%;
    background: #b6f5c4;
    transition: width 0.3s;
}

.exp-bar-lost {
    height: 100%;
    background: #ec5e6f;
    transition: width 0.3s;
}

.exp-level {
    color: #6ad07a;
    font-weight: 700;
    font-size: 0.95em;
    white-space: nowrap;
}

.exp-today {
    font-weight: 700;
    font-size: 0.95em;
    white-space: nowrap;
}

.exp-today.positive {
    color: #b6f5c4;
}

.exp-today.negative {
    color: #ec5e6f;
}

/* Итог дня от ИИ */
.insights {
    margin: 20px auto 0;
    max-width: 976px;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 16px 18px;
    border-left: 3px solid var(--tg-accent-bright);
}

.insights-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.insights-head h2 {
    margin: 0;
    font-size: 1.05em;
}

.insights-head button {
    margin: 0;
    background: var(--tg-accent-bright);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s;
}

.insights-head button:hover:not(:disabled) {
    background: var(--tg-accent-hover);
}

.insights-head button:disabled {
    opacity: 0.6;
    cursor: default;
}

.insights-out {
    margin-top: 12px;
    background: var(--tg-bg-elevated);
    border-radius: var(--tg-radius-sm);
    padding: 12px 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--tg-text);
}

.insights-out.loading {
    color: var(--tg-text-secondary);
}

.insights-out.error {
    color: #f2788a;
}

.change {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--tg-text-secondary);
}

.change.positive {
    color: #6ad07a;
}

.change.negative {
    color: #ec5e6f;
}

.hint {
    color: var(--tg-text-secondary);
    font-size: 0.9em;
    margin-bottom: 0;
}

/* --- Дашборд статистики --- */
.dash-sub {
    margin-top: -6px;
    margin-bottom: 18px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.kpi-card {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 16px 18px;
    border-left: 3px solid transparent;
}

.kpi-card.accent {
    border-left-color: #5eced8;
}

.kpi-label {
    color: var(--tg-text-secondary);
    font-size: 0.82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kpi-value {
    font-size: 2em;
    font-weight: 700;
    color: var(--tg-text);
    line-height: 1.2;
    margin: 4px 0 2px;
}

.kpi-sub {
    font-size: 0.82em;
    color: var(--tg-text-secondary);
}

.kpi-trend {
    font-weight: 600;
}

.kpi-trend.up { color: #6ad07a; }
.kpi-trend.down { color: #ec5e6f; }
.kpi-trend.flat { color: var(--tg-text-secondary); }

.dash-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 14px 16px;
    min-width: 0;
}

.chart-card.span2 {
    grid-column: 1 / -1;
}

.chart-card h3 {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tg-text);
    margin-bottom: 8px;
}

.chart-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--tg-text-secondary);
    font-size: 0.92em;
}

.dash-chart {
    width: 100%;
    height: 200px;
}

.dash-section {
    font-size: 1.1em;
    margin: 26px 0 4px;
}

/* Ресурс по факторам — горизонтальные полосы */
.factor-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fbar {
    display: grid;
    grid-template-columns: 180px 1fr 56px;
    align-items: center;
    gap: 12px;
}

.fbar-name {
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fbar-name.n { color: #f2788a; }
.fbar-name.p { color: #7ee08d; }

.fbar-track {
    background: var(--tg-bg-input);
    border-radius: 6px;
    height: 14px;
    overflow: hidden;
}

.fbar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s;
}

.fbar-fill.n { background: #ec5e6f; }
.fbar-fill.p { background: #6ad07a; }

.fbar-val {
    text-align: right;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--tg-text-secondary);
}

/* Факторы во времени — мини-графики */
.spark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.spark-card {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 10px 12px;
}

.spark-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.spark-name {
    font-size: 0.88em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spark-name.n { color: #f2788a; }
.spark-name.p { color: #7ee08d; }

.spark-total {
    font-size: 0.78em;
    color: var(--tg-text-secondary);
    white-space: nowrap;
}

.spark {
    width: 100%;
    height: 50px;
    display: block;
}

@media (max-width: 720px) {
    .dash-charts {
        grid-template-columns: 1fr;
    }
    .fbar {
        grid-template-columns: 110px 1fr 44px;
        gap: 8px;
    }
}

.chart-tip {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    background: var(--tg-bg-elevated);
    color: var(--tg-text);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius-sm);
    padding: 5px 9px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.table-wrap {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 8px 14px;
    overflow-x: auto;
}

.stats-table {
    font-size: 0.9em;
    white-space: nowrap;
}

.stats-table tbody tr {
    transition: background 0.15s;
}

.stats-table tbody tr:hover {
    background: var(--tg-bg-hover);
}

.stats-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--tg-border);
}

.stats-table a {
    color: var(--tg-accent-hover);
    text-decoration: none;
    font-weight: 600;
}

.del-cell {
    text-align: center;
    vertical-align: middle;
}

.del-cell form {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Высокая специфичность, чтобы перебить общий стиль button[type="submit"] */
.del-cell .del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--tg-text-secondary);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.del-cell .del-btn:hover {
    background: #ec5e6f;
    color: #fff;
}

/* --- Страница «Справочник» --- */
.reference-title {
    margin-bottom: 0;
}

.reference-intro {
    margin: 16px 0;
}

/* --- Страница «Факторы»: пояснения --- */
.guide {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.guide-card {
    flex: 1 1 360px;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 16px 18px;
}

.guide-card h2 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tg-accent-hover);
    margin-bottom: 10px;
}

.guide-card p {
    line-height: 1.5;
    margin: 0 0 10px;
}

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

.guide-card ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.5;
}

.guide-card li {
    margin-bottom: 8px;
}

.guide-card ul ul {
    margin-top: 6px;
}

/* --- О системе · Теория целей: формулы, вердикты, бейджи --- */
.thy-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.72em; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
    border: 1px solid; vertical-align: middle; white-space: nowrap;
}
.thy-badge.ok { color: #8fd99c; border-color: rgba(143, 217, 156, 0.4); background: rgba(143, 217, 156, 0.1); }
.thy-badge.warn { color: #e0c179; border-color: rgba(224, 193, 121, 0.4); background: rgba(224, 193, 121, 0.1); }
.thy-formula {
    background: var(--tg-bg); border: 1px solid #2a3947; border-left: 3px solid var(--tg-accent-bright);
    border-radius: 8px; padding: 12px 14px; margin: 12px 0;
}
.thy-eq {
    display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.02em;
    line-height: 1.8; color: var(--tg-text); white-space: nowrap; overflow-x: auto;
}
.thy-cap { display: block; margin-top: 8px; font-size: 0.86em; color: var(--tg-text-secondary); line-height: 1.45; white-space: normal; }
var, .thy-var {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-style: normal;
    color: var(--tg-accent-bright); font-size: 0.92em;
}
.thy-note {
    background: rgba(106, 178, 242, 0.07); border: 1px solid rgba(106, 178, 242, 0.25);
    border-radius: 8px; padding: 12px 14px; margin: 12px 0;
}
.thy-note .nl {
    display: block; font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--tg-accent-hover); margin-bottom: 4px; font-weight: 600;
}
.thy-verdict {
    display: flex; gap: 10px; align-items: baseline; background: var(--tg-bg);
    border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}
.thy-verdict .k {
    font-size: 0.74em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tg-text-secondary);
    min-width: 68px; font-weight: 600; flex-shrink: 0;
}
.thy-table td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.thy-refs { font-size: 0.92em; }
.thy-refs .src { color: var(--tg-text); font-weight: 600; }

/* --- Страница «Версия» --- */
.versions-title {
    margin-bottom: 0;
}

.versions-intro {
    margin: 16px 0;
}

.versions-filter {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 14px; cursor: pointer; white-space: nowrap;
}

/* === v3.20/3.21: доска целей (конструктор, во весь экран) === */
.goals-full {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 53px; /* top уточняется скриптом по высоте шапки */
    background: var(--tg-bg);
    z-index: 5;
}
.board-viewport {
    position: absolute; inset: 0;
    overflow: auto;
    scrollbar-width: thin;                        /* Firefox */
    scrollbar-color: #2b3a49 var(--tg-bg);
}
/* тонкие тёмные скроллбары в цвет темы (вертикальный + горизонтальный) */
.board-viewport::-webkit-scrollbar { width: 9px; height: 9px; }
.board-viewport::-webkit-scrollbar-track { background: var(--tg-bg); }
.board-viewport::-webkit-scrollbar-thumb {
    background: #2b3a49; border-radius: 5px; border: 2px solid var(--tg-bg);
}
.board-viewport::-webkit-scrollbar-thumb:hover { background: #3a4a5a; }
.board-viewport::-webkit-scrollbar-corner { background: var(--tg-bg); }

.board-scale { position: relative; }
.board {
    position: relative;
    transform-origin: 0 0;
    /* точечная сетка — ощущение рабочего стола */
    background-image: radial-gradient(circle, #26323f 1px, transparent 1px);
    background-size: 25px 25px;
}
.board-edges { position: absolute; left: 0; top: 0; pointer-events: none; }
/* временная линия при протягивании стрелки — поверх карточек, видна целиком */
.board-temp { z-index: 7; }

/* Плавающие полупрозрачные панели поверх поля */
.gb-panel {
    position: absolute;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(23, 33, 43, 0.82);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(43, 58, 73, 0.9);
    border-radius: 12px;
    padding: 8px 12px;
    z-index: 10;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
/* Верхняя и нижняя панели — во всю ширину (равные отступы слева и справа) */
.gb-panel-top { top: 12px; left: 12px; right: 12px; }
/* верхняя и нижняя панели — такая же прозрачность, как у левой панели инструментов */
.gb-panel-top, .gb-panel-legend { background: rgba(20, 29, 38, 0.5); }
/* верхняя панель Целей и все её выпадающие окна — КРУПНЕЕ базового масштаба (×1.25),
   нижние панели — ×1.10 (просьба: «на 67% стало слишком мелко»). JS-позиционирование
   этих окон считает суммарный zoom через effZoom/vzFor. */
.gb-panel-top, .gb-sheets-panel, .gb-templates-panel, .gb-addmenu,
.gb-tools-rail, .gb-weights-panel { zoom: 1.25; }
/* квирк вложенного zoom в Chrome: дети зумленной панели раздувались шире родителя
   (шапка с крестиком вылезала за край) — прижимаем к ширине контейнера */
.gb-weights-panel > * { max-width: 100%; min-width: 0; box-sizing: border-box; }
/* панель «Факторы»: реплика карточки повторяет ВСЁ — под «?» внутри ro-поля нужен отступ */
.gc-fw > .gc-field-ro { flex: 1; width: 100%; padding-right: 24px; }
/* подпись «авто-вес ✓» внутри ro-поля веса — справа, приглушённо */
.gc-field-ro .gc-ro-auto { float: right; color: var(--tg-text-secondary); font-size: 0.85em; }
/* галочки в реплике — только показывают состояние (не кликаются) */
.gb-ro-chk { pointer-events: none; }
.gb-ro-chk input:disabled { opacity: 1; }
/* главная цель в панели «Факторы» — БЕЛЫМ текстом, но с золотой ★ перед именем */
.gb-wp-gname.main { color: var(--tg-text); }
.gb-wp-gname.main::before { content: '★ '; color: #e8c07d; }
.gb-panel-legend, .gb-warn-btn, .gb-issues-panel, .gb-warns { zoom: 1.1; }
/* растяжимый промежуток в верхней панели: левая группа — влево, всё после — вправо;
   при нехватке места сжимается до 12px и панель прокручивается, как раньше */
.gb-panel-top > .gb-flex-spacer { flex: 1 1 auto; min-width: 12px; }
/* стрелка ▾/▴ у кнопок-выпадашек */
.gb-caret { display: inline-block; margin-left: 2px; }
.gb-panel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gb-panel-legend { bottom: 12px; left: 12px; right: 12px; font-size: 0.78em; color: var(--tg-text-secondary); }
.gb-panel-title { font-weight: 700; margin-right: 4px; }
.gb-sep { width: 1px; height: 22px; background: #2b3a49; }
.gb-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88em; font-weight: 600; cursor: pointer; user-select: none; }
.gb-toggle input { accent-color: var(--tg-accent-bright); color-scheme: dark; }
/* ПРАВИЛО: любой текст в кнопке/поле центрируется по вертикали И горизонтали внутри
   своей области (inline-flex + align-items/justify-content:center + line-height:1).
   Иначе на дробном масштабе текст «съезжает» вверх. */
.gb-btn {
    background: rgba(30, 42, 54, 0.9); border: 1px solid #2b3a49; color: var(--tg-text);
    padding: 6px 11px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.85em;
    white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.gb-btn:hover { border-color: var(--tg-accent-bright); }
.gb-btn.primary { background: var(--tg-accent-bright); border-color: var(--tg-accent-bright); color: #fff; }
.gb-btn.primary:hover { background: var(--tg-accent-hover); }
.gb-btn.factor { border-color: rgba(42, 158, 96, 0.6); color: #7ee08d; }
.gb-btn.achieve { border-color: rgba(216, 166, 87, 0.55); color: #e8c07d; }
/* кнопки масштаба +/− : квадрат, глиф строго по центру (flex от .gb-btn) */
.gb-btn.zoom { width: 30px; height: 30px; padding: 0; font-size: 1em; }
.gb-zoom-val { display: inline-flex; align-items: center; justify-content: center; }
.gb-status { display: inline-flex; align-items: center; }
.gb-btn.zoom.on { background: var(--tg-accent-bright); border-color: var(--tg-accent-bright); color: #fff; }
.gb-btn.on { background: var(--tg-accent-bright); border-color: var(--tg-accent-bright); color: #fff; }
.gb-btn:disabled { opacity: 0.4; cursor: default; }
.gb-zoom-val { font-size: 0.8em; color: var(--tg-text-secondary); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
/* постоянная ширина: надпись «Сохранено …» всегда занимает одно место, кнопки слева не прыгают */
.gb-status { font-size: 0.8em; margin-left: 8px; min-width: 116px; justify-content: flex-start; white-space: nowrap; }
.gb-status.ok { color: #7ee08d; }
.gb-status.err { color: #f2788a; }
.gb-leg { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.hint-leg { opacity: 0.75; }
/* Верхняя панель — строго В ОДНУ строку: не переносим; при нехватке ширины прокрутка вбок. */
.gb-panel-top { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; scrollbar-color: #2b3a49 transparent; }
.gb-panel-top::-webkit-scrollbar { height: 6px; }
.gb-panel-top::-webkit-scrollbar-thumb { background: #2b3a49; border-radius: 3px; }
.gb-panel-top > * { flex: none; }
/* Легенда — ВСЕГДА в одну строку (цветные метки убраны, осталась только подсказка); при
   нехватке ширины прокрутка вбок */
.gb-panel-legend { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; scrollbar-color: #2b3a49 transparent; }
.gb-panel-legend::-webkit-scrollbar { height: 6px; }
.gb-panel-legend::-webkit-scrollbar-thumb { background: #2b3a49; border-radius: 3px; }
.gb-panel-legend > .hint-leg { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.gb-btn.problem { border-color: rgba(224, 85, 97, 0.55); color: #f2788a; }
/* нарочно ТЁМНАЯ кнопка (для реже выбираемых действий — напр. «Заменить лист» у шаблонов) */
.gb-btn.dark { background: rgba(13, 19, 26, 0.9); border-color: #22303d; color: var(--tg-text-secondary); }
.gb-btn.dark:hover { border-color: #3a4c5e; color: var(--tg-text); }
.gb-edge.red { stroke: #e05561; }
.board-viewport { cursor: grab; }
.board-viewport.panning { cursor: grabbing; user-select: none; }
.board-viewport.panning .gcard { pointer-events: none; }
.gb-edge { fill: none; stroke: #6ab2f2; stroke-width: 2; stroke-opacity: 0.85; pointer-events: none; }
.gb-edge.dim { opacity: 0.16; }   /* стрелка + наконечник в поддереве достигнутой цели — гаснут */
.gb-edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.gb-edge-hit:hover + .gb-edge { stroke: #f2788a; }

.gcard {
    position: absolute;
    width: 260px;
    /* полупрозрачный фон: при наложении просвечивает карточка под низом */
    background: rgba(30, 42, 54, 0.86);
    backdrop-filter: blur(2px);
    border: 1px solid #2b3a49;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 2;
    /* карточку можно тянуть за любое свободное место — курсор подсказывает */
    cursor: grab;
    /* тач: жест с карточки — перетаскивание, а не скролл поля */
    touch-action: none;
    /* Изоляция раскладки: правка внутри карточки (обрезка подсказок, высота полей) НЕ
       заставляет браузер пересчитывать раскладку ВСЕЙ доски — только этой карточки. Без
       этого «развернуть все» на большом дереве считало лэйаут O(n²) и лагало секундами. */
    contain: layout;
}
.gcard:hover { border-color: #3a4a5a; }
/* цвет подсветки при протягивании стрелки — В ТОН карточки-приёмника (не всегда синий) */
.gcard { --gc-hot: 106, 178, 242; }
.gcard.vk-problem { --gc-hot: 224, 85, 97; }
.gcard.root { --gc-hot: 216, 166, 87; }
/* карточка-приёмник — мягкое тонкое кольцо в тон, полупрозрачное (не броское) */
.gcard.link-target { outline: 2px solid rgba(var(--gc-hot), 0.42); outline-offset: 1px; }
/* грань-приёмник — МЯГКОЕ свечение у нужного края (градиент внутрь), а не жёсткая рамка */
.gcard.gb-drop-t { box-shadow: inset 0 17px 16px -14px rgba(var(--gc-hot), 0.8) !important; }
.gcard.gb-drop-b { box-shadow: inset 0 -17px 16px -14px rgba(var(--gc-hot), 0.8) !important; }
.gcard.gb-drop-l { box-shadow: inset 17px 0 16px -14px rgba(var(--gc-hot), 0.8) !important; }
.gcard.gb-drop-r { box-shadow: inset -17px 0 16px -14px rgba(var(--gc-hot), 0.8) !important; }
/* кружок на грани-приёмнике — увеличивается КАК ПРИ НАВЕДЕНИИ (scale 1.4), в тон карты,
   полупрозрачный (не сплошная заливка, без белого ободка) */
.gc-port.gb-port-hot { opacity: 1 !important; transform: scale(1.4); background: rgba(var(--gc-hot), 0.6); z-index: 8; }
/* z-слои: свёрнутая=2 · раскрытая перекрывает соседей=3 · перетаскиваемая — сверху.
   Постоянное «на первый план» при любом действии задаётся inline z-index в JS (bringToFront). */
.gcard:not(.collapsed) { z-index: 3; }
.gcard.dragging { z-index: 9; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); cursor: grabbing; }

/* Типы карточек. Шапка и основа — ОДНОГО цвета (шапка прозрачна, только тонкая
   линия-разделитель, как у серых/красных). Главная цель — золотой оттенок фона,
   нижние факторы — синий; свечение и грань в тон. */
/* конечный фактор с родителем красится РАВНОМЕРНОЙ гранью (класс .leaf, ниже);
   боковой синей полосы-«недорамки» быть не должно нигде (в т.ч. у новой цели) */
.gcard.vk-problem { border-left: 3px solid #e05561; background: rgba(36, 29, 36, 0.86); }
.gcard.vk-problem .gc-title { color: #f2788a; }
/* главная цель — золотой фон ЦЕЛИКОМ (шапка = основа) + золотое свечение + грань */
.gcard.root { border-color: #d8a657; background: rgba(47, 40, 25, 0.9);
    box-shadow: 0 0 0 2px rgba(216, 166, 87, 0.5), 0 0 20px rgba(216, 166, 87, 0.35), 0 6px 20px rgba(0, 0, 0, 0.4); }
/* конечные факторы — синий фон целиком + синее свечение. Грань РАВНОМЕРНАЯ в тон
   свечению (как у золотой главной) — без отдельной толстой синей полосы слева
   («подрамки»), которая накладывалась на свечение. */
.gcard.leaf { background: rgba(22, 35, 52, 0.9); border-color: rgba(106, 178, 242, 0.5); border-left-width: 1px;
    box-shadow: 0 0 0 2px rgba(106, 178, 242, 0.55), 0 0 18px rgba(106, 178, 242, 0.38), 0 4px 16px rgba(0, 0, 0, 0.35); }
.gcard.root.leaf { background: rgba(47, 40, 25, 0.9); border-color: #d8a657; box-shadow: 0 0 0 2px rgba(216, 166, 87, 0.5), 0 0 20px rgba(216, 166, 87, 0.35), 0 6px 20px rgba(0, 0, 0, 0.4); }
/* достигнутая цель + всё её поддерево (и стрелки с наконечниками, см. .gb-edge.dim)
   — ЗАТЕМНЯЮТСЯ: тёмная вуаль + погашенная грань/свечение. Значок «достигнуто»
   остаётся ярким ПОВЕРХ вуали (z-index ниже). */
.gcard.dimmed { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); border-color: #2b3a49; }
.gcard.dimmed::after { content: ''; position: absolute; inset: 0; border-radius: 10px;
    background: rgba(8, 12, 18, 0.62); pointer-events: none; z-index: 1; }
.gcard.dimmed:hover::after { background: rgba(8, 12, 18, 0.26); }
.gcard.achieved .gc-achieve { background: rgba(216, 166, 87, 0.14); border-color: rgba(216, 166, 87, 0.5); }
.gcard.achieved .gc-b.mile { position: relative; z-index: 2; }   /* «достигнуто» — поверх вуали */
/* решённая проблема (достигнута её цель-решение) — ПРОСТО затемняется,
   без перечёркивания крестиком и без зачёркнутого названия */
.gcard.vk-problem.solved { opacity: 0.5; filter: grayscale(0.9); }
/* Ctrl-выделение — пунктирная рамка */
.gcard.selected { outline: 2px dashed var(--tg-accent-bright); outline-offset: 3px; }
/* вспышка перехода из панели ошибок — ПЛАВНО угасает (outline не конфликтует со свечением карточки) */
.gb-elflash { outline: 3px solid rgba(184, 140, 255, 0.95); outline-offset: 2px; border-radius: 8px;
    animation: gb-elflash 1.6s ease-out 1 forwards; }
@keyframes gb-elflash { to { outline-color: rgba(184, 140, 255, 0); } }

/* Ручка изменения ширины */
.gc-resize {
    position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
    cursor: ew-resize; touch-action: none; z-index: 6;
    background: linear-gradient(135deg, transparent 50%, rgba(106,178,242,0.5) 50%);
    border-bottom-right-radius: 10px; opacity: 0; transition: opacity 0.12s;
}
.gcard:hover .gc-resize { opacity: 0.7; }
.gc-resize:hover { opacity: 1; }

/* Бейджи весов и статуса */
.gc-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }
.gc-badges:empty { display: none; }
.gc-badges:not(:empty) { padding-bottom: 6px; padding-top: 5px; }
.gc-b {
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    padding: 3px 7px; border-radius: 8px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;   /* текст ярлыка по центру */
    background: var(--tg-bg-input); color: var(--tg-text-secondary);
}
.gc-b.main { background: rgba(106, 178, 242, 0.18); color: #6ab2f2; }
.gc-b.ok { color: #7ee08d; }
.gc-b.warn { background: rgba(240, 198, 116, 0.15); color: #f0c674; }
.gc-b.eff { background: rgba(42, 158, 96, 0.18); color: #7ee08d; }
.gc-b.own { background: rgba(240, 198, 116, 0.16); color: #f0c674; }   /* собственный вес — жёлтым */
.gc-b.survey { background: rgba(106, 178, 242, 0.14); color: #6ab2f2; }
/* «достигнуто 🏆» — на ОТДЕЛЬНОЙ строке во всю ширину карточки + жёлтое свечение */
.gc-b.mile { flex-basis: 100%; text-align: center; background: rgba(216, 166, 87, 0.3); color: #ffdf9e;
    box-shadow: 0 0 9px rgba(216, 166, 87, 0.6); padding: 3px 7px; }

/* Блок «достижение при выполнении цели» — внутри карточки-цели (жёлтый акцент) */
/* блок достижения: отрицательные боковые поля гасят собственный padding, чтобы
   тег 🏆 и текст выравнивались с SMART-полями выше (а не были сдвинуты вправо) */
.gc-achieve { display: flex; flex-direction: column; gap: 5px; padding: 6px; margin: 2px -6px 0;
    background: rgba(216, 166, 87, 0.06); border: 1px solid rgba(216, 166, 87, 0.22); border-radius: 8px; }
.gc-tag.ach { background: rgba(216, 166, 87, 0.18); color: #e8c07d; }

/* Переключатель «Почему / Решение» у проблемы (выбор из двух) */
.gc-pf { display: flex; gap: 4px; }
.gc-pf-btn {
    flex: 1; background: var(--tg-bg-input); border: 1px solid transparent; color: var(--tg-text-secondary);
    border-radius: 6px; padding: 5px 6px; font: inherit; font-size: 0.78em; font-weight: 600; cursor: pointer;
}
.gc-pf-btn:hover { color: var(--tg-text); }
.gc-pf-btn.why.on { background: rgba(224, 85, 97, 0.2); color: #f2788a; }   /* причина — красная */
.gc-pf-btn.fix.on { background: rgba(42, 158, 96, 0.2); color: #7ee08d; }   /* решение — зелёное */
/* шкала 0/5/10 и D/R — обычные ряды карточки (тег + поле + «?»); отдельного
   «зелёного блока» больше нет, теги/поля/«?» стоят в общих столбцах карточки */
.gc-tag.sc0 { color: #f2788a; }
.gc-tag.sc5 { color: #f0c674; }
.gc-tag.sc10 { color: #7ee08d; }

/* Числовые поля карточки (вес / «дней на 10» / «% ресурса дня») — КАК SMART-строки: тег-квадрат
   + поле НА ВСЮ ШИРИНУ, «?» внутри поля справа (в один столбец с «?» SMART); единица (д/%) и
   галка «авто» — тоже внутри поля справа, левее «?». */
.gc-weight-row .gc-tag.w { color: #f0c674; }
.gc-tag.gc-tag-dr { color: #6ab2f2; }                 /* тег D — синий (как факторный) */
.gc-tag.gc-tag-r { color: #f0c674; }                  /* тег R — жёлтый, как «%» веса */
/* числовое поле-маска (D/R/вес): прозрачный ввод .gc-ninput поверх серой маски .gc-nmask;
   фон/рамка — на .gc-nfield. Число белым (.nm-v), единица (дней/%) серым СРАЗУ после числа
   (.nm-u), пустое поле — серая подсказка (.nm-g). Тот же приём, что у поля срока. */
.gc-nfield {
    position: relative; flex: 1; min-width: 0; box-sizing: border-box; min-height: 25px;
    border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
}
.gc-nfield:focus-within { border-color: var(--tg-accent-bright); background: rgba(255, 255, 255, 0.08); }
.gc-nmask, .gc-ninput {
    font: inherit; font-size: 0.82em; line-height: 1.3; padding: 3px 24px 3px 8px;
    box-sizing: border-box; letter-spacing: normal; white-space: pre;
}
.gc-nmask { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: flex; align-items: center; }
.gc-ninput {
    position: relative; display: block; width: 100%; min-height: 25px;
    background: transparent; border: none; outline: none; color: transparent;
    caret-color: var(--tg-text); cursor: text; color-scheme: dark;
}
.nm-v { color: var(--tg-text); }                    /* число — белым */
.nm-u { color: var(--tg-text-secondary); }          /* единица (дней/%) — серым, вплотную к числу */
.nm-g { color: var(--tg-text-secondary); }          /* подсказка пустого поля — серым */
.nm-auto { color: var(--tg-text-secondary); }       /* авто-вес: число тоже приглушённое */
.gc-weight-row .gc-nmask, .gc-weight-row .gc-ninput { padding-right: 68px; }   /* место под «авто ☑» + «?» */
/* «авто:» + галка — ВНУТРИ поля веса справа (левее «?»), по центру, чекбокс в стиле карточки */
.gc-auto {
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 1;
    display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer;
    font-size: 9.5px; line-height: 1; color: var(--tg-text-secondary); white-space: nowrap;
}
.gc-auto-l { -webkit-user-select: none; user-select: none; letter-spacing: 0.01em; line-height: 1; }
.gc-auto input {
    appearance: none; -webkit-appearance: none; margin: 0; flex: none;
    width: 13px; height: 13px; border-radius: 4px; position: relative; cursor: pointer;
    background: var(--tg-bg-input); border: 1px solid #3a4a5a;
}
.gc-auto input:checked { background: rgba(126, 224, 141, 0.22); border-color: rgba(126, 224, 141, 0.5); }
.gc-auto input:checked::after {
    content: '✓'; position: absolute; inset: 0; color: #9be0a8;
    display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 11px;
}
/* строка галки «за день»: «?» в тот же правый столбец, что и остальные «?» */
.gc-dm-row { position: relative; }
.gc-dm-row > .gc-daymeas-row { flex: 1; min-width: 0; padding-right: 22px; }
.gc-lift, .gc-mk {
    flex: none; background: var(--tg-bg-input); border: none; color: var(--tg-text-secondary);
    width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 2px;
}
.gc-lift:hover, .gc-mk:hover { background: var(--tg-accent-bright); color: #fff; }
.gcard.vk-problem .gc-mk:hover { background: #e05561; }
.gc-head {
    display: flex; align-items: flex-start; gap: 5px;
    padding: 7px 8px;
    border-bottom: 1px solid #24313f;
}
.gc-grip { color: var(--tg-text-secondary); flex: none; user-select: none; margin-top: 3px; }
.gc-title {
    flex: 1; min-width: 0; background: transparent; border: none;
    color: var(--tg-text); font: inherit; font-weight: 650;
    resize: none; overflow: hidden; line-height: 1.25; padding: 2px 0 0;
}
.gc-title:focus { outline: none; }
.gc-add, .gc-fold, .gc-del {
    flex: none; background: var(--tg-bg-input); border: none; color: var(--tg-text-secondary);
    width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
}
.gc-add { font-size: 15px; }
.gc-add:hover { background: var(--tg-accent-bright); color: #fff; }
.gc-fold:hover { color: var(--tg-text); }
.gc-del:hover { background: #ec5e6f; color: #fff; }

/* Кругляши-порты — видны только при наведении на карточку (п.3) */
.gc-port {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    background: rgba(106, 178, 242, 0.35);
    border: 1px solid rgba(106, 178, 242, 0.7);
    z-index: 6; cursor: crosshair; touch-action: none;
    opacity: 0; transition: opacity 0.12s, transform 0.12s;
}
.gcard:hover .gc-port, body.gb-porting .gc-port { opacity: 0.9; }
.gc-port:hover { opacity: 1; transform: scale(1.4); background: rgba(106, 178, 242, 0.6); }
.gc-port[data-side="top"] { top: -7px; left: 50%; margin-left: -6px; }
.gc-port[data-side="bottom"] { bottom: -7px; left: 50%; margin-left: -6px; }
.gc-port[data-side="left"] { left: -7px; top: 50%; margin-top: -6px; }
.gc-port[data-side="right"] { right: -7px; top: 50%; margin-top: -6px; }
.gcard.vk-problem .gc-port { background: rgba(224, 85, 97, 0.4); border-color: rgba(224, 85, 97, 0.75); }
body.gb-porting, body.gb-porting * { cursor: crosshair !important; }
.gb-temp-edge {
    fill: none; stroke: #6ab2f2; stroke-width: 2;
    stroke-dasharray: 7 5; pointer-events: none;
}

/* Меню «добавить связанную карточку» */
.gb-addmenu {
    position: fixed; z-index: 300;
    display: flex; flex-direction: column; gap: 5px;
    background: rgba(23, 33, 43, 0.96);
    border: 1px solid #2b3a49; border-radius: 10px;
    padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.gb-addmenu-title { font-size: 0.75em; color: var(--tg-text-secondary); padding: 0 2px 2px; }
.gb-addmenu .gb-btn { text-align: left; }

/* Свои всплывающие подсказки (в стиле сайта, вместо нативного title) */
.gb-tip {
    position: fixed; z-index: 400; display: none; pointer-events: none;
    max-width: 300px; padding: 7px 11px; border-radius: 9px;
    background: rgba(23, 33, 43, 0.98); border: 1px solid #2b3a49;
    color: var(--tg-text); font-size: 0.78em; line-height: 1.42;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    white-space: normal; word-wrap: break-word;
    animation: gb-tip-in 0.12s ease-out;
}
@keyframes gb-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Страница входа «Войти через Telegram» */
.login-body {
    min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
    background: #0e1621; color: #e9eff5; padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.login-card {
    background: #17212b; border: 1px solid #2b3a49; border-radius: 16px;
    padding: 36px 32px 30px; max-width: 380px; width: 100%; text-align: center;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}
.login-card h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: 0.02em; }
.login-sub { margin: 0 0 22px; color: #8ba0b3; font-size: 13px; }
.login-widget { display: flex; justify-content: center; min-height: 46px; margin: 6px 0 16px; }
.login-hint { color: #8ba0b3; font-size: 12.5px; line-height: 1.5; margin: 14px 0 0; }
.login-error {
    color: #f0a6ac; background: rgba(224, 100, 110, 0.12); border: 1px solid rgba(224, 100, 110, 0.4);
    border-radius: 8px; padding: 9px 12px; font-size: 13px; line-height: 1.45; margin: 0 0 16px;
}
.login-id { color: #ecc878; font-size: 14px; margin: 0 0 14px; }
.login-id b { font-variant-numeric: tabular-nums; }
.logout-link { color: #8ba0b3; font-size: 13px; text-decoration: none; margin-right: 14px; }
.logout-link:hover { color: #e9eff5; text-decoration: underline; }

/* обёртка ПОЛЯ (SMART/описание И числовые вес/дни/ресурс): relative → «?», единица
   (д/%) и овал-подсказка лежат ВНУТРИ поля справа. Все ряды карточки используют .gc-fw. */
.gc-fw { position: relative; flex: 1; min-width: 0; display: flex; }
.gc-fw > .gc-field { flex: 1; width: 100%; }
/* текстовое поле с ПОСТОЯННОЙ серой подсказкой-хвостом (как « — N месяцев» у срока, но для
   SMART/описания/шкалы): реальная .gc-field сверху видима и редактируема; .gc-fmask — inert-оверлей
   ПОВЕРХ (pointer-events:none) с ПРОЗРАЧНОЙ копией текста (позиционирует хвост, тот же перенос) +
   серый хвост « — подсказка», обрезаемый краем строки (overflow), без влияния на перенос текста. */
.gc-fwrap { position: relative; flex: 1; min-width: 0; display: flex; }
.gc-fwrap > .gc-field { flex: 1; width: 100%; }
.gc-fmask {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
    box-sizing: border-box; border: 1px solid transparent; border-radius: 6px;
    padding: 3px 8px; margin: 0; font: inherit; font-size: 0.82em; line-height: 1.3;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
}
.gc-fmask.hashelp { padding-right: 24px; }
.fm-t { color: transparent; }                 /* прозрачная копия введённого текста — только позиция */
/* хвост-подсказка: серый цвет; перенос обычный, обрезку по буквам с «…» делает JS (paintFMask) */
.fm-h { color: var(--tg-text-secondary); }
/* мульти-родитель: серая подпись «→ куда идёт вес» тянется в остаток строки */
.gc-w-to { flex: 1; min-width: 0; color: var(--tg-text-secondary); font-size: 0.78em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.gc-field.hashelp { padding-right: 24px; }
/* «?» — квадратик ВНУТРИ поля справа, ПО ЦЕНТРУ по вертикали; неявный, в тон карты,
   но сам квадратик виден. По наведению — чуть заметнее. */
.gc-help {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 1;
    width: 17px; height: 17px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 4px;
    background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.3);
    font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
}
.gc-help:hover { color: rgba(255, 255, 255, 0.62); background: rgba(255, 255, 255, 0.09); }
/* овал-подсказка автозаполнения SMART (A/M/T): виден, пока поле пустое; клик заполняет.
   Стоит внутри поля справа, слева от «?». Тон — как подсказка (неброский синий). */
.gc-sug {
    position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 2;
    max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 1px solid rgba(106, 178, 242, 0.4); border-radius: 999px;
    background: rgba(106, 178, 242, 0.12); color: #9cc4ea;
    font: inherit; font-size: 0.72em; padding: 2px 9px; cursor: pointer; line-height: 1;
}
.gc-sug:hover { background: rgba(106, 178, 242, 0.24); color: #d3e6fb; }
/* прячем подсказку-заполнение, как только в поле что-то введено (placeholder исчез) */
.gc-field:not(:placeholder-shown) ~ .gc-sug { display: none; }
/* срок «Каждый день» при поставленной галке «Цель достижима в рамках одного дня» —
   поле затемнено (как авто-вес), но остаётся редактируемым: правка снимет галку */
/* «достигнута» — ГОЛАЯ галочка в шапке карточки (рядом с +/✕), без подписи.
   «✓» видна ВСЕГДА: не отмечена — серая (понятно, что это за кнопка, в ряду с +/✕),
   отмечена — ЖЁЛТАЯ заливка с тёмной «✓». Сама карточка при этом затемняется
   (класс .dimmed), текста «достигнуто» нет. */
.gc-head .gc-done {
    appearance: none; -webkit-appearance: none; margin: 0; flex: none;
    width: 24px; height: 24px; border-radius: 6px; position: relative; cursor: pointer;
    background: rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.12s, border-color 0.12s;
}
.gc-head .gc-done::after {
    content: '✓'; position: absolute; inset: 0; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    color: rgba(255, 255, 255, 0.35);   /* серая «✓» в неотмеченном состоянии */
    transition: color 0.12s;
}
.gc-head .gc-done:hover { border-color: rgba(232, 193, 90, 0.7); }
.gc-head .gc-done:hover::after { color: rgba(232, 193, 90, 0.8); }
.gc-head .gc-done:checked {
    background: rgba(232, 193, 90, 0.92); border-color: rgba(232, 193, 90, 0.95);
}
.gc-head .gc-done:checked::after { color: #2a2308; }
/* «Можно измерить в рамках дня (0–10)» — галочка-переключатель шкалы (в стиле карты) */
.gc-daymeas-row { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin: 0;
    font-size: 0.85em; color: var(--tg-text-secondary); line-height: 1; }
.gc-daymeas-row input {
    appearance: none; -webkit-appearance: none; margin: 0; flex: none;
    width: 20px; height: 20px; border-radius: 6px; position: relative; cursor: pointer;
    background: var(--tg-bg-input); border: 1px solid #3a4a5a;
}
.gc-daymeas-row input:checked { background: rgba(126, 224, 141, 0.22); border-color: rgba(126, 224, 141, 0.5); }
.gc-daymeas-row input:checked::after { content: '✓'; position: absolute; inset: 0; color: #9be0a8;
    display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 13px; }
.gc-daymeas-row span { line-height: 1; }
/* кнопки шапки карточки (⠿ + ▾ ✕) — рамка + фон в тон, чтобы читались на золотой/
   красной/синей карточке, а не «серели» */
.gc-head button {
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px;
    background: rgba(0, 0, 0, 0.16); color: rgba(255, 255, 255, 0.72);
}
/* главную цель нельзя удалить — крестик приглушён (при наведении подсвечивается,
   но клик показывает «нельзя удалить») */
/* главную цель нельзя удалить — крестик приглушён и НЕ подсвечивается при наведении
   (по клику всё равно покажем «нельзя удалить»); курсор обычный */
.gcard.root .gc-del { opacity: 0.32; cursor: default; }
.gcard.root .gc-del:hover { opacity: 0.32; background: rgba(0, 0, 0, 0.16); }
/* тонкие тёмные скроллбары в тон темы (вместо серо-белых системных) */
.goals-full, .gb-weights-panel, .gb-issues-panel { scrollbar-width: thin; scrollbar-color: #3a4c5e transparent; }
.goals-full ::-webkit-scrollbar { width: 10px; height: 10px; }
.goals-full ::-webkit-scrollbar-thumb { background: #33475a; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.goals-full ::-webkit-scrollbar-track { background: transparent; }
.gb-info {
    position: fixed; z-index: 420; max-width: 300px; padding: 9px 12px;
    background: rgba(23, 33, 43, 0.99); border: 1px solid #3a5064; border-radius: 9px;
    color: #e9eff5; font-size: 12.5px; line-height: 1.45;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}
/* временная подсказка при НАВЕДЕНИИ на «?» — не перехватывает мышь (иначе mouseout
   сработает о неё саму и подсказка «замигает») */
.gb-info-hover { pointer-events: none; }
/* низ карточки: только «Подробнее» — на всю ширину (галочка «достигнута» ушла в шапку) */
.gc-bottom {
    display: flex; margin-top: 0;
}
.gc-adv {
    flex: 1; width: 100%; border: none; border-radius: 999px;
    background: rgba(106, 178, 242, 0.12); color: #9cc4ea;
    font-size: 11.5px; font-weight: 600; padding: 5px 12px; cursor: pointer; text-align: center;
    transition: background 0.12s, color 0.12s;
}
.gc-adv:hover { background: rgba(106, 178, 242, 0.22); color: #d3e6fb; }

/* Видимая сетка при включённом режиме привязки */
.board.grid-on {
    background-image:
        linear-gradient(rgba(106, 178, 242, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 178, 242, 0.06) 1px, transparent 1px),
        radial-gradient(circle, #26323f 1px, transparent 1px);
    background-size: 25px 25px, 25px 25px, 25px 25px;
}

/* Панель «Факторы» — СЛЕВА, широкая, с воздухом (JS уточняет top/bottom) */
.gb-panel[hidden] { display: none; }
.gb-weights-panel {
    top: 76px; left: 12px; bottom: 12px; right: auto;
    width: 420px; max-width: calc(100% - 24px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0; overflow: hidden;
}
.gb-wp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 12px 14px;   /* справа чуть больше — крестик не липнет к краю */
    font-weight: 700; border-bottom: 1px solid #2b3a49; flex: none;
}
.gb-wp-head button {
    background: none; border: none; color: var(--tg-text-secondary);
    cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px;
}
.gb-wp-head button:hover { background: var(--tg-bg-input); color: var(--tg-text); }
.gb-wp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 14px; }
/* тонкий серый скроллбар, как на карте (был бело-серый по умолчанию) */
.gb-wp-list { scrollbar-width: thin; scrollbar-color: #2b3a49 transparent; }
.gb-wp-list::-webkit-scrollbar { width: 9px; }
.gb-wp-list::-webkit-scrollbar-track { background: transparent; }
.gb-wp-list::-webkit-scrollbar-thumb { background: #2b3a49; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
.gb-wp-list::-webkit-scrollbar-thumb:hover { background: #3a4a5a; background-clip: padding-box; }
.gb-wp-empty { color: var(--tg-text-secondary); font-size: 0.85em; padding: 12px; line-height: 1.5; }
/* строка «Итого» под списком весов */
.gb-wp-total { flex: none; display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 14px; border-top: 1px solid #2b3a49; font-weight: 700; font-size: 0.9em; }
.gb-wp-total:empty { display: none; }
.gb-wp-total .ok { color: #7ee08d; }
.gb-wp-total .warn { color: #f2788a; }   /* перебор/недобор — красным */
/* Группы факторов по родителю — заголовок оформлен как ПРОСТОЕ НАЗВАНИЕ (не карточка) */
.gb-wp-group { display: flex; flex-direction: column; gap: 10px; }
.gb-wp-ghead { display: flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 2px 2px 6px; border-bottom: 1px solid #2b3a49; }
.gb-wp-garrow { flex: none; color: var(--tg-text-secondary); font-size: 0.7em; transition: transform 0.12s; }
.gb-wp-group.closed .gb-wp-garrow { transform: rotate(-90deg); }
.gb-wp-gname { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9em; color: var(--tg-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.01em; }
.gb-wp-gpct { flex: none; color: var(--tg-text-secondary); font-weight: 600; font-size: 0.82em; font-variant-numeric: tabular-nums; }
.gb-wp-gpct.ok { color: #7ee08d; }
.gb-wp-gpct.warn { color: #f0c674; }
.gb-wp-gbody { display: flex; flex-direction: column; gap: 12px; }
.gb-wp-group.closed .gb-wp-gbody { display: none; }
/* вложенная группа (подгруппа проблемы/подцели) — отступ + линия слева */
.gb-wp-gbody .gb-wp-group { border-left: 2px solid #2b3a49; padding-left: 10px; margin-left: 2px; }
/* Строка фактора — ПОЛНАЯ копия карточки-фактора (.gcard.vk-factor.leaf), но со
   СПОКОЙНЫМ свечением. В панели карточка «в потоке», а не absolute. */
.gb-wp-card { position: static !important; width: auto !important; cursor: default;
    z-index: auto !important; transform: none !important; touch-action: auto;
    box-shadow: 0 0 0 1px rgba(106, 178, 242, 0.32), 0 2px 9px rgba(0, 0, 0, 0.32) !important; }
.gb-wp-card .gc-head { cursor: pointer; }
.gb-wp-card .gb-wp-arrow { flex: none; color: var(--tg-text-secondary); font-size: 0.72em; line-height: 1;
    transition: transform 0.12s; display: inline-block; margin-top: 4px; }
.gb-wp-card.open .gb-wp-arrow { transform: rotate(90deg); color: var(--tg-accent-bright); }
.gb-wp-card .gb-wp-name { flex: 1; min-width: 0; font-weight: 650; font-size: 0.95em; color: var(--tg-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-wp-card .gb-wp-pct { flex: none; color: #6ab2f2; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.gb-wp-card .gb-wp-bar { height: 5px; background: #1a2530; border-radius: 3px; margin: 0 8px 6px; overflow: hidden; }
.gb-wp-card .gb-wp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3a7bd5, #6ab2f2); }
/* тело (SMART/шкала/достижение) — раскрывается кликом по шапке */
.gb-wp-card .gb-wp-body { display: none; }
.gb-wp-card.open .gb-wp-body { display: flex; }

/* Кнопка-треугольник «проверка карты» — над нижней панелью, справа, малая полупрозрачная */
.gb-warn-btn {
    position: absolute; right: 12px; bottom: 76px; z-index: 12;   /* bottom уточняет JS над легендой */
    display: flex; align-items: center; gap: 4px;
    background: rgba(224, 85, 97, 0.55); color: #fff; border: none;
    border-radius: 16px; padding: 5px 10px; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 0.82em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
}
.gb-warn-btn[hidden] { display: none; }
.gb-warn-btn:hover { background: rgba(224, 85, 97, 0.85); }
.gb-warn-tri { font-size: 1.05em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; text-align: center; }
.gb-warn-count { font-variant-numeric: tabular-nums; }
/* панель проблем — по размеру содержимого, над кнопкой, без шапки/крестика */
.gb-issues-panel {
    right: 12px; bottom: 108px; left: auto; top: auto;
    width: 320px; max-width: calc(100% - 24px); max-height: 55vh;
    flex-direction: column; align-items: stretch; gap: 0; padding: 6px; overflow-y: auto;
}
.gb-issues-panel .gb-wp-list { padding: 0; gap: 6px; overflow: visible; }
.gb-issue {
    display: block; width: 100%; text-align: left;
    background: rgba(224, 85, 97, 0.12); border: 1px solid rgba(224, 85, 97, 0.3);
    color: var(--tg-text-secondary); border-radius: 7px; padding: 6px 9px; cursor: pointer;
    font: inherit; font-size: 0.76em; font-weight: 500; line-height: 1.35;
}
.gb-issue:hover { background: rgba(224, 85, 97, 0.22); color: var(--tg-text); }
/* ЗАПРЕЩЁННЫЕ действия → красные плашки справа снизу (чуть выше треугольника ошибок),
   как поля ошибок, но сами исчезают; несколько копятся столбиком (растёт вверх) и гаснут.
   Это НЕ ошибки (те копятся в панели ⚠), а разовые предупреждения о невозможном действии. */
.gb-warns { position: fixed; right: 12px; bottom: 76px; z-index: 460; display: flex; flex-direction: column;
    gap: 6px; align-items: flex-end; max-width: 340px; pointer-events: none; }   /* bottom уточняет placeWarnsBox() */
.gb-warn-toast {
    background: rgba(224, 85, 97, 0.16); border: 1px solid rgba(224, 85, 97, 0.5); color: #f4a9b0;
    border-radius: 8px; padding: 8px 12px; max-width: 340px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    font-size: 12px; line-height: 1.4; animation: gb-warn-in 0.2s ease-out; backdrop-filter: blur(3px);
}
.gb-warn-toast.out { animation: gb-warn-out 0.35s ease-in forwards; }
/* инфо-тост (выделено/скопировано/вставлено) — ТА ЖЕ плашка, что у предупреждений
   (как при ✕ у главной цели), но НЕЙТРАЛЬНАЯ: серая, без красного и без синевы.
   Модификатор neutral — НЕ «info»: глобальный .info занят значком «?» (кружок 15px) */
.gb-warn-toast.neutral {
    background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.28); color: #cfd9e3;
}
@keyframes gb-warn-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes gb-warn-out { to { opacity: 0; transform: translateX(14px); } }
/* при протягивании стрелки у запрещённых целей (главная, предок→цикл, уже-ребёнок)
   порты-кружки НЕ показываем — пользователь видит: сюда нельзя */
body.gb-porting .gcard.gb-noport .gc-port { opacity: 0 !important; pointer-events: none; }

/* Панель ЛИСТОВ (несколько деревьев): переключение, добавление, выбор главного листа */
.gb-sheets-panel {
    position: fixed; z-index: 470; min-width: 310px; max-width: 400px;
    background: rgba(23, 33, 43, 0.98); border: 1px solid #2b3a49; border-radius: 12px;
    padding: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); color: #e9eff5;
}
.gb-sheets-hd { font-size: 12px; font-weight: 700; color: #cbd8e3; margin: 0 2px 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.gb-sheets-list { display: flex; flex-direction: column; gap: 5px; }
.gb-sheet-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.gb-sheet-row.active { background: rgba(106, 178, 242, 0.14); outline: 1px solid rgba(106, 178, 242, 0.4); }
.gb-sheet-main { flex: none; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; line-height: 1; font-size: 15px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.32);
    transition: color 0.12s, background 0.12s, border-color 0.12s; }
.gb-sheet-main:hover { color: #ffd873; border-color: rgba(255, 216, 115, 0.5); background: rgba(255, 216, 115, 0.1); }
.gb-sheet-main.on { color: #ffd873; border-color: rgba(255, 216, 115, 0.6); background: rgba(255, 216, 115, 0.16); }
.gb-sheet-name { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-radius: 6px;
    color: var(--tg-text); font: inherit; font-size: 13px; padding: 4px 8px; }
.gb-sheet-name:focus { outline: none; border-color: var(--tg-accent-bright); background: rgba(255, 255, 255, 0.08); }
/* readonly-название — выглядит текстом, клик по нему = открыть лист (курсор строки) */
.gb-sheet-name[readonly] { background: transparent; border-color: transparent; cursor: pointer; }
.gb-sheet-row { cursor: pointer; }
.gb-sheet-row:hover { background: rgba(255, 255, 255, 0.06); }
.gb-sheet-row.active:hover { background: rgba(106, 178, 242, 0.18); }
/* карандаш переименования (на месте бывшей кнопки «Открыть») */
.gb-sheet-edit { flex: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
    background: rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }
.gb-sheet-edit:hover { border-color: var(--tg-accent-bright); color: #d3e6fb; }
/* лимит 10 листов: кнопка добавления затемнена (клик даёт тост-предупреждение) */
.gb-sheet-add.off { opacity: 0.35; border-style: solid; cursor: default; }
.gb-sheet-add.off:hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.8); }
.gb-sheet-del { flex: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px;
    background: rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }
.gb-sheet-del:hover { background: #ec5e6f; color: #fff; }
.gb-sheet-add { display: block; width: 100%; margin-top: 8px; padding: 6px; border-radius: 8px; cursor: pointer;
    border: 1px dashed rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.8); font: inherit; font-size: 13px; }
.gb-sheet-add:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.gb-sheets-note { font-size: 11.5px; color: #aab8c6; margin: 9px 2px 2px; line-height: 1.45;
    padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Настройки → выгрузка деревьев */
.set-export-list { display: flex; flex-direction: column; gap: 8px; }
.set-export-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid #232f3c; }
.set-export-name { font-weight: 600; }
.set-export-btn { flex: none; text-decoration: none; }

/* ПОСТОЯННАЯ панель инструментов слева. top/bottom задаёт JS; left/width — здесь.
   Полный вид — иконка + подпись (210px); компактный — только иконки (58px).
   ВАЖНО: RAIL_W_FULL / RAIL_W_COMPACT в goals.html ДОЛЖНЫ совпадать с width ниже.
   Компакт НЕ меняет паддинги кнопок → иконки при сворачивании НЕ сдвигаются. */
.gb-tools-rail {
    left: 12px; width: 210px; right: auto; align-items: stretch;
    flex-direction: column; gap: 0; padding: 0; overflow: visible;
    background: rgba(20, 29, 38, 0.5);   /* заметно прозрачнее обычной панели */
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.gb-tools-rail.compact { width: 58px; }
.gb-rail-inner {
    display: flex; flex-direction: column; gap: 5px; padding: 9px;
    height: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; width: 100%;
    scrollbar-width: thin; scrollbar-color: #2b3a49 transparent;
}
.gb-rail-btn, .gb-rail-toggle {
    display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
    padding: 7px 9px; border-radius: 8px; cursor: pointer; flex: none;
    background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(43, 58, 73, 0.7); color: var(--tg-text);
    font: inherit; font-size: 0.9em; line-height: 1.15; text-align: left; white-space: nowrap;
    -webkit-user-select: none; user-select: none;
    transition: background 0.12s, border-color 0.12s;
}
.gb-rail-btn:hover, .gb-rail-toggle:hover { background: rgba(255, 255, 255, 0.09); border-color: #3a4c5e; }
.gb-rail-ic { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.gb-rail-ic svg { width: 20px; height: 20px; display: block; }
.gb-rail-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gb-rail-btn.primary { color: #cfe3ff; }
.gb-rail-btn.primary .gb-rail-ic { color: #7cc0ff; }
.gb-rail-btn.problem { color: #f2a9b0; }
.gb-rail-btn.problem .gb-rail-ic { color: #ec8b93; }
/* «вкл»-состояние (тоглы сетки/связей, «факторы в ряд») — синяя подсветка */
.gb-rail-btn.on, .gb-rail-toggle.on { border-color: rgba(106, 178, 242, 0.6); background: rgba(106, 178, 242, 0.16); color: #cfe3ff; }
.gb-rail-toggle input { flex: none; margin: 0 0 0 auto; accent-color: var(--tg-accent-bright); color-scheme: dark; }
/* заголовок группы: в полном виде — подпись, в компактном — тонкая линия-разделитель */
.gb-rail-cap {
    flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--tg-text-secondary); padding: 9px 6px 3px; opacity: 0.8;
}
.gb-rail-cap:first-child { padding-top: 2px; }
.gb-tools-rail.compact .gb-rail-cap {
    height: 1px; padding: 0; margin: 7px 9px; overflow: hidden; text-indent: -9999px; background: #2b3a49;
}
/* КОМПАКТНЫЙ вид — подписи и чекбоксы скрыты; паддинги/иконки НЕ меняем → иконки не сдвигаются */
.gb-tools-rail.compact .gb-rail-lbl,
.gb-tools-rail.compact .gb-rail-toggle input { display: none; }
/* кнопка-«язычок» сворачивания — на середине правой грани, с поворотным шевроном */
/* Отдельного «язычка» сворачивания больше нет: панель сворачивается кликом по любому
   свободному месту (заголовки-разделители / отступы). Курсор-подсказка — на самой панели. */
.gb-tools-rail { cursor: pointer; }
.gb-tools-rail .gb-rail-btn, .gb-tools-rail .gb-rail-toggle { cursor: pointer; }

/* Выпадающий список ШАБЛОНОВ деревьев */
.gb-templates-panel {
    position: fixed; z-index: 470; min-width: 300px; max-width: 360px;
    background: rgba(23, 33, 43, 0.98); border: 1px solid #2b3a49; border-radius: 12px;
    padding: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); color: #e9eff5;
}
.gb-tpl-hd { font-size: 12px; font-weight: 700; color: #cbd8e3; margin: 0 2px 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.gb-tpl-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    text-align: left; padding: 8px 10px; margin-bottom: 5px; border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; color: inherit; font: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.gb-tpl-item:hover { background: rgba(106, 178, 242, 0.14); border-color: rgba(106, 178, 242, 0.4); }
.gb-tpl-name { font-size: 13.5px; font-weight: 650; color: var(--tg-text); }
.gb-tpl-desc { font-size: 11px; color: #93a4b5; line-height: 1.35; }
.gb-tpl-note { font-size: 10.5px; color: #93a4b5; margin: 4px 2px 0; line-height: 1.4; }
/* верхние выпадающие панели плавно гаснут, когда с них уводят курсор */
.gb-templates-panel, .gb-sheets-panel { transition: opacity 0.15s ease; }
.gb-templates-panel.gb-fade, .gb-sheets-panel.gb-fade { opacity: 0; pointer-events: none; }

/* Кнопка «Справочник» в панели — чуть заметнее (акцентная рамка). Класс guideBTN —
   НЕ «guide» (тот класс занят контейнером справочника с margin-bottom:20px, из-за
   которого кнопка «съезжала» вверх); вместо эмодзи ❓ — свой кружок-«?» в тон */
.gb-btn.guidebtn {
    border-color: rgba(106, 178, 242, 0.5); color: #bcd8f4;
    display: inline-flex; align-items: center; gap: 6px;
}
.gb-btn.guidebtn:hover { background: rgba(106, 178, 242, 0.18); }
.gb-guide-q {
    flex: none; width: 15px; height: 15px; border-radius: 50%;
    background: rgba(106, 178, 242, 0.18); border: 1px solid rgba(106, 178, 242, 0.55);
    color: #9cc4ea; font-size: 10px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* ---- Справочник: вводное окно (первый вход + кнопка «Справочник») ---- */
.gb-guide-modal {
    position: fixed; inset: 0; z-index: 560;
    background: rgba(6, 10, 16, 0.62); animation: gb-guide-fade 0.16s ease-out;
}
@keyframes gb-guide-fade { from { opacity: 0; } to { opacity: 1; } }
/* окно Справочника по вертикали = как панель «Факторы»: top/bottom задаёт JS (между
   верхней панелью и легендой), по горизонтали центрируется */
.gb-guide-box {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 780px; max-width: calc(100% - 24px); overflow-y: auto;
    background: linear-gradient(180deg, #1b2733 0%, #17212b 100%);
    border: 1px solid #2f4356; border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); color: #e9eff5;
    padding: 26px 30px 30px;
}
.gb-guide-close {
    position: sticky; float: right; top: 0; z-index: 2;
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 16px; line-height: 1;
    background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.75);
}
.gb-guide-close:hover { background: #ec5e6f; color: #fff; }
.gb-guide-box h1 { margin: 0 0 6px; font-size: 25px; font-weight: 750; letter-spacing: -0.01em; }
.gb-guide-lead { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: #bcccda; max-width: 62ch; }
.gb-guide-box h2 {
    margin: 26px 0 10px; font-size: 17.5px; font-weight: 700; color: #eaf2fa;
    display: flex; align-items: center; gap: 9px;
}
.gb-guide-box h2 .gb-guide-num {
    flex: none; width: 27px; height: 27px; border-radius: 8px; font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(106, 178, 242, 0.16); color: #7fb6f2; border: 1px solid rgba(106, 178, 242, 0.4);
}
.gb-guide-box h3 { margin: 18px 0 7px; font-size: 14.5px; font-weight: 700; color: #dbe7f2; }
.gb-guide-box p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.6; color: #c6d3df; }
.gb-guide-box ul { margin: 0 0 12px; padding-left: 20px; }
.gb-guide-box li { font-size: 13.5px; line-height: 1.55; color: #c6d3df; margin-bottom: 5px; }
.gb-guide-box b, .gb-guide-box strong { color: #eaf2fa; font-weight: 650; }
.gb-guide-box a { color: #7fb6f2; }
.gb-guide-fig {
    margin: 12px 0 16px; padding: 14px; border-radius: 12px;
    background: rgba(0, 0, 0, 0.22); border: 1px solid #263847; overflow-x: auto;
}
.gb-guide-fig svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.gb-guide-cap { margin: 8px 0 0; font-size: 11.5px; color: #8ea1b2; text-align: center; line-height: 1.4; }
.gb-guide-callout {
    margin: 12px 0; padding: 12px 15px; border-radius: 10px; border-left: 3px solid #7fb6f2;
    background: rgba(106, 178, 242, 0.09); font-size: 13px; line-height: 1.55; color: #cfe0f0;
}
.gb-guide-callout.warn { border-left-color: #e0a13f; background: rgba(224, 161, 63, 0.09); color: #f0dcc0; }
.gb-guide-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.gb-guide-key {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid #29394a; font-size: 12.5px; color: #c6d3df;
}
.gb-guide-key b { color: #eaf2fa; }
.gb-guide-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid #263543; display: flex; justify-content: flex-end; }
.gb-guide-ok {
    padding: 9px 22px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 650;
    background: var(--tg-accent-bright); border: none; color: #fff;
}
.gb-guide-ok:hover { filter: brightness(1.08); }

/* Свои модалки подтверждения (вместо браузерных confirm/alert) */
.gb-ui-modal .gb-ui-box { max-width: 380px; text-align: left; }
/* pre-line — переводы строк из текста сообщения работают (список карточек при групповой связи) */
.gb-ui-box p { margin: 0 0 16px; line-height: 1.5; white-space: pre-line; }
.gb-ui-btns { display: flex; justify-content: flex-end; gap: 8px; }
.gc-smart { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; }
.gcard.collapsed .gc-smart { display: none; }
.gc-row { display: flex; gap: 7px; align-items: center; }   /* тег/поле/«?» ровно по центру по вертикали */
/* поля/теги — полупрозрачные, чтобы СОЧЕТАТЬСЯ с цветом карточки (а не серые) */
.gc-tag {
    flex: none; width: 20px; height: 20px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.07); color: var(--tg-accent-hover);
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: default;   /* без «?»-курсора при наведении на букву */
}
.gc-tag.scmid { color: var(--tg-text-secondary); }
.gc-field {
    flex: 1; min-width: 0; resize: none; overflow: hidden;
    background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
    color: var(--tg-text); border-radius: 6px; padding: 3px 8px;
    font: inherit; font-size: 0.82em; line-height: 1.3;
    /* все SMART-поля стартуют одной высотой (одна строка); растут при переполнении.
       padding 3px (не 4px) — чтобы одиночная строка была ровно по центру поля */
    min-height: 25px; box-sizing: border-box;
}
.gc-field:focus { outline: none; border-color: var(--tg-accent-bright); background: rgba(255, 255, 255, 0.08); }
/* серые подсказки во ВСЕХ полях — ОДИН тон (как .nm-g / .tm-g в D/R/весе/сроке): секундарный
   текст без браузерного «выцветания», чтобы плейсхолдеры SMART и числовых полей совпадали */
.gc-field::placeholder, .gc-title::placeholder { color: var(--tg-text-secondary); opacity: 1; }
/* КЛАВНАВ: подсветка элемента, выбранного стрелками клавиатуры (поле/пилюля/«?»/галка).
   box-shadow повторяет собственный border-radius элемента (у пилюли — овал, у поля — 6px). */
.gb-ksel { box-shadow: 0 0 0 1.5px rgba(106, 178, 242, 0.42) !important; outline: none !important; }
.gc-field.gb-ksel, .gc-title.gb-ksel { border-color: rgba(106, 178, 242, 0.55); }
/* у названия нет собственного border-radius → рамка выделения была острым прямоугольником;
   округляем её, чтобы совпадала с остальными выделяемыми местами */
.gc-title.gb-ksel { border-radius: 6px; }
/* маска-поля (вес/D/R) и срок: прозрачный input без скругления → рамку рисуем на КОНТЕЙНЕРЕ
   (у него border-radius 6px), чтобы выделение было СКРУГЛЁННЫМ, как у остальных полей */
/* Кольцо клавиатурного выбора у полей-масок (вес/D/R/срок) рисуем ПРЯМО на прозрачном input,
   а НЕ на контейнере через :has(). Любое :has()-правило заставляет браузер пересчитывать стили
   ВСЕЙ страницы на КАЖДУЮ правку DOM — из-за этого обрезка подсказок на большом дереве тормозила
   секундами («развернуть все» фризил). Без :has() — правки маски дешёвые, интерфейс не морозит. */
.gc-ninput.gb-ksel, .gc-tinput.gb-ksel {
    border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(106, 178, 242, 0.42);
}
/* достигнутая цель гасит и свои пилюли-подсказки (они лежат ПОВЕРХ тёмной вуали) */
.gcard.dimmed .gc-sug { opacity: 0.28; }
/* Виджет срока (T): прозрачный <input> (виден только курсор) поверх серо-белой маски.
   Фон/рамка — на контейнере .gc-tfield; input и маска ОДНОГО шрифта/паддинга → курсор
   совпадает с текстом. «До» и цифры даты — белым (.tm-w), маска и срок словами — серым (.tm-g). */
.gc-tfw > .gc-tfield { flex: 1; min-width: 0; }
.gc-tfield {
    position: relative; box-sizing: border-box; min-height: 25px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
}
.gc-tfield:focus-within { border-color: var(--tg-accent-bright); background: rgba(255, 255, 255, 0.08); }
.gc-tmask, .gc-tinput {
    font: inherit; font-size: 0.82em; line-height: 1.3; padding: 3px 24px 3px 8px;
    box-sizing: border-box; letter-spacing: normal; white-space: pre;
}
.gc-tmask {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    /* одна строка: дата видима, серый хвост (.tm-tail) режет по буквам + точки JS (fitTMask).
       CSS-многоточия НЕТ намеренно — оно рисовалось цветом блока (белым); точки же лежат
       в сером .tm-g, поэтому и цвет правильный, и «край» ровный у всех строк. */
    display: block;
}
.gc-tinput {
    position: relative; display: block; width: 100%; min-height: 25px;
    background: transparent; border: none; outline: none; color: transparent;
    caret-color: var(--tg-text); cursor: text;
}
.tm-w { color: var(--tg-text); }              /* белым: «До» и цифры даты */
.tm-g { color: var(--tg-text-secondary); }    /* серым: маска «дд.мм.гггг» и срок словами */
/* «Каждый день до ДАТА ← Какой срок?» — теперь тоже поле-с-маской (как дата): input прозрачный
   поверх серой маски .gc-tmask; наследует базовый .gc-tinput/.gc-tfield, своих правил не нужно */
/* поле только для чтения (в панели «Факторы») — выглядит как gc-field, но статичное */
.gc-field-ro {
    flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
    color: var(--tg-text); border-radius: 6px; padding: 3px 8px; min-height: 25px; box-sizing: border-box;
    font-size: 0.82em; line-height: 1.3; white-space: pre-wrap; word-break: break-word;
}
.gc-ph { color: var(--tg-text-secondary); opacity: 0.6; }
/* выделение синим текста НЕ происходит на неизменяемых элементах доски —
   разрешено только в редактируемых полях ввода (и в тексте модалок) */
.goals-full { -webkit-user-select: none; user-select: none; }
.gc-title, .gc-field, .gc-tinput, .gc-weight, .gc-days, .gc-resource { -webkit-user-select: text; user-select: text; }
.ob-modal, .gb-ui-box { -webkit-user-select: text; user-select: text; }

/* === v3.19: годовой календарь + итоги недели (из UI-исследования) === */
.yearcal-wrap { overflow-x: auto; padding: 4px 0; }
#c-yearcal { display: block; }
.yc-cell { cursor: pointer; }
.yc-cell:hover { stroke: #7d8b99; stroke-width: 1; }
.yc-frost { color: #6ab2f2; }
.yearcal-legend { margin: 8px 0 0; font-size: 0.78em; }

.week-recap { margin-bottom: 18px; }
.wr-grid { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.wr-item { display: flex; flex-direction: column; gap: 2px; }
.wr-label { color: var(--tg-text-secondary); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; }
.wr-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.wr-val .good { color: #7ee08d; }
.wr-val .bad { color: #f2788a; }
.wr-val .warncol { color: #f0c674; font-size: 0.85em; }

/* === v3.18: перекомпоновка разделов === */

/* Шапка страницы дня: листание дней теперь здесь, а не в топбаре. */
.day-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 16px;
    flex-wrap: wrap;
}
.day-head-title h1 { margin: 0; font-size: 1.5em; line-height: 1.1; }
.day-head-date { color: var(--tg-text-secondary); font-size: 0.9em; }
.day-today-badge { color: #6ad07a; }
.day-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--tg-bg-secondary); color: var(--tg-text);
    text-decoration: none; font-size: 18px; font-weight: 700;
    box-shadow: inset 0 0 0 1px #24313f;
}
.day-arrow:hover { background: var(--tg-accent-bright); color: #fff; }
.day-today-link { margin-left: auto; color: var(--tg-accent-hover); text-decoration: none; font-size: 0.9em; font-weight: 600; }
.day-today-link:hover { text-decoration: underline; }

/* Факторы дня — единая колонка: дыра под коротким списком исчезает. */
.factor-stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.factor-stack .factor-block { max-width: none; }
.factor-stack .factor-table td { padding: 3px 6px; }
.fcount {
    color: var(--tg-text-secondary); font-weight: 400; font-size: 0.8em;
    background: var(--tg-bg-input); border-radius: 10px; padding: 2px 9px; vertical-align: middle;
}

/* Шаги-вкладки на «Факторах» */
.fsteps { display: flex; gap: 10px; margin: 4px 0 18px; flex-wrap: wrap; }
.fstep-btn {
    flex: 1 1 180px; text-align: left; cursor: pointer;
    background: var(--tg-bg-secondary); border: 1px solid #24313f;
    border-radius: var(--tg-radius); padding: 12px 16px; color: var(--tg-text);
    font: inherit;
}
.fstep-btn b { display: block; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-text-secondary); margin-bottom: 3px; }
.fstep-btn span { font-weight: 650; }
.fstep-btn:hover { border-color: var(--tg-accent-bright); }
.fstep-btn.active { border-color: var(--tg-accent-bright); background: rgba(106, 178, 242, 0.08); }
.fstep-btn.active b { color: var(--tg-accent-hover); }
.fstep-next {
    background: var(--tg-bg-input); border: none; color: var(--tg-accent-hover);
    padding: 10px 18px; border-radius: var(--tg-radius-sm); cursor: pointer; font: inherit; font-weight: 600;
}
.fstep-next:hover { color: #fff; background: var(--tg-accent-bright); }
.factor-save { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Карточки факторов и опросник перетекают колонками — без дыр под короткими
   списками (вместо жёсткой сетки 1fr 1fr негативные/позитивные). */
.fstep .factor-cols { display: block; }
.fstep .fcol { margin-bottom: 20px; }
.fdef-list { display: block; columns: 2 380px; column-gap: 16px; }
.fdef { break-inside: avoid; margin-bottom: 8px; }
.value-cols .value-list { columns: 2 340px; column-gap: 22px; }
.vrow { break-inside: avoid; margin-bottom: 6px; }

/* Достижения: отдельная страница */
.ach-grid-large .ach { padding: 16px 14px 12px; }
.ach-desc { color: var(--tg-text-secondary); font-size: 11.5px; line-height: 1.35; }
.ach-head-grid { margin-bottom: 22px; }
.kpi-sub a { color: var(--tg-accent-hover); text-decoration: none; font-weight: 600; }
.kpi-sub a:hover { text-decoration: underline; }

/* === v3.17: адаптивность (по ревью) + «третий уровень поверхности» === */

/* Липкие панели ныряли под липкую шапку (~53px) при прокрутке. */
.day-side { top: 68px; }
.fmenu { top: 68px; }
.versions-side { top: 68px; }

/* «Факторы»: две колонки при живом левом меню тесно уже до 760px. */
@media (max-width: 1100px) {
    .factor-cols { grid-template-columns: 1fr; }
}

/* Опросник ценности на мобильном: инпуты (84px) не влезали в 80px-треки. */
@media (max-width: 760px) {
    .vrow, .vrow-head { grid-template-columns: 22px 1fr 84px 84px; }
    .vrow .num-input { width: 100%; }
}

/* Широкая таблица дней: липкая колонка № прилегает к краю скролл-порта,
   иначе прокручиваемые колонки просвечивали в паддинге слева. */
.table-wrap.days-wide { padding-left: 0; }
.days-wide .sticky-col { padding-left: 14px; }

/* Повёрнутые подписи последних колонок карты корреляций обрезались краем svg. */
#heatmap { overflow: visible; }
.heatmap-wrap { padding: 4px 90px 0 0; }

/* Явная специфичность: у таблицы дня оба правила ширины первой колонки имели
   равный вес и побеждал порядок объявления. */
.factor-table.value-table th:first-child,
.factor-table.value-table td:first-child { width: 32%; }

/* «Третий уровень поверхности» (Linear/GitHub-паттерн): тонкая рамка вместо
   теней делает сетку карточек читабельнее на тёмном фоне. Inset-тень не
   конфликтует с уже настроенными border-left у акцентных карточек. */
.kpi-card, .chart-card, .guide-card, .vside-card, .version-entry,
.onboard-card, .findings-card, .empty-state, .fdef, .vrow,
.home-hero, .manage-open, .analysis-panel, .table-wrap {
    box-shadow: inset 0 0 0 1px #24313f;
}

.versions {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.version-entry {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 16px 18px;
    border-left: 3px solid transparent;
}

.version-entry.current {
    border-left-color: var(--tg-accent-bright);
}

.version-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.version-num {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--tg-text);
}

.version-date {
    color: var(--tg-text-secondary);
    font-size: 0.85em;
    font-weight: 600;
}

.version-changes {
    margin: 0;
    padding-left: 20px;
    color: var(--tg-text);
}

.version-changes li {
    margin-bottom: 6px;
    line-height: 1.45;
}

.version-changes li:last-child {
    margin-bottom: 0;
}

/* --- Страница «Связи» --- */
.findings-card {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 14px 18px;
    border-left: 3px solid #5eced8;
    margin-bottom: 22px;
}

.findings-card h2 {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tg-accent-hover);
    margin-bottom: 8px;
}

.findings-card ul {
    margin: 0 0 8px;
    padding-left: 20px;
    line-height: 1.55;
}

.findings-card li {
    margin-bottom: 4px;
}

.findings-card .hint {
    margin: 0;
}

.leg-pos { color: #7ee08d; font-weight: 600; }
.leg-neg { color: #f2788a; font-weight: 600; }

/* Карта корреляций — крупная, но в общем контейнере страницы.
   Раньше вылезала через width:94vw + отрицательный margin, из-за чего на
   части ширин экрана её левый/правый край не совпадал с остальными
   карточками (main ограничен max-width:1520px, а 94vw — нет). Теперь ширина
   всегда как у остальных блоков; если сама матрица шире — крутится внутри
   .heatmap-wrap, без смещения относительно страницы. */
.heatmap-card {
    width: 100%;
    padding: 14px 18px 18px;
}
.heatmap-wrap {
    overflow-x: auto;
    padding: 4px 0;
}

#heatmap {
    display: block;
    max-width: none;
    margin: 0 auto;
}

.hm-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.82em;
    color: var(--tg-text-secondary);
    flex-wrap: wrap;
}
.hm-leg-end { font-weight: 700; }
.hm-leg-end.neg { color: #f2788a; }
.hm-leg-end.pos { color: #7ee08d; }
.hm-legend-bar {
    width: 180px; height: 12px; border-radius: 6px;
    background: linear-gradient(to right, #ce3e4d, #1b2530 50%, #2a9e60);
}
.hm-legend-note { opacity: 0.8; }

.hm-cell { cursor: pointer; }
.hm-lbl { cursor: pointer; transition: fill .1s; }
.hm-lbl.on { fill: #fff !important; font-weight: 700; }

.hm-focus {
    margin-top: 14px;
    background: var(--tg-bg-elevated);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius);
    padding: 12px 16px;
}
.hm-focus-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hm-focus-head b { font-size: 1.05em; }
.hm-focus-close {
    margin-left: auto; background: var(--tg-bg-input); border: none; color: var(--tg-text-secondary);
    border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 13px;
}
.hm-focus-close:hover { background: #ec5e6f; color: #fff; }
.hm-focus-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 22px; }
.hm-focus-row { display: grid; grid-template-columns: minmax(90px, 1fr) 90px 52px 52px; align-items: center; gap: 8px; font-size: 0.9em; }
.hm-focus-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-focus-track { background: var(--tg-bg-input); border-radius: 4px; height: 8px; overflow: hidden; }
.hm-focus-fill { display: block; height: 100%; border-radius: 4px; }
.hm-focus-fill.pos { background: #6ad07a; }
.hm-focus-fill.neg { background: #ec5e6f; }
.hm-focus-r { text-align: right; font-weight: 700; }
.hm-focus-r.pos { color: #6ad07a; }
.hm-focus-r.neg { color: #ec5e6f; }
.hm-focus-n { text-align: right; color: var(--tg-text-secondary); font-size: 0.85em; }

.links-table th small {
    color: var(--tg-text-secondary);
    font-weight: 400;
}

.links-table td {
    white-space: nowrap;
}

.fname { font-weight: 600; }
.fname.n { color: #f2788a; }
.fname.p { color: #7ee08d; }

.rbadge {
    display: inline-block;
    min-width: 46px;
    text-align: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9em;
    background: #1b2530;
}

.rbadge.empty {
    color: var(--tg-text-secondary);
    font-weight: 400;
}

.rn {
    color: var(--tg-text-secondary);
    font-size: 0.78em;
    margin-left: 6px;
}

/* Качество регрессии */
.reg-quality {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 14px;
}

.rq-item {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius-sm);
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rq-label {
    color: var(--tg-text-secondary);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rq-val {
    font-size: 1.2em;
    font-weight: 700;
}

.rq-val.good { color: #6ad07a; }
.rq-val.weak { color: #f0c674; }

.reg-warn {
    color: #f0c674;
    margin: -6px 0 14px;
}

/* Столбцы коэффициентов */
.coef-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.coef-row {
    display: grid;
    grid-template-columns: 160px 1fr 56px 72px;
    align-items: center;
    gap: 10px;
}

.coef-name {
    font-weight: 600;
    font-size: 0.9em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coef-name.n { color: #f2788a; }
.coef-name.p { color: #7ee08d; }

.coef-bar {
    position: relative;
    height: 18px;
    background: var(--tg-bg-input);
    border-radius: 4px;
}

.coef-axis {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--tg-text-secondary);
    opacity: 0.5;
}

.coef-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 3px;
}

.coef-fill.pos { background: #6ad07a; }
.coef-fill.neg { background: #ec5e6f; }

.coef-beta {
    font-weight: 700;
    font-size: 0.9em;
    text-align: right;
}

.coef-beta.pos { color: #6ad07a; }
.coef-beta.neg { color: #ec5e6f; }

.coef-weight {
    color: var(--tg-text-secondary);
    font-size: 0.82em;
    text-align: right;
}

@media (max-width: 600px) {
    .coef-row {
        grid-template-columns: 110px 1fr 48px;
    }
    .coef-weight { display: none; }
}

/* --- Метка изменения раздела (неброско, сверху справа) --- */
main { position: relative; }
.page-stamp {
    position: absolute;
    top: 5px;
    right: 16px;
    font-size: 0.62em;
    color: var(--tg-text-secondary);
    opacity: 0.55;
    z-index: 1;
}
.guide-card { position: relative; }
.guide-card h2 { padding-right: 88px; }
.card-stamp {
    position: absolute;
    top: 17px;
    right: 16px;
    font-size: 0.62em;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tg-text-secondary);
    opacity: 0.55;
}

/* --- Факторы: карточки (название, описание, шкала, оценка-эквивалент) --- */
.factor-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 16px;
}
.fcol.negative h2 { color: #ec5e6f; }
.fcol.positive h2 { color: #6ad07a; }
.fcol h2 { margin-bottom: 10px; }

.fcards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.fcard {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fcard.archived { opacity: 0.5; }
/* display:flex выше перебивает встроенный [hidden] — возвращаем сокрытие */
.fcard[hidden] { display: none; }

.fcard-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fcard .wf-name { flex: 1 1 130px; min-width: 110px; }

.fscore { display: flex; align-items: center; gap: 8px; }
.score-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 104px;
    height: 6px;
    border-radius: 4px;
    background: var(--tg-bg-input);
    cursor: pointer;
}
.score-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0e1621;
    cursor: pointer;
}
.score-slider::-moz-range-thumb {
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0e1621;
    cursor: pointer;
}
.score-slider.n::-webkit-slider-thumb { background: #f2788a; }
.score-slider.p::-webkit-slider-thumb { background: #7ee08d; }
.score-slider.n::-moz-range-thumb { background: #f2788a; }
.score-slider.p::-moz-range-thumb { background: #7ee08d; }
.score-num { width: 84px; margin: 0; }

.wf-weight {
    font-size: 0.82em;
    color: var(--tg-text-secondary);
    white-space: nowrap;
}
.wf-weight-val { color: var(--tg-text); font-weight: 700; }

.fcard-acts { display: flex; gap: 6px; margin-left: auto; }
.wf-archive {
    background: var(--tg-bg-input);
    border: none;
    color: var(--tg-text-secondary);
    font-size: 0.76em;
    padding: 5px 9px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.wf-archive:hover { color: var(--tg-text); }

.fcard-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85em;
}
.fmeta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fmeta-lbl { color: var(--tg-text-secondary); min-width: 64px; }
.fmeta-row input {
    flex: 1 1 110px;
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.95em;
    min-width: 0;
}
.fmeta-row input:focus { outline: none; border-color: var(--tg-accent-bright); }
.scale-anchor { display: flex; align-items: center; gap: 4px; flex: 1 1 110px; }
.scale-anchor i { color: var(--tg-text-secondary); font-style: normal; font-weight: 700; }

.day-fname { cursor: help; }

@media (max-width: 760px) {
    .factor-cols { grid-template-columns: 1fr; }
}

/* --- Объединение факторов --- */
.merge-block {
    max-width: 820px;
    margin: 6px 0 18px;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius-sm);
    padding: 10px 14px;
}
.merge-block > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--tg-accent-hover);
    font-size: 0.95em;
}
.merge-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}
.merge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.merge-row .merge-name { flex: 1 1 140px; }
.merge-row .merge-to { flex: 0 1 210px; }
.merge-warn { flex: 1 1 100%; color: #f0c674; font-size: 0.82em; margin-top: 2px; }
.merge-strat { flex: 0 1 280px; }
.merge-name { font-weight: 600; }
.merge-arrow { color: var(--tg-text-secondary); text-align: center; }
.merge-row select {
    background: var(--tg-bg-input);
    border: 1px solid transparent;
    color: var(--tg-text);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.9em;
}
.merge-row select:focus { outline: none; border-color: var(--tg-accent-bright); }

/* --- Ссылка выгрузки данных --- */
.export-line { margin: -8px 0 16px; font-size: 0.9em; color: var(--tg-text-secondary); }
.export-link {
    color: var(--tg-accent-hover);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed var(--tg-accent);
}
.export-link:hover { color: #fff; border-bottom-color: var(--tg-accent-hover); }

/* --- Значок-пояснение «?» и всплывающее окно --- */
.info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--tg-bg-input);
    color: var(--tg-text-secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    margin-left: 5px;
    vertical-align: middle;
    user-select: none;
    flex: none;
}
.info:hover, .info:focus { background: var(--tg-accent-bright); color: #fff; outline: none; }
.dash-section .info, h2 .info { font-size: 9px; }
.info-pop {
    position: fixed;
    z-index: 300;
    max-width: 300px;
    background: var(--tg-bg-elevated);
    color: var(--tg-text);
    border: 1px solid var(--tg-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.82em;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    text-transform: none;
    letter-spacing: 0;
}

/* --- Крупный график фактора + кликабельные мини-графики --- */
.big-factor-card { margin-bottom: 14px; }
.big-factor-card h3 { font-size: 0.95em; color: var(--tg-text); margin-bottom: 8px; }
#c-factor-big { width: 100%; height: 220px; display: block; }
.spark-card {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--tg-radius-sm);
    transition: border-color 0.15s, background 0.15s;
}
.spark-card:hover { background: var(--tg-bg-hover); }
.spark-card.active { border-color: var(--tg-accent-bright); background: var(--tg-bg-hover); }
.spark-card:focus { outline: none; border-color: var(--tg-accent-bright); }

/* --- Широкая таблица «Дни — все факторы» --- */
.days-wide { cursor: grab; }
.days-wide.dragging { cursor: grabbing; user-select: none; }
.days-wide th.sticky-col, .days-wide td.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--tg-bg-secondary);
}
.fcol-head { text-align: center; vertical-align: bottom; min-width: 58px; }
.fcol-head .fname { font-size: 0.86em; }
.fcol-w { display: block; color: var(--tg-text-secondary); font-weight: 400; font-size: 0.82em; }
.days-wide td.fval { text-align: center; }

/* --- Регрессия: устойчивость / диапазон / VIF под коэффициентом --- */
.coef-item { display: flex; flex-direction: column; gap: 1px; }
.coef-sub { font-size: 0.76em; color: var(--tg-text-secondary); padding-left: 170px; }
.coef-stab.ok { color: #7ee08d; }
.coef-stab.mid { color: #f0c674; }
.coef-stab.low { color: #f2788a; }
.vif-flag { color: #f0c674; cursor: help; }
@media (max-width: 600px) { .coef-sub { padding-left: 0; } }

/* === Факторы: страница из 3 разделов === */
.factor-intro-line { max-width: 900px; margin: 14px 0 20px; line-height: 1.5; }
.fcol h3 { font-size: 1em; margin: 0 0 10px; }
.fcol.negative h3 { color: #ec5e6f; }
.fcol.positive h3 { color: #6ad07a; }

/* Раздел 1: карточки-определения */
.fdef-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fdef {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius-sm);
    border-left: 3px solid transparent;
}
.fdef.negative { border-left-color: rgba(236, 94, 111, 0.5); }
.fdef.positive { border-left-color: rgba(106, 208, 122, 0.5); }
.fdef[hidden] { display: none; }
.fdef-sum {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; cursor: pointer; list-style: none; font-weight: 600;
}
.fdef-sum::-webkit-details-marker { display: none; }
.fdef-sum::before { content: '▸'; color: var(--tg-text-secondary); transition: transform .15s; }
.fdef[open] .fdef-sum::before { transform: rotate(90deg); }
.fdef-body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.fld-lbl { display: block; font-size: 0.8em; color: var(--tg-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 5px; }
.fdef-body textarea {
    width: 100%; background: var(--tg-bg-input); border: 1px solid transparent;
    color: var(--tg-text); border-radius: var(--tg-radius-sm); padding: 8px 10px;
    font: inherit; font-size: 0.95em; resize: vertical;
}
.fdef-body .wf-name { width: 100%; }
.fdef-body textarea:focus { outline: none; border-color: var(--tg-accent-bright); }
.goals { display: flex; flex-direction: column; gap: 8px; }
.goal-lbl { display: block; font-size: 0.85em; color: var(--tg-text); margin-bottom: 4px; }
.goal-lbl small { color: var(--tg-text-secondary); font-weight: 400; }
.scale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.scale-cell { display: flex; align-items: center; gap: 6px; }
.scale-cell i { font-style: normal; font-weight: 700; color: var(--tg-text-secondary); width: 18px; text-align: center; flex: none; }
.scale-cell input {
    flex: 1; min-width: 0; background: var(--tg-bg-input); border: 1px solid transparent;
    color: var(--tg-text); border-radius: 6px; padding: 5px 8px; font-size: 0.9em;
}
.scale-cell input:focus { outline: none; border-color: var(--tg-accent-bright); }

/* Раздел 2: опросник ценности */
.value-list { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin-bottom: 14px; }
.vrow {
    display: grid;
    grid-template-columns: 26px minmax(110px, 1fr) minmax(110px, 190px) 96px auto;
    align-items: center; gap: 10px;
    background: var(--tg-bg-secondary); border-radius: var(--tg-radius-sm); padding: 6px 12px;
}
.vrow[hidden] { display: none; }
.vrow-info { min-width: 0; overflow: hidden; cursor: help; }
.vrow-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow.negative .vrow-name { color: #f2788a; }
.vrow.positive .vrow-name { color: #7ee08d; }
.vrow-desc { display: block; font-size: 0.76em; color: var(--tg-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Связи: панель выбора факторов для анализа --- */
.analysis-panel {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 10px 16px;
    margin-bottom: 18px;
}
.analysis-panel > summary { cursor: pointer; font-weight: 600; color: var(--tg-accent-hover); }
.ap-summary-note { color: var(--tg-text-secondary); font-weight: 400; font-size: 0.85em; }
.ap-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 8px; }
.ap-btn {
    background: var(--tg-bg-input); border: 1px dashed var(--tg-border); color: var(--tg-text);
    padding: 6px 12px; border-radius: var(--tg-radius-sm); cursor: pointer; font-size: 0.85em;
}
.ap-btn:hover { border-color: var(--tg-accent-bright); }
.ap-bygroups, .ap-combine { font-size: 0.88em; color: var(--tg-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.ap-combine select { background: var(--tg-bg-input); border: 1px solid transparent; color: var(--tg-text); border-radius: 6px; padding: 5px 8px; }
.ap-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 4px 18px;
    margin: 8px 0 12px;
    max-height: 420px;
    overflow-y: auto;
}
.ap-row { display: grid; grid-template-columns: 1fr auto 120px; align-items: center; gap: 8px; padding: 2px 0; }
.ap-row.faint .ap-name { opacity: 0.65; }
.ap-check { display: flex; align-items: center; gap: 7px; cursor: pointer; overflow: hidden; }
.ap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-name.n { color: #f2788a; } .ap-name.p { color: #7ee08d; }
.ap-cov { color: var(--tg-text-secondary); font-size: 0.78em; white-space: nowrap; }
.ap-grp {
    background: var(--tg-bg-input); border: 1px solid transparent; color: var(--tg-text);
    border-radius: 6px; padding: 4px 7px; font-size: 0.85em; width: 120px;
}
.ap-grp:focus { outline: none; border-color: var(--tg-accent-bright); }
@media (max-width: 600px) { .ap-row { grid-template-columns: 1fr auto; } .ap-grp { display: none; } }

/* === Онбординг: welcome-модалка, тур, чек-лист, пустые состояния === */
.ob-backdrop {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(4, 10, 18, 0.72);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ob-modal {
    position: relative;
    background: var(--tg-bg-secondary);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius);
    max-width: 560px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    padding: 26px 28px 20px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.ob-modal h2 { margin: 0 0 2px; }
.ob-sub { color: var(--tg-text-secondary); font-size: 0.85em; margin: 0 0 12px !important; }
.ob-modal > p { line-height: 1.55; color: var(--tg-text); margin: 0 0 14px; }
.ob-close {
    position: absolute; top: 12px; right: 12px;
    background: var(--tg-bg-input); border: none; color: var(--tg-text-secondary);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
}
.ob-close:hover { background: #ec5e6f; color: #fff; }
.ob-steps { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.ob-step {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--tg-bg-elevated); border-radius: var(--tg-radius-sm);
    padding: 10px 12px; line-height: 1.45;
}
.ob-num {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--tg-accent); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.ob-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ob-primary {
    background: var(--tg-accent-bright); color: #fff; text-decoration: none;
    padding: 9px 16px; border-radius: var(--tg-radius-sm); font-weight: 600;
}
.ob-primary:hover { background: var(--tg-accent-hover); }
.ob-tour, .ob-later {
    background: var(--tg-bg-input); border: none; color: var(--tg-text);
    padding: 9px 16px; border-radius: var(--tg-radius-sm); cursor: pointer;
}
.ob-later { color: var(--tg-text-secondary); }
.ob-note { color: var(--tg-text-secondary); font-size: 0.82em; margin: 0; }

/* Тур: подсветка + тултип */
.tour-spot {
    position: fixed; z-index: 950; display: none;
    border: 2px solid var(--tg-accent-bright);
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(4, 10, 18, 0.72);
    pointer-events: none;
    transition: left .18s, top .18s, width .18s, height .18s;
}
.tour-tip {
    position: fixed; z-index: 960; display: none;
    width: min(400px, calc(100vw - 24px));
    background: var(--tg-bg-elevated);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius);
    padding: 14px 16px 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.tour-tip::before {
    content: ''; position: absolute; left: 50%; margin-left: -7px;
    border: 7px solid transparent;
}
.tour-tip.below::before { top: -14px; border-bottom-color: var(--tg-bg-elevated); }
.tour-tip.above::before { bottom: -14px; border-top-color: var(--tg-bg-elevated); }
.tour-tip-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.tour-tip-head b { font-size: 1.02em; }
.tour-count { margin-left: auto; color: var(--tg-text-secondary); font-size: 0.8em; }
.tour-tip p { margin: 0 0 12px; line-height: 1.5; font-size: 0.93em; }
.tour-btns { display: flex; align-items: center; gap: 8px; }
.tour-nav { margin-left: auto; display: flex; gap: 8px; }
.tour-btns button {
    background: var(--tg-bg-input); border: none; color: var(--tg-text);
    padding: 7px 13px; border-radius: var(--tg-radius-sm); cursor: pointer; font-size: 0.88em;
}
.tour-skip { color: var(--tg-text-secondary) !important; background: transparent !important; padding-left: 0 !important; }
.tour-next { background: var(--tg-accent-bright) !important; color: #fff !important; font-weight: 600; }
.tour-next:hover { background: var(--tg-accent-hover) !important; }

/* Кнопка «Обучение» в шапке */
.tour-link {
    background: transparent; border: none; cursor: pointer;
    color: var(--tg-text-secondary); font: inherit; padding: 0;
}
.tour-link:hover { color: var(--tg-text); }

/* Чек-лист «Начало работы» */
.onboard-card {
    background: var(--tg-bg-secondary);
    border-left: 3px solid var(--tg-accent-bright);
    border-radius: var(--tg-radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    max-width: 860px;
}
.onboard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.onboard-head h2 { margin: 0; font-size: 1.02em; }
.onboard-progress { color: var(--tg-accent-hover); font-weight: 700; }
.onboard-hide {
    margin-left: auto; background: transparent; border: none;
    color: var(--tg-text-secondary); cursor: pointer; width: 26px; height: 26px; border-radius: 50%;
}
.onboard-hide:hover { background: var(--tg-bg-hover); color: var(--tg-text); }
.onboard-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.onboard-list li { display: flex; align-items: baseline; gap: 8px; }
.onboard-list li.done { opacity: 0.55; }
.onboard-list li.done a, .onboard-list li.done span { text-decoration: line-through; }
.ob-mark { color: var(--tg-text-secondary); width: 16px; text-align: center; flex: none; }
li.done .ob-mark { color: #6ad07a; text-decoration: none !important; }
.onboard-list a { color: var(--tg-accent-hover); text-decoration: none; font-weight: 600; }
.onboard-list small { color: var(--tg-text-secondary); }
.onboard-card .hint { margin: 0; }
.onboard-card .hint a { color: var(--tg-accent-hover); }

/* Пустые состояния */
.empty-state {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 22px 24px;
    max-width: 720px;
    line-height: 1.55;
}
.empty-state h2 { margin: 0 0 10px; font-size: 1.1em; }
.empty-state ol { margin: 10px 0; padding-left: 22px; }
.empty-state li { margin-bottom: 6px; }
.empty-state a { color: var(--tg-accent-hover); font-weight: 600; }
/* === v3.16: главная, два столбца дня, достижения, детали дня === */

/* Тур поверх всего: страницы-тултипы прячем, чтобы не светились под затемнением */
body.tour-on .chart-tip, body.tour-on .info-pop { display: none !important; }

/* --- Главная --- */
.home-title { margin-bottom: 0; }
.home-hero {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    border-left: 3px solid var(--tg-accent-bright);
    padding: 20px 24px;
    margin: 16px 0 18px;
}
.home-hero.filled { border-left-color: #6ad07a; }
.home-hero-left { flex: 1 1 300px; }
.home-hero-date { color: var(--tg-text-secondary); font-size: 0.85em; margin-bottom: 4px; }
.home-hero h2 { margin: 0 0 6px; }
.home-hero p { margin: 0; color: var(--tg-text-secondary); }
.home-cta {
    background: var(--tg-accent-bright); color: #fff; text-decoration: none;
    padding: 12px 22px; border-radius: var(--tg-radius-sm); font-weight: 700;
    white-space: nowrap;
}
.home-cta:hover { background: var(--tg-accent-hover); }
.home-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.kpi-unit { font-size: 0.5em; color: var(--tg-text-secondary); margin-left: 4px; }
.kpi-value.good { color: #6ad07a; }
.kpi-value.bad { color: #ec5e6f; }
.home-lvl-bar {
    height: 7px; background: var(--tg-bg-input); border-radius: 4px;
    overflow: hidden; margin-top: 8px;
}
.home-lvl-bar span { display: block; height: 100%; background: #5eced8; border-radius: 4px; }
.kpi-card.streak-hot .kpi-value { color: #f0a35e; }
.kpi-frozen { font-size: 0.45em; vertical-align: middle; cursor: help; }
.home-finding { margin-bottom: 4px; }
.home-finding .good { color: #6ad07a; }
.home-finding .bad { color: #ec5e6f; }

/* Достижения */
.ach-count { color: var(--tg-text-secondary); font-size: 0.75em; font-weight: 400; }
.ach-all-link { font-size: 0.7em; font-weight: 600; color: var(--tg-accent-hover); text-decoration: none; margin-left: 8px; }
.ach-all-link:hover { text-decoration: underline; }
.ach-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 22px;
}
.ach {
    background: var(--tg-bg-secondary); border: 1px solid var(--tg-border);
    border-radius: 10px; padding: 12px 12px 10px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    text-align: center; cursor: help; opacity: 0.55;
    transition: transform .12s, opacity .12s;
}
.ach:hover { transform: translateY(-2px); }
.ach.earned { opacity: 1; border-color: rgba(94, 206, 216, 0.45); }
.ach-icon { font-size: 26px; line-height: 1; filter: grayscale(1); }
.ach.earned .ach-icon { filter: none; }
.ach-title { font-weight: 650; font-size: 12.5px; }
.ach-done { color: #5eced8; font-size: 11px; font-weight: 600; }
.ach-locked { color: var(--tg-text-secondary); font-size: 11px; }
.ach-bar {
    width: 100%; height: 5px; background: var(--tg-bg-input);
    border-radius: 3px; overflow: hidden;
}
.ach-bar span { display: block; height: 100%; background: var(--tg-accent-bright); }

.home-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.home-link {
    background: var(--tg-bg-secondary); border: 1px solid var(--tg-border);
    border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--tg-text);
}
.home-link:hover { border-color: var(--tg-accent-bright); text-decoration: none; }
.home-link b { display: block; color: var(--tg-accent-hover); margin-bottom: 3px; }
.home-link span { color: var(--tg-text-secondary); font-size: 0.85em; }

/* --- День: два столбца --- */
.day-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.day-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 16px; }
.day-side .metrics, .day-side .insights {
    background: var(--tg-bg-secondary); border-radius: var(--tg-radius); padding: 16px 18px; margin: 0;
}
.day-side .metrics h2, .day-side .insights h2 { font-size: 1em; margin: 0 0 10px; }
.mrow {
    display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
    gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--tg-border);
    cursor: help; font-variant-numeric: tabular-nums;
}
.mrow-label { color: var(--tg-text-secondary); font-size: 0.88em; }
.mrow-val { font-weight: 700; font-size: 1.05em; }
.mrow-val.good { color: #6ad07a; }
.mrow-val.bad { color: #ec5e6f; }
.mrow-hint { margin: 8px 0 12px; font-size: 0.78em; }
.day-side .insights-head { display: flex; align-items: center; gap: 10px; }
.day-side .insights-head button { margin: 0 0 0 auto; padding: 7px 12px; font-size: 0.85em; }
@media (max-width: 1150px) {
    .day-layout { grid-template-columns: 1fr; }
    .day-side { position: static; }
}

/* Акцент на субъективной оценке дня */
.day-extra-accent {
    border: 1px solid var(--tg-accent-bright);
    border-radius: var(--tg-radius);
    background: rgba(106, 178, 242, 0.06);
    padding: 14px 18px;
}
.day-extra-star { color: var(--tg-accent-hover); font-size: 0.62em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; margin-left: 8px; }
.day-extra-hint { margin: 8px 0 0; }

/* Часы-ссылка */
a.clock { text-decoration: none; }
a.clock:hover .clock-time, a.clock:hover .clock-date { color: var(--tg-text); }

/* Легенда графика оценки */
.leg-grade { color: #5ea9ff; font-weight: 600; }
.leg-subj { color: #c792ea; font-weight: 600; }

/* Детали дня (клик по графику) */
.dd-modal { max-width: 520px; }
.dd-metrics { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; color: var(--tg-text-secondary); font-size: 0.9em; }
.dd-metrics b { color: var(--tg-text); font-variant-numeric: tabular-nums; }
.dd-review { color: var(--tg-text-secondary); font-style: italic; margin: 0 0 12px; }
.dd-list { display: flex; flex-direction: column; gap: 5px; max-height: 45vh; overflow-y: auto; margin-bottom: 14px; }
.dd-row { display: grid; grid-template-columns: minmax(110px, 1fr) 120px 30px; gap: 10px; align-items: center; font-size: 0.9em; }
.dd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-name.n { color: #f2788a; }
.dd-name.p { color: #7ee08d; }
.dd-track { background: var(--tg-bg-input); border-radius: 4px; height: 8px; overflow: hidden; }
.dd-fill { display: block; height: 100%; border-radius: 4px; }
.dd-fill.n { background: #ec5e6f; }
.dd-fill.p { background: #6ad07a; }
.dd-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* «О системе»: подменю слева */
.about-menu { min-width: 150px; }

/* Библиотека шаблонов факторов */
.tpl-link {
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--tg-accent-hover); font-weight: 600; text-decoration: underline dashed;
}
.tpl-box { max-width: 640px; }
.tpl-h { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 0 8px; }
.tpl-h.n { color: #f2788a; }
.tpl-h.p { color: #7ee08d; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tpl-item {
    background: var(--tg-bg-elevated); border: 1px solid var(--tg-border);
    border-radius: 8px; padding: 10px 12px; cursor: pointer; text-align: left;
    color: var(--tg-text); font: inherit;
}
.tpl-item:hover { border-color: var(--tg-accent-bright); }
.tpl-item b { display: block; margin-bottom: 3px; }
.tpl-item span { color: var(--tg-text-secondary); font-size: 0.8em; line-height: 1.35; display: block; }

.progress-line { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.progress-track { flex: 1; max-width: 300px; height: 10px; background: var(--tg-bg-input); border-radius: 6px; overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: 6px; background: var(--tg-accent-bright); }
.progress-label { color: var(--tg-text-secondary); font-size: 0.86em; white-space: nowrap; }

/* Раздел 3: управление */
.manage-block, .history-block {
    max-width: 820px; margin: 0 0 12px;
    background: var(--tg-bg-secondary); border-radius: var(--tg-radius-sm); padding: 10px 14px;
}
.manage-block > summary, .history-block > summary {
    cursor: pointer; font-weight: 600; color: var(--tg-accent-hover); font-size: 0.95em;
}
.manage-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.manage-row { display: flex; align-items: center; gap: 8px; }
.manage-row.archived { opacity: 0.55; }
.manage-name { flex: 1; font-weight: 600; }
.mng-archive, .mng-del {
    background: var(--tg-bg-input); border: none; color: var(--tg-text-secondary);
    font-size: 0.8em; padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.mng-archive:hover { color: var(--tg-text); }
.mng-del:hover { background: #ec5e6f; color: #fff; }
.history-list { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.hist-row { display: grid; grid-template-columns: minmax(110px, 220px) 1fr; gap: 10px; font-size: 0.9em; padding: 4px 0; border-bottom: 1px solid var(--tg-border); }
.hist-desc { color: var(--tg-text-secondary); }
.hist-desc em { color: var(--tg-accent-hover); font-style: normal; }

@media (max-width: 760px) {
    .vrow { grid-template-columns: 22px 1fr 84px auto; }
    .vrow .score-slider { display: none; }
}

/* === Факторы v3.11: боковое меню, виды, доработки === */
.fpage { display: flex; gap: 22px; align-items: flex-start; }
.fmenu {
    flex: none; width: 170px; position: sticky; top: 14px;
    display: flex; flex-direction: column; gap: 4px;
    background: var(--tg-bg-secondary); border-radius: var(--tg-radius); padding: 10px;
}
.fmenu-collapse {
    background: transparent; border: none; color: var(--tg-text-secondary);
    cursor: pointer; text-align: left; font-size: 0.8em; padding: 4px 8px; margin-bottom: 4px;
}
.fmenu-collapse:hover { color: var(--tg-text); }
.fmenu-item {
    display: block; padding: 9px 12px; border-radius: var(--tg-radius-sm);
    color: var(--tg-text); text-decoration: none; font-weight: 600; font-size: 0.95em;
}
.fmenu-item:hover { background: var(--tg-bg-hover); }
.fmenu-item.active { background: var(--tg-accent); color: #fff; }
.fmenu-show {
    flex: none; background: var(--tg-bg-secondary); border: none; color: var(--tg-text);
    cursor: pointer; border-radius: var(--tg-radius-sm); padding: 8px 12px; font-size: 1.1em;
}
.fpage.menu-collapsed .fmenu { display: none; }
/* max-width:100% — в мобильной колонке (.fpage column + align-items:flex-start)
   контент не растягивается и без этого раздувается до ширины таблиц (гориз. скролл страницы);
   с ним широкие таблицы скроллятся внутри своей обёртки */
.fcontent { flex: 1; min-width: 0; max-width: 100%; }

/* центрирование «+»/«−» в кружке */
.wf-sign { line-height: 1; flex: none; }

/* карточка определения: кнопки действий в заголовке */
.fdef-sum .fdef-title { flex: 1; }
.fdef-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }
.fdef-archive, .fdef-del {
    background: var(--tg-bg-input); border: none; color: var(--tg-text-secondary);
    font-size: 0.76em; padding: 4px 9px; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.fdef-archive:hover { color: var(--tg-text); }
.fdef-del:hover { background: #ec5e6f; color: #fff; }

/* раздел 2: две колонки, ровная сетка, без ползунка */
.value-cols .value-list { display: flex; flex-direction: column; gap: 6px; max-width: none; }
.vrow { grid-template-columns: 24px minmax(80px, 1fr) 86px 86px; }
.vrow .num-input { width: 84px; margin: 0; }
.vrow-head {
    display: grid; grid-template-columns: 24px minmax(80px, 1fr) 86px 86px; gap: 10px;
    padding: 0 12px 2px; font-size: 0.74em; color: var(--tg-text-secondary);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.vrow-head span:nth-child(3), .vrow-head span:nth-child(4) { text-align: center; }
@media (max-width: 760px) {
    .vrow { grid-template-columns: 22px 1fr 80px 80px; }
    .vrow-head { grid-template-columns: 22px 1fr 80px 80px; }
}

/* раздел 3: всегда открыт, на всю ширину */
.manage-open { max-width: none; margin: 6px 0 18px; }
.manage-open > h3 { font-size: 1em; color: var(--tg-accent-hover); margin: 0 0 6px; }
.arch-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.arch-row {
    display: grid; grid-template-columns: 24px minmax(110px, 220px) 1fr auto auto;
    align-items: center; gap: 10px;
    background: var(--tg-bg-secondary); border-radius: var(--tg-radius-sm); padding: 7px 12px;
}
.arch-name { font-weight: 600; }
.arch-name.n { color: #f2788a; } .arch-name.p { color: #7ee08d; }
.arch-desc { color: var(--tg-text-secondary); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-restore, .arch-del {
    background: var(--tg-bg-input); border: none; color: var(--tg-text-secondary);
    font-size: 0.8em; padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.arch-restore:hover { color: var(--tg-text); }
.arch-del:hover { background: #ec5e6f; color: #fff; }
.arch-empty { margin-top: 6px; }

@media (max-width: 760px) {
    .fpage { flex-direction: column; }
    .fmenu { width: auto; flex-direction: row; flex-wrap: wrap; position: static; }
    .arch-row { grid-template-columns: 22px 1fr auto auto; }
    .arch-desc { display: none; }
}

/* --- Страница версий: две колонки с боковой панелью --- */
.versions-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}
.versions-layout .versions { max-width: none; }
.versions-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 16px;
}
.vside-card {
    background: var(--tg-bg-secondary);
    border-radius: var(--tg-radius);
    padding: 16px 18px;
}
.vside-card h3 {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tg-accent-hover);
    margin-bottom: 10px;
}
.vside-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.vside-stat:last-child { margin-bottom: 0; }
.vside-num { font-size: 1.3em; font-weight: 700; color: var(--tg-text); min-width: 52px; }
.vside-lbl { color: var(--tg-text-secondary); font-size: 0.85em; }
.vside-map { margin: 0; padding-left: 18px; line-height: 1.5; font-size: 0.9em; }
.vside-map li { margin-bottom: 8px; }
.vside-map li:last-child { margin-bottom: 0; }
.vside-note p { margin: 0; line-height: 1.5; font-size: 0.9em; }
@media (max-width: 900px) {
    .versions-layout { grid-template-columns: 1fr; }
    .versions-side { position: static; }
}

/* === Страница «Анализ рынка» (О системе) === */
/* отчёт читается сверху вниз — карточки на всю ширину, а не флекс-плитка.
   min-width:0 — иначе flex-элемент не ужимается ниже min-content таблицы
   и страница получает горизонтальный скролл (таблица должна скроллиться
   внутри .mkt-tablewrap, а не растягивать карточку) */
.mkt-guide .guide-card { flex: 1 1 100%; min-width: 0; }
.mkt-verdict { border-left: 3px solid var(--tg-accent-bright); }
/* сводная таблица: шапка приглушённая, строка СИИОЖ выделена */
.mkt-tablewrap { overflow-x: auto; }
.mkt-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.mkt-table th {
    text-align: left; padding: 8px 10px; color: var(--tg-text-secondary);
    font-weight: 600; border-bottom: 1px solid #2b3a49; white-space: nowrap;
}
.mkt-table td { padding: 8px 10px; border-bottom: 1px solid #232f3c; line-height: 1.4; vertical-align: top; }
.mkt-table tr:last-child td { border-bottom: none; }
.mkt-table td.yes { color: #8fd99c; }
.mkt-table td.mid { color: #e0c179; }
.mkt-table td.no { color: var(--tg-text-secondary); }
.mkt-table tr.mkt-self td { background: rgba(106, 178, 242, 0.08); }
.mkt-table tr.mkt-self td:first-child { border-left: 3px solid var(--tg-accent-bright); }
/* вердикт категории — курсивная плашка под заголовком */
.mkt-cat-verdict {
    font-size: 0.92em; color: #b7c6d3; background: rgba(255, 255, 255, 0.03);
    border-radius: 8px; padding: 10px 12px;
}
/* карточка продукта внутри категории */
.mkt-product {
    margin: 12px 0 0; padding: 12px 14px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.025); border: 1px solid #232f3c;
}
.mkt-product p { font-size: 0.92em; margin: 0 0 7px; }
.mkt-product p:last-child { margin-bottom: 0; }
.mkt-phead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.mkt-phead b { font-size: 1em; }
.mkt-pos { color: #b7c6d3; }
/* бейдж уровня угрозы */
.mkt-threat {
    flex: none; font-size: 0.72em; font-weight: 700; letter-spacing: 0.03em;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.mkt-threat.high { background: rgba(224, 85, 97, 0.16); color: #f0a3aa; border: 1px solid rgba(224, 85, 97, 0.45); }
.mkt-threat.mid { background: rgba(224, 161, 63, 0.14); color: #e8c88f; border: 1px solid rgba(224, 161, 63, 0.4); }
.mkt-threat.low { background: rgba(126, 224, 141, 0.10); color: #9dd3a8; border: 1px solid rgba(126, 224, 141, 0.3); }

/* ============ «Оценка дня» — опрос по главному дереву целей (широкий, крупные шкала+название, закреплённая панель итогов) ============ */
.rate-page { max-width: 1500px; margin: 0 auto; font-size: 1.06rem; }
.rate-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 10px 18px; margin-bottom: 22px;
}
.rate-title-wrap { min-width: 0; }
.rate-title { margin: 0; font-size: 1.75em; }
.rate-sub { display: block; color: var(--tg-text-secondary); font-size: 0.55em; margin-top: 2px; }
.rate-datenav { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rate-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9px; font-size: 1.4em; font-weight: 600;
    color: var(--tg-text-secondary); text-decoration: none; background: var(--tg-bg-secondary);
    border: 1px solid var(--tg-border); transition: background 0.15s, color 0.15s;
}
.rate-nav-btn:hover { background: var(--tg-bg-hover); color: var(--tg-text); }
.rate-nav-btn.disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.rate-date { font-weight: 600; white-space: nowrap; }
.rate-today-btn {
    display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
    font-size: 0.82em; font-weight: 600; text-decoration: none; color: #fff; background: var(--tg-accent-bright);
}
.rate-status { display: inline-flex; align-items: center; font-size: 0.78em; min-width: 118px; white-space: nowrap; }
.rate-status.ok { color: #7ee08d; }
.rate-status.err { color: #f2788a; }

/* раскладка: широкий опрос слева + закреплённая панель итогов справа (занимаем всё место) */
.rate-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.rate-survey { min-width: 0; }

/* ── своя оценка дня: ПЕРВОЙ, выделенной карточкой ── */
.rf-dayscore {
    border-color: rgba(232, 192, 125, 0.42) !important;
    background: linear-gradient(180deg, rgba(232, 192, 125, 0.10), rgba(232, 192, 125, 0.03)), var(--tg-bg-secondary);
    margin-bottom: 24px;
}
.rf-dayscore.set { border-color: rgba(232, 192, 125, 0.7) !important; }
.rf-dayscore .rf-title { color: #f0d08a; }
.rf-ds-word { font-size: 0.7em; font-weight: 700; color: var(--tg-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-ds-word.low { color: #f2788a; } .rf-ds-word.mid { color: #e0c179; } .rf-ds-word.high { color: #7ee08d; }

/* ── группы-сферы: нейтральные заголовки (БЕЗ радужной окраски), но с единым синим акцентом ── */
.rate-group { margin-bottom: 26px; }
.rate-group-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 2px 2px 11px; margin-bottom: 4px;
    border-bottom: 1px solid rgba(106, 178, 242, 0.22);
}
.rate-group-name {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.92em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--tg-text);
}
/* единый синий акцент-маркер перед названием сферы (один цвет на все разделы, не радуга) */
.rate-group-name::before {
    content: ''; width: 9px; height: 9px; border-radius: 2px; flex: none;
    background: var(--tg-accent-hover);
}
.rate-group-progress { font-size: 0.82em; color: var(--tg-text-secondary); font-variant-numeric: tabular-nums; }
.rate-group-progress.full { color: #7ee08d; font-weight: 700; }

/* ── карточка фактора: ГЛАВНОЕ — название и шкала ── */
.rf-card {
    background: var(--tg-bg-secondary); border-radius: var(--tg-radius);
    border: 1px solid transparent; border-left: 3px solid rgba(106, 178, 242, 0.35);
    padding: 16px 20px 15px; margin-bottom: 12px; outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.rf-card:focus-visible { border-color: rgba(106, 178, 242, 0.55); }
/* акцентная полоса слева: синяя пока не оценён → зелёная когда оценён (наглядный прогресс) */
.rf-card.rated { border-left-color: #7ee08d; }
/* ВОПРОС всегда выравнивается ПО ЦЕНТРУ: название, метаданные и описание — по центру */
.rf-head { display: flex; flex-direction: column; align-items: center; gap: 7px; }
/* НАЗВАНИЕ — крупное, по центру, главный акцент внимания */
.rf-title { font-weight: 700; font-size: 1.36em; line-height: 1.2; color: var(--tg-text); text-align: center; }
/* метаданные (вес/баллы/ресурс) — приглушены, по центру */
.rf-chips { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; opacity: 0.72; }
.rf-chip {
    display: inline-flex; align-items: center; font-size: 0.68em; color: var(--tg-text-secondary);
    background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rf-chip.w { color: #8fc0f0; background: rgba(106, 178, 242, 0.15); }
.rf-chip.done { color: #e0c179; background: rgba(224, 193, 121, 0.13); }
.rf-pts { color: var(--tg-text-secondary); font-weight: 700; }
/* описание — мелко и приглушённо: привычному пользователю читать не нужно */
.rf-desc { color: var(--tg-text-secondary); font-size: 0.8em; line-height: 1.4; margin-top: 5px; opacity: 0.78; text-align: center; }
/* ШКАЛА — крупные кнопки во всю ширину карточки */
.rf-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 8px; margin-top: 14px; }
.rf-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
    border-radius: 12px; font: inherit; font-size: 1.22em; font-weight: 700; cursor: pointer;
    color: var(--tg-text-secondary); background: rgba(255, 255, 255, 0.05); border: 1px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s; font-variant-numeric: tabular-nums;
}
.rf-btn:hover { background: var(--tg-bg-hover); color: var(--tg-text); border-color: rgba(106, 178, 242, 0.45); }
.rf-btn:active { transform: translateY(1px); }
.rf-btn.on.low  { color: #f2788a; border-color: rgba(242, 120, 138, 0.6); background: rgba(242, 120, 138, 0.17); }
.rf-btn.on.mid  { color: #e0c179; border-color: rgba(224, 193, 121, 0.6); background: rgba(224, 193, 121, 0.16); }
.rf-btn.on.high { color: #7ee08d; border-color: rgba(126, 224, 141, 0.6); background: rgba(126, 224, 141, 0.16); }
/* подписи-якоря 0/5/10 — мелко и приглушённо */
.rf-anchors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 9px; font-size: 0.74em; color: var(--tg-text-secondary); line-height: 1.35; opacity: 0.62; }
.rf-a { cursor: pointer; transition: opacity 0.12s; }
.rf-a.mid { text-align: center; } .rf-a.high { text-align: right; }
.rf-a:hover { opacity: 1; text-decoration: underline; }

/* ── заметка о дне ── */
.rate-note-card { background: var(--tg-bg-secondary); border-radius: var(--tg-radius); padding: 14px 18px; margin-top: 8px; }
.rate-note-cap { display: block; color: var(--tg-text-secondary); font-size: 0.8em; margin-bottom: 6px; }
.rate-note-card textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 48px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-radius: 8px;
    color: var(--tg-text); font: inherit; font-size: 0.92em; padding: 10px 12px; outline: none;
}
.rate-note-card textarea:focus { border-color: var(--tg-accent-bright); background: rgba(255, 255, 255, 0.08); }

/* ── закреплённая панель итогов: тёмное стекло (стиль «Цели»), крупнее и читаемее ── */
/* align-self: stretch — ячейка колонки тянется на всю высоту строки (= высоте опроса),
   иначе grid-элемент сжимается до содержимого и sticky внутри не за что «прилипать» */
.rate-side { min-width: 0; align-self: stretch; }
.rate-side-inner {
    position: sticky; top: 72px;
    background: rgba(23, 33, 43, 0.92); backdrop-filter: blur(8px);
    border: 1px solid rgba(43, 58, 73, 0.9); border-radius: 15px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 20px;
}
.rate-side-sec { display: flex; flex-direction: column; gap: 13px; }
.rate-side-h {
    font-size: 0.74em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tg-text-secondary); padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rate-kpi { display: flex; flex-direction: column; gap: 5px; }
.rate-kpi-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rate-kpi-mini { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
.rate-kpi-name { color: var(--tg-text-secondary); font-size: 0.86em; cursor: help; line-height: 1.3; }
.rate-kpi-val { font-size: 1.7em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tg-text); white-space: nowrap; }
.rate-kpi-val.small { font-size: 1.12em; }
#kpi-day { color: #7ee08d; }
#kpi-main { color: var(--tg-accent-bright); }
#kpi-my { color: #f0d08a; font-weight: 700; }
.rate-kpi-formula {
    font-size: 0.74em; color: var(--tg-text-secondary); opacity: 0.65;
    font-variant-numeric: tabular-nums; margin-top: 1px;
}
.rate-kpi-foot { font-size: 0.76em; color: #e6b877; margin-top: 2px; line-height: 1.3; }
.rate-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); overflow: hidden; margin-top: 3px; }
.rate-bar-fill { height: 100%; border-radius: 4px; width: 0; transition: width 0.25s, background 0.2s; }
.rate-bar-fill.fill { background: #6ab2f2; }
.rate-bar-fill.res { background: #7ee08d; }
.rate-bar-fill.res.over { background: #f2788a; }
.rate-bar-fill.main { background: var(--tg-accent-bright); }

/* ── пустое состояние ── */
.rate-empty { background: var(--tg-bg-secondary); border-radius: var(--tg-radius); padding: 46px 26px; text-align: center; max-width: 600px; margin: 40px auto; }
.rate-empty-icon { font-size: 2.3em; margin-bottom: 8px; }
.rate-empty h2 { margin: 0 0 10px; }
.rate-empty p { color: var(--tg-text-secondary); line-height: 1.55; margin: 0 0 18px; }
.rate-goto-goals { display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 999px; background: var(--tg-accent-bright); color: #fff; text-decoration: none; font-weight: 600; }

/* ── узкий экран: одна колонка, панель итогов над опросом ── */
@media (max-width: 1080px) {
    .rate-body { grid-template-columns: 1fr; gap: 18px; }
    .rate-side { order: -1; }
    .rate-side-inner { position: static; }
    .rf-title { font-size: 1.22em; }
    .rf-btn { min-height: 50px; font-size: 1.12em; }
}

/* ============ Мобильная нижняя навигация + PWA-режим (телефон) ============ */
.mobnav { display: none; }   /* на десктопе скрыта — там верхнее меню */

@media (max-width: 640px) {
    /* верхнюю строку-меню прячем: главные разделы теперь в нижней панели.
       Остаётся компактная верхняя полоса (часы/версия/выход). */
    .topnav-left { display: none; }
    .topnav-inner { padding: 0; min-height: 0; }

    /* контенту — запас снизу и по бокам ужимаем, чтобы кнопки шкалы были шире */
    main { padding: 14px 12px calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* нижняя навигация: закреплена внизу, с учётом «жестовой» зоны телефона */
    .mobnav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
        background: rgba(14, 22, 33, 0.97); backdrop-filter: blur(10px);
        border-top: 1px solid var(--tg-border, #24313d);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .mobnav a {
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
        gap: 3px; padding: 4px 2px; text-decoration: none;
        color: var(--tg-text-secondary, #7d8b99); font-size: 10px; font-weight: 600;
    }
    .mobnav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobnav svg { width: 23px; height: 23px; flex: none; }
    .mobnav a.on { color: var(--tg-accent-hover, #6ab2f2); }
    .mobnav a:active { opacity: 0.55; }

    /* шкала опроса на телефоне: ужимаем отступы → кнопки 0–10 ШИРЕ и удобнее для пальца */
    .rate-page { font-size: 1rem; }
    .rf-card { padding: 14px 12px 12px; }
    .rf-scale { gap: 4px; margin-top: 11px; }
    .rf-btn { min-height: 48px; border-radius: 9px; font-size: 1.02em; }
    .rf-dayscore .rf-scale { gap: 4px; }

    /* На «Целях» доска — фикс. контейнер во весь экран; поднимаем его нижнюю границу
       над мобильной навигацией, чтобы нижние панели доски (легенда, «Факторы», ⚠,
       тосты — все привязаны к низу .goals-full) не уходили под .mobnav. */
    .goals-full { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}