/* ============================================================
   Health — тёмный каркас, светлый контент, лаймовый акцент.
   Слой поверх Bootstrap 5.3: переопределяем токены и компоненты,
   саму сборку не форкаем.
   ============================================================ */

/* === Variables === */
:root {
    --topbar-height: 56px;

    /* каркас (верхняя панель, экран входа) */
    --chrome-bg: #0C0E0B;
    --chrome-raised: #14170F;
    --chrome-line: #21261A;
    --chrome-line-soft: #1D2216;
    --chrome-text: #98A188;
    --chrome-text-dim: #69725A;
    --chrome-text-strong: #F0F3E8;

    /* акцент */
    --lime: #C8F14A;
    --lime-hover: #B7E534;
    --lime-press: #A8D62A;
    --lime-subtle: #EAF6C8;
    --lime-subtle-line: #D8EFA0;
    --olive: #5C7A18;
    --olive-dark: #455C12;

    /* рабочая зона */
    --content-bg: #F3F4EF;
    --card-bg: #FFFFFF;
    --border: #E1E6D9;
    --border-soft: #F1F4EC;
    --text: #15180F;
    --text-2: #2E3527;
    --muted: #7A8270;

    /* статусы — отдельно от акцента */
    --up: #2A7D48;
    --up-bg: #E4F2E6;
    --down: #B23A30;
    --down-bg: #FBE6E4;

    /* Caution: the lime accent is spoken for by records and progress, so a nudge
       that is neither good news nor bad needs a voice of its own. */
    --warn: #8A6A12;
    --warn-bg: #FBF3DC;
    --warn-line: #E8D9A6;

    /* шрифты */
    --font-display: Oswald, "Golos Text", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* карта bootstrap-токенов на палитру */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text-2);
    --bs-body-bg: var(--content-bg);
    --bs-border-color: var(--border);
    --bs-link-color: var(--olive);
    --bs-link-hover-color: var(--olive-dark);
    --bs-link-color-rgb: 92, 122, 24;
    --bs-link-hover-color-rgb: 69, 92, 18;
    --bs-primary: var(--olive);
    --bs-primary-rgb: 92, 122, 24;
    --bs-primary-bg-subtle: var(--lime-subtle);
    --bs-primary-border-subtle: var(--lime-subtle-line);
    --bs-primary-text-emphasis: #4A6410;
    --bs-secondary-color: var(--muted);
    --bs-emphasis-color: var(--text);

    /* Статусные токены Bootstrap: .text-success/.text-danger и подложки бейджей
       иначе остаются исходными синевато-зелёным и алым мимо палитры. */
    --bs-success: var(--up);
    --bs-success-rgb: 42, 125, 72;
    --bs-success-bg-subtle: var(--up-bg);
    --bs-success-border-subtle: #BEDCC7;
    --bs-success-text-emphasis: #1F5E36;
    --bs-danger: var(--down);
    --bs-danger-rgb: 178, 58, 48;
    --bs-danger-bg-subtle: var(--down-bg);
    --bs-danger-border-subtle: #EBC5C1;
    --bs-danger-text-emphasis: #8C2C24;
}

/* === Reset & Base === */
body {
    font-family: var(--font-body);
    color: var(--text-2);
    background-color: var(--content-bg);
    margin: 0;
}

.text-muted {
    color: var(--muted) !important;
}

/* Моноширинные цифры везде, где значения выстраиваются в столбец:
   в таблицах БЖУ и тоннажа разряды иначе гуляют по вертикали. */
.table,
.num,
.tabular {
    font-variant-numeric: tabular-nums;
}

/* === Top bar === */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1045;
    background-color: var(--chrome-bg);
    border-bottom: 1px solid var(--chrome-line-soft);
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--topbar-height);
    padding: 0 1.875rem;
}

.topbar-brand {
    flex-shrink: 0;
    color: var(--chrome-text-strong);
    text-decoration: none;
}

.topbar-brand:hover {
    color: var(--chrome-text-strong);
}

.topbar-toggle {
    background: transparent;
    border: 0;
    color: var(--chrome-text-strong);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem;
    margin-left: -0.25rem;
}

.topnav {
    --bs-offcanvas-width: 288px;
    --bs-offcanvas-bg: var(--chrome-bg);
    --bs-offcanvas-color: var(--chrome-text);
}

.topnav .offcanvas-header {
    color: var(--chrome-text-strong);
    border-bottom: 1px solid var(--chrome-line-soft);
}

.topnav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.topnav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.75rem;
    background: none;
    border: 0;
    border-radius: 3px;
    color: var(--chrome-text);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.topnav-link i {
    color: var(--chrome-text-dim);
    font-size: 0.9375rem;
    transition: color 0.15s;
}

.topnav-link:hover,
.topnav-link.show {
    background-color: rgba(200, 241, 74, 0.09);
    color: var(--chrome-text-strong);
}

.topnav-link:hover i,
.topnav-link.show i {
    color: var(--lime);
}

.topnav-link.active {
    background-color: var(--lime);
    color: var(--chrome-bg);
    font-weight: 600;
}

.topnav-link.active i {
    color: var(--chrome-bg);
}

.topnav-group-toggle::after {
    margin-left: 0.125rem;
    vertical-align: 0.15em;
    opacity: 0.6;
}

.topnav-panel {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-padding-y: 0.375rem;
    --bs-dropdown-bg: var(--chrome-raised);
    --bs-dropdown-border-color: var(--chrome-line);
    --bs-dropdown-border-radius: 4px;
    margin-top: 0.5rem !important;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.topnav-panel-label {
    padding: 0.625rem 0.625rem 0.25rem;
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #5D6650;
}

.topnav-panel-label:first-child {
    padding-top: 0.375rem;
}

.topnav-sublink {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 3px;
    color: var(--chrome-text);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.topnav-sublink > span:not(.topnav-badge) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topnav-sublink i {
    color: var(--chrome-text-dim);
    font-size: 0.9375rem;
}

a.topnav-sublink:hover {
    background-color: rgba(200, 241, 74, 0.09);
    color: var(--chrome-text-strong);
}

a.topnav-sublink:hover i {
    color: var(--lime);
}

.topnav-sublink.active {
    color: var(--lime);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--lime);
}

.topnav-sublink.active i {
    color: var(--lime);
}

.topnav-sublink--empty {
    color: var(--chrome-text-dim);
    font-style: italic;
}

.topnav-sublink--manage {
    color: var(--chrome-text-dim);
}

/* How many rows the section will show once opened. Sits at the far edge of the link,
   quiet enough that the labels still lead. */
.topnav-badge {
    margin-left: auto;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background-color: var(--chrome-line);
    color: var(--chrome-text-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

a.topnav-sublink:hover .topnav-badge {
    color: var(--chrome-text);
}

.topbar-user-menu {
    margin-left: auto;
    flex-shrink: 0;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    background: none;
    border: 0;
    border-radius: 3px;
    color: var(--chrome-text);
    font-size: 0.875rem;
    transition: background-color 0.15s, color 0.15s;
}

.topbar-user i {
    font-size: 1.125rem;
}

.topbar-user:hover,
.topbar-user.show {
    color: var(--chrome-text-strong);
    background-color: rgba(200, 241, 74, 0.09);
}

@media (max-width: 991.98px) {
    .topbar-inner {
        gap: 0.75rem;
        padding: 0 1rem;
    }

    .topnav .offcanvas-body {
        padding: 0.5rem 0.625rem 1rem;
    }

    .topnav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .topnav-group-toggle {
        pointer-events: none;
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.375rem 0.625rem 0.125rem;
        font-family: var(--font-mono);
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: #5D6650;
    }

    .topnav-group-toggle.active {
        background: none;
        color: var(--lime);
        font-weight: 400;
    }

    .topnav-group-toggle i,
    .topnav-group-toggle::after {
        display: none;
    }

    .topnav .topnav-panel {
        display: block;
        position: static;
        transform: none !important;
        margin: 0 !important;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .topnav-panel-label {
        padding-left: 1.25rem;
    }

    .topnav-sublink.active {
        background-color: var(--lime);
        color: var(--chrome-bg);
        box-shadow: none;
    }

    .topnav-sublink.active i {
        color: var(--chrome-bg);
    }

    .topnav-sublink.active .topnav-badge {
        background-color: rgba(12, 14, 11, 0.14);
        color: var(--chrome-bg);
    }

    .main-content {
        padding: 1rem;
    }
}

/* Брендмарк: лаймовый глиф + разряженное слово. */
.brandmark {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
}

.brandmark-glyph {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 5px;
    background-color: var(--lime);
    color: var(--chrome-bg);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

.brandmark-word {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    line-height: 1;
}

/* === Main content === */
.main-content {
    min-height: calc(100vh - var(--topbar-height));
    background-color: var(--content-bg);
    padding: 1.75rem 1.875rem;
}

.auth-content {
    min-height: 100vh;
    background-color: var(--chrome-bg);
}

/* === Page structure === */
/* Внутри лежит всплывающий .page-actions, его нужно обтечь. overflow: hidden
   это делал, но заодно резал всё, что шире контейнера: широкая таблица теряла
   правые колонки без всякого скролла. flow-root держит флоат и ничего не режет. */
.page-content {
    display: flow-root;
}

.page-actions {
    float: right;
    margin-bottom: 0;
    display: flex;
    gap: 0.5rem;
}

.page-content h1 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 1.625rem;
    color: var(--text);
    margin-bottom: 1.25rem;
}

/* === Cards === */
.card {
    background-color: var(--card-bg);
    border-radius: 4px;
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 1rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-soft);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.card-body {
    padding: 1rem;
}

/* === Stat tiles (сводка прогресса) ===
   Ряд крупных метрик над графиками: «где я сейчас» видно до того,
   как глаз дойдёт до кривых. Одна плитка может быть акцентной (PR). */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-tile {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stat-tile--nutrition {
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
}

.stat-tile-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
}

.stat-tile-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--text);
    letter-spacing: 0.005em;
}

.stat-tile-value .unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    margin-left: 0.15rem;
}

.stat-tile-sub {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: 0.1rem;
}

.weekly-weight-chart {
    position: relative;
    height: 220px;
}

/* === Календарь на главной === */
.home-cal {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
}

.home-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.home-cal-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
}

