/* ============================================================
   Liquid Glass - оформление в духе Apple (iOS/macOS 26). Слой поверх pvz-style.css:
   переопределяет токены и «хром» (шапка, нижняя панель, меню, окна, уведомления, кнопки,
   переключатели). Откат - убрать <link> на этот файл (и на icons.css) в _Layout.cshtml.

   Правило материалов, как у Apple: стекло - это слой управления (навигация, меню, окна,
   всплывающие панели), содержимое - сплошное. Размытие (backdrop-filter) включено только у
   того, что плавает над содержимым, - под карточками лежит ровный градиент, размывать там
   нечего, а размытие десятков карточек при прокрутке стоило бы кадров. Карточки получают
   полупрозрачную заливку и блик по верхнему краю - на вид то же стекло, но без размытия.
   Плотные таблицы (табель, претензии) остаются на сплошном белом: закреплённые колонки
   обязаны быть непрозрачными.
   ============================================================ */

:root {
    /* Системная палитра Apple: фон страницы systemGroupedBackground, цвета состояний -
       systemBlue/Green/Orange/Red, текстовые оттенки затемнены до контраста ≥ 4.5 на белом. */
    --ink: #1D1D1F;
    --ink-soft: #48484A;
    /* secondaryLabel Apple на белом - 5.9, на серой подложке полей и сегментов - от 4.9 */
    --muted: #636366;
    --paper: #F2F2F7;
    --surface: #FFFFFF;
    --line: #E3E3E8;

    --accent: #0071E3;
    --accent-ink: #0062CC;
    --accent-soft: #E6F0FF;
    /* Заливка под белым текстом (кнопки, итоговые строки): #0071E3 держит 4.7 контраста с белым,
       systemBlue #007AFF/#0A84FF - только 4.0/3.7 */
    --accent-fill: #0071E3;

    --amber: #FF9500;
    --amber-soft: #FFF3E0;
    --amber-ink: #945000;
    --green: #34C759;
    --green-soft: #E6F7EA;
    --green-ink: #1B7033;
    --red: #FF3B30;
    --red-soft: #FFECEA;
    --red-ink: #C0211A;
    --slate-soft: #EEEEF1;
    --slate-ink: #48484A;
    --violet-soft: #F4EAFB;
    --violet-ink: #7A2EA8;

    --scroll-thumb: rgba(60, 60, 67, .28);
    --scroll-thumb-hover: rgba(60, 60, 67, .45);

    /* Скругления крупнее, как у Apple: карточки 18, окна 26, мелочь 8-12 */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;

    /* Тени мягкие и широкие - материал «парит», а не лежит с тёмным контуром */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(20, 30, 60, .05);
    --shadow-md: 0 10px 30px rgba(20, 30, 60, .10), 0 2px 6px rgba(20, 30, 60, .05);
    --shadow-lg: 0 24px 60px rgba(20, 30, 60, .18), 0 6px 16px rgba(20, 30, 60, .08);

    --ease: cubic-bezier(.23, 1, .32, 1);

    /* Системный шрифт: на iPhone и Mac - San Francisco, на Windows - Inter (лежит локально) */
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;

    /* Стекло */
    --glass-bg: rgba(255, 255, 255, .64);
    --glass-bg-strong: rgba(250, 250, 252, .86);
    --glass-card: rgba(255, 255, 255, .74);
    --glass-border: rgba(255, 255, 255, .80);
    --glass-hairline: rgba(0, 0, 0, .06);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35);
    --glass-blur: blur(28px) saturate(180%);
    --glass-shadow: 0 10px 36px rgba(20, 30, 60, .10), 0 1px 3px rgba(20, 30, 60, .06);
    --glass-pill: rgba(255, 255, 255, .95);
    --glass-pill-shadow: 0 2px 10px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04);
    --fill-tertiary: rgba(118, 118, 128, .12);   /* подложка сегментов и полей, как tertiarySystemFill */
    --fill-hover: rgba(120, 120, 128, .10);

    --bd-1: rgba(0, 122, 255, .22);
    --bd-2: rgba(175, 82, 222, .16);
    --bd-3: rgba(52, 199, 89, .13);
    --bd-4: rgba(255, 149, 0, .10);
}

[data-bs-theme="dark"] {
    --ink: #F5F5F7;
    --ink-soft: #D1D1D6;
    --muted: #98989D;
    --paper: #0A0A0C;
    --surface: #1C1C1E;
    --line: #38383A;

    --accent: #0A84FF;
    --accent-ink: #4BA3FF;
    --accent-soft: #0B2A4E;

    --amber-soft: #33240D;
    --amber-ink: #FFB340;
    --green-soft: #0F2E19;
    --green-ink: #4CD97B;
    --red-soft: #3A1614;
    --red-ink: #FF7A70;
    --slate-soft: #2C2C2E;
    --slate-ink: #D1D1D6;
    --violet-soft: #2E1A3D;
    --violet-ink: #D49BFF;

    --scroll-thumb: rgba(235, 235, 245, .22);
    --scroll-thumb-hover: rgba(235, 235, 245, .38);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);

    --glass-bg: rgba(48, 48, 56, .52);
    --glass-bg-strong: rgba(40, 40, 46, .86);
    --glass-card: rgba(38, 38, 44, .62);
    --glass-border: rgba(255, 255, 255, .10);
    --glass-hairline: rgba(255, 255, 255, .08);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .04);
    --glass-shadow: 0 10px 36px rgba(0, 0, 0, .45);
    --glass-pill: rgba(255, 255, 255, .16);
    --glass-pill-shadow: none;
    --fill-tertiary: rgba(118, 118, 128, .24);
    --fill-hover: rgba(255, 255, 255, .07);

    --bd-1: rgba(10, 132, 255, .34);
    --bd-2: rgba(191, 90, 242, .26);
    --bd-3: rgba(48, 209, 88, .14);
    --bd-4: rgba(255, 159, 10, .10);
}

