:root {
    --lk-primary: #54bfed;
    --lk-circle: #b2e3f7;
    --lk-text: #1a1a1a;
    --lk-muted: #6b7280;
    --lk-border: #e5e7eb;
    --lk-surface: #f3f4f6;
    --lk-bg: #ffffff;
    --lk-danger: #dc2626;
    /* «Нужен ваш шаг» — контурные метки и подсказки (см.
       .lk-badge-warning). Свой токен на каждую тему, а не цвета Bulma
       (is-warning): те заданы абсолютными значениями и в тёмной теме
       остаются светлыми — метка превращается в светлое пятно. */
    --lk-warning: #b26a00;
    --lk-hr: #cbd2d9;
    --lk-radius: 8px;
    --lk-selection-bg: #b2e3f7;
    --lk-selection-text: #0d2b45;
    /* Golos UI — основной текст, таблицы и формы; Manrope — заголовки
       и баннеры. Начертания: 400 у текста, 500 у кнопок и пагинации,
       600/700 у заголовков. */
    --lk-font: "Golos UI", Arial, sans-serif;
    --lk-heading-font: "Manrope", Arial, sans-serif;
    --lk-weight-body: 400;
    --lk-weight-control: 500;
    --lk-weight-heading: 600;
    --lk-weight-heading-bold: 700;

    --bulma-body-size: 16px;
    --bulma-body-line-height: 1.5;

    --bulma-primary-h: 198;
    --bulma-primary-s: 81%;
    --bulma-primary-l: 63%;
    --bulma-link-h: 198;
    --bulma-link-s: 81%;
    --bulma-link-l: 63%;

    --bulma-family-primary: var(--lk-font);
    --bulma-family-secondary: var(--lk-font);
}

[data-theme="dark"] {
    --lk-text: #e8f1f8;
    --lk-muted: #9fb8cc;
    --lk-border: #2a3a4a;
    --lk-surface: #1e2a36;
    --lk-bg: #0f1720;
    --lk-danger: #f87171;
    /* Светлее, чем в светлой теме: на фоне --lk-bg (#0f1720) тёмный
       янтарный #b26a00 не читается (см. .lk-badge-warning). */
    --lk-warning: #fbbf24;
    --lk-hr: #46596d;
    --lk-selection-bg: #54bfed;
    --lk-selection-text: #0f1720;

    --bulma-scheme-main: #0f1720;
    --bulma-scheme-main-bis: #1a2330;
    --bulma-scheme-main-ter: #253040;
    --bulma-scheme-invert: #e8f1f8;
    --bulma-text: #e8f1f8;
    --bulma-text-weak: #9fb8cc;
    --bulma-text-strong: #ffffff;
    --bulma-background: #0f1720;
    --bulma-border: #2a3a4a;
    --bulma-border-weak: #1e2a36;
}

/* Автотёмная тема без JS: script в <head> разрешает «Авто» в явный
   data-theme="dark"|"light" (см. templates/lk/base.html и
   static/js/theme.js), но при отключённом JS этот блок остаётся
   запасным путём — светлую тему пользователь мог выбрать явно. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lk-text: #e8f1f8;
        --lk-muted: #9fb8cc;
        --lk-border: #2a3a4a;
        --lk-surface: #1e2a36;
        --lk-bg: #0f1720;
        --lk-danger: #f87171;
        /* Тот же янтарный, что и в [data-theme="dark"]: автотёмная тема
           по системной настройке (см. блок выше). */
        --lk-warning: #fbbf24;
        --lk-hr: #46596d;
        --lk-selection-bg: #54bfed;
        --lk-selection-text: #0f1720;

        --bulma-scheme-main: #0f1720;
        --bulma-scheme-main-bis: #1a2330;
        --bulma-scheme-main-ter: #253040;
        --bulma-scheme-invert: #e8f1f8;
        --bulma-text: #e8f1f8;
        --bulma-text-weak: #9fb8cc;
        --bulma-text-strong: #ffffff;
        --bulma-background: #0f1720;
        --bulma-border: #2a3a4a;
        --bulma-border-weak: #1e2a36;
    }
}

/* Выделение текста: в тёмных темах браузер по умолчанию оставляет
   тёмный фон выделения (или тёмный текст на тёмном фоне), и выделенное
   не видно. Токены заданы на каждую тему рядом с её палитрой. */
::selection {
    background-color: var(--lk-selection-bg);
    color: var(--lk-selection-text);
}

::-moz-selection {
    background-color: var(--lk-selection-bg);
    color: var(--lk-selection-text);
}

/* Типографика ЛК.

   Golos UI Regular — основной текст, таблицы и формы; Medium (500) —
   кнопки и пагинация. Manrope 600/700 — заголовки и баннеры. Файлы
   подключены в static/css/fonts.css и лежат в static/fonts/. */
body {
    margin: 0;
    font-family: var(--lk-font);
    font-size: var(--bulma-body-size);
    font-weight: var(--lk-weight-body);
    line-height: var(--bulma-body-line-height);
    color: var(--lk-text);
    background: var(--lk-bg);
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle,
.lk-brand-text,
.lk-auth-brand {
    font-family: var(--lk-heading-font);
}

h1, h1.title {
    font-weight: var(--lk-weight-heading-bold);
}

h2, h3, h4, h5, h6,
.title, .subtitle {
    font-weight: var(--lk-weight-heading);
}

h1, h2, h3 { line-height: 1.25; margin: 1.2em 0 0.6em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

/* Кнопки и пагинация — Golos UI Medium, а не наследуемый Regular. */
.button,
.pagination-link,
.pagination-previous,
.pagination-next,
.pagination-ellipsis {
    font-family: var(--lk-font);
    font-weight: var(--lk-weight-control);
}

/* Таблицы и поля форм: Golos UI Regular. Задаём явно — у браузерных
   контролов (input, select, textarea) свой шрифт, и без правила они
   выбивались бы из общего текста. */
.table,
.input,
.textarea,
.select select {
    font-family: var(--lk-font);
    font-weight: var(--lk-weight-body);
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--lk-primary); }
a:hover { text-decoration: underline; }

/* Разделители в текстах статей (HTML из WYSIWYG выводится через |safe).
   Bulma красит <hr> токеном схемы: в светлой теме он почти сливается с
   фоном, в тёмной не виден. Свой цвет от схемы не зависит. */
hr {
    height: 1px;
    border: none;
    background-color: var(--lk-hr);
}

/* Нейтральные плашки: Bulma `.tag` без цветного модификатора («Подготовка к
   отправлению» в партиях, «Ожидает» у приглашения, вес и номер отправления
   в карточке партии) и `.tag.is-light` («Без регистрации», дата новости).

   Почему переопределяем. Фон и текст тега Bulma v1 считает из HSL-компонент,
   а не из готовых цветов схемы:

       .tag { --bulma-tag-background-l: var(--bulma-background-l);
              --bulma-tag-color-l: var(--bulma-text-l); … }
       .tag.is-light { --bulma-tag-background-l: var(--bulma-light-l); … }

   Сами компоненты переключает её собственный @media (prefers-color-scheme:
   dark) внутри bulma.min.css — и под него попадает любой html без
   data-theme="light", то есть и явная тема "dark", и "auto".
   Наш блок тёмной темы переопределяет готовые цвета (--bulma-background,
   --bulma-text, --lk-*), а тег их не читает. Отсюда поломка: в тёмной
   теме светлая плашка (is-light берёт --bulma-light-l: 90%).

   Цвета — из переменных темы: в тёмной теме плашка тёмная со светлым
   текстом, в светлой — серая, как у нейтрального тега и было задумано.

   Правило стоит ВЫШЕ правил .lk-status-*: у них та же специфичность
   (0,1,0), и цветные статусы заказов должны побеждать по порядку в файле.
   Цветные модификаторы тега не задеты: у .tag.is-link / .tag.is-success
   специфичность (0,2,0), у .tag.is-success.is-light — (0,3,0). */
.tag {
    background-color: var(--lk-surface);
    color: var(--lk-text);
}

/* «Светлые» теги Bulma (`tag is-light`): та же причина — фон берётся из
   --bulma-light-l, а не из цвета темы. Приводим к виду нейтральных:
   приглушённая плашка в цветах темы. */
.tag.is-light {
    background-color: var(--lk-surface);
    color: var(--lk-text);
}

/* Цветные модификаторы Bulma задают цвет через переменные, а правило
   `.tag` выше перебивает готовые background/color. Возвращаем смысл
   опасным плашкам: «нет в DF» и счётчик непрочитанных должны быть
   красными, а не серыми. */
.tag.is-danger {
    background-color: var(--lk-danger);
    color: var(--lk-bg);
}

.lk-layout {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.lk-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 2rem 3rem;
}

.lk-main-inner {
    max-width: 900px;
}

.lk-layout-anon {
    justify-content: center;
}

.lk-layout-anon .lk-main {
    display: flex;
    justify-content: center;
    padding-top: 4rem;
}

.lk-layout-anon .lk-main-inner {
    width: 100%;
    max-width: 420px;
}

/* Экран входа в духе Colorlib Login V20: брендовый фон на весь экран,
   форма — карточкой по центру. Правила идут после .lk-layout-anon и при
   равной специфичности перебивают её центрирование и padding-top. */
.lk-layout-auth .lk-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1.25rem;
    /* #0d2b45 — тёмный бренд-цвет, тот же, что в градиенте на главной. */
    background: linear-gradient(135deg, var(--lk-primary) 0%, #0d2b45 100%);
}

.lk-layout-auth .lk-main-inner {
    width: 100%;
    max-width: 24rem;
}

.lk-auth-form {
    width: 100%;
}

.lk-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lk-primary);
    text-decoration: none;
}

