: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-font: "Alice", Georgia, "Times New Roman", serif;

    --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;

    --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;
}

/* Cosmo и Cyborg исключены из автотёмной: без этого на машине с тёмной
   темой ОС переменные ниже перебили бы [data-theme="cosmo"] /
   [data-theme="cyborg"] (специфичность :root:not(...) — 0,2,0, у темы —
   0,1,1). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="cosmo"]):not([data-theme="cyborg"]) {
        --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;

        --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;
    }
}

/* Тема Cosmo (палитра Bulmaswatch Cosmo:
   https://jenil.github.io/bulmaswatch/cosmo/).

   Готовую сборку Bulmaswatch не подключаем: она собрана под Bulma 0.9,
   а проект на Bulma 1.0.2 — вторая копия Bulma перебила бы компоненты
   box/menu/breadcrumb. Палитра Cosmo воспроизведена переменными:
   плоские углы и серо-синяя гамма.

   Селектор — html[data-theme="cosmo"] (0,1,1), а не просто
   [data-theme="cosmo"] (0,1,0): inline <style> со страницы (`:root`,
   та же специфичность, но ниже по документу) иначе перебил бы
   --lk-primary, --lk-font и --bulma-primary-*. Пока тема выбрана,
   акцент и шрифт берутся из неё, а не из настроек сайта. */
html[data-theme="cosmo"] {
    --lk-primary: #2780e3;
    --lk-text: #373a3c;
    --lk-muted: #7b8a8b;
    --lk-border: #dee2e6;
    --lk-surface: #f8f9fa;
    --lk-bg: #ffffff;
    --lk-hr: #c8ced3;
    --lk-radius: 0;

    /* Source Sans 3 — шрифт Cosmo. Пока файлов нет, браузер берёт
       Arial. */
    --lk-font: "Source Sans 3", Arial, sans-serif;

    /* HSL для #2780e3: Bulma v1 считает hover/active из -h/-s/-l. */
    --bulma-primary-h: 212;
    --bulma-primary-s: 77%;
    --bulma-primary-l: 52%;
    --bulma-link-h: 212;
    --bulma-link-s: 77%;
    --bulma-link-l: 52%;

    --bulma-radius: 0;
    --bulma-control-radius: 0;

    --bulma-text: #373a3c;
    --bulma-text-weak: #7b8a8b;
    --bulma-text-strong: #1f2223;
    --bulma-scheme-main: #ffffff;
    --bulma-scheme-main-bis: #f8f9fa;
    --bulma-scheme-main-ter: #eef1f3;
    --bulma-background: #ffffff;
    --bulma-border: #dee2e6;
    --bulma-border-weak: #dee2e6;

    /* Нативные контролы (раскрытый список select, скроллбары, чекбоксы)
       на ОС с тёмной темой браузер красит сам. Для светлой Cosmo это
       лишнее — фиксируем светлую схему. */
    color-scheme: light;
}

/* Cosmo: светлые поля, меню и карточки.

   Переменных в блоке выше недостаточно. У Bulma v1 есть своя
   автотёмная тема: в bulma.min.css лежит @media (prefers-color-scheme:
   dark), который переключает схему для html без data-theme="light".
   Наш html[data-theme="cosmo"] под это условие попадает (он не
   "light"), а заданных нами токенов меньше, чем есть у Bulma, —
   поэтому на ОС с тёмной темой поля, меню и .box оставались тёмными.

   Полагаться на внутренние имена токенов (--bulma-input-*,
   --bulma-box-* и т.п.) нельзя: они меняются между версиями и не все
   применяются к элементу. Поэтому для светлой Cosmo задаём свойства
   прямо на элементах — это работает независимо от вёрстки Bulma. */
html[data-theme="cosmo"] .input,
html[data-theme="cosmo"] .textarea,
html[data-theme="cosmo"] .select select {
    background-color: #ffffff;
    border-color: #dee2e6;
    color: #373a3c;
}

html[data-theme="cosmo"] .input::placeholder,
html[data-theme="cosmo"] .textarea::placeholder {
    color: #7b8a8b;
}

html[data-theme="cosmo"] .input:hover,
html[data-theme="cosmo"] .textarea:hover,
html[data-theme="cosmo"] .select select:hover {
    border-color: #b9c2c9;
}