/* ---------- Фон: мягкие цветные пятна - стеклу нужно, что преломлять ----------
   Отдельный неподвижный слой со своим композитным слоем: страница прокручивается над ним,
   и браузер ничего не перерисовывает (background-attachment: fixed перерисовывал бы). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60vw 50vw at 0% -10%, var(--bd-1), transparent 62%),
        radial-gradient(55vw 45vw at 100% 0%, var(--bd-2), transparent 60%),
        radial-gradient(60vw 50vw at 70% 110%, var(--bd-3), transparent 60%),
        radial-gradient(40vw 40vw at 0% 100%, var(--bd-4), transparent 60%);
    will-change: transform;
}

body { letter-spacing: -.003em; }
h1, h2, h3, h4, .font-display { letter-spacing: -.02em; }
h1, .h1 { letter-spacing: -.03em; }

/* ============================================================
   Шапка - плавающая стеклянная капсула, содержимое уходит под неё
   ============================================================ */
.hd {
    position: sticky;
    top: 10px;
    height: 56px;
    margin: 10px 16px 18px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: transparent;
    box-shadow: var(--glass-edge), var(--glass-shadow);
}
/* Стекло шапки - на отдельном слое: элемент с backdrop-filter становится «корнем фона» для
   вложенных, и меню шапки размывали бы только саму шапку, а не страницу под собой. */
