/*
 * Дизайн-система кабинета (редизайн 2026-09), plain CSS без сборки.
 * Этот файл — источник и одновременно то, что отдаётся браузеру; правится
 * руками, пересборка не нужна (BEM-волна 22.09.2026, knowledge/documentation/lk/architecture/ui.md).
 *
 * Слои каскада, от слабого к сильному:
 *   reset       — нормализация браузеров (бывший Tailwind preflight, вендорен);
 *   base        — токены в :root, шрифты, оболочка .tg-page;
 *   components  — блоки BEM: tg-* (дизайн-система), lk-* (каркас), ezz-*, mchd-* (предметные);
 *   utilities   — фиксированный набор помощников раскладки u-* (в конце файла).
 * Неслоёные правила страниц (собственные <style>) сильнее любого слоя.
 *
 * Имена: блок `tg-btn`, элемент `tg-btn__icon`, модификатор `tg-btn--primary`.
 * Классы не служат JavaScript API: скрипты держатся за data-action,
 * тесты — за data-testid.
 */

@layer reset, base, components, utilities;

/* ---- reset: Tailwind v4.3.3 preflight без функций темы (MIT) ---- */
@layer reset {
  /*
    1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
    2. Remove default margins and padding
    3. Reset all borders.
  */

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 2 */
    border: 0 solid; /* 3 */
  }

  /*
    1. Use a consistent sensible line-height in all browsers.
    2. Prevent adjustments of font size after orientation changes in iOS.
    3. Use a more readable tab size.
    4. Use the user's configured `sans` font-family by default.
    5. Use the user's configured `sans` font-feature-settings by default.
    6. Use the user's configured `sans` font-variation-settings by default.
    7. Disable tap highlights on iOS.
  */

  html {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    tab-size: 4; /* 3 */
    font-family: var(--font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); /* 4: шрифт кабинета из токенов, а не системный */
    font-feature-settings: normal; /* 5 */
    font-variation-settings: normal; /* 6 */
    -webkit-tap-highlight-color: transparent; /* 7 */
  }

  /*
    1. Add the correct height in Firefox.
    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
    3. Reset the default border style to a 1px solid border.
  */

  hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
  }

  /*
    Add the correct text decoration in Chrome, Edge, and Safari.
  */

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  /*
    Remove the default font size and weight for headings.
  */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  /*
    Reset links to optimize for opt-in styling instead of opt-out.
  */

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  /*
    Add the correct font weight in Edge and Safari.
  */

  b,
  strong {
    font-weight: bolder;
  }

  /*
    1. Use the user's configured `mono` font-family by default.
    2. Use the user's configured `mono` font-feature-settings by default.
    3. Use the user's configured `mono` font-variation-settings by default.
    4. Correct the odd `em` font sizing in all browsers.
  */

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
    font-feature-settings: normal; /* 2 */
    font-variation-settings: normal; /* 3 */
    font-size: 1em; /* 4 */
  }

  /*
    Add the correct font size in all browsers.
  */

  small {
    font-size: 80%;
  }

  /*
    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
  */

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
    3. Remove gaps between table borders by default.
  */

  table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
    border-collapse: collapse; /* 3 */
  }

  /*
    Use the modern Firefox focus style for all focusable elements.
  */

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  /*
    Add the correct vertical alignment in Chrome and Firefox.
  */

  progress {
    vertical-align: baseline;
  }

  /*
    Add the correct display in Chrome and Safari.
  */

  summary {
    display: list-item;
  }

  /*
    Make lists unstyled by default.
  */

  ol,
  ul,
  menu {
    list-style: none;
  }

  /*
    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
        This can trigger a poorly considered lint error in some tools but is included by design.
  */

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
  }

  /*
    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
  */

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /*
    1. Inherit font styles in all browsers.
    2. Remove border radius in all browsers.
    3. Remove background color in all browsers.
    4. Ensure consistent opacity for disabled states in all browsers.
  */

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    letter-spacing: inherit; /* 1 */
    color: inherit; /* 1 */
    border-radius: 0; /* 2 */
    background-color: transparent; /* 3 */
    opacity: 1; /* 4 */
  }

  /*
    Restore default font weight.
  */

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  /*
    Restore indentation.
  */

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  /*
    Restore space after button.
  */

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  /*
    Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
  */

  ::placeholder {
    opacity: 1;
  }

  /*
    Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
    crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
  */

  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
    ::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }

  /*
    Prevent resizing textareas horizontally by default.
  */

  textarea {
    resize: vertical;
  }

  /*
    Remove the inner padding in Chrome and Safari on macOS.
  */

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /*
    1. Ensure date/time inputs have the same height when empty in iOS Safari.
    2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
  */

  ::-webkit-date-and-time-value {
    min-height: 1lh; /* 1 */
    text-align: inherit; /* 2 */
  }

  /*
    Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
  */

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  /*
    Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
  */

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  /*
    Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
  */

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  /*
    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
  */

  :-moz-ui-invalid {
    box-shadow: none;
  }

  /*
    Correct the inability to style the border radius in iOS Safari.
  */

  button,
  input:where([type='button'], [type='reset'], [type='submit']),
  ::file-selector-button {
    appearance: button;
  }

  /*
    Correct the cursor style of increment and decrement buttons in Safari.
  */

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /*
    Make elements with the HTML hidden attribute stay hidden by default.
  */

  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }

}

/* ---- Токены: светлая тема shadcn (ui-main, new-york) ---- */
@layer base {
  :root {
    --font-sans: 'Golos Text', system-ui, -apple-system, sans-serif;

    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);

    --color-bg: var(--background);
    --color-sur: var(--card);
    --color-line: var(--border);
    --color-line-soft: var(--border);
    --color-t1: var(--foreground);
    --color-t2: var(--muted-foreground);
    --color-t3: var(--ring);

    --color-brand: var(--primary);
    --color-brand-link: var(--foreground);
    --color-brand-strong: var(--primary);
    --color-brand-strong-hover: color-mix(in oklch, var(--primary) 90%, white);
    --color-brown: var(--foreground);

    --color-red: var(--destructive);
    --color-green: oklch(0.527 0.154 150.069);
    --color-amber: oklch(0.666 0.179 58.318);
    --color-blue: oklch(0.488 0.243 264.376);
    --color-violet: oklch(0.541 0.281 293.009);

    --radius-card: 16px;
    --radius-md: calc(var(--radius) * 0.8);
    --radius-sm: calc(var(--radius) * 0.6);

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    /* Блок (карточка, строка реестра) читается целиком: заметная мягкая тень
       и обводка вдвое бледнее обычной линии. */
    --shadow-card: 0 0.5px 1.5px 0 rgb(0 0 0 / 0.048), 0 3px 9px -2px rgb(0 0 0 / 0.064);
    --border-soft: color-mix(in oklch, var(--border) 50%, transparent);
    --shadow-pop: 0 4px 12px rgb(0 0 0 / 0.06);
    --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);

    /* Кривые Emil Kowalski: встроенный ease слишком слабый, ease-in в интерфейсе не используем. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* ---- Шрифт: self-hosted Golos Text (Paratype, OFL), cyrillic + latin ---- */
@layer base {
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/golos-text-cyrillic-400.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/golos-text-cyrillic-500.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/golos-text-cyrillic-600.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/golos-text-cyrillic-700.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/golos-text-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/golos-text-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/golos-text-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/golos-text-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* Оболочка новой страницы: шрифт и цвета. Reset делает preflight выше
     (box-sizing, обнуление margin/padding и рамок, list-style, a, button),
     поэтому дублей здесь не держим — только то, чего preflight не даёт. */
  .tg-page {
    font-family: var(--font-sans);
    color: var(--color-t1);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
  }
  /* preflight v4 намеренно не ставит курсор на кнопках. */
  .tg-page button:not(:disabled) { cursor: pointer; }
}