html[data-theme="cosmo"] .input:focus,
html[data-theme="cosmo"] .textarea:focus,
html[data-theme="cosmo"] .select select:focus {
    border-color: #2780e3;
}

/* Стрелка выпадающего списка у Bulma тоже берётся из токена схемы. */
html[data-theme="cosmo"] .select:not(.is-multiple):not(.is-loading)::after {
    border-color: #2780e3;
}

/* Сайдбар и меню. Фон .lk-sidebar берётся из --lk-surface, но Bulma
   параллельно задаёт фон пунктам своими токенами: на ОС с тёмной темой
   невыбранные пункты оставались тёмными и светлели только при
   наведении. Поэтому фон сайдбара и пунктов задаём явно (тот же приём,
   что для .box выше). */
html[data-theme="cosmo"] .lk-sidebar {
    background: #f8f9fa;
    border-right-color: #dee2e6;
}

html[data-theme="cosmo"] .menu-list a {
    background-color: transparent;
    color: #373a3c;
}

html[data-theme="cosmo"] .menu-list a:hover,
html[data-theme="cosmo"] .menu-list a:focus {
    background-color: #eef1f3;
    color: #1f2223;
}

/* Активный пункт: перекрываем и правило .lk-sidebar .menu-list
   a.lk-menu-item.is-active (цвет текста #0d2b45 рассчитан на брендовый
   акцент, а в Cosmo акцент синий и текст на нём должен быть белым). */
html[data-theme="cosmo"] .lk-sidebar .menu-list a.lk-menu-item.is-active,
html[data-theme="cosmo"] .lk-sidebar .menu-list a.lk-menu-item.is-active:hover,
html[data-theme="cosmo"] .lk-sidebar .menu-list a.lk-menu-item.is-active:focus {
    background-color: #2780e3;
    color: #ffffff;
}

/* Карточки заказов и .box: в Cosmo рамка вместо тени. Селектор с
   html[data-theme="cosmo"] сильнее, чем `.box` из Bulma, поэтому
   перекрывает и её тёмную схему. */
html[data-theme="cosmo"] .box {
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #dee2e6;
    color: #373a3c;
}

/* Тема Cyborg (палитра Bulmaswatch:
   https://jenil.github.io/bulmaswatch/cyborg/).

   Готовую сборку Bulmaswatch не подключаем по той же причине, что и
   Cosmo: она собрана под Bulma 0.9, а проект на Bulma 1.0.2 — вторая
   копия Bulma перебила бы box/menu/breadcrumb. Палитра воспроизведена
   переменными: тёмная гамма с циановым акцентом.

   Селектор — html[data-theme="cyborg"] (0,1,1): так он сильнее inline
   <style> из шаблона (`:root`, та же специфичность, но ниже по
   документу) и правил [data-theme="dark"] (0,1,0). --lk-font здесь
   намеренно НЕ задаём: пусть действует выбранный пользователем шрифт
   или шрифт из настроек сайта. */
html[data-theme="cyborg"] {
    --lk-primary: #2a9fd6;
    --lk-text: #e0e0e0;
    --lk-muted: #a0a0a0;
    --lk-border: #282828;
    --lk-surface: #111111;
    --lk-bg: #060606;
    --lk-hr: #282828;
    --lk-danger: #cc0000;
    /* Cyborg: янтарный из палитры Bulmaswatch (#f0ad4e). */
    --lk-warning: #f0ad4e;

    /* HSL для #2a9fd6: Bulma v1 считает hover/active из -h/-s/-l. */
    --bulma-primary-h: 199;
    --bulma-primary-s: 68%;
    --bulma-primary-l: 50%;
    --bulma-link-h: 199;
    --bulma-link-s: 68%;
    --bulma-link-l: 50%;

    --bulma-text: #e0e0e0;
    --bulma-text-weak: #a0a0a0;
    --bulma-text-strong: #ffffff;
    --bulma-scheme-main: #060606;
    --bulma-scheme-main-bis: #111111;
    --bulma-scheme-main-ter: #1a1a1a;
    --bulma-scheme-invert: #e0e0e0;
    --bulma-background: #060606;
    --bulma-border: #282828;
    --bulma-border-weak: #1a1a1a;

    /* Тёмная тема: нативные контролы (раскрытый список select,
       скроллбары, чекбоксы) фиксируем тёмными. */
    color-scheme: dark;
}