.hd::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.hd-brand__mark {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(160deg, #3AA0FF, #0066FF);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 102, 255, .3);
}
.hd-brand__word { font-family: var(--font-display); font-size: 15px; letter-spacing: -.02em; }

.hd-link { padding: 0 13px; font-size: 13.5px; }
.hd-link::before { inset: 9px 2px; border-radius: 999px; background: var(--fill-hover); }
.hd-link .bi { font-size: 17px; color: var(--ink-soft); }
.hd-link.is-current { color: var(--ink); }
.hd-link.is-current .bi { color: var(--accent); }
/* Выбранный раздел - светлая «линза» вместо полосы снизу */
.hd-link.is-current::after { display: none; }
.hd-link.is-current::before { opacity: 1; background: var(--glass-pill); box-shadow: var(--glass-pill-shadow); }
.hd-link.is-current:focus-visible::before { box-shadow: 0 0 0 2px var(--accent); }

.hd-search { color: var(--ink-soft); height: 34px; border-radius: 999px; background: var(--fill-tertiary); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
    .hd-search:hover { background: var(--fill-hover); border-color: transparent; }
    .hd-ib:hover { background: var(--fill-hover); }
}
.hd-search kbd { background: transparent; border-color: var(--glass-hairline); color: var(--ink-soft); }
.hd-ib { width: 36px; height: 36px; border-radius: 999px; font-size: 17px; }
.hd-ib[aria-expanded="true"] { background: var(--fill-tertiary); }
.hd-tenant { height: 30px; background: var(--fill-tertiary); border-color: transparent; }
.hd-divider { background: var(--glass-hairline); }
.hd-avatar { width: 34px; height: 34px; background: linear-gradient(160deg, #7C7C80, #545458); color: #fff; }
.notification-bell__badge { box-shadow: none; }

/* Меню шапки и все выпадающие списки - стекло потолще */
.dropdown-menu {
    --bs-dropdown-bg: var(--glass-bg-strong);
    --bs-dropdown-border-color: var(--glass-border);
    --bs-dropdown-border-radius: 16px;
    --bs-dropdown-link-hover-bg: var(--fill-hover);
    --bs-dropdown-link-active-bg: var(--accent);
    padding: 6px;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--shadow-lg);
}
.dropdown-item { border-radius: 10px; }
.hd .dropdown-menu { background: var(--glass-bg-strong); border-color: var(--glass-border); border-radius: 18px; box-shadow: var(--glass-edge), var(--shadow-lg); }
.hd .dropdown-item { border-radius: 10px; }
.hd .dropdown-item:hover, .hd .dropdown-item:focus { background: var(--fill-hover); }
.hd .dropdown-item.active, .hd .dropdown-item:active { background: var(--accent); color: #fff; }
.hd .dropdown-item.active .bi, .hd .dropdown-item:active .bi { color: #fff; }
.hd-menu-head, .hd .dropdown-divider, .notification-panel__head, .notification-panel__foot { border-color: var(--glass-hairline); }
.density-seg { background: var(--fill-tertiary); border: 0; border-radius: 999px; }
.density-seg button { border-radius: 999px; }
.density-seg button[aria-checked="true"] { background: var(--glass-pill); box-shadow: var(--glass-pill-shadow); }

/* ============================================================
   Телефон: нижняя панель - плавающая капсула, как таб-бар iOS 26
   ============================================================ */
@media (max-width: 899.98px) {
    .hd { margin: 8px 10px 14px; top: 8px; height: 52px; }

    body.has-bottom-nav { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    body.has-bottom-nav .bottom-nav {
        inset: auto 12px max(10px, env(safe-area-inset-bottom)) 12px;
        padding: 5px;
        border: 1px solid var(--glass-border);
        border-radius: 999px;
        background: var(--glass-bg);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: var(--glass-edge), var(--glass-shadow);
    }
}
.bottom-nav__tab { border-radius: 999px; padding: 6px 2px 5px; color: var(--ink-soft); font-size: .63rem; transition: background-color .2s var(--ease), color .2s var(--ease); }
.bottom-nav__tab i { font-size: 1.3rem; }
.bottom-nav__tab.is-current { color: var(--accent); background: var(--glass-pill); box-shadow: var(--glass-pill-shadow); }
.bottom-nav__tab:active { transform: scale(.94); transition: transform .1s var(--ease); }

.more-sheet__backdrop { background: rgba(0, 0, 0, .25); }
.more-sheet__panel {
    left: 8px; right: 8px; bottom: 8px;
    border-radius: 32px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--shadow-lg);
}
.more-sheet__handle { background: var(--fill-tertiary); width: 40px; height: 5px; border-radius: 3px; }
.more-sheet__user, .more-sheet__row { border-color: var(--glass-hairline); }
.more-sheet__heading { text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; }
.more-sheet__item { padding: 11px 10px; border-radius: 12px; }
.more-sheet__item:active { background: var(--fill-hover); }

/* ============================================================
   Карточки и панели содержимого: полупрозрачная заливка + блик по верхнему краю
   ============================================================ */
.card-modern, .hm-card, .filterbar, .module-card, .mobile-list-card, .card:not(.card-modern) {
    background: var(--glass-card);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-edge), var(--shadow-sm);
}
.card-modern, .hm-card { border-radius: var(--radius-md); }
@media (hover: hover) { .card-modern:hover { box-shadow: var(--glass-edge), var(--shadow-md); } }
.card-modern .card-header, .card > .card-header { background: transparent; border-bottom-color: var(--glass-hairline); }
.card > .card-footer { background: transparent; border-top-color: var(--glass-hairline); }
.hm-bars__avg span { background: transparent; }

/* ============================================================
   Кнопки: капсулы; основная - «таблетка» с бликом, остальные - матовые
   ============================================================ */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -.005em;
}
.btn-primary {
    --bs-btn-bg: var(--accent-fill);
    --bs-btn-border-color: transparent;
    --bs-btn-disabled-bg: var(--accent-fill);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-hover-bg: #0066CC;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #005BB8;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--glass-pill);
    --bs-btn-border-color: var(--glass-hairline);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface);
    --bs-btn-hover-border-color: var(--glass-hairline);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--fill-tertiary);
    --bs-btn-active-border-color: var(--glass-hairline);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.btn-outline-primary {
    --bs-btn-color: var(--accent-ink);
    --bs-btn-bg: var(--accent-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-fill);
    --bs-btn-active-bg: var(--accent-fill);
    --bs-btn-hover-border-color: transparent;
}
.btn-outline-danger {
    --bs-btn-color: var(--red-ink);
    --bs-btn-bg: var(--red-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--red);
    --bs-btn-hover-border-color: transparent;
}
.btn-outline-success {
    --bs-btn-color: var(--green-ink);
    --bs-btn-bg: var(--green-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--green);
    --bs-btn-hover-border-color: transparent;
}
/* Залитые зелёная и красная - «доступные» оттенки Apple: на systemGreen/systemRed белый текст
   даёт 2.2 и 3.5 контраста, на этих - от 4.5 */
.btn-danger { --bs-btn-bg: #D70015; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #B80012; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #A00010; --bs-btn-disabled-bg: #D70015; --bs-btn-disabled-border-color: transparent; }
.btn-success { --bs-btn-bg: #1F7A35; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #1A6B2E; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #165E28; --bs-btn-disabled-bg: #1F7A35; --bs-btn-disabled-border-color: transparent; }
.btn-warning {
    --bs-btn-color: var(--amber-ink); --bs-btn-bg: var(--amber-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--amber); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--amber); --bs-btn-active-border-color: transparent;
}
.btn-info {
    --bs-btn-color: var(--accent-ink); --bs-btn-bg: var(--accent-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-fill); --bs-btn-hover-border-color: transparent;
}
.btn-link { box-shadow: none; }
.btn:active:not(:disabled) { transform: scale(.96); }
/* Группа кнопок - отдельные капсулы с зазором, как кнопки действий в iOS, а не склеенный брусок */
.btn-group { gap: 4px; }
.btn-group > .btn, .btn-group > .btn-group > .btn { border-radius: 999px !important; margin-left: 0 !important; }
.btn-outline-info {
    --bs-btn-color: var(--accent-ink); --bs-btn-bg: var(--accent-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-fill); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--accent-fill); --bs-btn-active-border-color: transparent;
}
.btn-outline-warning {
    --bs-btn-color: var(--amber-ink); --bs-btn-bg: var(--amber-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #C93400; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #C93400; --bs-btn-active-border-color: transparent;
}
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary { background: var(--accent-fill); color: #fff; }

/* ============================================================
   Поля: скруглённые, заливка вместо рамки, кольцо фокуса как в macOS
   ============================================================ */
.form-control, .form-select { border-radius: 12px; border-color: var(--line); }
.form-control-sm, .form-select-sm { border-radius: 10px; }
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Переключатель - как в iOS: зелёный, белый бегунок с тенью */
.form-switch .form-check-input {
    width: 2.6em; height: 1.55em; margin-top: .05em;
    border: 0; border-radius: 999px;
    background-color: rgba(120, 120, 128, .24);
    --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3.3' fill='%23fff'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 0 transparent);
    transition: background-color .25s var(--ease), background-position .25s var(--ease);
}
.form-switch .form-check-input:checked { background-color: var(--green); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.form-check-input { border-color: rgba(60, 60, 67, .3); }
.form-check-input[type="checkbox"] { border-radius: 6px; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ============================================================
   Сегменты и вкладки разделов - сегментированный контрол Apple
   ============================================================ */
.pagebar__tabs, .segmented, .sc-seg {
    background: var(--fill-tertiary);
    border-color: transparent;
    border-radius: 999px;
}
.pagebar__tab { height: 30px; padding: 0 13px; border-radius: 999px; }
.pagebar__tab:hover { background: var(--fill-hover); }
.pagebar__tab.is-active { background: var(--glass-pill); color: var(--ink); box-shadow: var(--glass-pill-shadow); }
.pagebar__tab.is-active .bi { color: var(--accent); }
.segmented__thumb { border-radius: 999px; background: var(--glass-pill); box-shadow: var(--glass-pill-shadow); }
.segmented__opt { border-radius: 999px; }
.segmented__opt.is-active { color: var(--ink); }
.sc-seg button, .sc-seg label { border-radius: 999px; }
/* «Таблица / Аналитика» в претензиях - тот же сегмент, а не синяя плашка */
.seg { background: var(--fill-tertiary); border-color: transparent; border-radius: 999px; }
.seg__btn { border-radius: 999px; color: var(--ink-soft); }
.seg__btn.is-active { color: var(--ink); }
.seg__thumb { background: var(--glass-pill); border-radius: 999px; box-shadow: var(--glass-pill-shadow); }
.tm-board-tab.active { color: var(--accent-ink); }
.sc-seg button.is-on, .sc-seg label:has(input:checked) { background: var(--glass-pill); box-shadow: var(--glass-pill-shadow); }
.pagebar__icons { border-radius: 999px; background: var(--glass-pill); border-color: var(--glass-hairline); }

.nav-tabs { border-bottom-color: var(--glass-hairline); }
.nav-tabs .nav-link { border-radius: 999px; }
.nav-tabs .nav-link.active { box-shadow: none; background: var(--accent-soft); color: var(--accent-ink); }
.nav-tabs .nav-link:hover { color: var(--accent-ink); }
.nav-pills .nav-link { border-radius: 999px; }
.nav-pills .nav-link.active { background: var(--accent-fill); }

/* Поля панели фильтров - заливка без рамки */
.filterbar__field { background: var(--fill-tertiary); border-color: transparent; border-radius: 999px; }
.filterbar__field:focus-within { background: var(--surface); }
.month-nav__btn { border-radius: 999px; }

/* ============================================================
   Всплывающие поверхности: окна, быстрый переход, уведомления, панели табеля
   ============================================================ */
.modal-content {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--glass-hairline); }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .22; }
.modal-backdrop.show { opacity: .22; }
/* Окно «материализуется»: чуть крупнее и размыто -> на место (Apple: материал приходит, а не проявляется) */
.modal.fade .modal-dialog { transform: scale(1.03); filter: blur(4px); transition: transform .28s var(--ease), opacity .2s var(--ease), filter .28s var(--ease); }
.modal.show .modal-dialog { transform: none; filter: none; }

.cmdk__backdrop { background: rgba(0, 0, 0, .18); backdrop-filter: none; }
.cmdk__panel {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--shadow-lg);
}
.cmdk__search, .cmdk__footer { border-color: var(--glass-hairline); }
.cmdk__footer { background: transparent; }
.cmdk__item { border-radius: 12px; }
.cmdk__item.is-active { background: var(--accent); color: #fff; }
.cmdk__item.is-active .cmdk__sub { color: rgba(255, 255, 255, .8); opacity: 1; }
.cmdk__group { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; }

.app-toast, .sc-toast {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--shadow-md);
}
.app-toast--success { background: color-mix(in srgb, var(--green-soft) 70%, transparent); }
.app-toast--error { background: color-mix(in srgb, var(--red-soft) 75%, transparent); }

.sc-edit, .sp-pop, .sc-tip, .filterbar__multiselect-panel, .popover {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}
.sc-edit, .sp-pop, .filterbar__multiselect-panel {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--glass-edge), var(--shadow-lg);
}

/* ============================================================
   Таблицы и метки
   ============================================================ */
.table-modern thead th { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; }
.table-modern tbody tr:hover { background: var(--fill-hover); }
.badge { border-radius: 999px; font-weight: 600; }
.badge-soft { padding: 4px 10px; }
.empty-state__icon { border-radius: 22px; }

/* ============================================================
   Доступность: без прозрачности - сплошные поверхности; повышенный контраст - чёткие края
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
    :root, [data-bs-theme="dark"] {
        --glass-bg: var(--surface);
        --glass-bg-strong: var(--surface);
        --glass-card: var(--surface);
    }
    .hd::before, .bottom-nav, .dropdown-menu, .modal-content, .cmdk__panel, .app-toast, .more-sheet__panel,
    .sc-edit, .sp-pop, .sc-tip, .sc-selbar, .filterbar__multiselect-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    body::before { display: none; }
}
@media (prefers-contrast: more) {
    :root, [data-bs-theme="dark"] { --glass-border: var(--line); --glass-hairline: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { filter: none; transform: none; }
}

/* Панель выделения в табеле - тёмная стеклянная капсула, как панели инструментов в iOS */
.sc-selbar {
    border-radius: 999px;
    background: rgba(28, 28, 30, .78);
    color: #fff;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-lg);
}
.sc-selbar button { border-radius: 999px; }
.sc-tip { border-radius: 12px; }

/* ============================================================
   Высоты «во весь экран» считались от старой шапки (56 px вплотную к краю). Плавающая капсула
   занимает 10 + 56 + 18 px (на телефоне 8 + 52 + 14), нижняя панель - 84 px.
   ============================================================ */
.messenger-container { height: calc(100vh - 112px); border-color: var(--glass-border); box-shadow: var(--glass-edge), var(--shadow-md); }
@media (max-width: 768px) { .messenger-container { height: calc(100vh - 78px); } }
@media (max-width: 899.98px) {
    body.has-bottom-nav .messenger-container { height: calc(100vh - 74px - 84px - env(safe-area-inset-bottom)); }
}

/* ============================================================
   Сообщения на странице (Bootstrap .alert) - мягкая тонированная подложка вместо рамки
   ============================================================ */
.alert {
    --bs-alert-border-color: transparent;
    border-radius: 16px;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--glass-hairline);
}
.alert-info, .alert-primary { --bs-alert-bg: var(--accent-soft); --bs-alert-color: var(--accent-ink); --bs-alert-link-color: var(--accent-ink); }
.alert-success { --bs-alert-bg: var(--green-soft); --bs-alert-color: var(--green-ink); --bs-alert-link-color: var(--green-ink); }
.alert-warning { --bs-alert-bg: var(--amber-soft); --bs-alert-color: var(--amber-ink); --bs-alert-link-color: var(--amber-ink); }
.alert-danger { --bs-alert-bg: var(--red-soft); --bs-alert-color: var(--red-ink); --bs-alert-link-color: var(--red-ink); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--fill-tertiary); --bs-alert-color: var(--ink-soft); }