.home-cal-nav {
    display: flex;
    gap: 0.35rem;
}

.home-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--border-soft);
    border: 1px solid var(--border-soft);
}

.home-cal-weekday {
    padding: 0.25rem 0.4rem;
    background-color: var(--card-bg);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-cal-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 6.5rem;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    background-color: var(--card-bg);
}

.home-cal-day.is-out {
    background-color: var(--content-bg);
}

.home-cal-day.is-out > * {
    opacity: 0.55;
}

.home-cal-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
}

.home-cal-num-wd {
    display: none;
}

.home-cal-day.is-today .home-cal-num {
    align-self: flex-start;
    padding: 0 0.3rem;
    border-radius: 3px;
    background-color: var(--lime);
    color: var(--text);
    font-weight: 600;
}

.home-cal-add {
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 3px;
    color: var(--muted);
    text-decoration: none;
    transition: opacity 0.12s ease;
}

.home-cal-day .home-cal-add {
    opacity: 0;
}

.home-cal-day:hover .home-cal-add,
.home-cal-add:focus-visible {
    opacity: 1;
}

.home-cal-add:hover {
    background-color: var(--border-soft);
    color: var(--text);
}

@media (hover: none) {
    .home-cal-day .home-cal-add {
        opacity: 1;
    }
}

.home-cal-event {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.05rem 0.3rem;
    border-left: 3px solid var(--event);
    border-radius: 3px;
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--text-2);
    background-color: var(--event-bg);
}

.home-cal-event:hover {
    color: var(--text);
}

.home-cal-event-time {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--event);
}

.home-cal-event-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-cal-event .bi-arrow-repeat {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--event);
}

.cal-event-color--blue { --event: #2563c7; --event-bg: #e3edfc; }
.cal-event-color--green { --event: #2a7d48; --event-bg: #e4f2e6; }
.cal-event-color--red { --event: #b0413e; --event-bg: #f8e3e2; }
.cal-event-color--orange { --event: #b45f06; --event-bg: #fbeadb; }
.cal-event-color--purple { --event: #6d4bb8; --event-bg: #ece6f7; }
.cal-event-color--pink { --event: #a83b7e; --event-bg: #f7e1ee; }
.cal-event-color--teal { --event: #11777a; --event-bg: #dcf0f0; }
.cal-event-color--grey { --event: #5f6670; --event-bg: #eceef0; }

.cal-event-swatches-legend {
    float: none;
}

.cal-event-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cal-event-swatch {
    display: inline-flex;
    padding: 0.2rem;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.cal-event-swatch-dot {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--event);
}

.cal-event-swatch:has(input:checked) {
    border-color: var(--event);
}

.cal-event-swatch:has(input:focus-visible) {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
}

.home-cal-workout {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--text-2);
    background-color: var(--border-soft);
    border: 1px solid var(--border);
}

.home-cal-workout.is-finished {
    background-color: var(--up-bg);
    border-color: transparent;
    color: var(--up);
}

.home-cal-workout.is-in_progress {
    background-color: var(--lime-subtle);
    border-color: var(--lime-subtle-line);
    color: var(--olive-dark);
}

.home-cal-workout-tonnage {
    margin-left: auto;
    padding-left: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
}

.home-cal-workout-tonnage .u {
    margin-left: 0.1rem;
    opacity: 0.7;
}

.home-cal-workout-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-cal-fact {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-cal-ratios {
    margin-top: -0.15rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-cal-ratios .macro-ratio {
    font-size: inherit;
}

a.home-cal-fact:hover {
    text-decoration: underline;
}

.home-cal-fact .u {
    margin-left: 0.15rem;
    color: var(--muted);
}

@media (max-width: 575.98px) {
    .home-cal-grid {
        grid-template-columns: 1fr;
    }

    .home-cal-weekday,
    .home-cal-day.is-out {
        display: none;
    }

    .home-cal-day {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.75rem;
        min-height: 0;
        padding: 0.45rem 0.5rem;
    }

    .home-cal-day.is-empty .home-cal-num {
        opacity: 0.6;
    }

    .home-cal-num {
        flex: 0 0 3.25rem;
    }

    .home-cal-num-wd {
        display: inline;
    }

    .home-cal-ratios {
        margin-top: 0;
    }
}

/* Штамп деплоя на главной: служебная строка, поэтому тише всего на странице. */
.deploy-stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--muted);
}

.deploy-stamp-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.deploy-stamp code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text);
}

/* Таблица подводящих: вес крупно, пояснение под ним мелким. */
.warmup-weight {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text);
}

.warmup-weight .unit {
    font-size: 0.8rem;
    color: var(--muted);
    margin-left: 2px;
}

.warmup-why {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.warmup-table .col-step {
    width: 1%;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Рабочий подход — не часть схемы, поэтому отбит от неё. */
.warmup-working td {
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(200, 241, 74, 0.12) 0%, rgba(200, 241, 74, 0) 100%);
}

/* Разминка в тренировке: строка «вес × повторы» с бейджем отдыха под каждым шагом.
   Раскрытия нет — раскрывать нечего, всё уместилось в строку. */
.warmup-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    border: 1px solid var(--lime-subtle-line);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(200, 241, 74, 0.10) 0%, rgba(200, 241, 74, 0) 100%), var(--card-bg);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.warmup-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--olive);
}

.warmup-steps {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.2rem 0.95rem;
    min-width: 0;
}

/* Шаг — колонка: сверху вес с повторами, под ними бейдж отдыха по центру,
   то есть ровно под знаком умножения. */
.warmup-step {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    white-space: nowrap;
}

.warmup-top {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text);
}

.warmup-w {
    font-size: 1.02rem;
}

.warmup-mult {
    color: var(--muted);
    font-weight: 400;
    margin: 0 0.05em;
}

.warmup-r {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--muted);
}

.warmup-rest {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--olive);
    background-color: var(--lime-subtle);
    border: 1px solid var(--lime-subtle-line);
    border-radius: 999px;
    padding: 0.02rem 0.35rem;
    line-height: 1.5;
}

.warmup-rest .bi {
    font-size: 9px;
}

.warmup-from {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

/* На узком экране сводка важнее названия схемы — оно уходит. */
@media (max-width: 700px) {
    .warmup-from { display: none; }
}

/* Направление изменения. Не привязано к плиткам: та же разметка встречается
   в ячейках таблиц, где раньше оставалась без цвета. */
.up {
    color: var(--up);
    font-weight: 600;
}

.down {
    color: var(--down);
    font-weight: 600;
}

/* Акцентная плитка — личный рекорд. Лаймовый каркас переносит «победу»
   в рабочую зону, не выкрикивая её сплошной заливкой. */
.stat-tile--pr {
    border-color: var(--lime-subtle-line);
    background:
        linear-gradient(180deg, rgba(200, 241, 74, 0.14) 0%, rgba(200, 241, 74, 0) 60%),
        var(--card-bg);
}

.stat-tile--pr .stat-tile-label {
    color: var(--olive);
}

/* PR-метка в таблице: строка, где достигнут максимум. */
.pr-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--olive);
    background-color: var(--lime-subtle);
    border: 1px solid var(--lime-subtle-line);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    margin-left: 0.4rem;
    vertical-align: 1px;
}

/* Ячейка рекорда в итогах сезона: «вес × повторения» двумя узкими полями рядом,
   чтобы пара читалась как одно значение, а не как две независимые колонки. */
.record-cell {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.record-cell input {
    width: 5rem;
}

.record-cell .times {
    color: var(--muted);
}

/* Повторения против предписанного диапазона. Число читается всегда, состояние
   только уточняет: ниже цели — приглушённо, выше — пунктиром снизу. */
.rep-below {
    color: var(--muted);
}

.rep-above {
    border-bottom: 1px dashed currentColor;
}

/* Сессия, где вес заметно снижен. Формулировка фактическая — страница не знает,
   плановый это делоад или опечатка ввода. */
.weight-drop {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    margin-left: 0.35rem;
    vertical-align: 1px;
    white-space: nowrap;
}

/* Ячейка веса: собственный вес и отягощение как два слагаемых со своими значками.
   Части не разрываются переносом — ломается строка только между слагаемыми. */
.weight-cell .weight-part {
    white-space: nowrap;
}

.weight-cell .weight-part .bi {
    color: var(--muted);
    font-size: 0.8125em;
    margin-right: 0.15em;
}

.weight-cell .weight-op {
    color: var(--muted);
    margin: 0 0.15em;
}

/* Список упражнений плана: ручка перетаскивания в первой колонке таблицы. */
.plan-items .drag-handle {
    color: var(--muted);
    cursor: grab;
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
}

/* Две строки сравнения в одной ячейке — «от предыдущей» и «от первой на этом весе».
   Подпись приглушена, чтобы числа читались столбиком. */
.progress-line {
    display: block;
    white-space: nowrap;
}

.progress-line .label {
    color: var(--muted);
    font-size: 0.8125rem;
}

/* Совет на следующую тренировку. Тон карточки, а не алерта: это подсказка,
   а не предупреждение. */
.recommendation-note {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--lime-subtle-line);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.recommendation-note .caveat {
    color: var(--muted);
    font-size: 0.8125rem;
}

/* === Вкладки страницы === */
/* Сегментный переключатель охвата страницы (прогресс, главная): две вкладки на утопленной
   дорожке, активная — приподнятая. Не «папки» Bootstrap и не одно подчёркивание:
   вкладка решает, о чём вся страница ниже, и должна читаться раньше графиков.
   Заливка активной — приглушённый лайм, а не чистый: чистым помечены рекорд
   (.pr-badge, .stat-tile--pr) и текущая неделя, и второй громкий лайм на экране
   отнимал бы у них смысл. */
.page-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.125rem;
    padding: 0.1875rem;
    background-color: #E8EBE1;
    border-radius: 5px;
}