/* Cyborg: тёмные поля, меню и карточки. Тот же приём, что у Cosmo:
   html[data-theme="cyborg"] сильнее классов Bulma и не зависит от
   внутренних токенов схемы, которые меняются между версиями. */
html[data-theme="cyborg"] .input,
html[data-theme="cyborg"] .textarea,
html[data-theme="cyborg"] .select select {
    background-color: #111111;
    border-color: #282828;
    color: #e0e0e0;
}

html[data-theme="cyborg"] .input::placeholder,
html[data-theme="cyborg"] .textarea::placeholder {
    color: #a0a0a0;
}

html[data-theme="cyborg"] .input:hover,
html[data-theme="cyborg"] .textarea:hover,
html[data-theme="cyborg"] .select select:hover {
    border-color: #3a3a3a;
}

html[data-theme="cyborg"] .input:focus,
html[data-theme="cyborg"] .textarea:focus,
html[data-theme="cyborg"] .select select:focus {
    border-color: #2a9fd6;
}

html[data-theme="cyborg"] .select:not(.is-multiple):not(.is-loading)::after {
    border-color: #2a9fd6;
}

html[data-theme="cyborg"] .lk-sidebar {
    background: #111111;
    border-right-color: #282828;
}

html[data-theme="cyborg"] .menu-list a {
    background-color: transparent;
    color: #e0e0e0;
}

html[data-theme="cyborg"] .menu-list a:hover,
html[data-theme="cyborg"] .menu-list a:focus {
    background-color: #1a1a1a;
    color: #ffffff;
}

html[data-theme="cyborg"] .lk-sidebar .menu-list a.lk-menu-item.is-active,
html[data-theme="cyborg"] .lk-sidebar .menu-list a.lk-menu-item.is-active:hover,
html[data-theme="cyborg"] .lk-sidebar .menu-list a.lk-menu-item.is-active:focus {
    background-color: #2a9fd6;
    color: #060606;
}

html[data-theme="cyborg"] .box {
    background-color: #111111;
    box-shadow: 0 0 0 1px #282828;
    color: #e0e0e0;
}

/* Выбор шрифта и размера текста в сайдбаре.

   Блок идёт ПОСЛЕ блоков тем. Селекторы html[data-font=...] и
   html[data-font-size=...] (0,1,1) совпадают по специфичности с
   html[data-theme="cosmo"]/["cyborg"] (тоже 0,1,1), поэтому решает
   порядок в файле: выбор пользователя должен побеждать тему и настройки
   сайта (--lk-font из :root и из блока Cosmo, --bulma-body-size из
   inline-стиля на странице). Пока правила стояли выше тем, Cosmo со
   своим --lk-font перебивал выбранный в сайдбаре шрифт.

   Стеки шрифтов держим синхронно с их файлами. */
html[data-font="alice"] {
    --lk-font: "Alice", Georgia, "Times New Roman", serif;
}

html[data-font="pt-serif"] {
    --lk-font: "PT Serif", Georgia, "Times New Roman", serif;
}

html[data-font="lora"] {
    --lk-font: "Lora", Georgia, "Times New Roman", serif;
}

html[data-font="pt-sans"] {
    --lk-font: "PT Sans", Arial, sans-serif;
}

html[data-font="manrope"] {
    --lk-font: "Manrope", Arial, sans-serif;
}

html[data-font="montserrat"] {
    --lk-font: "Montserrat", Arial, sans-serif;
}

html[data-font="source-sans"] {
    --lk-font: "Source Sans 3", Arial, sans-serif;
}

html[data-font="forum"] {
    --lk-font: "Forum", Georgia, "Times New Roman", serif;
}

html[data-font="marmelad"] {
    --lk-font: "Marmelad", Georgia, "Times New Roman", serif;
}

html[data-font="golos"] {
    --lk-font: "Golos Text", Arial, sans-serif;
}

html[data-font="onest"] {
    --lk-font: "Onest", Arial, sans-serif;
}

html[data-font="inter"] {
    --lk-font: "Inter", Arial, sans-serif;
}