.lk-auth-brand:hover,
.lk-auth-brand:focus {
    color: var(--lk-primary);
    text-decoration: none;
}

.lk-auth-forgot {
    display: block;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .lk-layout-auth .lk-main {
        padding: 1.25rem;
    }
}

/* --- Движущиеся круги на экране входа --- */
/* Поверх брендового градиента (по мотивам bulma-event-participation-template):
   три мягких «блоба» медленно дрейфуют, чтобы экран не был статичным.
   Фон повторяет градиент .lk-layout-auth .lk-main — сам блок фиксирован
   на весь экран и потому должен перекрывать страницу целиком. */
.lk-auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, var(--lk-primary) 0%, #0d2b45 100%);
}

.lk-auth-bg span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lk-circle) 0%, transparent 70%);
    opacity: 0.16;
    animation: lk-auth-drift 14s ease-in-out infinite;
}

.lk-auth-bg span:nth-child(1) {
    top: 10%;
    left: 20%;
    width: 200px;
    height: 200px;
}

.lk-auth-bg span:nth-child(2) {
    top: 60%;
    left: 70%;
    width: 120px;
    height: 120px;
    animation-duration: 11s;
    animation-delay: -4s;
}

.lk-auth-bg span:nth-child(3) {
    top: 40%;
    left: 45%;
    width: 300px;
    height: 300px;
    animation-duration: 18s;
    animation-delay: -8s;
}

/* Форма поверх кругов: без этого она легла бы под z-index фона. */
.lk-layout-auth .lk-main-inner {
    position: relative;
    z-index: 1;
}

@keyframes lk-auth-drift {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.16;
    }
    50% {
        transform: translate(60px, -90px);
        opacity: 0.26;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lk-auth-bg span {
        animation: none;
    }
}

.lk-sidebar {
    /* Ширина с запасом: длинные пункты («Справочная информация»,
       «Обращения (поддержка)») должны помещаться в одну строку, иначе
       точка-индикатор уезжала на вторую строку. */
    flex: 0 0 18rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1rem;
    background: var(--lk-surface);
    border-right: 1px solid var(--lk-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Блок «Внешний вид» (тема, шрифт, размер) на странице профиля. Раньше
   жил в футере сайдбара. Ширину ограничиваем: селекты в блоке
   растягивающие (is-fullwidth), и на профиле они заняли бы всю колонку
   контента. */
.lk-appearance {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 22rem;
}

/* Отступ сверху у раскрывающегося блока «Сменить пароль». Нужен потому,
   что у Bulma `.box` задан только margin-bottom, а у предыдущей секции
   (.lk-section) — только margin-top: без этого правила блоки слипались. */
.lk-password-change {
    margin-top: 2rem;
}

/* Отступ сверху у боксов «Уведомления» и «Внешний вид» на профиле.
   Как у .lk-password-change: у Bulma `.box` задан только margin-bottom,
   а у предыдущей секции — только margin-top, поэтому без этого правила
   блоки схлопывались друг с другом. */
.lk-profile-box {
    margin-top: 2rem;
}

/* Выход внизу страницы профиля: блок идёт после «Сменить пароль», по
   центру, с отступом от формы — так же, как номер сборки ниже. */
.lk-logout {
    margin-top: 2.5rem;
    text-align: center;
}

/* Номер сборки внизу страницы профиля. Значение проставляет сервер при
   деплое — то же, что в ?v= у статики и в проверке готовности. Мелкий
   приглушённый текст по центру — он справочный, а не элемент
   управления; отступ сверху отделяет его от кнопки «Выйти». */
.lk-version {
    margin: 1rem 0 0;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--lk-muted);
    text-align: center;
}

.lk-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.lk-logo {
    display: block;
    height: 1.75rem;
    width: auto;
}

.lk-avatar {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--lk-border);
    background: var(--lk-surface);
}

.lk-avatar-empty {
    flex: none;
}

/* Аватар с иконкой-карандашом (см. templates/lk/profile.html).

   Клик по <label> открывает выбор файла, а сам <input type="file">
   скрыт визуально (.lk-avatar-input): системная надпись «Choose file»
   и имя выбранного файла пользователю не нужны. Работает без
   JavaScript.

   Иконка стоит поверх аватара; фон берём из --lk-bg, чтобы кольцо
   вокруг карандаша не сливалось с фоном аватара. */
.lk-avatar-edit {
    position: relative;
    display: inline-block;
    flex: none;
    cursor: pointer;
}

.lk-avatar-edit:focus-within .lk-avatar-pencil,
.lk-avatar-edit:hover .lk-avatar-pencil {
    background: var(--lk-primary);
    color: #0d2b45;
}

.lk-avatar-pencil {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--lk-bg);
    background: var(--lk-surface);
    color: var(--lk-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.lk-avatar-pencil svg {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Скрытый input выбора файла: остаётся в потоке формы (часть браузеров
   не отправляет файл из display: none), но визуально не занимает места
   и не показывает имя выбранного файла. Приём sr-only. */
.lk-avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lk-avatar-sm {
    display: inline-block;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--lk-border);
    background: var(--lk-surface);
    vertical-align: middle;
}

.lk-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex: none;
}

.lk-online-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    background: #48c774;
    border: 2px solid var(--lk-bg);
    border-radius: 50%;
    pointer-events: none;
}

.lk-online-dot.is-top {
    top: 0;
    bottom: auto;
}

.lk-client-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Ставки оптовой схемы в списке клиентов (см. templates/buyer/_client_rates.html):
   значения правятся двойным кликом, поэтому курсор и подчёркивание
   показывают, что это не просто текст. */