/* ============================================================
   Метки Bootstrap (.badge.bg-*) - тонированные, как метки в приложениях Apple, а не
   сплошные насыщенные плашки
   ============================================================ */
.badge:is(.bg-success, .text-bg-success) { background-color: var(--green-soft) !important; color: var(--green-ink) !important; }
.badge:is(.bg-primary, .text-bg-primary, .bg-info, .text-bg-info) { background-color: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.badge:is(.bg-warning, .text-bg-warning) { background-color: var(--amber-soft) !important; color: var(--amber-ink) !important; }
.badge:is(.bg-danger, .text-bg-danger) { background-color: var(--red-soft) !important; color: var(--red-ink) !important; }
.badge:is(.bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light) { background-color: var(--fill-tertiary) !important; color: var(--ink-soft) !important; }
.badge:is(.bg-dark, .text-bg-dark) { background-color: var(--ink) !important; color: var(--surface) !important; }
.card { --bs-card-border-radius: var(--radius-md); --bs-card-inner-border-radius: calc(var(--radius-md) - 1px); --bs-card-border-color: var(--glass-border); }

/* ============================================================
   Контраст белого текста на синих заливках. В тёмной теме --accent светлее (#0A84FF - чтобы
   ссылки и значки читались на тёмном), а белый текст на нём даёт 3.65. Все заливки «синее под
   белым текстом» переводятся на --accent-fill.
   ============================================================ */
.sp-btn--primary, .ch-btn--primary, .ct-btn--primary, .claim-composer-send, .ch-count,
.hm-sc b.is-accent, .hm-count--accent, .hm-msgs__n, .sc-hday.is-today .sc-dnum, .sc-q.is-on,
.sc-selbar .sc-selbar__rate, .sched-grid tfoot td, .sched-grid tfoot td.c-sum, .topic-item.active,
.message-own .message-bubble, .btn-login, .cmdk__item.is-active, .hd .dropdown-item.active,
.hd .dropdown-item:active {
    background-color: var(--accent-fill);
}
.sp-btn--primary, .ch-btn--primary, .ct-btn--primary, .sc-q.is-on { border-color: var(--accent-fill); }
.bg-primary { background-color: var(--accent-fill) !important; }

/* Стикеры задач: цвет задаёт пользователь (обычно светлый пастельный) - текст тёмный */
.badge[style*="background-color"] { color: rgba(0, 0, 0, .82); }

/* Крестик закрытия - круглая серая кнопка, как в листах iOS */
.btn-close {
    width: 30px; height: 30px; padding: 0; flex: none;
    border-radius: 50%;
    background-color: var(--fill-tertiary);
    background-size: 10px;
    opacity: .85;
    transition: opacity .15s ease, background-color .15s ease, transform .12s var(--ease);
}
.btn-close:hover { opacity: 1; background-color: var(--fill-hover); }
.btn-close:active { transform: scale(.92); }
.modal-header { padding: 18px 20px 14px; }
.modal-header .btn-close { margin: -4px -4px -4px auto; }
.modal-title { font-weight: 700; letter-spacing: -.02em; }
.modal-footer { padding: 12px 20px 18px; }

/* Список сетей в окне выбора - строки как в списках iOS */
.tenant-switch-list .dropdown-item { padding: 10px 12px; border-radius: 12px; gap: 10px; color: var(--ink); }
.tenant-switch-list .dropdown-item span { display: inline-flex; align-items: center; gap: 10px; }
.tenant-switch-list .dropdown-item .bi { color: var(--muted); }
.tenant-switch-list .dropdown-item:hover { background: var(--fill-hover); }
.tenant-switch-list .dropdown-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.tenant-switch-list .dropdown-item.active .bi { color: var(--accent-ink); }

/* ============================================================
   Менеджер задач: боковая панель проектов - отдельная стеклянная панель, как сайдбар macOS,
   а не белая полоса во всю высоту от края экрана
   ============================================================ */
@media (min-width: 900.02px) {
    .tm-shell { margin-top: 0; margin-left: 0; min-height: calc(100vh - 110px); gap: 16px; }
    .tm-sidebar {
        position: sticky; top: 84px; align-self: flex-start;
        min-height: calc(100vh - 110px); max-height: calc(100vh - 100px);
        background: var(--glass-card);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        box-shadow: var(--glass-edge), var(--shadow-sm);
    }
}
@media (max-width: 900px) {
    .tm-sidebar { background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin-bottom: 12px; }
}
.tm-sidebar__item { border-radius: 10px; }

/* Карточка задачи - плавающий стеклянный лист справа, со скруглёнными углами и отступом от края */
.tm-panel-container { top: 10px; right: 10px; width: min(480px, calc(100vw - 20px)); height: calc(100vh - 20px); }
.tm-panel-container:not(.open) { transform: translateX(calc(100% + 16px)); }
.tm-panel {
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--shadow-lg);
}