.page-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.page-tabs .nav-link i {
    font-size: 0.875rem;
    color: var(--muted);
    transition: color 0.15s;
}

.page-tabs .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--text-2);
}

.page-tabs .nav-link:hover i {
    color: var(--olive);
}

.page-tabs .nav-link.active,
.page-tabs .nav-link.active:hover {
    background-color: var(--lime-subtle);
    border-color: var(--lime-subtle-line);
    color: var(--text);
}

.page-tabs .nav-link.active i {
    color: var(--olive);
}

/* === Tables === */
/* Обёртка над каждой таблицей: если колонки не влезают, они уезжают в
   горизонтальный скролл, а не пропадают за краем карточки. Она же несёт
   подложку — часть таблиц (прогресс, журнал входов) лежит без карточки прямо
   на --content-bg, и без своего фона они читаются как россыпь текста на
   странице: полоса у table-striped почти совпадает с фоном контента. */
.table-scroll {
    overflow-x: auto;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* Внутри карточки подложка и рамка уже есть — второй раз не рисуем. */
.card .table-scroll {
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

/* Короткие колонки — даты, числа, бейджи, кнопки — жмутся по содержимому:
   width: 1% при table-layout: auto читается как «минимально возможная», а
   nowrap не даёт числу разъехаться на две строки. Свободное место достаётся
   текстовым колонкам само.
   Обратный приём (width: 100% на текстовой колонке) не годится: он прижимает
   все остальные к min-content, и таблица выглядит ужатой. */
.table th.col-shrink,
.table td.col-shrink,
.table th.cell-actions,
.table td.cell-actions {
    width: 1%;
    white-space: nowrap;
}

/* Текстовой колонке — только нижняя граница читаемости, без фиксации ширины. */
.table th.col-grow {
    min-width: 12rem;
}

.table {
    margin-bottom: 0;
    /* Bootstrap 5.3 держит фон ячеек прозрачным. Пусть таблица несёт свой,
       чтобы не зависеть от того, лежит она в карточке или нет. */
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-2);
    --bs-table-border-color: var(--border-soft);
    /* Полосы по умолчанию — чистый серый, он спорит с зеленоватыми нейтралями. */
    --bs-table-striped-bg: #F6F8F2;
    --bs-table-striped-color: var(--text-2);
    --bs-table-hover-bg: #FAFBF7;
    --bs-table-hover-color: var(--text-2);
}

.table thead th {
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    padding: 0.625rem 1rem;
    font-weight: 500;
}

/* Подсказка под заголовком колонки: расшифровывает составное значение
   («вес | подходы | тоннаж»), чтобы порядок чисел в ячейке не приходилось
   угадывать. Сам заголовок капслочный — подсказке капс снимаем. */
.table thead th .th-hint {
    display: block;
    margin-top: 0.2rem;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 400;
    opacity: 0.72;
}

.table tbody td {
    padding: 0.6875rem 1rem;
    border-color: var(--border-soft);
    vertical-align: middle;
    color: var(--text-2);
}

.table tbody tr:hover td {
    background-color: #FAFBF7;
}

/* Б/Ж/У одной строкой. Моноширинные, чтобы три числа подряд не слипались
   в кашу, и приглушённые — калории в той же ячейке главнее. */
.macro {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--muted);
    margin-right: 0.3rem;
}

.macro-sep {
    color: var(--border);
    margin-right: 0.3rem;
}

/* Б/Ж/У и калории — одна группа: скобка говорит, что нижнее число посчитано из
   верхних, а не стоит рядом с ними. Группа сужается по строке макросов, чтобы
   скобка не растягивалась на всю ширину колонки. */
.macro-group {
    display: inline-flex;
    flex-direction: column;
    row-gap: 0.1rem;
}

.macro-line {
    white-space: nowrap;
}

.macro-line .macro-pair:last-child {
    margin-right: 0;
}

/* Скобка нарисована рамками: две дуги по краям и язычок посередине из фона.
   Дуги тянутся вместе с группой, радиус остаётся прежним. */
.macro-brace {
    position: relative;
    height: 10px;
    background-image: linear-gradient(var(--border), var(--border));
    background-size: 1px 4px;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.macro-brace::before,
.macro-brace::after {
    content: '';
    position: absolute;
    top: 0;
    height: 6px;
    width: calc(50% - 0.5px);
    border-bottom: 1px solid var(--border);
}

.macro-brace::before {
    left: 0;
    border-left: 1px solid var(--border);
    border-bottom-left-radius: 6px;
}

.macro-brace::after {
    right: 0;
    border-right: 1px solid var(--border);
    border-bottom-right-radius: 6px;
}

.macro-total {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
}

.macro-total-link {
    color: var(--muted);
    text-decoration: none;
    margin-left: 0.25rem;
}

.macro-total-link:hover,
.macro-total-link:focus-visible {
    color: var(--olive);
}

/* Макрос и его доля на килограмм — одна пара, и переносить строку между ними
   нельзя: разлучённые, они читаются как два независимых числа. */
.macro-pair {
    white-space: nowrap;
    margin-right: 0.45rem;
}

.macro-pair .macro {
    margin-right: 0.15rem;
}

.macro-ratio {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
}

/* Недобор и взятая цель различаются не только цветом: знак внутри скобок
   оставляет состояние читаемым в ч/б и при дальтонизме — тем же приёмом, что
   стрелки у .up/.down. */
.macro-ratio--under {
    color: var(--down);
    font-weight: 600;
}

.macro-ratio--met {
    color: var(--up);
    font-weight: 600;
}

/* Заметка идёт отдельной строкой под записью, а не колонкой: она есть у единиц
   дней, и колонкой держала бы прочерк почти в каждой строке. Строку с записью
   и её заметку разделять линией не нужно — это одна карточка. */
.table tbody tr:has(+ .row-note) > td {
    border-bottom-width: 0;
}

.table tbody tr.row-note > td {
    padding-top: 0;
    color: var(--muted);
    font-size: 0.8125rem;
    white-space: normal;
}

.table tbody tr.row-note:hover > td {
    background-color: transparent;
}

.note-mark {
    color: var(--border);
    margin-right: 0.4rem;
}

/* === Pagination === */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-soft);
    font-size: 0.875rem;
    color: var(--muted);
    background-color: var(--card-bg);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination-wrapper .pagination {
    margin: 0;
}

.pagination-wrapper .page-link {
    color: var(--text-2);
    border-color: var(--border);
    font-size: 0.875rem;
    padding: 0.25rem 0.625rem;
}

.pagination-wrapper .page-link:hover {
    background-color: var(--lime-subtle);
    border-color: var(--lime-subtle-line);
    color: var(--olive-dark);
}

.pagination-wrapper .page-item.active .page-link {
    background-color: var(--lime);
    border-color: var(--lime);
    color: var(--chrome-bg);
    font-weight: 600;
}

.pagination-wrapper .page-item.disabled .page-link {
    color: #C3CBB6;
}

/* === Buttons ===
   Bootstrap 5.3 компилирует цвета кнопок в --bs-btn-*, а не в --bs-primary,
   поэтому перекрашиваем каждый вариант через его собственные токены. */
.btn {
    --bs-btn-border-radius: 3px;
    --bs-btn-font-weight: 600;
    --bs-btn-focus-shadow-rgb: 200, 241, 74;
    font-size: 0.875rem;
}

.btn-primary {
    --bs-btn-bg: var(--lime);
    --bs-btn-border-color: var(--lime);
    --bs-btn-color: var(--chrome-bg);
    --bs-btn-hover-bg: var(--lime-hover);
    --bs-btn-hover-border-color: var(--lime-hover);
    --bs-btn-hover-color: var(--chrome-bg);
    --bs-btn-active-bg: var(--lime-press);
    --bs-btn-active-border-color: var(--lime-press);
    --bs-btn-active-color: var(--chrome-bg);
    --bs-btn-disabled-bg: #DCE9BB;
    --bs-btn-disabled-border-color: #DCE9BB;
    --bs-btn-disabled-color: #6C7461;
}