.lk-client-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.lk-client-rate {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.lk-client-scheme-edit {
    cursor: text;
    border-bottom: 1px dashed currentColor;
    min-width: 2.5rem;
}

.lk-client-scheme-edit .input {
    min-width: 6rem;
}

.lk-profile-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lk-section {
    margin-top: 2rem;
}

/* Маркеры списка. Bulma `list-style` у `.menu-list` не сбрасывает: в
   блочной раскладке точки ещё терпимы, а в мобильной <ul> становится
   flex-контейнером и маркеры <li> рисуются в произвольных местах —
   выглядят как посторонние фигуры. `list-style` наследуется, поэтому
   достаточно задать на ul. */
.lk-sidebar .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Пункт меню — flex: текст переносится внутри себя, а точка-индикатор
   остаётся отдельным элементом справа и не «уезжает» на вторую строку
   (в inline-раскладке она переносилась вместе со словом). */
.lk-sidebar .menu-list a {
    display: flex;
    align-items: center;
}

/* Иконка пункта меню (Font Awesome, см. static/vendor/fontawesome).
   Пункт — flex-строка (см. .lk-sidebar .menu-list a выше), поэтому иконка
   встаёт отдельным элементом слева от текста, а не отдельной строкой.

   Ширину фиксируем (1.25em) и центрируем: тогда текст пунктов выровнен
   по вертикали независимо от ширины глифа. `flex: none` не даёт иконке
   сжаться, когда длинный пункт («Обращения (поддержка)») переносится. */
.lk-menu-icon {
    flex: none;
    width: 1.25em;
    margin-right: 0.5rem;
    text-align: center;
}

/* Заголовки групп меню («Работа», «Люди», …). Первый заголовок идёт
   сразу после шапки сайдбара — отступ сверху не нужен, поэтому для
   шапки он снимается отдельным правилом ниже. */
.lk-sidebar .menu-label {
    margin-top: 0.75rem;
}

.lk-sidebar-head.menu-label {
    margin-top: 0;
}

/* Сворачиваемые группы меню («Работа», «Люди», «Ещё»). Нативный
   <details>/<summary>: без JS, состояние по умолчанию — атрибут `open`
   из админки, выбор посетителя — localStorage (см. static/js/sidebar.js). */
.lk-menu-collapsible {
    margin-top: 0.5rem;
}

.lk-menu-collapsible > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5em 0.75em;
    border-radius: var(--lk-radius);
    color: var(--lk-text);
    cursor: pointer;
    list-style: none;
}

.lk-menu-collapsible > summary::-webkit-details-marker {
    display: none;
}

.lk-menu-collapsible > summary:hover,
.lk-menu-collapsible > summary:focus {
    background: var(--lk-bg);
    color: var(--lk-primary);
}

.lk-menu-collapsible-chevron {
    flex: none;
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}

.lk-menu-collapsible[open] > summary .lk-menu-collapsible-chevron {
    transform: rotate(90deg);
}

.lk-sidebar .menu-list a.lk-menu-item.is-active,
.lk-sidebar .menu-list a.lk-menu-item.is-active:hover,
.lk-sidebar .menu-list a.lk-menu-item.is-active:focus {
    background-color: var(--lk-primary);
    color: #0d2b45;
    font-weight: 600;
}

/* Шапка сайдбара: бренд и кнопка сворачивания в одну строку. */
.lk-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.lk-sidebar-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    background: var(--lk-bg);
    color: var(--lk-text);
    cursor: pointer;
}

.lk-sidebar-toggle:hover,
.lk-sidebar-toggle:focus {
    border-color: var(--lk-primary);
    color: var(--lk-primary);
}

.lk-sidebar-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}

/* Кнопки управления меню: бургер (мобильная шторка) и сворачивание
   (десктоп). Обёртка держит их справа в шапке сайдбара и не даёт
   разъезжаться при `justify-content: space-between` (.lk-sidebar-head). */
.lk-sidebar-tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
}

.lk-sidebar-burger {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    background: var(--lk-bg);
    color: var(--lk-text);
    cursor: pointer;
}

.lk-sidebar-burger:hover,
.lk-sidebar-burger:focus {
    border-color: var(--lk-primary);
    color: var(--lk-primary);
}

.lk-sidebar-burger i {
    font-size: 0.9rem;
}

/* Точка «есть новое» на бургере: приглашает открыть шторку, когда в меню
   появилась работа. Позиция — правый верхний угол кнопки. */
.lk-burger-dot {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--lk-danger);
}

/* Иконки сайдбара: контур, цвет наследуется от ссылки/кнопки.

   Размер задаём явно: у инлайнового SVG без width/height браузер
   подставляет дефолт 300×150, и иконка из меню контента превращается
   в крупную «геометрическую фигуру» поверх меню (на мобильных особенно
   заметно). Правила ниже (.lk-sidebar-toggle svg, .lk-rail-btn svg)
   задают свои размеры и перебивают это значение. */
.lk-sidebar svg {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Индикатор «есть новое» в меню — счётчик вместо точки. Цвет —
   --lk-danger, он свой в каждой теме (светлая и тёмная), поэтому бейдж не
   сливается с акцентом. Число показывает объём работы: «3 заявки на
   выкуп» и «1» — разная срочность. */
.lk-menu-count {
    flex: none;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--lk-danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

/* Блок переключения между профилями.

   Переключение — POST-формы с кнопками, а не ссылки: GET-переход менял
   бы сессию, и пользователя переключал бы префетч браузера или краулер.

   Из-за этого кнопки не подпадают ни под `.lk-sidebar .menu-list a`, ни
   под `.menu-list a` из Bulma — оформляем их как пункты меню явно.
   `font: inherit` и `color` обязательны: у <button> браузерный стиль, и
   без них пункт выпадал бы из выбранного шрифта, а в тёмной теме текст
   остался бы чёрным на тёмном фоне. */
.lk-account-switch {
    margin-top: 1rem;
}

.lk-account-switch form {
    margin: 0;
}

.lk-account-switch-label {
    margin-bottom: 0.25rem;
}

.lk-account-switch .lk-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5em 0.75em;
    border: none;
    border-radius: var(--lk-radius);
    background: transparent;
    color: var(--lk-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Фон наведения — --lk-bg: он светлее фона сайдбара (--lk-surface) в
   каждой теме, включая тёмную, поэтому подсветка видна
   везде без отдельных правил на тему. */
.lk-account-switch .lk-menu-item:hover,
.lk-account-switch .lk-menu-item:focus {
    background: var(--lk-bg);
    color: var(--lk-primary);
}

/* «Вернуться в свой кабинет» — отдельная кнопка над списком целей.
   Селектор с двумя классами, а не просто `.lk-account-switch-back`:
   иначе правило проиграло бы `.lk-account-switch .lk-menu-item` по
   специфичности (0,1,0 против 0,2,0), и рамка с цветом не применились бы. */
.lk-account-switch .lk-account-switch-back {
    margin-bottom: 0.5rem;
    border: 1px solid var(--lk-primary);
    color: var(--lk-primary);
    font-weight: 600;
}

/* Полоса свёрнутого меню: видна только на десктопе при
   html[data-sidebar="collapsed"]. */
.lk-sidebar-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.lk-rail-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--lk-radius);
    background: transparent;
    color: var(--lk-text);
    cursor: pointer;
}

.lk-rail-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.lk-rail-btn i {
    font-size: 1.1rem;
    line-height: 1;
}

.lk-rail-btn:hover,
.lk-rail-btn:focus {
    background: var(--lk-bg);
    color: var(--lk-primary);
    text-decoration: none;
}

/* Активный пункт в свёрнутой полосе: тот же акцент, что у пункта
   раскрытого меню (см. .lk-menu-item.is-active). */
.lk-rail-btn.is-active,
.lk-rail-btn.is-active:hover,
.lk-rail-btn.is-active:focus {
    background-color: var(--lk-primary);
    color: #0d2b45;
}

.lk-rail-count {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--lk-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1rem;
    text-align: center;
}

@media (min-width: 721px) {
    html[data-sidebar="collapsed"] .lk-sidebar {
        flex-basis: 4rem;
        padding: 1.25rem 0.5rem;
        align-items: center;
    }

    html[data-sidebar="collapsed"] .lk-sidebar-head {
        flex-direction: column;
        gap: 0.5rem;
    }

    html[data-sidebar="collapsed"] .lk-brand-text,
    html[data-sidebar="collapsed"] .lk-sidebar-body {
        display: none;
    }

    /* Стрелка развёртывания смотрит вправо (шеврон влево, повёрнутый). */
    html[data-sidebar="collapsed"] .lk-sidebar-toggle svg {
        transform: rotate(180deg);
    }

    html[data-sidebar="collapsed"] .lk-sidebar-rail {
        display: flex;
    }
}

/* Второстепенные кнопки (`is-light`): «Изменить», «Удалить», «Назад»,
   «Выйти» и т.п.

   Причина та же, что у нейтральных плашек (см. .tag выше): Bulma считает
   фон кнопки из HSL-компоненты `--bulma-button-background-l`, а варианты
   `is-light` берут её из `--bulma-light-l` — константа 90%, от темы не
   зависящая. На тёмном фоне такая кнопка превращается в яркое светлое
   пятно, хотя по смыслу это второстепенное действие.

   Здесь фон — --lk-surface, рамка и текст — из переменных темы.
   `border-width` задаём явно: в Bulma у `.button.is-light` он 0.

   Цветные варианты сохраняют свой цвет — он несёт смысл (is-danger —
   отмена заказа, is-warning — возврат байеру). Селекторы с двумя
   модификаторами нужны, чтобы перебить правила Bulma той же формы. */
.button.is-light,
.button.is-link.is-light,
.button.is-danger.is-light,
.button.is-warning.is-light {
    border-width: 1px;
    background-color: var(--lk-surface);
}

.button.is-light {
    border-color: var(--lk-border);
    color: var(--lk-text);
}

.button.is-link.is-light {
    border-color: var(--lk-primary);
    color: var(--lk-primary);
}

.button.is-danger.is-light {
    border-color: var(--lk-danger);
    color: var(--lk-danger);
}

.button.is-warning.is-light {
    border-color: var(--lk-warning);
    color: var(--lk-warning);
}

/* Наведение и фокус: у нейтральной кнопки добавляем акцентную рамку и
   текст, фон у всех вариантов уходит в --lk-bg — он темнее --lk-surface
   в тёмной теме и светлее в светлой, поэтому подсветка заметна в обеих
   без отдельных правил на тему. */
.button.is-light:hover,
.button.is-light:focus {
    border-color: var(--lk-primary);
    color: var(--lk-primary);
}

.button.is-light:hover,
.button.is-light:focus,
.button.is-link.is-light:hover,
.button.is-link.is-light:focus,
.button.is-danger.is-light:hover,
.button.is-danger.is-light:focus,
.button.is-warning.is-light:hover,
.button.is-warning.is-light:focus {
    background-color: var(--lk-bg);
}

.lk-status-awaiting {
    background: #9e9e9e;
    color: #fff;
}

.lk-status-arrived_wh {
    background: #ff9800;
    color: #fff;
}

.lk-status-in_transit {
    background: #2196f3;
    color: #fff;
}

.lk-status-arrived_country {
    background: #673ab7;
    color: #fff;
}

/* Статусы отправлений по РФ (см. PLAN.md, E12.9): отдельная шкала от
   DeliveryFlash, цвета перекликаются с международными — packed ближе к
   arrived_wh, shipped к in_transit, delivered и cancelled общие. */
.lk-status-draft {
    background: #9e9e9e;
    color: #fff;
}

.lk-status-packed {
    background: #ff9800;
    color: #fff;
}

.lk-status-shipped {
    background: #2196f3;
    color: #fff;
}

.lk-status-delivered {
    background: #4caf50;
    color: #fff;
}
.lk-status-cancelled {
    background: #f44336;
    color: #fff;
}

.lk-status-created {
    background: #9e9e9e;
    color: #fff;
}

.lk-status-awaiting_payment {
    background: #ff9800;
    color: #fff;
}

.lk-status-paid {
    background: #2196f3;
    color: #fff;
}

/* Взвешивание (оптовая схема): клиент подтвердил получение, менеджер
   вводит фактический вес. Цвет отдельный, чтобы статус не путался с
   «Ожидает оплаты» — там тоже оранжевый. */
.lk-status-awaiting_weight {
    background: #00897b;
    color: #fff;
}

.lk-status-completed {
    background: #4caf50;
    color: #fff;
}

.lk-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lk-timeline li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--lk-border);
}