/* На телефоне вкладки (Зарплата: «График смен … Зона 5») не расползаются на несколько строк, а
   листаются одной лентой пальцем - как сегменты в iOS */
@media (max-width: 767.98px) {
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
}

/* ============================================================
   Переходы между страницами (View Transitions между документами): шапка и нижняя панель стоят
   на месте, меняется только содержимое - мягкое затухание и подъём на 8 px. Выбранный раздел
   (светлая «линза» в шапке, нижней панели и вкладках) переезжает на новое место, а не прыгает.
   Где браузер не умеет - обычный переход, ничего не ломается.
   ============================================================ */
@view-transition { navigation: auto; types: pvz-page; }

.hd { view-transition-name: pvz-header; }
.bottom-nav { view-transition-name: pvz-tabbar; }
.hd-link.is-current { view-transition-name: pvz-nav-current; }
.bottom-nav__tab.is-current { view-transition-name: pvz-tab-current; }
.pagebar__tab.is-active { view-transition-name: pvz-pagetab-current; }

html:active-view-transition-type(pvz-page)::view-transition-old(root) { animation: pvzPageOut .14s ease-out both; }
html:active-view-transition-type(pvz-page)::view-transition-new(root) { animation: pvzPageIn .32s cubic-bezier(.23, 1, .32, 1) both; }
html:active-view-transition-type(pvz-page)::view-transition-group(pvz-nav-current),
html:active-view-transition-type(pvz-page)::view-transition-group(pvz-tab-current),
html:active-view-transition-type(pvz-page)::view-transition-group(pvz-pagetab-current) { animation-duration: .38s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
@keyframes pvzPageOut { to { opacity: 0; } }
@keyframes pvzPageIn { from { opacity: 0; transform: translateY(8px); } }

/* Смена темы идёт своим переходом (круг из переключателя) - там всё должно быть одним снимком */
html.vt-theme :is(.hd, .bottom-nav, .hd-link, .bottom-nav__tab, .pagebar__tab) { view-transition-name: none !important; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ============================================================
   Шторка «Ещё» выезжает снизу по кривой листов iOS, фон проявляется
   ============================================================ */
.more-sheet:not([hidden]) .more-sheet__panel { animation: pvzSheetUp .42s cubic-bezier(.32, .72, 0, 1) both; }
.more-sheet:not([hidden]) .more-sheet__backdrop { animation: pvzFadeIn .3s ease both; }
@keyframes pvzSheetUp { from { transform: translateY(100%); } }
@keyframes pvzFadeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .more-sheet:not([hidden]) .more-sheet__panel, .more-sheet:not([hidden]) .more-sheet__backdrop { animation: none; }
}

/* ============================================================
   Край под шапкой: содержимое, уходящее под плавающую капсулу, растворяется в лёгком размытии,
   а не обрезается. Появляется, только когда страница прокручена (html.is-scrolled - site.js).
   ============================================================ */
body::after {
    content: "";
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 84px;
    z-index: 1010;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: linear-gradient(var(--paper), transparent);
    -webkit-mask-image: linear-gradient(#000 45%, transparent);
    mask-image: linear-gradient(#000 45%, transparent);
    opacity: 0;
    transition: opacity .25s ease;
}
html.is-scrolled body::after { opacity: .85; }
@media (max-width: 899.98px) { body::after { height: 72px; } }
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* ============================================================
   Заголовок в шапке (телефон): как в iOS - пока крупный заголовок страницы виден, в шапке пусто;
   когда он ушёл под шапку при прокрутке, его имя проявляется по центру капсулы. На страницах без
   крупного заголовка имя раздела видно сразу (html.hd-title-on - site.js).
   ============================================================ */
.hd-title { display: none; }
@media (max-width: 899.98px) {
    .hd-title {
        display: block;
        position: absolute; left: 50%; top: 50%;
        max-width: calc(100% - 190px);
        transform: translate(-50%, calc(-50% + 6px));
        font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
        color: var(--ink);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease, transform .3s cubic-bezier(.23, 1, .32, 1);
    }
    html.hd-title-on .hd-title { opacity: 1; transform: translate(-50%, -50%); }

    /* Крупный заголовок страницы - как Large Title в iOS */
    .pvz-large-title { font-family: var(--font-display); font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.03em !important; line-height: 1.1 !important; }
}

/* ============================================================
   Формы (создание/изменение, профиль, настройки, окна) - как в листах iOS: поля с заливкой
   без рамки, подписи вторичным цветом, заголовки разделов формы крупнее и плотнее, на
   телефоне поля выше (44 px - палец) и основная кнопка во всю ширину.
   Плотные поля в таблицах (.form-control-sm) не трогаются.
   ============================================================ */
:is(.card-body, .modal-body) :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm) {
    min-height: 40px;
    border-color: transparent;
    background-color: var(--fill-tertiary);
    transition: background-color .15s ease, box-shadow .15s ease;
}
:is(.card-body, .modal-body) :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm):focus {
    background-color: var(--surface);
    border-color: var(--accent);
}
:is(.card-body, .modal-body) .form-control:disabled, :is(.card-body, .modal-body) .form-control[readonly] { background-color: transparent; border-color: var(--line); }
:is(.card-body, .modal-body) .form-label { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }
:is(.card-body, .modal-body) form :is(h4, h5, h6) { font-weight: 700; letter-spacing: -.02em; }
:is(.card-body, .modal-body) form h5 { font-size: 17px; }
:is(.card-body, .modal-body) .form-text, :is(.card-body, .modal-body) form small.text-muted { font-size: var(--text-xs); }
.field-validation-error, .text-danger.field-validation-error { font-size: var(--text-xs); }
.input-validation-error:not(:focus) { box-shadow: inset 0 0 0 1px var(--red) !important; }

@media (max-width: 767.98px) {
    :is(.card-body, .modal-body) :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm) { min-height: 44px; font-size: 16px; }  /* 16 px - iOS не увеличивает страницу при фокусе */
    .card-body form .btn-primary[type="submit"], .modal-footer .btn-primary { min-height: 50px; width: 100%; justify-content: center; font-size: 16px; }
}