.btn-outline-primary {
    --bs-btn-color: var(--olive);
    --bs-btn-border-color: var(--lime-subtle-line);
    --bs-btn-hover-bg: var(--lime);
    --bs-btn-hover-border-color: var(--lime);
    --bs-btn-hover-color: var(--chrome-bg);
    --bs-btn-active-bg: var(--lime-press);
    --bs-btn-active-border-color: var(--lime-press);
    --bs-btn-active-color: var(--chrome-bg);
    --bs-btn-disabled-color: #A9B29A;
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text-2);
    --bs-btn-border-color: #CDD5C2;
    --bs-btn-hover-bg: var(--text);
    --bs-btn-hover-border-color: var(--text);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: var(--text);
    --bs-btn-active-border-color: var(--text);
    --bs-btn-disabled-color: #A9B29A;
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-danger {
    --bs-btn-color: var(--down);
    --bs-btn-border-color: #EBC5C1;
    --bs-btn-hover-bg: var(--down);
    --bs-btn-hover-border-color: var(--down);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #963027;
    --bs-btn-active-border-color: #963027;
    --bs-btn-focus-shadow-rgb: 178, 58, 48;
}

.btn-danger {
    --bs-btn-bg: var(--down);
    --bs-btn-border-color: var(--down);
    --bs-btn-hover-bg: #963027;
    --bs-btn-hover-border-color: #963027;
    --bs-btn-active-bg: #963027;
    --bs-btn-active-border-color: #963027;
    --bs-btn-focus-shadow-rgb: 178, 58, 48;
}

.btn-success {
    --bs-btn-bg: var(--up);
    --bs-btn-border-color: var(--up);
    --bs-btn-hover-bg: #226539;
    --bs-btn-hover-border-color: #226539;
    --bs-btn-active-bg: #226539;
    --bs-btn-active-border-color: #226539;
    --bs-btn-focus-shadow-rgb: 42, 125, 72;
}

/* === Forms === */
.form-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.375rem;
}

/* Заголовок группы полей. Bootstrap делает legend почти таким же крупным, как
   h4, и три поля цели выглядели бы вторым заголовком формы; здесь он говорит
   ровно столько же, сколько подпись поля, только чуть твёрже. */
.form-legend {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 0.5rem;
    float: none;
    width: auto;
}

.form-control,
.form-select {
    border-radius: 3px;
    border-color: var(--border);
    color: var(--text-2);
    font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #A8C86A;
    box-shadow: 0 0 0 0.2rem rgba(200, 241, 74, 0.3);
}

.form-check-input:checked {
    background-color: var(--lime);
    border-color: var(--lime-press);
}

.form-check-input:focus {
    border-color: #A8C86A;
    box-shadow: 0 0 0 0.2rem rgba(200, 241, 74, 0.3);
}

.input-group-text {
    background-color: var(--content-bg);
    border-color: var(--border);
    color: var(--muted);
}

/* === Progress === */
.progress {
    background-color: #EDF0E7;
    border-radius: 999px;
}

.progress-bar {
    background-color: var(--lime);
}

/* === Badges === */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* === Всплывающие сообщения (flash) ===
   Плашки стоят в правом нижнем углу и сами уходят: сообщение о сохранении не
   должно сдвигать страницу и стоять на ней, пока его не смахнут. */
.flash-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.flash-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 0.375rem;
    background-color: var(--card-bg);
    box-shadow: 0 6px 20px rgba(20, 24, 12, 0.16);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.4;
    pointer-events: auto;
    animation: flash-in 0.22s ease-out;
}

.flash-toast--success {
    border-left-color: var(--up);
}

.flash-toast--success .flash-toast-icon {
    color: var(--up);
}

.flash-toast--error {
    border-left-color: var(--down);
}

.flash-toast--error .flash-toast-icon {
    color: var(--down);
}

.flash-toast-icon {
    flex: 0 0 auto;
    margin-top: 0.0625rem;
}

.flash-toast-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.flash-toast-close {
    flex: 0 0 auto;
    padding: 0.125rem 0.25rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: var(--muted);
    line-height: 1;
}

.flash-toast-close:hover {
    background-color: var(--border-soft);
    color: var(--text);
}

.flash-toast.is-leaving {
    animation: flash-out 0.2s ease-in forwards;
}

@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@keyframes flash-out {
    to {
        opacity: 0;
        transform: translateX(1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flash-toast,
    .flash-toast.is-leaving {
        animation-duration: 0.01ms;
    }
}

/* === Alerts === */
.alert {
    border-radius: 0 3px 3px 0;
    border: 1px solid var(--border);
    border-left-width: 2px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.alert-success {
    --bs-alert-bg: var(--up-bg);
    --bs-alert-color: #1F5E36;
    --bs-alert-border-color: var(--up);
}

.alert-danger {
    --bs-alert-bg: var(--down-bg);
    --bs-alert-color: #8C2C24;
    --bs-alert-border-color: var(--down);
}

/* alert-info и alert-secondary в проекте несут пустые состояния («нет данных»),
   а не акцент: на лайме три таких блока перекрикивали сами данные. */
.alert-info,
.alert-secondary {
    --bs-alert-bg: #EDF0E7;
    --bs-alert-color: #4A5240;
    --bs-alert-border-color: #C3CBB6;
}

/* === Dropdowns & modals === */
.dropdown-menu {
    border-radius: 4px;
    border-color: var(--border);
    font-size: 0.875rem;
    --bs-dropdown-link-active-bg: var(--lime);
    --bs-dropdown-link-active-color: var(--chrome-bg);
}

.dropdown-menu-dark {
    --bs-dropdown-bg: var(--chrome-raised);
    --bs-dropdown-border-color: var(--chrome-line);
    --bs-dropdown-link-color: var(--chrome-text);
    --bs-dropdown-link-hover-bg: rgba(200, 241, 74, 0.09);
    --bs-dropdown-link-hover-color: var(--chrome-text-strong);
    --bs-dropdown-divider-bg: var(--chrome-line);
}

.modal-content {
    border-radius: 5px;
    border-color: var(--border);
}

.modal-header {
    border-bottom-color: var(--border-soft);
}

.modal-title {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.125rem;
    letter-spacing: 0.01em;
}

/* === Login (split screen) === */
.login-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    background-color: var(--chrome-bg);
}

.login-art {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.75rem;
    padding: 2.5rem;
    overflow: hidden;
    background-color: #10130E;
    background-image: url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1600&q=70");
    background-size: cover;
    background-position: center;
}

/* Затемнение поверх фото: плотнее к низу, где лежит слоган, и почти прозрачное
   сверху, иначе снимок пропадает и слева остаётся просто чёрный прямоугольник. */
.login-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(115% 85% at 20% 15%, rgba(200, 241, 74, 0.10) 0%, rgba(200, 241, 74, 0) 55%),
        linear-gradient(180deg, rgba(12, 14, 11, 0.20) 0%, rgba(12, 14, 11, 0.35) 45%, rgba(12, 14, 11, 0.86) 100%);
}

.login-art > * {
    position: relative;
    z-index: 1;
}

.login-art .brandmark {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    color: var(--chrome-text-strong);
}

.login-slogan {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: #F2F5EA;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.97;
    letter-spacing: -0.01em;
    max-width: 12ch;
    margin: 0 0 0.75rem;
}

.login-slogan span {
    color: var(--lime);
}

.login-lead {
    margin: 0;
    color: #A7B096;
    font-size: 0.875rem;
    max-width: 34ch;
}

.login-facets {
    display: flex;
    gap: 1.875rem;
    border-top: 1px solid rgba(240, 243, 232, 0.14);
    padding-top: 1rem;
}

.login-facets div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.login-facets b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--lime);
    line-height: 1;
}

.login-facets small {
    font-size: 0.6875rem;
    color: #8B937A;
    letter-spacing: 0.03em;
}

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.375rem;
    padding: 2.75rem 3rem;
    border-left: 1px solid var(--chrome-line);
}

/* Панель растягивается вместе с окном, а колонка формы — нет:
   поля шириной в пол-экрана читаются как ошибка вёрстки. */
.login-panel > * {
    width: 100%;
    max-width: 380px;
}

.login-panel-head h1 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.6875rem;
    letter-spacing: 0.01em;
    color: var(--chrome-text-strong);
    margin: 0 0 0.375rem;
}

.login-panel-head p {
    margin: 0;
    color: var(--chrome-text-dim);
    font-size: 0.84375rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

.login-field label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8B937A;
}

/* Поля на тёмном: Bootstrap-овский .form-control светлый, перекрываем целиком. */
.login-field .form-control {
    background-color: var(--chrome-raised);
    border: 1px solid #2A3020;
    border-radius: 3px;
    color: #E7EBDC;
    padding: 0.6875rem 0.8125rem;
    font-size: 0.875rem;
}

.login-field .form-control::placeholder {
    color: #5F684F;
}

.login-field .form-control:focus {
    background-color: var(--chrome-raised);
    border-color: var(--lime);
    color: #E7EBDC;
    box-shadow: 0 0 0 3px rgba(200, 241, 74, 0.15);
}

/* Chrome заливает автозаполненные поля своим светлым фоном и перекрывает
   background-color; погасить его можно только внутренней тенью. */
.login-field .form-control:-webkit-autofill,
.login-field .form-control:-webkit-autofill:hover,
.login-field .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #E7EBDC;
    -webkit-box-shadow: 0 0 0 1000px var(--chrome-raised) inset;
    caret-color: #E7EBDC;
    transition: background-color 5000s ease-in-out 0s;
}

.login-error {
    display: flex;
    gap: 0.5625rem;
    align-items: flex-start;
    background-color: rgba(210, 69, 58, 0.1);
    border-left: 2px solid var(--down);
    padding: 0.625rem 0.75rem;
    color: #E8A9A3;
    font-size: 0.8125rem;
    border-radius: 0 3px 3px 0;
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--lime);
    color: var(--chrome-bg);
    border: 0;
    border-radius: 3px;
    padding: 0.8125rem 1.125rem;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.login-submit:hover {
    background-color: var(--lime-hover);
}