.lk-timeline-date {
    color: var(--lk-muted);
    margin-right: 0.6rem;
}

.lk-chat {
    list-style: none;
    padding: 0;
    margin: 0;
}

#lk-chat-box {
    max-height: 60vh;
    overflow-y: auto;
}

.lk-chat-msg {
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--lk-surface);
    color: var(--lk-text);
    max-width: 80%;
}

.lk-chat .lk-chat-client {
    margin-right: auto;
    border-left: 3px solid var(--lk-primary);
}

.lk-chat .lk-chat-manager,
.lk-chat .lk-chat-buyer {
    margin-left: auto;
    border-right: 3px solid var(--lk-primary);
    background: #e3f2fd;
    color: #0d2b45;
}

.lk-chat-manager .lk-chat-meta,
.lk-chat-buyer .lk-chat-meta {
    color: #4a6b85;
}

/* Сообщения бота, продублированные из Telegram: по центру, приглушённые —
   это системные записи, а не реплики участников (см. docs/vale.md). */
.lk-chat .lk-chat-bot {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: transparent;
    border: none;
    padding: 0.3rem 0.5rem;
}

.lk-chat .lk-chat-bot .lk-chat-meta {
    color: var(--lk-muted);
    font-size: 0.75rem;
}

.lk-chat .lk-chat-bot p {
    color: var(--lk-muted);
    font-size: 0.85rem;
}

[data-theme="dark"] .lk-chat .lk-chat-manager,
[data-theme="dark"] .lk-chat .lk-chat-buyer {
    background: #1e3a5f !important;
    color: #e8f1f8 !important;
}

[data-theme="dark"] .lk-chat .lk-chat-manager .lk-chat-meta,
[data-theme="dark"] .lk-chat .lk-chat-buyer .lk-chat-meta {
    color: #9fb8cc;
}

.lk-chat-meta {
    font-size: 0.8rem;
    color: var(--lk-muted);
    margin-bottom: 0.25rem;
}

[data-theme="dark"] .lk-chat .lk-chat-client .lk-chat-meta {
    color: #9fb8cc;
}

.lk-chat-msg p {
    margin: 0;
    white-space: pre-wrap;
}

.lk-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.lk-chat-attachment {
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid var(--lk-border);
    display: block;
}

.lk-chat-form {
    margin-top: 0.8rem;
}

.lk-chat-form textarea {
    resize: vertical;
}

.lk-chat-form button {
    margin-top: 0.5rem;
    width: auto;
}

/* Лоадер отправки сообщения: htmx вешает класс htmx-request на форму
   (и на элемент из hx-indicator), пока запрос в полёте. Видно, что
   файл грузится/отправляется, без правок на сервере. */
.lk-chat-progress {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--lk-muted);
    font-size: 0.9rem;
}

.lk-chat-form.htmx-request .lk-chat-progress,
.lk-chat-progress.htmx-request {
    display: flex;
}

.lk-spinner {
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--lk-border);
    border-top-color: var(--lk-primary);
    border-radius: 50%;
    animation: lk-spin 0.7s linear infinite;
}

@keyframes lk-spin {
    to { transform: rotate(360deg); }
}

/* Пока запрос в полёте, кнопка не должна отправлять форму повторно. */
.lk-chat-form.htmx-request button[type="submit"] {
    opacity: 0.6;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .lk-spinner { animation-duration: 2.5s; }
}

/* Обложка статьи или новости в ЛК. */
.lk-content-cover {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: var(--lk-radius);
}

/* Дата статьи. Свой класс, а не Bulma `.tag.is-light`: в тёмной теме
   такой тег сохраняет светлый фон, а цвет текста берётся из схемы —
   дата сливалась с фоном и её не было видно. */