/* ---- Компоненты (повторяющиеся паттерны макетов) ---- */
@layer components {

  /* Кнопки: shadcn Button */
  .tg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
    color: var(--foreground);
    background: var(--background);
    box-shadow: var(--shadow-xs);
    transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 160ms var(--ease-out);
  }
  .tg-btn:hover { background: var(--accent); color: var(--accent-foreground); }
  .tg-btn:active:not(:disabled) { transform: scale(0.97); }
  .tg-btn:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--shadow-focus); }
  .tg-btn:disabled { opacity: .5; pointer-events: none; }
  .tg-btn--primary {
    color: var(--primary-foreground); background: var(--primary); border-color: transparent; box-shadow: none;
  }
  .tg-btn--primary:hover { background: var(--color-brand-strong-hover); color: var(--primary-foreground); }
  .tg-btn--ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--foreground); }
  .tg-btn--ghost:hover { background: var(--accent); }
  .tg-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }

  /* Карточка */
  .tg-card {
    background: var(--color-sur);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  /* Статусные чипы: 7 ролей (Design Directions, тёплая перекраска) */
  .tg-chip {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: calc(infinity * 1px);
    font-size: 12px; font-weight: 500; line-height: 1;
    padding: 5px 10px;
  }
  .tg-chip--draft    { background: var(--secondary); color: var(--muted-foreground); }
  .tg-chip--wait     { background: color-mix(in oklch, var(--color-blue) 12%, white); color: var(--color-blue); }
  .tg-chip--action   { background: color-mix(in oklch, var(--color-amber) 16%, white); color: var(--color-amber); }
  .tg-chip--progress { background: color-mix(in oklch, var(--color-violet) 12%, white); color: var(--color-violet); }
  .tg-chip--done     { background: color-mix(in oklch, var(--color-green) 14%, white); color: var(--color-green); }
  .tg-chip--declined { background: color-mix(in oklch, var(--color-red) 12%, white); color: var(--color-red); }
  .tg-chip--error    { background: color-mix(in oklch, var(--color-red) 12%, white); color: var(--color-red); }
  /* Старение, не инцидент: «дата рейса прошла» — янтарный по цветовому
     бюджету, красный занят происшествием с документом. */
  .tg-chip--warn     { background: color-mix(in oklch, var(--color-amber) 16%, white); color: var(--color-amber); }

  /* Чипы титулов Т1–Т4 + QR (словарь из ETRN Registry) */
  .tg-title {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 22px; padding: 0 7px;
    border-radius: 8px; font-size: 11px; font-weight: 600;
  }
  .tg-title--done { background: var(--color-brown); color: #fff; }
  /* Шаги заполнения заявки (EzzStepIcons): заполнен — оранжевая заливка, нет — серая обводка. */
  .tg-steps { display: inline-flex; gap: 4px; align-items: center; }
  .tg-steps__icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border); color: var(--color-t2); background: var(--color-sur); }
  .tg-steps__icon--done { border-color: var(--color-amber); background: var(--color-amber); color: #fff; }
  .tg-title--cur  { background: transparent; color: var(--color-brown); box-shadow: inset 0 0 0 1.5px var(--color-brown); }
  .tg-title--off  { background: transparent; color: var(--color-t3); box-shadow: inset 0 0 0 1px var(--color-line); }

  /* Бейдж возраста: 3 порога (спека — возраст вместо календаря) */
  .tg-age        { font-size: 12px; color: var(--color-t2); }
  .tg-age--day    { color: var(--color-amber); font-weight: 500; }
  .tg-age--crit   { color: var(--color-red); font-weight: 600; }

  /* Маркер инцидента: полоса слева + подпись, никогда не заливка */
  .tg-incident {
    position: relative;
  }
  .tg-incident::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 3px; border-radius: 2px; background: var(--color-red);
  }
  .tg-incident__label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--color-red);
  }

  /* Sync-error плашка (Dashboard v6) */
  .tg-sync-warn {
    background: color-mix(in oklch, var(--color-amber) 16%, white); color: var(--color-amber);
    border: 1px solid color-mix(in oklch, var(--color-amber) 16%, white); border-radius: var(--radius-sm);
    padding: 10px 14px; font-size: 13px;
  }

  /* Плашка «Кабинет обновился» (app/release.ts) — тот же янтарный тон */
  .tg-release {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 16px; background: color-mix(in oklch, var(--color-amber) 16%, white); color: var(--color-amber);
    border: 1px solid color-mix(in oklch, var(--color-amber) 16%, white); border-radius: var(--radius-sm);
    padding: 10px 14px; font-size: 13px;
  }

  /* Пустое состояние */
  .tg-empty {
    text-align: center; padding: 48px 24px; color: var(--color-t2); font-size: 14px;
  }

  /* Основная обёртка контента страницы — одна ширина и одни отступы от
     навигации во всех разделах (Главная/ЭТрН/Заявки — эталон макетов).
     Страницам с узким содержимым (визард МЧД) внутренние блоки сужаются
     своими max-width, а не сужением обёртки. */
  .tg-wrap {
    max-width: 1280px; width: 100%; margin: 0 auto;
    padding: 24px 24px 64px;
    display: flex; flex-direction: column; gap: 12px;
  }
  @media (max-width: 720px) { .tg-wrap { padding: 24px 14px 48px; gap: 16px; } }

  /* Серый фон только у ряда фильтров, от меню до края экрана. Этапы остаются на белом. */
  .tg-fbar { padding: 0; background: transparent; }
  .tg-fbar__row {
    --sb: 248px;
    width: calc(100vw - var(--sb));
    height: 40px;
    margin-left: calc((100% - 100vw + var(--sb)) / 2);
    padding: 0 24px;
    box-sizing: border-box;
    background: var(--sidebar);
    align-items: center;
    flex-wrap: nowrap;
  }
  body.lk-sb--collapsed .tg-fbar__row { --sb: 68px; }
  @media (max-width: 900px) { .tg-fbar__row { --sb: 0px; padding: 0 14px; } }
  .tg-fbar__stages { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
  .tg-fbar__stages button { position: relative; border: 0; background: none; padding: 0 0 10px; font: inherit; font-size: 15px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; }
  .tg-fbar__stages button.is-on { color: var(--foreground); }
  .tg-fbar__stages button.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--foreground); }
  .tg-fbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; height: 40px; }
  .tg-fbar__icon, .tg-fbar__add { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--background); color: var(--foreground); font: inherit; font-size: 13px; cursor: pointer; }
  .tg-fbar__icon { width: 30px; justify-content: center; padding: 0; }
  .tg-fbar__drop { position: relative; }
  .tg-fbar__pill { display: inline-flex; align-items: center; gap: 4px; max-width: min(640px, 80vw); height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--background); color: var(--foreground); font: inherit; font-size: 13px; }
  .tg-fbar__pill-main { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
  .tg-fbar__pill span { color: var(--muted-foreground); flex: none; }
  .tg-fbar__pill b { font-weight: 500; background: var(--secondary); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
  .tg-fbar__x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); font-size: 16px; line-height: 1; cursor: pointer; }
  .tg-fbar__x:hover { color: var(--foreground); background: var(--secondary); }
  .tg-fbar__icon.is-open, .tg-fbar__add.is-open, .tg-fbar__pill.is-open { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); }
  .tg-fbar__panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 320px; min-width: 260px; max-width: min(440px, 92vw); max-height: 420px; overflow: auto; background: var(--color-sur); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.12); padding: 6px; box-sizing: border-box; }
  .tg-fbar__find { display: flex; align-items: center; gap: 8px; margin: 4px 6px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
  .tg-fbar__find input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--foreground); }
  .tg-fbar__opt, .tg-fbar__preset { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--foreground); cursor: pointer; }
  .tg-fbar__opt:hover, .tg-fbar__preset:hover { background: var(--secondary); }
  .tg-fbar__opt em { margin-left: auto; font-style: normal; font-size: 12px; text-decoration: underline; color: var(--muted-foreground); visibility: hidden; }
  .tg-fbar__opt:hover em { visibility: visible; }
  .tg-fbar__box { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; display: grid; place-items: center; font-size: 11px; flex: none; }
  .tg-fbar__box.is-on { background: var(--color-green); border-color: var(--color-green); color: #fff; }
  .tg-fbar__none { margin: 8px 10px; color: var(--muted-foreground); font-size: 13px; }
  .tg-fbar__panel--date { width: max-content; min-width: 260px; max-width: min(760px, 92vw); display: flex; align-items: flex-start; gap: 8px; }
  .tg-fbar__presets { flex: none; width: 180px; display: flex; flex-direction: column; }
  .tg-fbar__preset { justify-content: flex-start; text-align: left; }
  .tg-fbar__cal { width: auto; min-width: 420px; flex: none; }
  .tg-fbar__cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 0; }
  .tg-fbar__cal-nav button { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); cursor: pointer; }
  .tg-fbar__months { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px; }
  .tg-fbar__months h3 { margin: 0 0 8px; text-align: center; font-size: 14px; text-transform: capitalize; }
  .tg-fbar__week, .tg-fbar__days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
  .tg-fbar__week { font-size: 11px; color: var(--muted-foreground); margin-bottom: 4px; }
  .tg-fbar__days button { height: 32px; border: 0; background: none; border-radius: 50%; font: inherit; cursor: pointer; }
  .tg-fbar__days button.is-range { background: var(--secondary); border-radius: 0; }
  .tg-fbar__days button.is-on { background: var(--foreground); color: var(--background); box-shadow: none; }
  .tg-fbar__days button:disabled { cursor: default; }
  @media (max-width: 720px) { .tg-fbar__months { grid-template-columns: 1fr; } }

  /* Заголовок раздела внутри .tg-wrap */
  .tg-h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; margin: 0; padding-top: 0; }
  .tg-lead { color: var(--color-t2); font-size: 14px; margin: -12px 0 0; max-width: 680px; line-height: 1.5; }

  /* Бейдж компании: к какой организации относится запись. Контур, а не
     заливка, — бейдж уточняет строку, а не спорит с чипом статуса.
     Длинные названия обрезаются — бейдж уточняет строку, а не занимает её. */
  .tg-org {
    flex: none; display: inline-flex; align-items: center;
    max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; font-weight: 500; line-height: 1.6;
    padding: 0 6px; border-radius: calc(infinity * 1px);
    border: 1px solid var(--color-line); color: var(--color-t2);
  }
  /* Запись, открытая всем компаниям (shared_all): та же форма, тише цвет. */
  .tg-org--all { color: var(--color-t2); }

  /* Sticky topbar (56px, blur — Dashboard v6) */
  .tg-topbar {
    position: sticky; top: 0;
    display: flex; align-items: center; gap: 12px;
    height: 56px; padding: 0 24px;
    z-index: 100;
    background: color-mix(in oklch, var(--background) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-line-soft);
  }
  .tg-topbar--scrolls { position: relative; }

  /* Диалог форм справочников (native <dialog>, единые стили вместо
     условной печати .lk-dlg в каждом form-dialog компоненте) */
  .tg-dlg {
    border: 0; border-radius: 16px; padding: 0;
    width: min(720px, 94vw);
    /* Центрирование модального <dialog> держит браузерное `margin: auto`, а
       preflight обнуляет margin всем элементам подряд — без этой строки диалог
       прижимается к левому верхнему углу. Не `inset`/`transform`: у нативного
       dialog auto-margin считается от top layer и сам ужимает высокий диалог
       под max-height, чего позиционирование по центру трансформом не делает. */
    margin: auto;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
    color: var(--color-t1); background: var(--color-sur);
    font-family: var(--font-sans); font-size: 14px;
  }
  .tg-dlg::backdrop { background: rgb(0 0 0 / 0.42); }

  /* Дровер быстрого просмотра справочника: клик по строке — не редактирование,
     а чтение с копированием значений (DirDrawer.vue). Backdrop как у .tg-dlg,
     сама панель выезжает справа и стоит поверх него — не <dialog>, потому что
     выезд сбоку на весь экран центрирующая логика .tg-dlg не даёт бесплатно. */
  .tg-drawer-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: rgb(0 0 0 / 0.42);
    opacity: 0; pointer-events: none;
    transition: opacity 180ms var(--ease-out);
  }
  .tg-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .tg-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
    width: min(420px, 94vw);
    background: var(--color-sur);
    box-shadow: -8px 0 24px rgb(0 0 0 / 0.06);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 220ms var(--ease-drawer);
    font-family: var(--font-sans); color: var(--color-t1);
  }
  .tg-drawer.is-open { transform: none; }
  .tg-drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--color-line-soft); flex: none; }
  .tg-drawer__title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; word-break: break-word; }
  .tg-drawer__subtitle { margin: 4px 0 0; font-size: 13px; color: var(--color-t2); }
  .tg-drawer__close { flex: none; width: 32px; height: 32px; border-radius: calc(infinity * 1px); border: 0; background: var(--color-bg); color: var(--color-t2); font-size: 14px; cursor: pointer; }
  .tg-drawer__close:hover { background: var(--color-line-soft); color: var(--color-t1); }
  .tg-drawer__body { flex: 1; overflow: auto; padding: 8px 22px 24px; }
  .tg-drawer__heading { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-t2); margin: 20px 0 6px; }
  .tg-drawer__heading:first-child { margin-top: 14px; }
  .tg-drawer__row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-line-soft); }
  .tg-drawer__row:last-child { border-bottom: 0; }
  .tg-drawer__label { flex: 0 0 132px; font-size: 12px; color: var(--color-t2); }
  .tg-drawer__value { flex: 1; min-width: 0; font-size: 13.5px; word-break: break-word; }
  .tg-drawer__value.is-empty { color: var(--color-t2); }
  .tg-drawer__copy {
    flex: none; width: 26px; height: 26px; border-radius: 8px; border: 0;
    background: transparent; color: var(--color-t2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .tg-drawer__copy:hover { background: var(--color-bg); color: var(--color-t1); }
  .tg-drawer__copy.is-copied { color: var(--color-green); }
  /* Строки справочника, у которых есть чем открыть дровер: курсор — единственная
     подсказка, что по ним можно кликнуть (preflight его не ставит нигде). */
  [data-drawer] { cursor: pointer; }
  @media (max-width: 480px) {
    .tg-drawer__label { flex-basis: 108px; }
    .tg-drawer { width: 100vw; }
  }
  .tg-dlg .dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
  .tg-dlg .dlg-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
  .tg-dlg .dlg-body { padding: 6px 24px 8px; max-height: 70vh; overflow: auto; }
  .tg-dlg .dlg-foot { display: flex; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border); justify-content: flex-end; }
  .tg-dlg fieldset { border: 0; padding: 0; margin: 14px 0 0; }
  .tg-dlg legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 10px; }
  .tg-dlg .f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
  .tg-dlg .f[hidden] { display: none; }
  .tg-dlg .f label { font-size: 12px; color: var(--color-t2); margin: 0; }
  .tg-dlg .f label.req::after { content: " *"; color: var(--color-brand-strong); }
  .tg-dlg .f input, .tg-dlg .f select, .tg-dlg .f textarea {
    font: inherit; border: 0; border-radius: 12px; padding: 11px 14px;
    background: var(--color-sur); box-shadow: inset 0 0 0 1px var(--color-line);
    width: 100%; margin: 0; color: var(--color-t1);
  }
  .tg-dlg .f input:focus, .tg-dlg .f select:focus, .tg-dlg .f textarea:focus {
    outline: none; box-shadow: inset 0 0 0 1.5px var(--color-brand);
  }
  .tg-dlg .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .tg-dlg .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
  .tg-dlg .hint { font-size: 12px; color: var(--color-t2); margin: -6px 0 12px; line-height: 1.45; }
  /* Форма из документа: плашка-источник и пустые обязательные поля, которых в нём не было. */
  .tg-dlg .switch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; user-select: none; font-size: 14px; }
  .tg-dlg .switch input { display: none; }
  .tg-dlg .switch i { width: 40px; height: 22px; border-radius: 11px; background: var(--color-line); position: relative; transition: background 160ms var(--ease-out); flex: none; }
  .tg-dlg .switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 160ms var(--ease-out); }
  .tg-dlg .switch input:checked + i { background: var(--color-brand); }
  .tg-dlg .switch input:checked + i::after { transform: translateX(18px); }
  /* Радио-плитки «Доступен: все компании / конкретная» (панель добавления макетов) */
  .tg-dlg .scope { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; cursor: pointer; font-size: 14px; box-shadow: inset 0 0 0 1px var(--color-line); margin-bottom: 6px; }
  .tg-dlg .scope input { display: none; }
  .tg-dlg .scope i { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1.5px solid var(--color-t3); background: #fff; }
  .tg-dlg .scope:has(input:checked) { background: var(--color-bg); box-shadow: inset 0 0 0 1.5px var(--color-brown); }
  .tg-dlg .scope:has(input:checked) i { border: 5px solid var(--color-brown); }
  @media (max-width: 800px) { .tg-dlg .g2, .tg-dlg .g3 { grid-template-columns: 1fr; } }

  /* Поле формы дизайн-системы (страницы вне .tg-dlg — профиль и т. п.) */
  .tg-input {
    display: block; width: 100%; min-width: 0;
    height: 36px; font: inherit; font-size: 14px; color: var(--foreground);
    border: 1px solid var(--input); border-radius: var(--radius-md); padding: 0 12px;
    background: transparent; box-shadow: var(--shadow-xs);
  }
  .tg-input:focus { outline: none; border-color: var(--ring); box-shadow: var(--shadow-focus); }
  .tg-input::placeholder { color: var(--muted-foreground); }
  textarea.tg-input { height: auto; padding: 8px 12px; }

  /* Строчное меню «⋯» реестров справочников (DirRowMenu.vue) и шапки карточки ЭЗЗ. */
  .tg-menu {
    position: absolute; right: 16px; top: calc(100% - 8px); z-index: 5;
    background: var(--color-sur); border-radius: var(--radius);
    box-shadow: var(--shadow-pop), 0 0 0 1px var(--border);
    padding: 4px; display: flex; flex-direction: column; min-width: 240px;
    transform-origin: top right;
    animation: tg-pop 150ms var(--ease-out);
  }
  .tg-menu button, .tg-menu a { text-align: left; font-size: 13px; padding: 9px 12px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; color: var(--color-t1); width: 100%; display: block; }
  .tg-menu button:hover, .tg-menu a:hover { background: var(--color-bg); text-decoration: none; }
  .tg-menu .danger { color: var(--color-red); }
  .tg-menu .danger:hover { background: color-mix(in oklch, var(--color-red) 12%, white); }
  .tg-menu hr { height: 1px; border: 0; background: var(--border); margin: 4px 6px; }
  .tg-menu form { margin: 0; }

  /* Поиск-pill в шапке реестра */
  .tg-search {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid var(--input); border-radius: var(--radius-md);
    padding: 0 12px; height: 36px; width: 300px; max-width: 100%;
    box-shadow: var(--shadow-xs);
  }
  .tg-search svg { flex: none; color: var(--color-t2); }
  .tg-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--color-t1); outline: none; }
  .tg-search input::placeholder { color: var(--color-t2); }

  /* Pill-переключатель (фильтр компаний и т. п.) */
  .tg-pills { display: flex; gap: 2px; background: var(--muted); border-radius: 6px; padding: 3px; }
  .tg-pills button { white-space: nowrap; font-size: 13px; font-weight: 500; height: 32px; padding: 0 12px; border-radius: 4px; border: 0; cursor: pointer; background: transparent; color: var(--muted-foreground); }
  .tg-pills button.on { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
  .tg-pills button:active { transform: scale(0.97); }

  /* Госномер (JetBrains-подобная моноширинная плашка макета — системный mono) */
  .tg-plate { font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

  /* Модалка-оверлей */
  .tg-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgb(0 0 0 / 0.42);
    display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  .tg-modal {
    background: var(--color-sur); border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
    max-width: 640px; width: 100%; max-height: 90vh; overflow: auto;
  }

  /* ══ Реестр ЭТрН ═══════════════════════════════════════════════════════
     Визуальный слой страницы Modules/TransportDocuments/Http/etrnRegistry.php
     (макет TrexGo ETRN Registry). Раньше — 537 строк инлайна в самой странице:
     неслоёные, они били дизайн-систему и держали собственный набор токенов.
     Здесь правила в @layer components наравне с остальными компонентами, а
     собственные короткие имена (.card, .wrap, .pill, .badge, .c-*, .qr-*)
     префиксованы .tg-etrn-*: без префикса они задели бы восемь страниц, где
     те же имена значат другое (archive, counterparties, formView, login,
     mchd, ezzCard, settings). */

  /* Базовая типографика страницы: остальное (шрифт, цвет, фон) даёт .tg-page. */
  .tg-etrn { font-size: 14px; line-height: 1.5; min-height: 100dvh; }

  /* Плашка-подсказка над списком */
  .tg-etrn__alert {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: color-mix(in oklch, var(--primary) 8%, white); border: 1px solid color-mix(in oklch, var(--primary) 20%, transparent);
    border-left: 3px solid var(--color-brand);
    border-radius: 12px; margin-bottom: 16px; font-size: 13px;
  }
  .tg-etrn__alert strong { color: var(--color-brand-strong); font-weight: 600; }
  .tg-etrn__alert span { color: var(--muted-foreground); }
  .tg-etrn__alert-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-brand-strong); cursor: pointer; flex-shrink: 0; }

  /* Подписано, ждём Платформу: синяя кнопка вместо оранжевой — оранжевый в этой
     системе означает «твой ход», а ход уже сделан, работа идёт без тебя. */
  .tg-btn.tg-etrn--busy {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--color-blue); border-color: color-mix(in srgb, var(--color-blue) 35%, transparent);
    background: color-mix(in srgb, var(--color-blue) 7%, var(--color-sur));
    /* Кнопка disabled, но не бледная до нечитаемости: она здесь не «выключена
       за ненадобностью», а показывает состояние, и её нужно прочесть. */
    opacity: 1; cursor: default;
  }
  .tg-etrn__busy-spin {
    width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid color-mix(in srgb, var(--color-blue) 25%, transparent);
    border-top-color: var(--color-blue);
    animation: tg-spin .8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) { .tg-etrn__busy-spin { animation-duration: 2.4s; } }

  /* На узком экране подвал модалки — колонка, и кнопка занимает всю ширину.
     На широком он становится строкой (@media ниже), и width:100% у двух
     кнопок переполнял его: при justify-content:flex-end лишнее выдавливалось
     влево, и «Отмена» уезжала за пределы модалки. */
  .tg-etrn__btn-full { width: 100%; justify-content: center; }
  @media (min-width: 520px) {
    .tg-etrn__m-foot .tg-etrn__btn-full { width: auto; }
  }

  /* Пустой результат фильтрации */
  .tg-etrn__empty { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px; text-align: center; }
  .tg-etrn__empty.on { display: flex; }
  .tg-etrn__empty h3 { font-size: 16px; font-weight: 700; }
  .tg-etrn__empty p  { font-size: 13px; color: var(--color-t2); max-width: 280px; }

  /* Модалки реестра: снизу вверх на телефоне, по центру на десктопе */
  .tg-etrn__ov {
    position: fixed; inset: 0; z-index: 200;
    background: rgb(0 0 0 / .4); backdrop-filter: blur(4px);
    display: none; align-items: flex-end; justify-content: center;
  }
  .tg-etrn__ov.open { display: flex; animation: tg-etrn-fade .16s ease; }
  .tg-etrn__modal {
    background: var(--color-sur); border-radius: 16px 16px 0 0;
    width: 100%; max-width: 480px;
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.06);
    animation: tg-etrn-up .2s cubic-bezier(.2,.8,.4,1);
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }
  @media (min-width: 520px) {
    .tg-etrn__ov { align-items: center; padding: 16px; }
    .tg-etrn__modal { border-radius: 14px; padding-bottom: 0; }
  }
  .tg-etrn__m-drag { width: 32px; height: 3px; border-radius: 2px; background: var(--color-line); margin: 10px auto 0; }
  .tg-etrn__m-head { padding: 14px 20px 12px; border-bottom: 1px solid var(--color-line-soft); }
  .tg-etrn__m-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
  .tg-etrn__m-head p  { font-size: 12px; color: var(--color-t2); margin-top: 2px; }
  .tg-etrn__m-body { padding: 14px 20px; }
  .tg-etrn__m-foot {
    padding: 10px 20px 14px; border-top: 1px solid var(--color-line-soft);
    display: flex; flex-direction: column; gap: 6px;
    background: var(--color-bg); border-radius: 0 0 16px 16px;
  }
  @media (min-width: 520px) {
    .tg-etrn__m-foot { flex-direction: row; justify-content: flex-end; border-radius: 0 0 14px 14px; }
    .tg-etrn__m-foot .tg-btn { flex: none; }
  }

  /* Модалка QR: одна геометрия на все состояния кода — загрузка, готовый QR и
     пустой ответ занимают тот же квадрат в том же месте. Модалка не прыгает, а
     человек с телефоном у обочины смотрит всегда в одну точку. Состояния
     доступа и связи (нет прав, сеть) рисуются маленькой плашкой: покажи «нет
     прав» в форме пустого QR — и человек будет ждать код. */
  #ovQr .tg-etrn__m-body { max-height: calc(100dvh - 210px); overflow-y: auto; }
  .tg-etrn__qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 4px 0 2px; }
  .tg-etrn__qr-plate {
    width: 100%; max-width: 320px; aspect-ratio: 1 / 1;
    background: #fff; border: 1px solid var(--color-line); border-radius: 12px;
    /* Собственная зона тишины: Платформа может отдать код впритык к краю,
       а фон страницы вокруг чёрных модулей режет контраст для сканера. */
    padding: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .tg-etrn__qr-plate img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
  /* Кода нет — белое поле не занимаем, оно зарезервировано под настоящий код. */
  .tg-etrn__qr-idle { background: var(--color-bg); border-style: dashed; border-color: var(--color-line); padding: 50px; }
  /* Ожидание кода: лоадер стоит на месте самого кода, а не отдельной строкой —
     ждать нужно именно этот прямоугольник. Заглушка под ним гаснет, чтобы её
     не приняли за код, но рамку и размер сохраняет: когда код приедет, плитка
     не прыгнет. */
  .tg-etrn__qr-idle.waiting { position: relative; }
  .tg-etrn__qr-spin {
    position: absolute; width: 30px; height: 30px; border-radius: 50%;
    /* Синий, а не брендовый оранжевый: оранжевый в этой системе означает
       «твой ход», а здесь ход как раз не наш — мы ждём Платформу. Синий уже
       закреплён за QR (.tg-title--qr). */
    border: 3px solid var(--color-line); border-top-color: var(--color-blue);
    animation: tg-spin .8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) { .tg-etrn__qr-spin { animation-duration: 2.4s; } }
  .tg-etrn__qr-tile {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--color-bg); border: 1px solid var(--color-line-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-t2); flex-shrink: 0;
  }
  /* Красный только там, где он ведёт к действию: переключить компанию, повторить
     запрос. Пустой ответ Платформы и выключенный флаг красными не делаем —
     ничего не сломано и вины пользователя нет. */
  .tg-etrn__qr-tile.bad { background: color-mix(in oklch, var(--color-red) 12%, white); border-color: color-mix(in oklch, var(--color-red) 12%, white); color: var(--color-red); }
  .tg-etrn__qr-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--color-t1); }
  .tg-etrn__qr-title.bad { color: var(--color-red); }
  .tg-etrn__qr-text { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); max-width: 300px; }
  .tg-etrn__qr-hint { font-size: 11px; line-height: 1.4; color: var(--color-t2); max-width: 300px; }
  /* Код ошибки и HTTP нужны для разбора, но не должны встречать перевозчика
     на дороге. Нативный <details> даёт клавиатуру и скринридер без JS. */
  .tg-etrn__qr-tech { width: 100%; max-width: 320px; text-align: left; margin-top: 2px; }
  .tg-etrn__qr-tech summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 2px; font-size: 11px; color: var(--color-t2); transition: color .12s;
  }
  .tg-etrn__qr-tech summary::-webkit-details-marker { display: none; }
  .tg-etrn__qr-tech summary::after { content: '⌄'; font-size: 12px; line-height: 0; transition: transform .15s; }
  .tg-etrn__qr-tech[open] summary::after { transform: rotate(180deg); }
  .tg-etrn__qr-tech summary:hover { color: var(--muted-foreground); }
  .tg-etrn__qr-tech summary:focus-visible { outline: 2px solid color-mix(in oklch, var(--primary) 22%, transparent); outline-offset: 2px; border-radius: 4px; }
  .tg-etrn__qr-tech-body {
    font-size: 11px; line-height: 1.55; color: var(--color-t2);
    background: var(--color-bg); border: 1px solid var(--color-line-soft);
    border-radius: 6px; padding: 8px 10px; word-break: break-word;
  }

  /* Тост — один на приложение (shared/toast/Toast.vue) */
  .tg-toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: var(--color-t1); color: #fff; border-radius: 8px; padding: 9px 16px;
    font-size: 13px; font-weight: 500; box-shadow: var(--shadow-pop), 0 0 0 1px var(--border);
    opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
    white-space: nowrap; z-index: 999;
  }
  .tg-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ── Общие карточки подписания: сертификат (шаг 1) и доверенность (шаг 2).
     Одни и те же классы на всех страницах (реестр ЭТрН, карточка ЭЗЗ, МЧД):
     подписант должен видеть один и тот же экран, где бы ни подписывал.
     Раньше у каждой страницы была своя вёрстка списка, и они разошлись. */
  .tg-sign__tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--color-line-soft); }
  .tg-sign__tab {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--color-t2); cursor: pointer;
  }
  .tg-sign__tab[aria-selected="true"] { color: var(--color-t1); border-bottom-color: var(--color-brand); }
  /* Госключ — задел: вкладка видна, чтобы способ подписи не выглядел
     единственно возможным, но подписать так пока нельзя. */
  .tg-sign__tab[disabled] { cursor: default; opacity: .5; }
  .tg-sign__tab--soon { font-size: 10px; font-weight: 500; margin-left: 6px; opacity: .8; }

  .tg-sign__list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }

  .tg-sign__card {
    appearance: none; width: 100%; font: inherit; text-align: left;
    border: 1.5px solid var(--color-line); border-radius: 12px; padding: 14px 16px;
    cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    background: var(--color-sur); display: flex; align-items: flex-start; gap: 12px;
  }
  .tg-sign__card:hover { border-color: var(--color-brand); }
  .tg-sign__card.selected { border-color: var(--color-brand); background: color-mix(in oklch, var(--primary) 8%, transparent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 22%, transparent); }
  .tg-sign__card--off { opacity: .72; }

  /* Индикатор слева — как радиокнопка у Контура, но у нас он закрашен сразу:
     подобранный вариант уже выбран, клик нужен только чтобы сменить его. */
  .tg-sign__radio {
    flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
    border: 2px solid var(--color-line); background: var(--color-sur); position: relative;
  }
  .tg-sign__card.selected .tg-sign__radio { border-color: var(--color-brand); }
  .tg-sign__card.selected .tg-sign__radio::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-brand);
  }

  .tg-sign__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
  .tg-sign__name { font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--color-t1); }
  .tg-sign__badge {
    align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--color-brand-strong);
    background: color-mix(in oklch, var(--primary) 12%, transparent); border-radius: 999px; padding: 2px 8px;
  }
  .tg-sign__warn { font-size: 12px; color: var(--color-red); }

  /* Подписанные пары «поле — значение»: подписант читает карточку, а не
     разбирает слитную строку вида «ИНН: … · Отпечаток: …». */
  .tg-sign__rows { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
  .tg-sign__row { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; }
  .tg-sign__key { flex: none; width: 124px; color: var(--color-t2); }
  .tg-sign__val { color: var(--color-t1); min-width: 0; overflow-wrap: anywhere; }
  .tg-sign__uid { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
  .tg-sign__powers { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; list-style: disc; }

  .tg-sign__more {
    align-self: flex-start; appearance: none; background: none; border: 0; padding: 2px 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--color-brand-strong); cursor: pointer;
  }
  .tg-sign__details { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--color-line-soft); }
  .tg-sign__details[hidden] { display: none; }
  .tg-sign__links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; padding-top: 4px; }
  .tg-sign__links a { color: var(--color-brand-strong); font-weight: 600; }

  /* Строка над списком: почему шаг 1 последний — нашлась доверенность или
     подпись совпала с подписантом документа. Кнопка «Подписать» без неё не
     объясняла, на каком основании подпись уйдёт. */
  .tg-sign__hint {
    font-size: 13px; line-height: 1.45; color: var(--color-t1);
    background: color-mix(in oklch, var(--primary) 10%, transparent); border-radius: 8px;
    padding: 8px 10px; margin-bottom: 10px;
  }
  .tg-sign__hint[hidden] { display: none; }

  /* Свёрнутый список сертификатов: на шаге 1 видна одна предвыбранная карточка,
     остальные — за ссылкой «Показать все». Простыня из всего хранилища мешала
     увидеть, что подпись уже подобрана. */
  .tg-sign__rest { display: flex; flex-direction: column; gap: 10px; }
  .tg-sign__rest[hidden] { display: none; }
  .tg-sign__toggle {
    appearance: none; background: none; border: 0; padding: 4px 0; font: inherit;
    font-size: 13px; font-weight: 600; color: var(--color-brand-strong); cursor: pointer;
    align-self: flex-start;
  }

  /* Пустой список доверенностей — не тупик: подписант, не совпавший с
     документом, «лично» подписать не может, поэтому здесь всегда есть выход. */
  .tg-sign__empty {
    border: 1px dashed var(--color-line); border-radius: 10px;
    padding: 16px; text-align: center;
  }
  .tg-sign__empty-title { font-size: 14px; font-weight: 700; color: var(--color-t1); }
  .tg-sign__empty-text { font-size: 13px; color: var(--color-t2); margin-top: 6px; }
  .tg-sign__add {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--color-line-soft);
  }
  .tg-sign__add-btn {
    appearance: none; background: none; border: 0; padding: 0; font: inherit;
    font-size: 14px; font-weight: 600; color: var(--color-brand-strong); cursor: pointer;
  }
  .tg-sign__issue { font-size: 13px; color: var(--color-t2); text-decoration: underline; }

  /* Хвост — поля, уехавшие с удалённого экрана подтверждения: замечания при
     приёмке и, для Т3 без данных в проекции, места и масса. Живёт под списком
     того шага, который в этом потоке последний. */
  .tg-sign__tail { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--color-line-soft); }
  .tg-sign__tail[hidden] { display: none; }
  .tg-sign__tail-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .tg-sign__tail-label { font-size: 13px; color: var(--color-t2); }
  .tg-sign__tail-input {
    width: 100%; font: inherit; padding: 8px 10px; resize: vertical;
    border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-sur);
  }
  .tg-sign__tail-input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }

  /* Вкладка «Электронная подпись Госключ» и окно ожидания подтверждения:
     профиль человека (СНИЛС, ФИО как на Госуслугах), тип подписи, доверенность. */
  .tg-sign__gk { display: flex; flex-direction: column; gap: 12px; }
  .tg-sign__gk-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-t2); }
  .tg-sign__gk-form { display: flex; flex-direction: column; gap: 10px; }
  .tg-sign__gk-row { display: flex; flex-direction: column; gap: 6px; }
  .tg-sign__gk-label { font-size: 13px; color: var(--color-t2); }
  .tg-sign__gk-input {
    width: 100%; font: inherit; padding: 8px 10px;
    border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-sur);
  }
  .tg-sign__gk-input:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }
  .tg-sign__gk-who {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1.5px solid var(--color-line); border-radius: 12px; padding: 12px 14px; background: var(--color-sur);
  }
  .tg-sign__gk-name { font-size: 15px; font-weight: 700; color: var(--color-t1); }
  .tg-sign__gk-meta { font-size: 12px; color: var(--color-t2); margin-top: 2px; }
  .tg-sign__gk-warn { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-red); }
  .tg-sign__gk-msg { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--color-t1); }
  .tg-sign__gk-timer {
    font-size: 36px; font-weight: 700; letter-spacing: -.5px; text-align: center;
    color: var(--color-brand-strong); padding: 10px 0; font-variant-numeric: tabular-nums;
  }

  @media (max-width: 519px) {
    .tg-sign__row { flex-direction: column; gap: 0; }
    .tg-sign__key { width: auto; font-size: 11px; }
  }
}