.login-submit:active {
    background-color: var(--lime-press);
}

.login-submit:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
}

.login-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--chrome-line);
    padding-top: 0.875rem;
    font-size: 0.75rem;
    color: var(--chrome-text-dim);
}

.login-foot code {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: #8B937A;
}

@media (max-width: 767.98px) {
    .login-split {
        grid-template-columns: 1fr;
        grid-template-rows: 180px 1fr;
    }

    .login-art {
        justify-content: center;
        padding: 1.25rem;
    }

    /* На узком экране от левой части остаётся только полоса с брендом. */
    .login-art .brandmark {
        position: static;
    }

    .login-slogan,
    .login-lead,
    .login-facets {
        display: none;
    }

    .login-panel {
        border-left: 0;
        border-top: 1px solid var(--chrome-line);
        padding: 2rem 1.5rem;
        justify-content: flex-start;
    }
}

/* === Exercise picker === */
.exercise-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}

.exercise-picker-item {
    background-color: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.exercise-picker-item:hover {
    background-color: var(--lime);
    border-color: var(--lime);
    color: var(--chrome-bg);
}

.exercise-picker-trigger {
    cursor: pointer;
}

/* === Tom Select === */
.ts-wrapper.form-select,
.ts-wrapper .ts-control {
    border-radius: 3px;
    border-color: var(--border);
    font-size: 0.875rem;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.focus.form-select {
    border-color: #A8C86A;
    box-shadow: 0 0 0 0.2rem rgba(200, 241, 74, 0.3);
}

.ts-dropdown {
    border-color: var(--border);
    border-radius: 0 0 3px 3px;
    font-size: 0.875rem;
}

.ts-dropdown .active {
    background-color: var(--lime-subtle);
    color: var(--olive-dark);
}

.ts-dropdown .option:hover {
    background-color: var(--lime-subtle);
}

.ts-wrapper.multi .ts-control > .item {
    background-color: var(--lime-subtle);
    border-color: var(--lime-subtle-line);
    color: var(--olive-dark);
    border-radius: 999px;
}

/* === Flatpickr === */
.flatpickr-calendar {
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(21, 24, 15, 0.12);
    font-family: var(--font-body);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background-color: var(--lime);
    border-color: var(--lime);
    color: var(--chrome-bg);
    font-weight: 600;
}

.flatpickr-day.today {
    border-color: var(--olive);
}

.flatpickr-day:hover {
    background-color: var(--lime-subtle);
    border-color: var(--lime-subtle);
}

.flatpickr-day.meal-day-filled {
    box-shadow: inset 0 0 0 2px var(--olive);
}

/* === Responsive tables (mobile card view) === */
@media (max-width: 767.98px) {
    .table-responsive-cards thead {
        display: none;
    }

    .table-responsive-cards tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 4px;
        margin: 0.75rem;
    }

    .table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.875rem;
        border: 0;
        border-bottom: 1px solid var(--border-soft);
    }

    .table-responsive-cards tbody td:last-child {
        border-bottom: 0;
    }

    .table-responsive-cards tbody td.cell-stack {
        flex-direction: column;
        align-items: flex-start;
    }

    .macro-line {
        white-space: normal;
    }

    .table .macro-brace {
        display: none;
    }

    .table .macro-total {
        text-align: left;
    }

    .table-responsive-cards tbody td.card-align-end {
        justify-content: flex-end;
    }

    .table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 9.5px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--muted);
        flex-shrink: 0;
    }

    /* Подпись снимаем только у кнопок: у числовой колонки, выровненной вправо,
       без подписи не понять, что за число. */
    .table-responsive-cards tbody td.cell-actions::before {
        content: none;
    }

    /* В карточном режиме td — это flex-строка, а не ячейка таблицы:
       width: 1% из col-shrink сжал бы её до нитки. Ширины снимаем. */
    .table-responsive-cards tbody td.col-shrink,
    .table-responsive-cards tbody td.cell-actions {
        width: auto;
    }

    .table-responsive-cards tbody td.cell-actions {
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .table-responsive-cards tbody td[colspan] {
        display: block;
        text-align: center;
    }

    /* Строка-заметка не должна становиться отдельной карточкой: снимаем у
       записи нижнюю границу и отступ, а заметке — верхние, и они срастаются. */
    .table-responsive-cards tbody tr:has(+ .row-note) {
        margin-bottom: 0;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
    }

    .table-responsive-cards tbody tr.row-note {
        margin-top: 0;
        border-radius: 0 0 4px 4px;
    }

    .table-responsive-cards tbody tr.row-note > td[colspan] {
        text-align: left;
        padding-top: 0.625rem;
    }

    .table-responsive-cards tbody td[colspan]::before {
        content: none;
    }

    .page-actions {
        float: none;
        display: flex;
        margin-bottom: 0.75rem;
    }
}

.wk-head {
    margin-bottom: 1.25rem;
}

.wk-head-main {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.wk-title {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 1.625rem;
    margin: 0;
}

.wk-status {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--olive);
    background-color: var(--lime-subtle);
    padding: 0.2rem 0.45rem;
    border-radius: 3px;
}

.wk-head-sub {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.wk-dot {
    color: var(--border);
}

.wk-section {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 1.5rem 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
}

.done-name {
    font-weight: 600;
}

.done-sets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.done-group {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.done-weight {
    color: var(--muted);
}

.done-sep {
    color: var(--border);
}

.done-group .rpe {
    color: var(--muted);
    margin-left: 0.2rem;
}

a.done-name {
    color: inherit;
    text-decoration: underline dashed var(--border);
    text-underline-offset: 0.25em;
}

a.done-name:hover {
    color: var(--olive);
    text-decoration-color: var(--olive);
}

.progress-table tbody tr.is-focus > * {
    --bs-table-bg-state: var(--lime-subtle);
}

.progress-table tbody tr.is-focus > td:first-child {
    border-left: 3px solid var(--olive);
}

/* === Сетка сравнения с прошлым разом (экран тренировки) === */

.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ex-block {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.75rem 1rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ex-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
}

.ex-head .drag-handle { color: var(--muted); font-size: 1.1rem; align-self: center; }

.ex-name { color: var(--text); }

/* План живёт в заголовке, а не рядом сетки: так на упражнение уходит два ряда, а не три. */
.ex-plan,
.ex-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    white-space: nowrap;
}

.ex-plan strong { color: var(--text-2); font-weight: 500; }

.ex-plan .sep,
.ex-meta .sep { color: var(--border); }

/* Действия над планом держатся вместе у правого края заголовка. */
.ex-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cmp-scroll { overflow-x: auto; }

.cmp {
    display: grid;
    grid-template-columns: auto auto repeat(var(--cols), minmax(2.75rem, 4.5rem));
    justify-content: start;
    gap: 0.1rem 0.3rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    min-width: max-content;
}

.cmp-hdr {
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-align: center;
}

.cmp-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    padding-right: 0.35rem;
    white-space: nowrap;
}

.cmp-label.is-today { color: var(--text-2); }

/* Вес вынесен из ячеек: внутри упражнения он почти всегда один. */
.cmp-weight {
    font-size: 12px;
    color: var(--text-2);
    padding-right: 0.4rem;
    white-space: nowrap;
}

.cmp-weight .u { color: var(--muted); }

.cmp-cell {
    padding: 0.28rem 0.35rem;
    border: 0;
    border-radius: 3px;
    text-align: center;
    background-color: var(--border-soft);
    color: var(--text-2);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.cmp-cell .w { color: var(--muted); font-size: 11px; }

.cmp-cell.is-below { color: var(--down); background-color: var(--down-bg); }

/* Верх диапазона — не похвала, а сигнал добавлять вес. */
.cmp-cell.is-ceiling,
.cmp-cell.is-above { color: var(--up); background-color: var(--up-bg); }

.cmp-cell.is-none { background-color: transparent; color: #C6CCBD; }

button.cmp-cell { cursor: pointer; }

button.cmp-cell.is-today { background-color: #6C7566; color: #fff; }

button.cmp-cell.is-today .w { color: rgba(255, 255, 255, 0.7); }

button.cmp-cell.is-today.is-below { background-color: var(--down); color: #fff; }

button.cmp-cell.is-today.is-ceiling,
button.cmp-cell.is-today.is-above { background-color: var(--up); color: #fff; }

button.cmp-cell.is-empty {
    background-color: transparent;
    border: 1px dashed var(--border);
    color: #C6CCBD;
}

button.cmp-cell:hover { outline: 1px solid var(--olive); }

button.cmp-cell:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }

/* Отдых — интервал, поэтому он стоит между колонками, а не внутри одной. */
.cmp-rest {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--muted);
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.02rem 0.35rem;
    line-height: 1.5;
    white-space: nowrap;
}

.cmp-rest .bi { font-size: 9px; }

/* Интервал без замера — не бейдж: обводить пустоту нечем. */
.cmp-rest.is-none {
    color: #C6CCBD;
    background: none;
    border-color: transparent;
    font-size: 10.5px;
}

/* Сессии старше последней — фон читается как отступающий, чтобы свежая
   не терялась среди трёх одинаковых рядов. */
.cmp-label.is-older,
.cmp-weight.is-older { opacity: 0.65; }

.cmp-cell.is-older { opacity: 0.7; }

/* === Справка о тренировке лейблами === */
/* Была таблица 7×2 на первый экран: в моменте нужны две вещи — идёт ли
   тренировка и сколько прошло, остальное съедало рабочее место. */
.workout-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.75rem;
}

.fact {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background-color: var(--card-bg);
    white-space: nowrap;
}

.fact-key {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
}

.fact-val {
    font-family: var(--font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.fact-sub { color: var(--muted); }

.fact-note { white-space: normal; }

.fact-form { display: contents; }

.fact-toggle {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    cursor: pointer;
}

.fact-toggle:hover { color: var(--text-2); border-color: var(--muted); }

.fact-toggle.is-on {
    background-color: var(--chrome-bg);
    border-color: var(--chrome-bg);
    color: var(--lime);
}

.fact-toggle:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }

/* The season's week counter above the workout list. Quiet while the streak is short,
   a caution once a deload is due. */
.week-strip {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.55rem;
    font-size: 13px;
    color: var(--muted);
}

.week-strip-week {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    letter-spacing: 0.01em;
}

.week-strip--due {
    align-items: center;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--warn-line);
    border-left: 3px solid var(--warn);
    border-radius: 4px;
    background-color: var(--warn-bg);
    color: var(--warn);
}

.week-strip--due .week-strip-week {
    color: var(--warn);
}

.week-strip-call {
    font-weight: 600;
    color: var(--warn);
}

/* One dot per week of the season's deload cycle: filled for the weeks already trained
   straight, hollow for the ones still left. A streak past the cycle keeps adding dots
   after a gap, so how late the deload is can be seen rather than read. */
.deload-dots {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 0.28rem;
}

.deload-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--border);
}