.lk-date {
    color: var(--lk-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Название заказа — клиентская заметка (см. api/models.py: Order.title).

   Клиент задаёт его сам и по нему опознаёт заказ: в карточке оно стоит
   под номером (templates/lk/order_detail.html), в списке — рядом с
   номером (templates/lk/orders.html). Байер и менеджер названия не
   видят: они находят заказ по номеру, и до шаблона поле просто не
   доходит (см. api/serializers.py:
   OrderClientSerializer.to_representation).

   Мелкий приглушённый текст: это пояснение к номеру, а не второй
   заголовок — иначе название перетягивало бы внимание с номера, по
   которому заказ ищут в переписке и уведомлениях. `margin: 0`: у <p>
   браузерный отступ 1em, и в карточке он разрывал бы связь «номер —
   название» (у h1 снизу уже стоит свой margin). */
.lk-order-subtitle {
    margin: 0;
    color: var(--lk-muted);
    font-size: 0.9rem;
    overflow-wrap: break-word;
}

/* Комментарий клиента в карточке заказа
   (templates/lk/order_detail.html).

   В комментарии лежат ссылки на товары — длинные слова без пробелов.
   Без переноса они распирают .lk-main-inner и дают горизонтальную
   прокрутку всей страницы (заметно при крупном шрифте). `anywhere`, а
   не `break-word`: ссылки рвутся в любом месте, а не только там, где
   нет других точек переноса. */
.lk-order-comment {
    overflow-wrap: anywhere;
}

/* Модалка редактирования позиции у байера
   (templates/buyer/order_detail.html, #item-modal).

   Дефолтная Bulma-карточка на телефоне узкая и упирается в 100vh:
   форма из десяти полей требует почти весь экран и свой скролл тела
   (modal-card-body у Bulma уже прокручивается). dvh вместо vh — чтобы
   адресная строка мобильного браузера не обрезала низ. */
.lk-item-modal-card {
    width: 100%;
}

@media (max-width: 768px) {
    .lk-item-modal-card {
        margin: 0 0.5rem;
        max-height: calc(100dvh - 1rem);
    }
}

/* Форма названия заказа в карточке (templates/lk/order_detail.html).

   Поле и кнопка «Сохранить» стоят в одну строку. Без правила кнопка
   уезжала на вторую строку под полем: .control у Bulma — блочный
   элемент, и строка разрывалась. Рядом с заголовком это выглядело как
   вторая форма, а не как правка названия.

   Ширину ограничиваем: карточка растянута на всю .lk-main-inner,
   и поле во всю ширину читалось бы как основная форма страницы,
   хотя это заметка к заказу. `min-width: 0` на .control
   снимает автоматический минимум flex-элемента — без него поле не
   сжималось бы и на узком экране вылезало за карточку. */
.lk-order-title-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 24rem;
}

.lk-order-title-form .control {
    flex: 1 1 auto;
    min-width: 0;
}

.lk-order-title-form .input {
    width: 100%;
}

.lk-order-title-form .button {
    flex: none;
}

/* Галочка на кнопке сохранения: инлайн-SVG, как остальные иконки
   проекта (карандаш на аватаре).

   Размер и обводку задаём явно. У инлайнового SVG без width/height
   браузер подставляет дефолт 300×150, и вместо галочки в кнопке
   оказывалась крупная фигура (та же причина, что у иконок сайдбара,
   см. .lk-sidebar svg). Без fill/stroke контур галочки заливается
   цветом по умолчанию — чёрным, и вместо галочки видно пятно. */
.lk-order-title-form .icon svg {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Название в списке заказов (templates/lk/orders.html).

   Строка списка — Bulma .level, а у .level-left `flex-shrink: 0` и ширина
   по содержимому (max-content): длинное название распирало карточку и
   вылезало за её край. Тот же приём, что у .lk-content-card .level-left:
   разрешаем колонке сжиматься (`min-width: 0` снимает автоматический
   минимум flex-элемента — без него неразрывное слово всё равно не
   переносилось бы) и переносить содержимое. `gap` задаём явно: между
   номером и названием иначе не было бы даже пробела, а при переносе
   строки соседние подписи слипались бы. */
.lk-order-card .level-left {
    flex-shrink: 1;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

/* Карточка статьи, новости или справочной страницы в списке.

   Заголовок и дата стоят в Bulma-ряду .level.is-mobile, а у
   .level-left / .level-right там `flex-shrink: 0` и ширина по
   содержимому (max-content). Длинный заголовок не переносится, ряд
   распирает карточку, и дата уезжает за её правый край (у .lk-date ещё
   и `white-space: nowrap`).

   Ряд не переносим, а даём сжиматься колонке заголовка: ширина даты
   фиксирована (`dd.mm.yyyy`), поэтому вся недостающая ширина снимается
   с заголовка, и он переносится внутри себя. `min-width: 0` снимает
   автоматический минимум flex-элемента — без него длинное слово без
   пробелов (ссылка, артикул) всё равно вылезало бы.

   `overflow-wrap: break-word` на самой карточке — страховка для списка
   справочных страниц: ряда .level там нет, но длинное неразрывное слово
   иначе вышло бы за карточку. */
.lk-content-card {
    overflow-wrap: break-word;
}

.lk-content-card .level-left {
    flex-shrink: 1;
    min-width: 0;
}

.lk-tag-filter,
.lk-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lk-tag-filter {
    margin-bottom: 1.25rem;
}

.lk-tag-list {
    margin-top: 0.75rem;
}

/* Метка «нужен ваш шаг»: подсказка, чего ждёт байер по заказу.

   Контур вместо заливки: текст и рамка в цвете --lk-warning, фон
   прозрачный. Заливка в цвете темы на тёмном фоне дала бы «мутное»
   пятно, а цвета Bulma (`tag is-warning`) в тёмной теме остаются
   светлыми — это то же, что и с `is-light` (см. комментарий к .lk-date
   и `.tag.is-light` выше).

   Перенос строки разрешён: подсказка — целое предложение, у Bulma `.tag`
   стоит `white-space: nowrap`, и метка вылезала за карточку заказа. */
.lk-badge-warning {
    display: inline-block;
    max-width: 100%;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--lk-warning);
    border-radius: var(--lk-radius);
    background: transparent;
    color: var(--lk-warning);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Тег: ссылка на список статей, отфильтрованный по этому тегу. */
.lk-tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    background: var(--lk-surface);
    color: var(--lk-text);
    font-size: 0.8rem;
    line-height: 1.5;
    text-decoration: none;
}

.lk-tag:hover,
.lk-tag:focus {
    border-color: var(--lk-primary);
    color: var(--lk-primary);
    text-decoration: none;
}

.lk-tag.is-active {
    background: var(--lk-primary);
    border-color: var(--lk-primary);
    color: #0d2b45;
    font-weight: 600;
}

/* Пагинация списка статей. Bulma считает цвета ссылок из токенов схемы,
   а тёмная тема ЛК перекрывает только их часть — задаём явно, иначе
   номера страниц сливаются с фоном. */
.lk-pagination .pagination-link,
.lk-pagination .pagination-previous,
.lk-pagination .pagination-next {
    color: var(--lk-text);
    border-color: var(--lk-border);
}

.lk-pagination .pagination-link.is-current {
    background-color: var(--lk-primary);
    border-color: var(--lk-primary);
    color: #0d2b45;
}

/* Полоса прогресса партии на странице «Партии».

   Цвет полосы повторяет админку: прибывшая партия — зелёная (Bulma
   is-success), отправленная — синяя (is-link), а ещё не отправленная —
   серая. Готового «серого» модификатора у Bulma нет, поэтому цвет
   значения задаём сами: пишем в ::-webkit-progress-value /
   ::-moz-progress-bar, а не в --bulma-progress-value-background-color —
   внутренние токены Bulma меняются между версиями.

   `progress.` в селекторе — не украшение: так специфичность выше, чем
   у `.progress::-webkit-progress-value` из Bulma, и цвет не зависит от
   порядка загрузки стилей. Цвет берём из --lk-muted: он свой в каждой
   теме, поэтому полоса не пропадает и в тёмной. */
progress.lk-progress-pending::-webkit-progress-value {
    background-color: var(--lk-muted);
}

progress.lk-progress-pending::-moz-progress-bar {
    background-color: var(--lk-muted);
}

/* Метка фактически отправленной партии на странице «Партии»
   (`.tag.is-link`).

   Bulma пишет текст тега белым, а на брендовом голубом белый не
   читается. Тёмный цвет — тот же, что у активного пункта меню на
   акценте (.lk-menu-item.is-active, .lk-tag.is-active). От темы не
   зависит: фон метки всегда голубой.

   `html` перед классами — не украшение: так специфичность (0,2,1)
   выше, чем у `.tag.is-link` из Bulma (0,2,0), и цвет не зависит от
   порядка загрузки стилей. */
html .tag.is-link {
    color: #0d2b45;
}

/* Строка дат партии под полосой прогресса.

   Две группы: отправление и число посылок — слева, прибытие — у правого
   края. Раньше это был один абзац, и дата прибытия терялась среди дат
   отправления. На узком экране группы переносятся друг под друга
   (flex-wrap), а gap не даёт строкам слипнуться по вертикали — у
   Bulma-хелперов (is-flex/is-justify-content-space-between) row-gap
   не задаётся. */
.lk-batch-dates {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

/* Скрытая форма добавления позиции: её прячет JS (`form.hidden = true`),
   пока нечего показывать. В байерской карточке форму сворачивает
   <details>, правило ей не мешает. Явное правило — на случай, если
   какой-то слой задаст `.lk-item-form` свой display. */
.lk-item-form[hidden] {
    display: none;
}

/* Кнопка «Добавить» под блоком предпросмотра (.lk-item-preview, см.
   выше): без отступа она липнет к итоговой сумме позиции. Селектор
   `>` — только на кнопку отправки: `.control` у полей формы лежат
   глубже, внутри `.field`. */
.lk-item-form > .control {
    margin-top: 1rem;
}

/* Строки товаров и кнопки под ними в форме заказа клиента. У Bulma v1
   у `.box` нет нижнего отступа, поэтому карточки товаров липли друг к
   другу, а кнопки «+ Добавить товар» / «Отправить заказ» — к последней
   карточке. Зазор задаём явно: строки добавляет и JS, и единое правило
   закрывает оба случая. */
.lk-item-row + .lk-item-row {
    margin-top: 1rem;
}

.lk-item-actions {
    margin-top: 1rem;
}

/* Шапка строки позиции (см. templates/lk/order_form.html): слева — поле
   названия товара, справа — чекбокс «Удалить».

   У Bulma `.level-left` ширина по содержимому и flex-shrink: 0, поэтому
   input сжимался бы до минимальной ширины. Растягиваем колонку и вложенный
   input на всю доступную ширину. */
.lk-item-head .level-left {
    flex: 1 1 auto;
    min-width: 0;
}

.lk-item-title {
    display: block;
    width: 100%;
}

.lk-item-title input.input {
    width: 100%;
}

/* Звёздочка обязательного поля в карточке товара («Ссылка»): красная,
   как ошибки валидации, чтобы не путать с текстом подписи. */
.lk-required {
    color: var(--lk-danger);
    margin-left: 0.15rem;
}

/* «Комментарий клиента» у позиции: 3 строки и растягивание по вертикали.
   У Bulma .textarea resize: vertical по умолчанию, но правило фиксируем
   явно — иначе отличие от однострочных полей позиции теряется. */
.lk-item-comment textarea {
    resize: vertical;
}

/* «Автоматизированное создание заказа»: textarea с иконкой магической
   палочки (Font Awesome, fa-wand-magic-sparkles) в левом верхнем углу.
   Штатный Bulma has-icons-left рассчитан на однострочный input и
   центрирует иконку по высоте; у textarea высота растёт вместе с текстом,
   поэтому позиционируем иконку в углу сами.

   Селектор с двумя классами нужен, чтобы перебить `.control.has-icons-
   left .icon` из Bulma (там заданы top/left/height для центрирования).
   `font-size` задаём явно: у `.icon` Bulma ставит --bulma-size-small
   (0.75rem), и глиф FA оказался бы мельче прежней SVG-иконки. */
.lk-autofill-field textarea {
    padding-left: 2.25rem;
    resize: vertical;
}

.lk-autofill-field .control.has-icons-left .icon.is-left {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    color: var(--lk-muted);
    pointer-events: none;
}

.lk-item-preview {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: var(--lk-surface);
    border: 1px solid var(--lk-border);
    border-radius: 8px;
}

/* Подпись и число держим рядом: `space-between` разносил их по краям
   формы, и связь «Цена, ₽ → 2047.00 ₽» терялась. `gap` — минимальный
   зазор, `tabular-nums` — цифры одной ширины, чтобы суммы читались
   столбиком. */
.lk-item-preview-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.lk-item-preview-row strong {
    font-variant-numeric: tabular-nums;
}

.lk-item-preview-total {
    border-top: 1px solid var(--lk-border);
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    font-weight: 600;
}

.lk-order-search {
    margin-bottom: 1.5rem;
}

/* Поиск клиента в форме заказа байера (templates/buyer/order_form.html,
   static/js/client-picker.js). Нативный <select> с сотней клиентов
   неудобен: список результатов рисуем поверх формы и фильтруем по вводу.
   Без JS остаётся видимый нативный селект — блоки с классом
   data-enhanced появляются только после инициализации скрипта. */
.lk-client-picker {
    position: relative;
}

.lk-client-picker-input,
.lk-client-picker-results {
    display: none;
}

.lk-client-picker[data-enhanced] .lk-client-picker-input {
    display: block;
}

.lk-client-picker[data-enhanced] [data-client-picker-native] {
    display: none;
}

.lk-client-picker-results {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 18rem;
    margin: 0.25rem 0 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    background: var(--lk-bg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.lk-client-picker[data-enhanced] .lk-client-picker-results:not([hidden]) {
    display: block;
}

.lk-client-picker-results [role="option"] {
    padding: 0.5rem 0.75rem;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.lk-client-picker-results [role="option"]:hover,
.lk-client-picker-results [role="option"].is-active {
    background: var(--lk-surface);
    color: var(--lk-primary);
}

.lk-client-picker-results [role="option"].is-selected {
    font-weight: 600;
}

.lk-client-picker-empty {
    padding: 0.5rem 0.75rem;
    color: var(--lk-muted);
    font-style: italic;
}

/* На телефоне список не накладываем поверх формы: экранная клавиатура
   съедает низ вьюпорта, и абсолютный список обрезался бы. В обычном
   потоке он раздвигает форму, и страница прокручивается до результатов. */
@media (max-width: 720px) {
    .lk-client-picker-results {
        position: static;
        max-height: 12rem;
        margin-top: 0.5rem;
    }
}

.lk-tooltip {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    text-align: center;
    border-radius: 50%;
    background: var(--lk-muted);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: help;
    vertical-align: middle;
}

/* Затемнение под мобильной шторкой: на десктопе не нужно, на узком
   экране включается вместе с html[data-drawer="open"] (см. ниже). */
.lk-drawer-backdrop {
    display: none;
}

@media (max-width: 720px) {
    .lk-layout {
        flex-direction: column;
    }

    /* Сайдбар на узком экране — липкая шапка с бургером; список пунктов
       живёт в выезжающей шторке (.lk-sidebar-body, см. ниже). Высоту
       шапки держим фиксированной: шторка открывается сразу под ней
       (top: 2.75rem). */
    .lk-sidebar {
        position: sticky;
        top: 0;
        z-index: 45;
        flex: none;
        width: 100%;
        height: 2.75rem;
        padding: 0.5rem 1rem;
        border-right: none;
        border-bottom: 1px solid var(--lk-border);
        background: var(--lk-surface);
        overflow: visible;
    }

    .lk-sidebar-head {
        margin: 0;
    }

    /* Шторка: фиксированная панель слева, за пределами экрана в
       закрытом состоянии. Открывает/закрывает static/js/drawer.js
       атрибутом data-drawer на <html>. */
    .lk-sidebar-body {
        position: fixed;
        top: 2.75rem;
        left: 0;
        bottom: 0;
        z-index: 40;
        width: min(18rem, 85vw);
        padding: 1rem;
        overflow-y: auto;
        background: var(--lk-surface);
        border-right: 1px solid var(--lk-border);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }

    html[data-drawer="open"] .lk-sidebar-body {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.2s ease, visibility 0s;
    }

    /* Бургер виден только на узком экране; кнопка сворачивания и полоса
       иконок — только на десктопе. */
    .lk-sidebar-burger {
        display: inline-flex;
    }

    .lk-sidebar-toggle,
    .lk-sidebar-rail {
        display: none;
    }

    .lk-brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Затемнение под шторкой: закрывает меню по клику. */
    .lk-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    html[data-drawer="open"] .lk-drawer-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease, visibility 0s;
    }

    /* Пока шторка открыта, страница под ней не скроллится. */
    html[data-drawer="open"] body {
        overflow: hidden;
    }

    .lk-main {
        padding: 1rem 1rem 2rem;
    }

    .lk-breadcrumbs {
        font-size: 0.8rem;
    }

    .lk-chat-msg {
        max-width: 95%;
    }
}

/* Метка «заказ укомплектован» в списках заказов: у каждой позиции есть
   посылка с трек-номером (см. api/models.py: Order.all_items_have_track).
   Цвет — акцент темы: иконка стоит рядом с номером заказа, ссылка на
   заказ тоже акцентная, и в тёмной теме обычный чёрный глиф пропал бы. */
.lk-track-ready {
    color: var(--lk-primary);
}

/* Всплывающая подсказка к метке — своим CSS, а не атрибутом title.

   В Bulma компонента tooltip нет (он есть только в расширении
   bulma-tooltip, а вторую сборку поверх Bulma 1.0.2 не подключаем: она
   перебила бы базовые компоненты). Поэтому балун и стрелка нарисованы
   псевдоэлементами: текст лежит в data-tooltip, стрелка — ::before,
   сам балун — ::after. Нативный title не дублируем: браузер показал бы
   рядом вторую, системную подсказку.

   Показ — по :hover и :focus: подсказка должна открываться и с
   клавиатуры (у иконки стоит tabindex), иначе смысл метки остаётся
   доступен только мышью. Скрываем через opacity + visibility, а не
   display: только так проигрывается transition, а скрытая подсказка не
   перехватывает указатель (pointer-events: none) и не мешает навести
   курсор на соседнюю ссылку.

   Цвета и радиус — из переменных темы. Фон — --lk-text, текст —
   --lk-bg, то есть цвета меняются местами: балун контрастен карточке в
   любой теме (светлая и тёмная), а не только в светлой. */
.lk-track-ready[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Стрелка. Классический приём: квадрат нулевого размера с прозрачными
   border-ами, окрашен только верхний — получается треугольник вниз.
   Ширина border-а (0.3rem) задаёт и высоту стрелки, и зазор между
   иконкой и балуном (см. translateY у ::after). */
.lk-track-ready[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 20;
    border: 0.3rem solid transparent;
    border-top-color: var(--lk-text);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.lk-track-ready[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 20;
    padding: 0.25rem 0.6rem;
    border-radius: var(--lk-radius);
    background: var(--lk-text);
    color: var(--lk-bg);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Балун приподнят на высоту стрелки (0.6rem = два border-а): её
       основание совпадает с нижним краем балуна, поэтому шва между ними
       не видно. */
    transform: translate(-50%, -0.6rem);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.lk-track-ready[data-tooltip]:hover::before,
.lk-track-ready[data-tooltip]:focus::before,
.lk-track-ready[data-tooltip]:hover::after,
.lk-track-ready[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
}

/* Страница «Магия» (templates/manager/magic.html).
   Таблица из многих колонок не влезает в общий max-width 900px, поэтому
   странице разрешено занять больше места, а таблица получает фиксированную
   раскладку: длинные названия и ссылки переносятся, а не растягивают
   контейнер и не дают горизонтальную прокрутку. */
.lk-main-inner--wide {
    max-width: 1600px;
}

/* Страницы с большими таблицами на всю доступную ширину: при
   сворачивании меню контент растягивается, а правый край остаётся на
   месте (в отличие от --wide, который прижат влево и уезжает). */
.lk-main-inner--fluid {
    width: 100%;
    max-width: none;
}

/* Фото с сортировки: правая колонка заказов прокручивается отдельно,
   миниатюры показывают, где фото лежит сейчас. */
.lk-photo-orders {
    max-height: calc(100vh - 20rem);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.lk-photo-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.lk-photo-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--lk-border);
    border-radius: 4px;
    cursor: grab;
    background: var(--lk-surface);
}

.lk-photo-thumb:active {
    cursor: grabbing;
}

@media screen and (max-width: 768px) {
    .lk-photo-orders {
        max-height: 60vh;
    }
}

/* Карточки заказов (templates/lk/order_detail.html,
   templates/buyer/order_detail.html, templates/manager/order_detail.html).
   Таблица позиций из семи-восьми колонок не помещается в общий max-width
   900px. Потолок выше типичной десктопной ширины: при сворачивании меню
   освободившиеся ~224px действительно уходят таблице, а на сверхшироких
   экранах контент не растягивается бесконечно. */
.lk-main-inner--order {
    max-width: 1800px;
}

.lk-magic-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.82rem;
}

.lk-magic-table th,
.lk-magic-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.lk-magic-table .lk-magic-col-check {
    width: 2.2rem;
}

.lk-magic-table .lk-magic-col-date {
    width: 6rem;
}

.lk-magic-table .lk-magic-col-product {
    width: 18%;
}

.lk-magic-table .lk-magic-col-city {
    width: 7rem;
}

.lk-magic-table .lk-magic-col-recipient {
    width: 11rem;
}

.lk-magic-table .lk-magic-col-logistics {
    width: 7rem;
}

.lk-magic-table .lk-magic-col-source {
    width: 6rem;
}

.lk-magic-table .lk-magic-col-track {
    width: 10%;
}

.lk-magic-table .lk-magic-col-status {
    width: 8rem;
}

.lk-magic-table .lk-magic-col-df {
    width: 9rem;
}

.lk-magic-table .lk-magic-col-bind {
    width: 11rem;
}

/* Изменение ширины столбцов «Магии»: ручка на правой границе заголовка.
   Ширины ставит static/js/magic-table-resize.js в <col>, поэтому
   table-layout: fixed пересчитывает столбец без перестройки разметки. */
.lk-magic-table thead th {
    position: relative;
}

.lk-col-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    z-index: 2;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.lk-col-resizer::after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: transparent;
}

.lk-col-resizer:hover::after,
.lk-col-resizer:focus-visible::after {
    background: var(--lk-primary);
}

.lk-col-resizing {
    cursor: col-resize;
    user-select: none;
}

@media (max-width: 720px) {
    .lk-col-resizer {
        display: none;
    }
}

.lk-magic-table th a {
    color: inherit;
}

.lk-magic-table .lk-magic-sort-indicator {
    font-size: 0.7em;
    opacity: 0.6;
}

.lk-magic-table .lk-magic-track-cell {
    cursor: text;
}

.lk-magic-table .select,
.lk-magic-table select {
    max-width: 100%;
}

/* «Магия» на телефоне: таблица из семи колонок не читается даже с
   горизонтальной прокруткой. На узком экране каждая строка становится
   карточкой, а ячейки идут друг под другом с подписью из data-label
   (templates/manager/magic.html). Заголовок остаётся компактной полосой
   из чипов — сортировка и «выбрать всё» работают и на мобильном. */
@media (max-width: 720px) {
    .lk-magic-table {
        table-layout: auto;
        font-size: 0.9rem;
    }

    .lk-magic-table thead {
        display: block;
        margin-bottom: 0.75rem;
    }

    .lk-magic-table thead tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        border: none;
    }

    .lk-magic-table thead th {
        display: block;
        width: auto;
        padding: 0;
        border: none;
    }

    .lk-magic-table thead th.lk-magic-col-check {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.5rem;
    }

    .lk-magic-table thead th.lk-magic-col-check::after {
        content: "Все";
        font-size: 0.8rem;
        overflow-wrap: normal;
    }

    .lk-magic-table thead th:not(.lk-magic-col-check) a {
        display: inline-block;
        padding: 0.15rem 0.5rem;
        font-size: 0.78rem;
        line-height: 1.4;
        border: 1px solid var(--lk-border);
        border-radius: 999px;
        background: var(--lk-bg);
    }

    .lk-magic-table tbody {
        display: block;
    }

    .lk-magic-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--lk-border);
        border-radius: var(--lk-radius);
        background: var(--lk-bg);
    }

    .lk-magic-table tbody td {
        display: block;
        width: auto;
        padding: 0.4rem 0;
        border: none;
    }

    .lk-magic-table tbody td + td {
        border-top: 1px dashed var(--lk-border);
    }

    .lk-magic-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--lk-muted);
        /* overflow-wrap:anywhere у ячеек ломает и подписи: «Выбрать»
           сжималась до одной буквы в столбик. Подпись должна переноситься
           только по пробелам. */
        overflow-wrap: normal;
    }

    .lk-magic-table tbody td.lk-magic-col-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-top: 0;
        border-top: none;
    }

    .lk-magic-table tbody td.lk-magic-col-check::before {
        content: "Выбрать";
        margin: 0;
    }
}