/* ---- Сайдбар (общий каркас, TrexGo Sidebar из макетов) ----
   Классы самодостаточны: работают и на старых страницах без Tailwind-разметки.
   ВЕСЬ блок — ВНЕ @layer: страницы со своим встроенным CSS держат неслоёный
   reset (`*{margin:0;padding:0}`), который побеждает любые слоёные правила
   независимо от специфичности — в @layer у сайдбара обнулялись отступы. */
body { padding-left: 248px; }
body.lk-sb--collapsed { padding-left: 68px; }
@media (max-width: 900px) {
  body, body.lk-sb--collapsed { padding-left: 0; padding-top: 52px; }
}
/* Страницы без сайдбара (вход, сервис mhd.trexgo.ru): отступ под меню не нужен. */
body.tg-page--bare { padding-left: 0; padding-top: 0; }

  .lk-sb {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: 248px; display: flex; flex-direction: column;
    background: var(--sidebar); border-right: 1px solid var(--sidebar-border); color: var(--sidebar-foreground);
    font-family: var(--font-sans); font-size: 14px; line-height: 1.4;
    transition: width 200ms var(--ease-out); overflow: visible;
  }
  body.lk-sb--collapsed .lk-sb { width: 68px; }
  body.lk-sb--collapsed .lk-sb__wide { display: none !important; }

  .lk-sb__org { margin: 6px 12px 14px; position: relative; flex: none; }
  .lk-sb__org summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-sur); cursor: pointer; transition: background .15s ease; }
  body.lk-sb--collapsed .lk-sb__org summary { padding: 5px; justify-content: center; }
  .lk-sb__org summary::-webkit-details-marker { display: none; }
  .lk-sb__org summary:hover, .lk-sb__org[open] summary { background: var(--color-bg); }
  .lk-sb__av { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: var(--color-brown); }
  .lk-sb__av--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
  .lk-sb__org-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
  .lk-sb__org-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lk-sb__org-inn { font-size: 11px; color: var(--color-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lk-caret { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--muted-foreground); transition: transform 160ms var(--ease-out); }
  .lk-sb__org[open] .lk-caret { transform: rotate(180deg); }
  .lk-sb__org-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--color-sur); border-radius: var(--radius); box-shadow: var(--shadow-pop), 0 0 0 1px var(--border); padding: 4px; display: flex; flex-direction: column; gap: 2px; transform-origin: top center; animation: tg-pop 150ms var(--ease-out); }
  body.lk-sb--collapsed .lk-sb__org-list { right: auto; width: 260px; }
  .lk-sb__org-list button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; cursor: pointer; }
  .lk-sb__org-list button:hover { background: var(--color-bg); }
  .lk-sb__org-list button.active { background: var(--color-bg); }
  .lk-sb__org-list button.active .lk-sb__org-name { font-weight: 600; }
  .lk-sb__check { margin-left: auto; color: var(--color-brand-strong); font-weight: 700; visibility: hidden; }
  .lk-sb__org-list button.active .lk-sb__check { visibility: visible; }

  .lk-sb__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 12px; display: flex; flex-direction: column; gap: 18px; }
  .lk-sb__group { display: flex; flex-direction: column; gap: 2px; }
  .lk-sb__label { font-size: 11px; font-weight: 600; color: var(--color-t2); letter-spacing: 0.08em; text-transform: uppercase; padding: 0 12px 6px; white-space: nowrap; }
  body.lk-sb--collapsed .lk-sb__label { padding: 0; height: 1px; background: var(--border); margin: 0 12px 6px; overflow: hidden; text-indent: -9999px; }
  .lk-sb__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--muted-foreground); font-size: 14px; font-weight: 500; text-decoration: none; position: relative; transition: background 160ms var(--ease-out), color 160ms var(--ease-out); }
  body.lk-sb--collapsed .lk-sb__item { padding: 10px 0; justify-content: center; }
  .lk-sb__item svg { flex: none; width: 20px; height: 20px; }
  .lk-sb__item:hover { color: var(--foreground); }
  .lk-sb__item.active, .lk-sb__item.active:hover { background: oklch(0.94 0 0); color: var(--foreground); font-weight: 500; }
  .lk-sb__item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  button.lk-sb__item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
  .lk-sb__caret { margin-left: auto; display: inline-flex; color: var(--muted-foreground); transition: transform 160ms var(--ease-out); }
  .lk-sb__caret.is-on { transform: rotate(180deg); }
  .lk-sb__caret svg { width: 16px; height: 16px; }
  .lk-sb__sub { display: flex; flex-direction: column; gap: 2px; }
  .lk-sb__sub .lk-sb__item { padding-left: 42px; }
  body.lk-sb--collapsed .lk-sb__sub { display: none; }
  .lk-sb__org--top { margin: 12px 12px 8px; }
  .lk-sb__badge { flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; line-height: 1; background: var(--secondary); color: var(--foreground); }
  .lk-sb__badge.hot, .lk-sb__item.active .lk-sb__badge.hot { background: var(--primary); color: var(--primary-foreground); }
  .lk-sb__dot { display: none; }
  body.lk-sb--collapsed .lk-sb__dot { display: flex; position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: calc(infinity * 1px); background: var(--color-brand-strong); color: #fff; font-size: 9px; font-weight: 700; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--color-sur); }

  .lk-sb__foot { flex: none; border-top: 1px solid var(--border); padding: 10px 12px 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  body.lk-sb--collapsed .lk-sb__foot { padding: 10px 12px; flex-direction: column; }
  .lk-sb__sync { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-t2); min-width: 0; }
  .lk-sb__sync i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); animation: tg-pulse 2s ease infinite; }
  .lk-sb__sync i.stale { background: var(--color-amber); animation: none; }
  .lk-sb__sync span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lk-sb__collapse { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--color-t2); cursor: pointer; font-size: 12px; transition: background .15s ease; }
  .lk-sb__collapse:hover { background: var(--color-bg); }
  .lk-sb__av--user { width: 32px; height: 32px; border-radius: 50%; background: var(--secondary); color: var(--foreground); font-weight: 600; }
  /* Топбар оболочки Vue: название раздела и контекст компании справа. */
  .lk-topbar__search { position: relative; flex: 1; min-width: 0; max-width: 520px; }
  .lk-topbar__search .tg-search { width: 100%; }
  .lk-topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
  .lk-topbar__hits { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--color-sur); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-pop), 0 0 0 1px var(--border); padding: 4px; max-height: 360px; overflow: auto; }
  .lk-topbar__hit, .lk-topbar__hit-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 4px; padding: 8px 10px; font: inherit; color: var(--foreground); cursor: pointer; }
  .lk-topbar__hit:hover { background: var(--accent); }
  .lk-topbar__hit-empty { color: var(--muted-foreground); cursor: default; }
  .lk-topbar__hit-group { font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
  .lk-topbar__hit-title { font-size: 14px; font-weight: 600; }
  .lk-topbar__hit-hint { font-size: 12px; color: var(--muted-foreground); }
  .lk-topbar__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); cursor: default; }
  .lk-topbar__user { position: relative; margin-left: 0; flex: none; }
  .lk-topbar__user-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--background); color: var(--foreground); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
  .lk-topbar__user-name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lk-topbar__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; background: var(--color-sur); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-pop), 0 0 0 1px var(--border); padding: 4px; display: flex; flex-direction: column; }
  .lk-topbar__menu-mail { padding: 8px 10px 6px; font-size: 12px; color: var(--muted-foreground); }
  .lk-topbar__menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--foreground); text-decoration: none; cursor: pointer; }
  .lk-topbar__menu-item:hover { background: var(--accent); }
  .lk-sb__top { display: none; }
  @media (max-width: 900px) {
    body, body.lk-sb--collapsed { padding-left: 0; padding-top: 52px; }
    .lk-sb, body.lk-sb--collapsed .lk-sb { width: 248px; transform: translateX(-100%); transition: transform 180ms var(--ease-out); }
    body.lk-sb--open .lk-sb { transform: none; box-shadow: 0 0 40px rgb(0 0 0 / .25); }
    body.lk-sb--collapsed .lk-sb__wide { display: flex !important; }
    body.lk-sb--collapsed .lk-sb__sub { display: flex; }
    body.lk-sb--collapsed .lk-sb__label { height: auto; background: none; text-indent: 0; padding: 0 12px 6px; overflow: visible; }
    .lk-sb__collapse { display: none; }
    .lk-sb__top { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 52px; padding: 0 14px; background: var(--color-sur); border-bottom: 1px solid var(--color-line-soft); z-index: 55; font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--color-t1); }
    .lk-sb__top button { border: 0; background: none; padding: 6px; cursor: pointer; display: grid; place-items: center; color: var(--color-t1); }
    .lk-sb__scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .42); z-index: 58; display: none; }
    body.lk-sb--open .lk-sb__scrim { display: block; }
  }