/* Размер текста в сайдбаре.

   Значения — в rem по шкале Bulma (is-size-7…is-size-4: 0.75, 1, 1.25,
   1.5 rem, плюс промежуточный 0.875), а не в px: rem уважает системный
   размер шрифта, и пользователь с крупным системным шрифтом получает
   крупнее и здесь.

   Ключи совпадают с селектором выбора размера и с его шкалой — держим
   их синхронно.

   Селектор html[data-font-size=…] (0,1,1) сильнее inline :root из
   страницы (0,1,0), поэтому явный выбор пользователя перебивает
   «Размер текста» из настроек сайта. Если выбран «Как в настройках
   сайта», скрипт снимает атрибут — и действует значение из
   inline-стиля. */
html[data-font-size="xsmall"] {
    --bulma-body-size: 0.75rem; /* is-size-7 */
}

html[data-font-size="small"] {
    --bulma-body-size: 0.875rem;
}

html[data-font-size="medium"] {
    --bulma-body-size: 1rem; /* is-size-6 */
}

html[data-font-size="large"] {
    --bulma-body-size: 1.25rem; /* is-size-5 */
}

html[data-font-size="xlarge"] {
    --bulma-body-size: 1.5rem; /* is-size-4 */
}

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

body {
    margin: 0;
    font-family: var(--lk-font);
    font-size: var(--bulma-body-size);
    line-height: var(--bulma-body-line-height);
    color: var(--lk-text);
    background: var(--lk-bg);
}

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; }

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

/* Разделители в текстах статей (HTML из WYSIWYG выводится через |safe).
   Bulma красит <hr> токеном схемы: в светлой теме он почти сливается с
   фоном, в тёмной не виден, а в Cosmo мы переопределяем лишь часть
   токенов — поэтому 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", и Cosmo, и Cyborg.
   Наши блоки тем переопределяют готовые цвета (--bulma-background,
   --bulma-text, --lk-*), а тег их не читает. Отсюда обе поломки: в тёмной
   теме светлая плашка (is-light берёт --bulma-light-l: 90%), в Cosmo на
   машине с тёмной ОС — чёрная (background-l: 14%).

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

   Правило стоит ВЫШЕ правил .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);
}

.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;
}

.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-client-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.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-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;
}

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

   Размер задаём явно: у инлайнового 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, он свой в каждой
   теме (тёмная, Cosmo), поэтому точка не сливается с акцентом. */
.lk-menu-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: var(--lk-danger);
}

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

   Переключение — 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) в
   каждой теме, включая тёмную, Cosmo и Cyborg, поэтому подсветка видна
   везде без отдельных правил на тему. */
.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:hover,
.lk-rail-btn:focus {
    background: var(--lk-bg);
    color: var(--lk-primary);
    text-decoration: none;
}

.lk-rail-dot {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--lk-danger);
}

@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;
}

.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
   (900px), и поле во всю ширину читалось бы как основная форма
   страницы, хотя это заметка к заказу. `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;
}

/* Активный тег в Cosmo: акцент синий, текст на нём должен быть белым
   (тот же приём, что у .lk-menu-item.is-active). */
html[data-theme="cosmo"] .lk-tag.is-active {
    color: #ffffff;
}

/* Пагинация списка статей. 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;
}

html[data-theme="cosmo"] .lk-pagination .pagination-link.is-current {
    color: #ffffff;
}

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

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

   `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;
}

.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;
}

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

    .lk-sidebar {
        flex: none;
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--lk-border);
        padding: 0.75rem 1rem;
    }

    .lk-sidebar .menu-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .lk-sidebar .menu-list a {
        padding: 0.35rem 0.6rem;
    }

    /* Сворачивание — только для десктопа: на мобильных меню и так
       горизонтальное, а полоса с иконками скрыта. Явное правило —
       на случай, если в localStorage осталось b2bh-sidebar=collapsed
       с десктопа: на узком экране полоса всё равно не нужна. */
    .lk-sidebar-toggle {
        display: none;
    }

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

    .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 не подключаем: она
   перебила бы базовые компоненты — тот же аргумент, что у тем
   Cosmo/Cyborg выше). Поэтому балун и стрелка нарисованы
   псевдоэлементами: текст лежит в data-tooltip, стрелка — ::before,
   сам балун — ::after. Нативный title не дублируем: браузер показал бы
   рядом вторую, системную подсказку.

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

   Цвета и радиус — из переменных темы. Фон — --lk-text, текст —
   --lk-bg, то есть цвета меняются местами: балун контрастен карточке в
   любой теме (светлая, тёмная, Cosmo, Cyborg), а не только в светлой. */
.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;
}