/* Неопределённая полоса прогресса разбора ссылок.

   Пока счётчики разбора пустые, обычный <progress> стоит на нуле и
   выглядит как «работа не идёт». Полоса без значения бежит вбок —
   видно, что процесс жив. Значение задаём через ::-webkit-progress-value
   и ::-moz-progress-bar (те же селекторы, что у .lk-progress-pending
   выше): Bulma красит значение через --bulma-progress-value-background-color,
   а этот токен меняется между версиями. */
progress.lk-progress-indeterminate::-webkit-progress-value {
    background-color: var(--lk-primary);
    animation: lk-progress-slide 1.4s ease-in-out infinite;
}

progress.lk-progress-indeterminate::-moz-progress-bar {
    background-color: var(--lk-primary);
    animation: lk-progress-slide 1.4s ease-in-out infinite;
}

@keyframes lk-progress-slide {
    0% {
        margin-left: -35%;
        width: 35%;
    }

    100% {
        margin-left: 100%;
        width: 35%;
    }
}

@media (prefers-reduced-motion: reduce) {
    progress.lk-progress-indeterminate::-webkit-progress-value,
    progress.lk-progress-indeterminate::-moz-progress-bar {
        animation: none;
    }
}

/* Скелет строк позиций на время разбора ссылок.

   Пустая таблица выглядит как поломка страницы, а не как «работа идёт».
   Полосы повторяют ширину ячеек таблицы позиций и «дышат» градиентом.
   Цвета — из темы (--lk-surface, --lk-border), поэтому скелет читается
   и в тёмной. */