/* ---- Переходы между страницами кабинета ----
   Кабинет — многостраничный (каждый раздел отдаёт PHP), и при обычном переходе
   браузер перерисовывает всё окно: левое меню мигало вместе с контентом.
   Современный способ для MPA — межстраничные View Transitions: браузер снимает
   кадр до и после, а элементы с одинаковым view-transition-name (у нас сайдбар)
   переносятся из старого кадра в новый и визуально не перерисовываются.
   Меняется только область контента. Ветка НЕ вне @layer намеренно: @view-transition
   внутри @layer не работает. Браузеры без поддержки просто переходят как раньше. */
@view-transition { navigation: auto; }

.lk-sb { view-transition-name: lk-sidebar; }
.lk-sb__top { view-transition-name: lk-topbar-mobile; }

/* Сайдбар не анимируем: он одинаков на всех страницах и должен стоять на месте.
   Гасим и group: у ::view-transition-group есть собственная UA-анимация 250 мс
   (позиция/размер) — без этого сайдбар «доезжал» лишние 250 мс. */
::view-transition-group(lk-sidebar), ::view-transition-group(lk-topbar-mobile),
::view-transition-old(lk-sidebar), ::view-transition-new(lk-sidebar),
::view-transition-old(lk-topbar-mobile), ::view-transition-new(lk-topbar-mobile) {
  animation: none; mix-blend-mode: normal;
}
/* Контент — короткий кроссфейд без сдвига, чтобы не отвлекал. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .tg-btn:active, .tg-pills button:active, .lk-sb__item:active { transform: none; }
  .tg-drawer, .tg-menu, .lk-sb { animation: none; }
  .tg-drawer { transition: none; }
}

/* ---- Анимации (из helmet-блоков макетов) ---- */
@keyframes tg-pulse   { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes tg-in      { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes tg-pop     { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes tg-spin    { to { transform: rotate(360deg); } }

/* Реестр ЭТрН */
@keyframes tg-etrn-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tg-etrn-up    { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Карточка ЭЗЗ (единый каркас Платформы и Контура) ---- */
.tg-ezz-card__section {
  background: var(--color-sur);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  margin-bottom: 12px;
}
.tg-ezz-card__section h2 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-t2);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tg-ezz-card__section h3 {
  font-size: 13px;
  margin: 14px 0 6px;
  color: var(--muted-foreground);
  font-weight: 600;
}
.tg-ezz-card__section h3:first-child {
  margin-top: 0;
}
.tg-ezz-card__party {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}
.tg-ezz-card__party:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.tg-ezz-card__party h3 {
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--muted-foreground);
  font-weight: 600;
}
.tg-ezz-card__rows {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px 14px;
  margin: 0;
}
.tg-ezz-card__rows dt {
  color: var(--color-t2);
  font-size: 13px;
}
.tg-ezz-card__rows dd {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.tg-ezz-card__fold summary {
  cursor: pointer;
  list-style: none;
  background: var(--color-sur);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 16px 24px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-t1);
}
.tg-ezz-card__fold summary::-webkit-details-marker {
  display: none;
}
.tg-ezz-card__fold summary::before {
  content: '▸ ';
  color: var(--color-t2);
}
.tg-ezz-card__fold[open] summary::before {
  content: '▾ ';
}
.tg-ezz-card__violations {
  margin: 0;
  padding-left: 18px;
}
.tg-ezz-card__violations li {
  margin: 4px 0;
}
.tg-ezz-card__violations li.warning b {
  color: var(--color-amber);
}
.tg-ezz-card__violations li.error b {
  color: var(--color-red);
}

/* Лента титулов Т1–Т4 в строках реестров ЭТрН и заявок и в панели заявки. */

.ezz-reg__titles {
  display: flex;
  gap: 3px;
}

/* Меню строки «три точки» */

.ezz-menu {
  position: relative;
  flex: none;
  min-width: 28px;
}

/* Скрыто до наведения на строку: редкое действие не должно стоять в каждой
   строке наравне с целевой кнопкой. Клавиатуре меню доступно всегда —
   :focus-within возвращает его при табуляции. */
.ezz-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-t2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}

.ezz-menu:focus-within .ezz-menu__btn,
.ezz-menu.is-open .ezz-menu__btn {
  opacity: 1;
}

.ezz-menu__btn:hover,
.ezz-menu.is-open .ezz-menu__btn {
  background: var(--secondary);
  color: var(--color-t1);
}

.ezz-menu__pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 184px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--color-sur);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
}