.deload-dot--done {
    background-color: var(--text);
}

.deload-dot--over {
    margin-left: 0.35rem;
}

/* Only the first dot past the cycle opens the gap — the rest of the overrun has to
   read as one group, not as a scatter of single dots. */
.deload-dot--over + .deload-dot--over {
    margin-left: 0;
}

/* The whole strip already went amber, so hollow and filled read the same here. */
.week-strip--due .deload-dot {
    background-color: var(--warn);
}

/* Divider between the weeks of the season in the workout list: the number sits in
   the middle of a rule, so the eye reads the list as weeks rather than as cards. */
.week-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.25rem 0 0.85rem;
}

.week-divider::before,
.week-divider::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background-color: var(--border);
}

.week-divider-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    white-space: nowrap;
}

.week-divider--now::before,
.week-divider--now::after {
    background-color: var(--lime-subtle-line);
}

.week-divider--now .week-divider-label {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--lime-subtle-line);
    border-radius: 999px;
    background-color: var(--lime-subtle);
    color: var(--olive);
    font-weight: 500;
}

/* The mark keeps its own baseline next to the label rather than the row's. */
.week-divider .deload-mark {
    margin-left: 0;
}

/* The home page says nothing about deloads until one is due. */
.deload-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--warn-line);
    border-left: 3px solid var(--warn);
    border-radius: 4px;
    background-color: var(--warn-bg);
    color: var(--warn);
    font-size: 14px;
}

.deload-banner a {
    color: var(--warn);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid var(--warn-line);
}

.deload-banner a:hover {
    color: var(--warn);
    border-bottom-color: var(--warn);
}

.deload-mark {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background-color: var(--chrome-bg);
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    vertical-align: middle;
}

/* === Пошаговый режим идущей тренировки === */
/* В зале нужен один вопрос — «что делать в этом подходе», — поэтому пока
   тренировка идёт, на экране одно упражнение. */

.step-track {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.step-track .step {
    flex: 1 1 0;
    min-width: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    text-decoration: none;
}

.step-bar {
    height: 3px;
    border-radius: 2px;
    background-color: var(--border);
}

.step.is-done .step-bar { background-color: var(--olive); }
.step.is-active .step-bar { background-color: var(--lime); }

.step-name {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step.is-active .step-name { color: var(--text); }
.step.is-done .step-name { color: var(--olive); }
.step:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* Ввод подхода стоит прямо под сеткой: модалка на каждый подход — это три
   тапа и потеря из виду того, с чем сравниваешь. */
.entry {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
    padding: 0.8rem 0.9rem;
    background-color: var(--border-soft);
    border-radius: 4px;
    max-width: 46rem;
}

.entry-field { display: flex; flex-direction: column; gap: 0.25rem; }

.entry-field label,
.entry-rpe-label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
}

.entry-field input {
    width: 5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background-color: var(--card-bg);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.entry-field input:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }

.entry-rpe { display: flex; flex-direction: column; gap: 0.25rem; }

.entry-rpe-row { display: flex; gap: 0.2rem; }

.rpe-btn {
    position: relative;
    min-width: 2.1rem;
    padding: 0.45rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background-color: var(--card-bg);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    cursor: pointer;
}

.rpe-btn input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.rpe-btn:hover { border-color: var(--olive); color: var(--text-2); }

.rpe-btn:has(input:checked) {
    background-color: var(--olive);
    border-color: var(--olive);
    color: #fff;
}

.rpe-btn:has(input:focus-visible) { outline: 2px solid var(--olive); outline-offset: 1px; }

/* Подсказка уходит под поля: иначе она вытесняет кнопку записи на вторую
   строку, и та оказывается посреди пустоты. */
.entry-hint {
    order: 10;
    flex-basis: 100%;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
}

.btn-record {
    margin-left: auto;
    padding: 0.55rem 1.1rem;
    border: 0;
    border-radius: 3px;
    background-color: var(--lime);
    color: var(--chrome-bg);
    font-weight: 500;
    cursor: pointer;
}

.btn-record:hover { background-color: var(--lime-hover); }
.btn-record:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

.step-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.step-left {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    margin-left: auto;
}

.step-left.is-warn { color: #A8724A; }

@media (max-width: 575.98px) {
    .btn-record { margin-left: 0; width: 100%; }
}

.cmp-cell .rpe { font-size: 10px; opacity: 0.75; margin-left: 0.15rem; }

/* === Заметки ===
   Читальня: содержание держит внимание, навигация и метаданные говорят тише.
   Лайм здесь почти не появляется — он занят рекордами и «сейчас», — поэтому
   выбранная ветка и фокус заголовка берут его одной линией, а не заливкой. */

.note-layout {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .note-layout {
        grid-template-columns: minmax(15rem, 22rem) 1fr;
        align-items: start;
    }
}

/* Страница заметки занимает ровно окно: страница не прокручивается, длинный
   текст скроллится внутри редактора. 3.5rem — вертикальные поля .main-content. */
@media (min-width: 768px) {
    .note-layout--editor {
        height: calc(100vh - var(--topbar-height) - 3.5rem);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
    }

    .note-layout--editor > :first-child {
        min-height: 0;
    }

    .note-layout--editor .note-aside {
        position: static;
        max-height: 100%;
    }

    .note-layout--editor .note-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
    }

    .note-layout--editor .note-card {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0 !important;
    }

    .note-layout--editor .note-card > .card-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .note-layout--editor .note-body.ql-container {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .note-layout--editor .note-body .ql-editor {
        min-height: 0;
        height: 100%;
        overflow-y: auto;
    }
}

/* --- Шапка страницы заметки --- */

.note-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
}

.note-crumb {
    color: var(--muted);
    text-decoration: none;
}

.note-crumb:hover {
    color: inherit;
}

.note-crumb-sep {
    color: var(--muted);
    margin: 0 -0.5rem;
}

.note-row-path {
    gap: 0.25rem;
}

.note-row-ancestor {
    color: var(--muted);
    text-decoration: none;
}

.note-row-ancestor:hover {
    color: inherit;
    text-decoration: underline;
}

.note-row-sep {
    color: var(--muted);
}

.note-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.note-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Глобальный .page-content h1 — Oswald в верхнем регистре; заголовок заметки
   пользователь набирает сам, и капс в поле ввода читается как крик.
   Селектор с .page-content: одного класса мало, .page-content h1 весит больше
   и правило молча не применялось. */
.page-content h1.note-title {
    font-size: 1.75rem;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
    outline: none;
    border-bottom: 2px solid transparent;
}

.page-content h1.note-title:focus {
    border-bottom-color: var(--lime);
}

.page-content h1.note-title:empty::before {
    content: 'Заголовок';
    color: var(--muted);
}

.note-status {
    min-height: 1.25rem;
    font-variant-numeric: tabular-nums;
}

/* --- Текст заметки --- */

.note-body.ql-container {
    font-family: inherit;
    font-size: inherit;
    border: 0;
}

/* Предела ширины у листа нет намеренно: он оставлял пустую полосу справа, при
   том что выбор категорий и теги под ним идут во всю колонку. Мера строки —
   вещь хорошая, но она должна ограничивать всю колонку целиком, иначе читается
   как дыра в вёрстке. */
.note-body .ql-editor {
    min-height: max(24rem, calc(100vh - 19rem));
    padding: 1.25rem 1.25rem 2rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-2);
}

.note-body .ql-editor h2,
.note-body .ql-editor h3,
.note-revision-body .ql-editor h2,
.note-revision-body .ql-editor h3 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: none;
    color: var(--text);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.note-body .ql-editor h2 { font-size: 1.3125rem; }
.note-body .ql-editor h3 { font-size: 1.125rem; }

.note-body .ql-editor blockquote,
.note-revision-body .ql-editor blockquote {
    border-left: 3px solid var(--olive);
    padding-left: 0.875rem;
    margin-left: 0;
    color: var(--text-2);
}

.note-body .ql-editor pre,
.note-body .ql-editor code,
.note-body .ql-editor .ql-code-block-container,
.note-revision-body .ql-editor .ql-code-block-container {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    background-color: var(--border-soft);
    border-radius: 0.375rem;
}

.note-body .ql-editor code {
    padding: 0.0625rem 0.25rem;
}