.lk-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.lk-skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lk-skeleton-bar {
    display: block;
    height: 0.85rem;
    border-radius: var(--lk-radius);
    background: linear-gradient(
        90deg,
        var(--lk-surface) 25%,
        var(--lk-border) 37%,
        var(--lk-surface) 63%
    );
    background-size: 400% 100%;
    animation: lk-skeleton-shimmer 1.4s ease-in-out infinite;
}

.lk-skeleton-bar.is-wide {
    flex: 1 1 auto;
}

.lk-skeleton-bar.is-narrow {
    flex: 0 0 4.5rem;
}

@keyframes lk-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lk-skeleton-bar {
        animation: none;
    }
}

/* Таблица позиций заказа на карточке байера.

   На широком экране — обычная таблица. Ячейки верхней строки выравниваем
   по верху: в «Товар» ссылка и длинное название, в «Посылка» — тег и
   кнопка, и по центру они съезжали. */
.lk-items-table th,
.lk-items-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* Числовые колонки не переносим: суммы и веса в узких столбцах рвались
   на несколько строк («1 234,56» в две-три строки). Название товара —
   наоборот, переносится, поэтому первая колонка остаётся обычной. */
@media (min-width: 721px) {
    .lk-items-table th,
    .lk-items-table td {
        white-space: nowrap;
    }

    .lk-items-table th:first-child,
    .lk-items-table td:first-child {
        white-space: normal;
    }
}