.ezz-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-t1);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ezz-menu__item:hover {
  background: var(--secondary);
}

/* Узкие ширины: сетка рассыпается на блок, шапка колонок уходит — подписывать
   нечего, когда колонок нет.
   Порог развёртки — по тому, где колонки перестают помещаться, а не по
   круглому числу: на 1024 с открытым сайдбаром сумма минимумов уже шире
   контейнера, и сетка выдавливала колонку действия в горизонтальный скролл. */
@media (max-width: 1100px) {

  /* Меню без наведения не достать на тач-экране. */
  .ezz-menu__btn {
    opacity: 1;
  }

}

@layer components {
  /* Строка табличного справочника (водители, ТС, сотрудники): колонки задаёт
     страница переменными в style — они же у шапки таблицы. До 900px строка
     складывается в короткую сетку --dir-cols-sm. */
  .dir-row { grid-template-columns: var(--dir-cols-sm, minmax(0, 1fr) auto 32px); }
  @media (min-width: 900px) {
    .dir-row { min-width: var(--dir-min-w, auto); grid-template-columns: var(--dir-cols); }
  }
}

/* ---- Слой utilities: фиксированный набор помощников раскладки. ----
   Имена — по пикселям и токенам, не по шкале Tailwind; межстрочный интервал
   у u-text-* безразмерный, как у Tailwind: вложенные поля наследуют коэффициент,
   а не пиксели. Новые классы сюда
   добавляются только вместе с правилом в knowledge/documentation/lk/architecture/ui.md; tests/architecture.php
   не пропускает utility-имена вне этого списка. */