.note-body .ql-editor .ql-code-block-container,
.note-revision-body .ql-editor .ql-code-block-container {
    padding: 0.75rem 0.875rem;
}

.note-body .ql-editor a {
    color: var(--olive-dark);
    text-decoration-color: var(--lime-subtle-line);
    text-underline-offset: 0.15em;
}

/* --- Строка списка --- */

.note-list {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 1.125rem;
}

.note-list .pagination {
    margin: 0.875rem 0;
}

.note-row {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.note-row:last-of-type {
    border-bottom: 0;
}

.note-row-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text);
    text-decoration: none;
}

.note-row-title:hover {
    color: var(--olive-dark);
}

/* Заметка узнаётся по тексту, поэтому превью — вторая строка, а не дата. */
.note-row-excerpt {
    margin: 0.25rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Подвал строки: дата, категории, теги и действия в одном ряду, группы
   разделены вертикальной чертой. Черта рисуется у каждой группы, кроме первой,
   поэтому пустые группы шаблон не выводит вовсе — иначе разделитель повис бы
   в воздухе. */
.note-row-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.note-row-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.note-row-group + .note-row-group::before {
    content: '';
    width: 1px;
    height: 0.875rem;
    margin-right: 0.375rem;
    background-color: var(--border);
}

/* Иконка — не линия: токен --border на белом не читается, для значка нужен
   цвет текста. */
.note-row-group > i {
    color: var(--muted);
    font-size: 0.875rem;
}

.note-row-group time {
    font-variant-numeric: tabular-nums;
}

.note-row-actions {
    display: inline-flex;
    gap: 0.375rem;
    margin-left: auto;
}

/* --- Фильтры --- */

.note-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.note-filters-search {
    position: relative;
    flex: 1 1 14rem;
}

.note-filters-search i {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.note-filters-search .form-control {
    padding-left: 2rem;
}

/* --- Дерево (как страницы пространства в Confluence) --- */

.note-tree,
.note-tree ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Вложенность — один сдвиг без направляющих: глубину читают по стрелкам. */
.note-tree ul {
    padding-left: 0.875rem;
}

.note-tree-row {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    border-radius: 0.25rem;
}

.note-tree-row:hover {
    background-color: var(--border-soft);
}

.note-tree-row:has(.note-tree-link.active) {
    background-color: var(--lime-subtle);
    box-shadow: inset 2px 0 0 var(--lime);
}

.note-tree-link {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 0.3125rem;
    min-width: 0;
    padding: 0.25rem 0.25rem 0.25rem 0;
    color: var(--text-2);
    font-size: 0.9375rem;
    text-decoration: none;
}

.note-tree-link:hover,
.note-tree-link.active {
    color: var(--text);
}

.note-tree-link.active {
    font-weight: 600;
}

.note-tree-icon {
    flex: 0 0 auto;
    margin-top: 0.0625rem;
    color: var(--muted);
}

.note-tree-link.active .note-tree-icon {
    color: var(--olive-dark);
}

/* Заголовок переносится, а не обрезается: в навигаторе он главный. */
.note-tree-name {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.note-tree-leaf,
.note-tree-toggle {
    flex: 0 0 auto;
    width: 1rem;
}

.note-tree-toggle {
    padding: 0.3125rem 0 0;
    border: 0;
    background: none;
    color: var(--muted);
    line-height: 1;
    text-align: center;
}

.note-tree-toggle:hover {
    color: var(--text);
}

.note-tree-toggle i {
    display: inline-block;
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.note-tree-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

/* --- Перетаскивание --- */

.note-tree-row[draggable="true"] {
    cursor: grab;
}

.note-tree-row.is-dragged {
    opacity: 0.45;
}

.note-tree-row.is-drop-target {
    background-color: var(--lime-subtle);
    box-shadow: inset 0 0 0 2px var(--lime);
}

/* Зона «в корень» видна только пока страницу несут: в покое она занимала бы место. */
.note-tree-root-drop {
    display: none;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    border: 1px dashed var(--border);
    border-radius: 0.25rem;
    color: var(--muted);
    font-size: 0.875rem;
    text-align: center;
}

.note-sidebar.is-dragging .note-tree-root-drop {
    display: block;
}

.note-tree-root-drop.is-drop-target {
    border-color: var(--lime);
    background-color: var(--lime-subtle);
    color: var(--text);
}

.note-tree-status {
    padding: 0 0.25rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.note-tree-status:empty {
    display: none;
}

/* «+» появляется при наведении, как в Confluence; на тач-экране, где
   наведения нет, остаётся видимым. */
.note-tree-add {
    flex: 0 0 auto;
    margin: 0;
    opacity: 0;
}

.note-tree-add button {
    padding: 0.25rem 0.375rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: var(--muted);
    line-height: 1.3;
}

.note-tree-add button:hover {
    background-color: var(--border);
    color: var(--text);
}

.note-tree-row:hover .note-tree-add,
.note-tree-row:focus-within .note-tree-add {
    opacity: 1;
}

@media (hover: none) {
    .note-tree-add {
        opacity: 1;
    }
}

/* offcanvas-body — flex: без растягивания карточка сжимается до ширины текста. */
.note-sidebar {
    flex: 1 1 auto;
    width: 100%;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.375rem 0.25rem 0.375rem 0.375rem;
}

.note-sidebar-tools {
    display: inline-flex;
    gap: 0.125rem;
}

.note-sidebar-tool {
    border: 0;
    background: none;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    color: var(--muted);
    line-height: 1;
}

.note-sidebar-tool:hover {
    background-color: var(--border-soft);
    color: var(--text);
}

/* На десктопе навигатор остаётся на виду при прокрутке длинной заметки и
   сам скроллится, если дерево выше окна. */
@media (min-width: 768px) {
    .note-layout .note-aside {
        position: sticky;
        top: calc(var(--topbar-height) + 1rem);
        max-height: calc(100vh - var(--topbar-height) - 2rem);
        overflow-y: auto;
    }
}

.note-sidebar strong {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* --- Пустые состояния --- */

.note-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--muted);
}

.note-empty--aside {
    padding: 1.25rem 0.5rem;
}

.note-empty i {
    font-size: 1.5rem;
    color: var(--muted);
    opacity: 0.7;
}

.note-empty-text {
    margin: 0;
    font-size: 0.9375rem;
    max-width: 24rem;
}

/* --- История --- */

/* Длинная заметка иначе растягивает страницу истории на экраны. */
.note-revision-body {
    position: relative;
    max-height: 9rem;
    overflow: hidden;
}

.note-revision-body::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2.5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card-bg));
}

.note-revision-body .ql-editor {
    min-height: 0;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* Шрифты и размеры описаны у нас, а не только в CSS Quill: тот действует
   лишь внутри .ql-editor, и тело заметки, выведенное где-то ещё, теряло бы их. */
.ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.ql-font-monospace { font-family: var(--font-mono); }

.ql-size-small { font-size: 0.8125em; }
.ql-size-large { font-size: 1.25em; }
.ql-size-huge { font-size: 1.5em; }

.ql-color-black { color: #0c0e0b; }
.ql-color-grey { color: #6c757d; }
.ql-color-red { color: #b0413e; }
.ql-color-orange { color: #b45f06; }
.ql-color-green { color: #5c7a18; }
.ql-color-blue { color: #2563c7; }
.ql-color-purple { color: #a83b7e; }

.ql-bg-yellow { background-color: #fff3bf; }
.ql-bg-green { background-color: #d8f3c4; }
.ql-bg-blue { background-color: #d0e4ff; }
.ql-bg-pink { background-color: #ffd9e8; }
.ql-bg-orange { background-color: #ffe0c2; }
.ql-bg-grey { background-color: #e9ecef; }

.ql-spoiler {
    margin: 0.5rem 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background-color: var(--border-soft);
}

.ql-spoiler-title {
    position: relative;
    padding-left: 1.5rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.ql-editor[contenteditable="true"] .ql-spoiler-title {
    cursor: text;
}

.ql-spoiler-title::before {
    content: "\F285";
    position: absolute;
    left: 0.125rem;
    top: 0;
    font-family: "bootstrap-icons";
    font-weight: normal;
    color: var(--olive);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.ql-spoiler.is-open > .ql-spoiler-title::before {
    transform: rotate(90deg);
}

.ql-editor[contenteditable="true"] .ql-spoiler-title:has(> br:only-child)::after {
    content: "Заголовок спойлера";
    position: absolute;
    left: 1.5rem;
    top: 0;
    color: var(--muted);
    font-weight: normal;
    pointer-events: none;
}

.ql-spoiler-body {
    padding-left: 1.5rem;
}

.ql-spoiler:not(.is-open) > .ql-spoiler-title ~ .ql-spoiler-body {
    display: none;
}

/* === Профиль === */

.account-key {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-value {
    font-size: 1rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.account-note {
    background-color: var(--warn-bg);
    border: 1px solid var(--warn-line);
    border-radius: 4px;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--warn);
}

.account-note strong {
    display: block;
    margin-bottom: 0.375rem;
}

.visitor-id {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--muted);
}

.fp-flag {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--border-soft);
    color: var(--text-2);
    font-size: 0.75rem;
    white-space: nowrap;
}

.fp-flag--warn {
    border-color: var(--warn-line);
    background-color: var(--warn-bg);
    color: var(--warn);
}

.fp-toggle {
    color: var(--muted);
}

.fp-toggle i {
    display: inline-block;
    transition: transform 0.15s ease;
}

.fp-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.fp-detail-row td {
    border-top: 0;
}

/* На узком экране каждая строка таблицы превращается в карточку с рамкой;
   строка-деталь — продолжение предыдущей карточки, а не отдельная, иначе под
   каждым входом рисуется пустая коробка. */
@media (max-width: 767.98px) {
    .table-responsive-cards tbody tr.fp-detail-row {
        border: 0;
        margin: -0.75rem 0.75rem 0.75rem;
        padding: 0;
    }

    .table-responsive-cards tbody tr.fp-detail-row td::before {
        content: none;
    }
}

.fp-detail {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.75rem 1rem 1rem;
    background-color: var(--border-soft);
    font-size: 0.875rem;
}

.fp-detail dt {
    color: var(--muted);
    font-weight: 400;
}

.fp-detail dd {
    margin: 0;
    color: var(--text-2);
}

/* Шкала риска сессии. Лайм занят рекордами, поэтому полоса берёт статусные
   цвета: до 30 спокойно, до 60 настороженно, выше — тревога. */
.fp-risk {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.fp-risk-track {
    display: inline-block;
    width: 3.5rem;
    height: 0.375rem;
    border-radius: 999px;
    background-color: var(--border);
    overflow: hidden;
}

.fp-risk-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: currentColor;
}

.fp-risk-value {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.fp-risk--low { color: var(--up); }
.fp-risk--mid { color: var(--warn); }
.fp-risk--high { color: var(--down); }

/* Картинка внутри заметки: миниатюра в потоке текста, полный размер в модалке. */
.note-body .ql-note-image,
.note-revision-body .note-image {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    cursor: zoom-in;
}

.note-body .ql-note-image img,
.note-revision-body .note-image img {
    max-width: 18rem;
    max-height: 12rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    object-fit: cover;
}

.note-image-missing {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--muted);
    font-size: 0.8125rem;
}

.note-image-full {
    max-width: 100%;
    max-height: 80vh;
}

/* Картинка с подписью или выравниванием выходит из строки текста в свой блок. */
.note-figure {
    margin: 1rem 0;
}

.note-figure--center {
    text-align: center;
}

.note-figure--right {
    text-align: right;
}

.note-figure figcaption {
    margin-top: 0.375rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.note-body .ql-note-image.note-figure--center,
.note-body .ql-note-image.note-figure--right {
    display: block;
}

.note-body .ql-note-image.note-figure--center {
    text-align: center;
}

.note-body .ql-note-image.note-figure--right {
    text-align: right;
}

/* Заданный размер важнее общего предела миниатюры. */
.note-body .ql-note-image img[width],
.note-revision-body .note-image img[width],
.note-figure img[width] {
    max-width: 100%;
    max-height: none;
    object-fit: contain;
}


.issue-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.issue-tab {
    padding: 0.5rem 0.875rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.issue-tab:hover {
    color: var(--text);
}

.issue-tab.active {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--olive);
}

.issue-status {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--border-soft);
    color: var(--text-2);
    border: 1px solid var(--border);
}

.issue-status--in_progress {
    background: #E3ECFA;
    color: #1F4F9E;
    border-color: #C3D5F2;
}

.issue-status--done {
    background: var(--up-bg);
    color: var(--up);
    border-color: #BEDCC7;
}

.issue-key {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--muted);
    white-space: nowrap;
}

.issue-layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .issue-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.issue-saved-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.issue-saved-list li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.75rem;
}

.issue-saved-list a {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    color: var(--text-2);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-saved-list a:hover {
    background: var(--border-soft);
}

.issue-saved-list a.active {
    background: var(--lime-subtle);
    color: var(--text);
    font-weight: 600;
}

.issue-saved-forms {
    display: grid;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
}

.issue-saved-new {
    display: grid;
    gap: 0.375rem;
}

.issue-filters .card-body {
    display: grid;
    gap: 0.75rem;
}

.issue-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.issue-filters-search,
.board-quick .issue-filters-search {
    position: relative;
    flex: 2 1 16rem;
}

.issue-filters-search i {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.issue-filters-search .form-control {
    padding-left: 2rem;
}

.issue-filters-select {
    flex: 1 1 11rem;
}

.issue-filters-resolution {
    flex: 0 1 10rem;
}

.issue-filters-more summary {
    color: var(--muted);
    font-size: 0.875rem;
    cursor: pointer;
}

.issue-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.issue-filters-grid label,
.issue-filters-range legend {
    font-size: 0.8125rem;
    color: var(--muted);
}

.issue-filters-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.375rem;
}

.issue-filters-range legend {
    grid-column: 1 / -1;
    float: none;
    margin: 0;
}

.issue-filters-actions {
    display: flex;
    gap: 0.5rem;
}

.issue-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.issue-sort.active {
    color: var(--text);
}

.issue-back {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.issue-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .issue-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

.issue-detail-main {
    display: grid;
    gap: 1.25rem;
}

.issue-detail-main .card {
    margin-bottom: 0;
}

.issue-transitions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.issue-description {
    white-space: normal;
    overflow-wrap: anywhere;
}

.issue-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.issue-history li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-soft);
}

.issue-history li:first-child {
    border-top: 0;
}

.issue-history time {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--muted);
}

.issue-history-author {
    font-weight: 600;
}

.issue-dates {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.issue-dates dt {
    font-weight: 500;
    color: var(--muted);
}

.issue-dates dd {
    margin: 0;
}

.issue-workflow-initial {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.issue-workflow-initial .form-text {
    flex-basis: 100%;
}

.issue-workflow-matrix th,
.issue-workflow-matrix td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.issue-workflow-matrix tbody th {
    text-align: left;
}

.issue-workflow-self {
    background: var(--border-soft);
}

.issue-workflow-cell {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--up);
    font-size: 0.8125rem;
}

.issue-workflow-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0 1rem;
}

.board-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    max-width: 32rem;
    margin-bottom: 1rem;
}

.board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 1fr);
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: start;
}

.board-column {
    display: flex;
    flex-direction: column;
    min-height: 12rem;
    background: var(--border-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.board-column--allowed {
    background: var(--lime-subtle);
    border-color: var(--lime-subtle-line);
}

.board-column--blocked {
    opacity: 0.5;
}

.board-column-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.board-column-count {
    font-family: var(--font-mono);
}

.board-column-cards {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    flex: 1 1 auto;
    padding: 0 0.5rem 0.5rem;
    min-height: 4rem;
}

.board-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(21, 24, 15, 0.06);
    cursor: grab;
}

.board-card-title {
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.board-card-title:hover {
    text-decoration: underline;
}

.board-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.board-card--ghost {
    opacity: 0.4;
}

.board-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    max-width: 24rem;
    padding: 0.75rem 1rem;
    background: var(--chrome-bg);
    color: var(--chrome-text-strong);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1080;
}

.board-config {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.board-config-column {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--border-soft);
}

.board-config-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.board-config-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.board-config-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.board-config-unmapped {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    color: var(--warn);
    background: var(--warn-bg);
    border-top: 1px solid var(--warn-line);
}



.issue-priority {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    color: var(--muted);
}

.issue-priority i {
    font-size: 0.875rem;
}

.issue-priority--highest i { color: #B23A30; }
.issue-priority--high i { color: #D9622B; }
.issue-priority--medium i { color: #B48A06; }
.issue-priority--low i { color: #2563C7; }
.issue-priority--lowest i { color: #5A86D6; }

.board-card-info {
    font-size: 0.75rem;
    color: var(--muted);
}

.board-card-info time {
    font-family: var(--font-mono);
    white-space: nowrap;
}


.issue-editor-frame {
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--card-bg);
}

.issue-editor.ql-container {
    font-family: inherit;
    font-size: inherit;
    border: 0;
}

.issue-editor .ql-editor {
    min-height: 14rem;
    padding: 0.875rem 1rem 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-2);
}

.issue-editor .ql-editor.ql-blank::before {
    left: 1rem;
    color: var(--muted);
}

.ts-icon-option {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ts-icon-option i {
    font-size: 0.875rem;
}


.wf-canvas {
    overflow-x: auto;
    padding: 1rem;
}

.wf-diagram {
    display: block;
    max-width: none;
    font-family: var(--font-body);
}

.wf-edge {
    fill: none;
    stroke: #8A9180;
    stroke-width: 1.5;
}

.wf-edge--back {
    stroke-dasharray: 5 4;
}

.wf-edge--global {
    stroke: var(--olive);
}

.wf-arrow-head {
    fill: #8A9180;
}

.wf-label {
    font-size: 12px;
    fill: var(--text-2);
    paint-order: stroke;
    stroke: var(--card-bg);
    stroke-width: 5px;
    stroke-linejoin: round;
}

.wf-node rect {
    fill: var(--border-soft);
    stroke: #C9CFBE;
    stroke-width: 1;
}

.wf-node text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    fill: var(--text-2);
}

.wf-node--in_progress rect {
    fill: #E3ECFA;
    stroke: #A9C1EC;
}

.wf-node--in_progress text {
    fill: #1F4F9E;
}

.wf-node--done rect {
    fill: var(--up-bg);
    stroke: #A9D1B4;
}

.wf-node--done text {
    fill: var(--up);
}

.wf-pill rect {
    fill: var(--lime-subtle);
    stroke: var(--lime-subtle-line);
}

.wf-pill text {
    font-size: 11px;
    font-weight: 600;
    fill: var(--olive-dark);
}

.wf-start {
    fill: var(--text-2);
}

.wf-matrix {
    border-top: 1px solid var(--border);
}

.wf-matrix summary {
    padding: 0.625rem 1rem;
    color: var(--muted);
    font-size: 0.875rem;
    cursor: pointer;
}