/* Действия с позицией («Редактировать» + «Удалить») — в одной строке:
   основное действие слева (зелёное), разрушительное справа (красное).
   `margin-left: auto` прижимает «Удалить» к правому краю и в карточке
   клиента, где кнопка одна. На мобильном карточка тянется на всю ширину,
   поэтому кнопки встают по её краям. */
.lk-item-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    white-space: nowrap;
}

.lk-item-actions-row > form {
    margin-left: auto;
}

/* Итоговая строка под позициями: суммы по колонкам, как в PNG-расчёте
   (см. templates/_order_calc_table.html). Верхнюю границу делаем
   заметнее обычных строк, чтобы итог не сливался с последней позицией. */
.lk-items-table tfoot th,
.lk-items-table tfoot td {
    border-top: 2px solid var(--lk-border);
    font-weight: 600;
}

/* Мобильная раскладка: вместо горизонтальной прокрутки каждая строка
   становится карточкой, а ячейки идут друг под другом с подписью из
   data-label (см. templates/buyer/order_detail.html). Тот же приём, что
   у таблицы «Магии» (.lk-magic-table выше). */
@media (max-width: 720px) {
    .lk-items-table thead {
        display: none;
    }

    .lk-items-table tbody {
        display: block;
    }

    .lk-items-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--lk-border);
        border-radius: var(--lk-radius);
        background: var(--lk-bg);
    }

    .lk-items-table.is-striped tbody tr {
        background: var(--lk-bg);
    }

    .lk-items-table tbody td {
        display: block;
        width: auto;
        padding: 0.4rem 0;
        border: none;
        white-space: normal;
    }

    .lk-items-table tbody td + td {
        border-top: 1px dashed var(--lk-border);
    }

    .lk-items-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--lk-muted);
        /* overflow-wrap:anywhere у ячеек ломает подписи: «Доставка США,
           $» сжималась в столбик. Подпись должна переноситься только по
           пробелам. */
        overflow-wrap: normal;
    }

    .lk-items-table tfoot {
        display: block;
    }

    .lk-items-table tfoot tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--lk-border);
        border-radius: var(--lk-radius);
        background: var(--lk-surface);
    }

    .lk-items-table tfoot th,
    .lk-items-table tfoot td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        width: auto;
        padding: 0.35rem 0;
        border: none;
        white-space: normal;
        text-align: right;
    }

    .lk-items-table tfoot tr > :first-child {
        display: block;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--lk-border);
        text-align: left;
    }

    .lk-items-table tfoot td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--lk-muted);
        overflow-wrap: normal;
        text-align: left;
    }

    .lk-items-table tfoot td:empty {
        display: none;
    }
}

/* Превью PNG-расчёта: полная картинка длинная и на всю ширину контента
   отодвигала действия по заказу. Показываем небольшой макет, а полный
   файл открывается кнопкой «Скачать PNG» (см. templates/_order_quote_block.html). */
.lk-quote-preview {
    max-width: 24rem;
}

.lk-quote-preview img {
    width: 100%;
    height: auto;
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
}

/* Форма фильтра «Магии»: поиск по треку/номеру отправления плюс статус.
   В общем level-item форма иначе сжималась до ширины селекта. */
.lk-magic-filters {
    min-width: 24rem;
}

.lk-magic-filters .field {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .lk-magic-filters {
        width: 100%;
        min-width: 0;
    }

    .lk-magic-filters .control.is-expanded {
        flex-basis: 100%;
    }
}

/* Статистика и поиск на странице «Магии» (templates/manager/magic.html). */
.lk-magic-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.lk-magic-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.lk-magic-stat {
    min-width: 6.5rem;
    text-align: center;
}

.lk-magic-stat .heading {
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.lk-magic-stat .title {
    margin-bottom: 0;
}

.lk-magic-stat-help {
    display: flex;
    align-items: center;
    min-width: auto;
}

.lk-magic-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    color: var(--lk-muted);
    cursor: help;
    background: var(--lk-surface);
    border: 1px solid var(--lk-border);
    border-radius: 50%;
}

.lk-magic-help:focus-visible {
    outline: 2px solid var(--lk-primary);
    outline-offset: 2px;
}

.lk-magic-help-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 50;
    display: none;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    color: var(--lk-text);
    background: var(--lk-bg);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.lk-magic-help:hover .lk-magic-help-panel,
.lk-magic-help:focus .lk-magic-help-panel {
    display: block;
}

.lk-magic-help-line {
    display: block;
}

.lk-magic-help-line + .lk-magic-help-line {
    margin-top: 0.4rem;
}

@media (max-width: 720px) {
    .lk-magic-help-panel {
        position: fixed;
        top: auto;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
}