/* ============================================================
   Экран входа в светлой теме: та же живая сетка ячеек и стеклянная карточка, но на светлом
   фоне systemGroupedBackground (тёмный вариант - исходный, из pvz-style.css)
   ============================================================ */
[data-bs-theme="light"] .login-stage {
    background:
        radial-gradient(circle at 15% 10%, rgba(0, 113, 227, .16), transparent 55%),
        radial-gradient(circle at 90% 20%, rgba(175, 82, 222, .12), transparent 50%),
        #F2F2F7;
}
[data-bs-theme="light"] .aurora .blob { mix-blend-mode: normal; opacity: .28; }
[data-bs-theme="light"] .aurora .blob-c { opacity: .14; }
[data-bs-theme="light"] .cell-field .cell {
    border-color: rgba(0, 0, 0, .05);
    background: rgba(255, 255, 255, .45);
    animation-name: cellBreatheLight;
}
@keyframes cellBreatheLight {
    0%, 100% { border-color: rgba(0, 0, 0, .05); background: rgba(255, 255, 255, .45); box-shadow: none; }
    45%      { border-color: #0071E3; background: rgba(0, 113, 227, .14); box-shadow: 0 0 16px rgba(0, 113, 227, .18); }
}
[data-bs-theme="light"] .float-icon { color: rgba(0, 0, 0, .05); }
[data-bs-theme="light"] .glass-card {
    background: rgba(255, 255, 255, .66);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 60px rgba(20, 30, 60, .14);
    color: var(--ink);
}
[data-bs-theme="light"] .glass-card__brand-title, [data-bs-theme="light"] .glass-card__headline { color: var(--ink); }
[data-bs-theme="light"] .glass-card__brand-sub, [data-bs-theme="light"] .glass-card__sub { color: var(--muted); }
[data-bs-theme="light"] .glass-card .form-label-modern { color: var(--ink-soft); }
[data-bs-theme="light"] .glass-card .form-control-modern { background: var(--fill-tertiary); border-color: transparent; color: var(--ink); }
[data-bs-theme="light"] .glass-card .form-control-modern::placeholder { color: var(--muted); }
[data-bs-theme="light"] .glass-card .form-control-modern:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
[data-bs-theme="light"] .glass-card .input-icon { color: var(--muted); }
[data-bs-theme="light"] .glass-card .form-control-modern:focus + .input-icon { color: var(--accent); }
[data-bs-theme="light"] .glass-card .form-check-modern label { color: var(--ink-soft); }
[data-bs-theme="light"] .glass-card .validation-message { color: var(--red-ink); }
[data-bs-theme="light"] .login-foot { color: var(--muted); }

/* ============================================================
   Контекстное меню (wwwroot/js/context-menu.js) - стеклянная панель из точки нажатия
   ============================================================ */
.pvz-cm {
    position: fixed; z-index: 1100;
    min-width: 220px; max-width: min(320px, calc(100vw - 16px));
    padding: 5px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--shadow-lg);
    animation: pvzCmIn .16s cubic-bezier(.23, 1, .32, 1) both;
}
.pvz-cm.is-leaving { animation: pvzCmOut .12s ease both; }
@keyframes pvzCmIn { from { opacity: 0; transform: scale(.94); } }
@keyframes pvzCmOut { to { opacity: 0; transform: scale(.97); } }
.pvz-cm__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    height: 34px; padding: 0 10px; border: 0; border-radius: 9px;
    background: transparent; color: var(--ink); font-size: 14px; text-align: left; cursor: default;
}
.pvz-cm__item .bi { width: 18px; font-size: 16px; color: var(--ink-soft); flex: none; }
.pvz-cm__item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvz-cm__item kbd { font-family: var(--font-body); font-size: 12px; color: var(--muted); background: none; border: 0; box-shadow: none; padding: 0; }
.pvz-cm__item:hover:not(:disabled), .pvz-cm__item:focus-visible { outline: none; background: var(--accent-fill); color: #fff; }
.pvz-cm__item:hover:not(:disabled) :is(.bi, kbd), .pvz-cm__item:focus-visible :is(.bi, kbd) { color: #fff; }
.pvz-cm__item.is-danger, .pvz-cm__item.is-danger .bi { color: var(--red-ink); }
.pvz-cm__item.is-danger:hover, .pvz-cm__item.is-danger:focus-visible { background: #D70015; color: #fff; }
.pvz-cm__item:disabled { color: var(--muted); }
.pvz-cm__sep { height: 1px; margin: 4px 10px; background: var(--glass-hairline); }
@media (pointer: coarse) { .pvz-cm__item { height: 44px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .pvz-cm, .pvz-cm.is-leaving { animation: none; } }
/* Долгое нажатие по строке/ячейке открывает меню - системное меню копирования iOS не нужно */
:is(tr.ct-row, .claim-mobile-card, td.sched-cell) { -webkit-touch-callout: none; }

/* Установленное приложение на iPhone: строка состояния прозрачная поверх страницы
   (apple-mobile-web-app-status-bar-style) - шапка и панели сдвигаются ниже выреза */
@supports (padding: env(safe-area-inset-top)) {
    .hd { top: calc(10px + env(safe-area-inset-top)); margin-top: calc(10px + env(safe-area-inset-top)); }
    body::after { height: calc(84px + env(safe-area-inset-top)); }
    .tm-panel-container { top: calc(10px + env(safe-area-inset-top)); height: calc(100vh - 20px - env(safe-area-inset-top)); }
    @media (max-width: 899.98px) {
        .hd { top: calc(8px + env(safe-area-inset-top)); margin-top: calc(8px + env(safe-area-inset-top)); }
        body::after { height: calc(72px + env(safe-area-inset-top)); }
    }
}

/* Ссылки в тексте - «чернильный» оттенок акцента: чистый акцент на светлых подложках давал 4.2 */
a { color: var(--accent-ink); }