@layer utilities {
  .u-flex { display: flex; }
  .u-flex-col { flex-direction: column; }
  .u-flex-wrap { flex-wrap: wrap; }
  .u-font-medium { font-weight: 500; }
  .u-font-semibold { font-weight: 600; }
  .u-gap-10 { gap: 10px; }
  .u-gap-12 { gap: 12px; }
  .u-gap-16 { gap: 16px; }
  .u-gap-2 { gap: 2px; }
  .u-gap-3 { gap: 3px; }
  .u-gap-4 { gap: 4px; }
  .u-gap-6 { gap: 6px; }
  .u-gap-8 { gap: 8px; }
  .u-grid { display: grid; }
  .u-h-7 { height: 7px; }
  .u-hidden { display: none; }
  .u-hover-bg-cream:hover { background: var(--secondary); }
  .u-items-center { align-items: center; }
  .u-items-end { align-items: flex-end; }
  .u-items-start { align-items: flex-start; }
  .u-justify-between { justify-content: space-between; }
  .u-justify-self-end { justify-self: end; }
  .u-leading-normal { line-height: 1.5; }
  .u-leading-snug { line-height: 1.375; }
  .u-leading-tight { line-height: 1.25; }
  .u-max-w-620 { max-width: 620px; }
  .u-mb-12 { margin-bottom: 12px; }
  .u-min-w-0 { min-width: 0; }
  .u-min-w-860 { min-width: 860px; }
  .u-mt-12 { margin-top: 12px; }
  .u-mt-2 { margin-top: 2px; }
  .u-mt-4 { margin-top: 4px; }
  .u-mt-8 { margin-top: 8px; }
  .u-nowrap { white-space: nowrap; }
  .u-overflow-x-auto { overflow-x: auto; }
  .u-p-12-20 { padding: 12px 20px; }
  .u-p-36-40 { padding: 36px 40px; }
  .u-pb-4 { padding-bottom: 4px; }
  .u-pointer { cursor: pointer; }
  .u-pt-8 { padding-top: 8px; }
  .u-px-16 { padding-left: 16px; padding-right: 16px; }
  .u-px-6 { padding-left: 6px; padding-right: 6px; }
  .u-px-8 { padding-left: 8px; padding-right: 8px; }
  .u-py-1 { padding-top: 1px; padding-bottom: 1px; }
  .u-py-12 { padding-top: 12px; padding-bottom: 12px; }
  .u-py-2 { padding-top: 2px; padding-bottom: 2px; }
  .u-py-4 { padding-top: 4px; padding-bottom: 4px; }
  .u-py-8 { padding-top: 8px; padding-bottom: 8px; }
  .u-relative { position: relative; }
  .u-rounded-full { border-radius: calc(infinity * 1px); }
  .u-tabular { font-variant-numeric: tabular-nums; }
  .u-text-11 { font-size: 11px; }
  .u-text-12 { font-size: 12px; line-height: calc(16 / 12); }
  .u-text-13 { font-size: 13px; }
  .u-text-14 { font-size: 14px; line-height: calc(20 / 14); }
  .u-text-15 { font-size: 15px; }
  .u-text-24 { font-size: 24px; line-height: calc(32 / 24); }
  .u-text-28 { font-size: 28px; }
  .u-text-red { color: var(--color-red); }
  .u-text-t1 { color: var(--color-t1); }
  .u-text-t2 { color: var(--color-t2); }
  .u-text-t3 { color: var(--color-t3); }
  .u-tracking-n20 { letter-spacing: -0.02em; }
  .u-tracking-n25 { letter-spacing: -0.025em; }
  .u-tracking-p50 { letter-spacing: 0.05em; }
  .u-transition-colors { transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
  .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .u-uppercase { text-transform: uppercase; }
  .u-w-7 { width: 7px; }
  .u-opacity-55 { opacity: .55; }
  @media (max-width: 719.98px) {
    .u-max720-p-24-20 { padding: 24px 20px; }
    .u-max720-text-22 { font-size: 22px; }
  }
  @media (max-width: 899.98px) {
    .u-max900-p-12-14 { padding: 12px 14px; }
  }
  @media (min-width: 900px) {
    .u-min900-block { display: block; }
    .u-min900-flex { display: flex; }
    .u-min900-grid { display: grid; }
    .u-min900-hidden { display: none; }
  }
}

/* ---- Строка реестра: документ · состояние · маршрут · экипаж ----
   Общий блок реестров ЭТрН и заявок (вариант A реестра ЭТрН, 28.09.2026;
   заявки приведены к нему 29.09.2026) — одни элементы на обеих страницах.
   Вне @layer и после .ezz-menu: меню строки (.ezz-menu, неслоёное) задаёт
   position: relative, и слоёный .tg-reg__menu проигрывал ему — меню вставало
   в сетку отдельной строкой и раздувало высоту. */
.tg-reg { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .68fr) minmax(0, 1.6fr) minmax(0, .9fr); gap: 16px; }
.tg-reg.ezz-tile { grid-template-columns: minmax(148px, .9fr) minmax(0, 1.55fr) minmax(0, 1.15fr) auto; align-items: start; }
.ezz-tile .tg-reg__name,
.ezz-tile .tg-reg__num,
.ezz-tile .tg-reg__trip b,
.ezz-tile .tg-chip,
.ezz-tile .tg-reg__via-kind,
.ezz-tile .tg-reg__copy { font-weight: 400; }
.ezz-tile .tg-reg__name { color: var(--foreground); }
.ezz-tile .tg-reg__addr { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezz-tile .tg-reg__end { display: flex; align-items: flex-start; justify-content: flex-end; }
.tg-reg__specify { justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-weight: 400; text-align: left; color: var(--color-t2); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.tg-reg__specify:hover { color: var(--color-t1); }
.tg-reg__copy { align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tg-reg__list { display: flex; flex-direction: column; gap: 8px; background: transparent; box-shadow: none; border-radius: 0; }
.tg-reg { position: relative; align-items: start; padding: 18px 44px 18px 18px; background: var(--color-sur); border: 1px solid var(--border-soft); border-radius: 16px; box-shadow: var(--shadow-card); cursor: pointer; }
.tg-reg:hover { background: var(--secondary); }
.tg-reg.is-incident { box-shadow: inset 3px 0 0 var(--color-red); }
.tg-reg--busy { opacity: .75; }
.tg-reg__doc, .tg-reg__state, .tg-reg__route, .tg-reg__crew { display: flex; flex-direction: column; min-width: 0; }
.tg-reg__doc { gap: 3px; }
.tg-reg__when { font-size: 12px; color: var(--color-t2); font-variant-numeric: tabular-nums; }
.tg-reg__num { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--color-t1); text-decoration: none; overflow-wrap: anywhere; }
.tg-reg__num:hover { color: var(--color-brand-link); text-decoration: none; }
.tg-reg__owner { margin-top: 2px; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-reg__state { gap: 6px; align-items: flex-start; }
.tg-reg__chip { display: flex; }
.tg-reg__chip--draft { gap: 6px; align-items: center; flex-wrap: wrap; }
.tg-reg__note { font-size: 12px; line-height: 1.4; color: var(--color-t2); overflow-wrap: anywhere; }
.tg-reg__note--error { color: var(--color-red); }
.tg-reg__action { margin-top: 2px; }
.tg-reg__route { gap: 4px; }
.tg-reg__stop { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.tg-reg__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.tg-reg__dot--from { background: var(--color-green); }
.tg-reg__dot--to { background: var(--color-brand); }
.tg-reg__party { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tg-reg__name { font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-reg__addr { font-size: 12px; line-height: 1.4; color: var(--color-t2); overflow-wrap: anywhere; }
.tg-reg__addr b { font-weight: 500; color: var(--color-t1); }
/* «Мытищи → Долгопрудный»: серый текст с пунктиром, как строка адреса, без
   рамки и фона; раскрывает полные адреса под сторонами. */
.tg-reg__cities { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; max-width: calc(100% - 19px); margin-left: 19px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; line-height: 1.35; color: var(--color-t2); text-align: left; text-decoration: underline dotted var(--color-line); text-underline-offset: 3px; cursor: pointer; }
.tg-reg__cities:hover { color: var(--color-t1); text-decoration-color: currentColor; }
.tg-reg__cities.is-open svg { transform: rotate(180deg); }
.tg-reg__cities svg { flex: none; }
.tg-reg__cities:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; border-radius: 4px; }
.tg-reg__trip { display: flex; gap: 16px; margin-top: 2px; padding-left: 19px; font-size: 12px; color: var(--color-t2); min-width: 0; }
.tg-reg__trip b { font-weight: 400; color: var(--color-t1); font-variant-numeric: tabular-nums; }
.tg-reg__trip-item { flex: none; white-space: nowrap; }
.tg-reg__trip-item--grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-reg__crew { gap: 6px; }
.tg-reg__fact { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px; align-items: start; font-size: 13px; line-height: 18px; color: var(--color-t1); }
.tg-reg__fact svg { margin-top: 2px; color: var(--color-t2); }
.tg-reg__fact > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-reg__fact--num > span { font-variant-numeric: tabular-nums; }
.tg-reg__fact.is-gap > span { color: var(--color-t2); }
/* Экипаж из ЭТрН, которого нет в справочнике: виден, но в форму Т2 не встанет. */
.tg-reg__fact.is-unmatched > span { color: var(--color-t2); text-decoration: underline dotted; text-underline-offset: 3px; }
.tg-reg__menu { position: absolute; top: 12px; right: 8px; }
/* «⋯» скрыт до наведения на строку (.ezz-menu__btn); без мыши — виден всегда. */
.tg-reg:hover .tg-reg__menu .ezz-menu__btn { opacity: 1; }
@media (hover: none) { .tg-reg__menu .ezz-menu__btn { opacity: 1; } }

/* Тихие переключатели строки: «ЭТрН · 13», «по адресу · 8», источник
   экипажа — тем же пунктиром, что города; открывают панель поверх списка. */
.tg-reg__link { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; line-height: 1.35; color: var(--color-t2); text-align: left; text-decoration: underline dotted var(--color-line); text-underline-offset: 3px; cursor: pointer; }
.tg-reg__link:hover, .tg-reg__link.is-active { color: var(--color-t1); text-decoration-color: currentColor; }
.tg-reg__link.is-active { font-weight: 500; }
.tg-reg__link svg { flex: none; }
.tg-reg__link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; border-radius: 4px; }
.tg-reg__quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; font-size: 12px; color: var(--color-t2); }
.tg-reg__cities-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-left: 19px; min-width: 0; }
.tg-reg__cities-line .tg-reg__cities { margin-left: 0; max-width: 100%; }
.tg-reg__more { font-size: 12px; color: var(--color-t2); }
.tg-reg__dot--via { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-t3); }
.tg-reg__via-kind { font-size: 13px; font-weight: 500; line-height: 1.35; }
.tg-reg__src { margin-left: 22px; }
.tg-reg__src.is-warn { color: var(--color-amber); }
.tg-reg__name.is-gap { font-weight: 400; color: var(--color-t2); }
.tg-reg__fact-tag { margin-left: 4px; font-size: 12px; color: var(--color-t2); }
.tg-reg.is-selected, .tg-reg.is-selected:hover { background: #F8EFE3; }
.tg-reg.is-muted { background: #FAF7F1; }
.tg-reg.is-muted > :not(.tg-reg__menu) { opacity: .72; }

@media (max-width: 1100px) {
  .tg-reg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .tg-reg { grid-template-columns: minmax(0, 1fr); padding-right: 40px; }
}

/* Все тексты кабинета — 14px и начертание 400. Крупным и полужирным
   остаётся только заголовок страницы. */
body.tg-page *:not(h1):not(.tg-h1) {
  font-size: 14px !important;
  font-weight: 400 !important;
}
body.tg-page.tg-page :is(h1, .tg-h1) * {
  font-size: inherit !important;
  font-weight: inherit !important;
}
body.tg-page .ezz-tile .tg-reg__num {
  font-size: 18px !important;
}
body.tg-page.tg-page .lk-sb__org-list .lk-sb__org-inn,
body.tg-page.tg-page .tg-toast,
body.tg-page.tg-page .lk-sb__label,
body.tg-page.tg-page .tg-fbar__row,
body.tg-page.tg-page .tg-fbar__row * {
  font-size: 12px !important;
}

/* Field errors from native forms and custom document validation. */
form :is(input, select, textarea):user-invalid,
:is(input, select, textarea)[aria-invalid="true"]:not(:disabled) {
  outline: 1px solid var(--color-red);
  outline-offset: -1px;
}