/* ============================================================================
   ДИЗАЙН-СИСТЕМА «ЖУРНАЛЫ АГАТА» — ui.css
   Токены, базовая типографика и компоненты с префиксом .ui-
   Подключается ПОСЛЕ app.css и не конфликтует с его классами (.button, .card…).
   Документация: docs/design-system.md, живой стайлгайд: static/styleguide/index.html
   ========================================================================== */

/* ---------- 0. Шрифт: Golos Text (OFL 1.1, полная кириллица), переменный 400–900 ---------- */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-text-cyrillic-ext.52208e41e353.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-text-cyrillic.024646dc00da.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 900;
  font-display: swap;
  src: url("../fonts/golos-text-latin-ext.1cfacdd6d054.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-text-latin.3ba0fde64bcf.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Токены ---------- */
:root {
  --ui-font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Нейтрали с тёплым (бумажным) оттенком */
  --ui-paper: #f7f5f0;        /* фон страницы */
  --ui-surface: #ffffff;      /* карточки, поля, таблицы */
  --ui-surface-2: #f1eee7;    /* боковая панель, шапки таблиц, тихие подложки */
  --ui-surface-3: #e7e3d9;    /* ховеры, полоски прогресса */
  --ui-line: #e3dfd5;         /* разделители */
  --ui-line-strong: #cfc9bc;  /* рамки вторичных кнопок */
  --ui-line-input: #9a9484;   /* рамки полей ввода (≈3:1 на белом) */
  --ui-ink: #1d1c19;          /* основной текст, 15.6:1 */
  --ui-ink-2: #4a4843;        /* вторичный текст, 8.4:1 */
  --ui-muted: #5f5d56;        /* подписи и подсказки, 6.0:1 на бумаге */
  --ui-placeholder: #7d7a72;  /* плейсхолдеры, 4.3:1 (не несут смысла) */

  /* Бренд: глубокий «санитарный» зелёный + тёплый янтарь Агаты */
  --ui-green: #1f6b4e;
  --ui-green-deep: #185740;
  --ui-green-tint: #e4f1ea;
  --ui-green-line: #bcdccb;
  --ui-amber: #9b6b25;         /* исторический цвет бренда — для знака, акцентов, не для мелкого текста */
  --ui-amber-text: #8a5d1d;    /* янтарь для текста, 5.7:1 на белом */
  --ui-amber-tint: #fbf1dc;
  --ui-amber-line: #ecd39f;
  --ui-amber-bright: #f0bd57;  /* только в знаке и как маркер «сегодня» */

  /* Семантика: норма / предупреждение / отклонение / нейтрально */
  --ui-ok: #196645;      --ui-ok-bg: #e2f2e8;      --ui-ok-line: #b9dcc8;
  --ui-warn: #7d5108;    --ui-warn-bg: #fdf1d6;    --ui-warn-line: #efd39a;
  --ui-bad: #a8231b;     --ui-bad-bg: #fbe7e4;     --ui-bad-line: #f0c1bb;
  --ui-neutral: #55534c; --ui-neutral-bg: #eeece6;

  /* Роли (через них переопределяется хост: control / cards) */
  --ui-primary: var(--ui-green);
  --ui-primary-deep: var(--ui-green-deep);
  --ui-primary-tint: var(--ui-green-tint);
  --ui-primary-line: var(--ui-green-line);
  --ui-link: var(--ui-green);
  --ui-focus: rgba(31, 107, 78, .35);
  /* Кольцо фокуса с клавиатуры — непрозрачное: полупрозрачное давало 1,7:1 при норме 3:1 (аудит E-15).
     Мягкая подсветка полей ввода (--ui-focus) остаётся. */
  --ui-focus-ring: var(--ui-primary);

  /* Геометрия */
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 1px 2px rgba(29, 28, 25, .06), 0 0 0 1px rgba(29, 28, 25, .03);
  --ui-shadow-lg: 0 12px 32px rgba(29, 28, 25, .16), 0 2px 6px rgba(29, 28, 25, .06);

  /* Сетка 4/8 */
  --ui-s1: 4px;  --ui-s2: 8px;  --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 20px;
  --ui-s6: 24px; --ui-s8: 32px; --ui-s10: 40px; --ui-s12: 48px; --ui-s16: 64px;

  /* Размеры контролов */
  --ui-control-h: 44px;
  --ui-control-h-lg: 52px;
  --ui-control-h-sm: 36px;
  --ui-input-h: 48px;

  /* Шкала текста */
  --ui-fs-xs: 12px; --ui-fs-sm: 13px; --ui-fs-md: 15px; --ui-fs-lg: 17px;
  --ui-fs-h3: 17px; --ui-fs-h2: 20px; --ui-fs-h1: 28px; --ui-fs-display: 40px;

  /* Каркас */
  --ui-sidebar-w: 248px;
  --ui-topbar-h: 56px;
  --ui-tabbar-h: 60px;
  --ui-page-x: 28px;
}

/* Хосты: техкарты — янтарные, контроль — зелёный (как журналы) */
.site-mode-techcards {
  --ui-primary: var(--ui-amber);
  --ui-primary-deep: #7f561c;
  --ui-primary-tint: var(--ui-amber-tint);
  --ui-primary-line: var(--ui-amber-line);
  --ui-link: var(--ui-amber-text);
  --ui-focus: rgba(155, 107, 37, .35);
  --ui-focus-ring: var(--ui-amber);  /* токены на :root — переопределять здесь, иначе кольцо осталось бы зелёным */
}

/* ---------- 2. База (только внутри .ui-root, чтобы не ломать старые страницы) ---------- */
.ui-root {
  margin: 0;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: var(--ui-fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}
.ui-root *, .ui-root *::before, .ui-root *::after { box-sizing: border-box; }
:where(.ui-root) :where(h1, h2, h3, h4) { margin: 0; line-height: 1.25; letter-spacing: -.005em; font-weight: 600; }
:where(.ui-root) h1 { font-size: var(--ui-fs-h1); font-weight: 700; letter-spacing: -.012em; }
:where(.ui-root) h2 { font-size: var(--ui-fs-h2); }
:where(.ui-root) h3 { font-size: var(--ui-fs-h3); }
:where(.ui-root) p { margin: 0 0 var(--ui-s3); }
:where(.ui-root) p:last-child { margin-bottom: 0; }
:where(.ui-root) a { color: var(--ui-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(.ui-root) a:hover { color: var(--ui-primary-deep); }
:where(.ui-root) :where(strong, b) { font-weight: 600; }
:where(.ui-root) small { font-size: var(--ui-fs-sm); }
:where(.ui-root) :where(img, svg) { max-width: 100%; }
.ui-root :focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }

.ui-h1 { font-size: var(--ui-fs-h1); font-weight: 700; line-height: 1.2; letter-spacing: -.012em; margin: 0; }
.ui-h2 { font-size: var(--ui-fs-h2); font-weight: 600; line-height: 1.25; margin: 0; }
.ui-h3 { font-size: var(--ui-fs-h3); font-weight: 600; line-height: 1.3; margin: 0; }
.ui-display { font-size: clamp(30px, 4vw, var(--ui-fs-display)); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.ui-text { font-size: var(--ui-fs-md); }
.ui-lead { font-size: var(--ui-fs-lg); line-height: 1.5; color: var(--ui-ink-2); }
.ui-small { font-size: var(--ui-fs-sm); }
.ui-caption { font-size: var(--ui-fs-xs); line-height: 1.4; }
.ui-muted { color: var(--ui-muted); }
.ui-ink-2 { color: var(--ui-ink-2); }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-eyebrow { display: inline-block; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-primary); }
.ui-link { color: var(--ui-link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «К содержимому» — первая ссылка страницы, видна только при фокусе с клавиатуры (аудит E-16). */
.ui-skip-link { position: absolute; left: 8px; top: -80px; z-index: 1000; padding: 10px 16px; border-radius: var(--ui-radius); background: var(--ui-primary); color: #fff; font-weight: 600; text-decoration: none; }
.ui-skip-link:focus { top: 8px; }
.ui-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 3. Иконки ---------- */
.ui-icon {
  width: 20px; height: 20px; flex: none;
  display: inline-block; vertical-align: -.22em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.ui-icon--sm { width: 16px; height: 16px; }
.ui-icon--lg { width: 24px; height: 24px; }
.ui-icon--xl { width: 32px; height: 32px; stroke-width: 1.5; }
.ui-icon--ok { color: var(--ui-ok); }
.ui-icon--warn { color: var(--ui-warn); }
.ui-icon--bad { color: var(--ui-bad); }
.ui-icon--muted { color: var(--ui-muted); }
.ui-icon--primary { color: var(--ui-primary); }
.ui-icon--amber { color: var(--ui-amber-text); }

/* ---------- 4. Каркас ---------- */
.ui-shell { min-height: 100vh; display: grid; grid-template-columns: var(--ui-sidebar-w) minmax(0, 1fr); background: var(--ui-paper); }
.ui-shell--guest { grid-template-columns: minmax(0, 1fr); }
.ui-main { min-width: 0; display: flex; flex-direction: column; }
.ui-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--ui-page-x); }
.ui-container--narrow { max-width: 860px; }
.ui-container--form { max-width: 720px; }
.ui-page { padding-bottom: var(--ui-s10); }

.ui-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-s4); padding: var(--ui-s6) 0 var(--ui-s5); }
.ui-page-head__main { min-width: 0; display: grid; gap: var(--ui-s1); }
.ui-page-head__kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-fs-sm); color: var(--ui-muted); text-decoration: none; }
.ui-page-head__kicker:hover { color: var(--ui-ink); }
.ui-page-head__title { font-size: var(--ui-fs-h1); font-weight: 700; line-height: 1.2; letter-spacing: -.012em; margin: 0; overflow-wrap: anywhere; }
.ui-page-head__text { margin: 0; color: var(--ui-muted); max-width: 64ch; }
.ui-page-head__actions { display: flex; align-items: center; gap: var(--ui-s2); flex: none; padding-top: 2px; }
.ui-page-head--compact { padding: var(--ui-s4) 0 var(--ui-s3); }

.ui-stack { display: grid; gap: var(--ui-s3); }
.ui-stack--lg { gap: var(--ui-s5); }
.ui-stack--sm { gap: var(--ui-s2); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); }
.ui-cluster--between { justify-content: space-between; }
.ui-grid { display: grid; gap: var(--ui-s4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-grid--sidebar { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: start; }
.ui-section { display: grid; gap: var(--ui-s3); }
.ui-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-s3); }
.ui-section__title { font-size: var(--ui-fs-h2); font-weight: 600; margin: 0; }
.ui-section__link { font-size: var(--ui-fs-sm); font-weight: 500; }
.ui-divider { height: 1px; background: var(--ui-line); border: 0; margin: var(--ui-s4) 0; }

/* ---------- 5. Кнопки ---------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ui-control-h); padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--ui-radius);
  background: transparent; color: var(--ui-ink);
  font-family: var(--ui-font); font-size: var(--ui-fs-md); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-btn .ui-icon { width: 20px; height: 20px; margin-left: -2px; }
.ui-btn .ui-icon:last-child:not(:first-child) { margin-left: 0; margin-right: -2px; }
.ui-btn:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ui-btn--primary { background: var(--ui-primary); color: #fff; }
.ui-btn--primary:hover { background: var(--ui-primary-deep); color: #fff; }
.ui-btn--secondary { background: var(--ui-primary-tint); color: var(--ui-primary); border-color: var(--ui-primary-line); }
.ui-btn--secondary:hover { background: #d6eadf; color: var(--ui-primary-deep); }
.site-mode-techcards .ui-btn--secondary:hover { background: #f4e4c2; }
.ui-btn--ghost { background: var(--ui-surface); color: var(--ui-ink-2); border-color: var(--ui-line-strong); }
.ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-btn--quiet { background: transparent; color: var(--ui-ink-2); }
.ui-btn--quiet:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-btn--danger { background: var(--ui-surface); color: var(--ui-bad); border-color: var(--ui-bad-line); }
.ui-btn--danger:hover { background: var(--ui-bad-bg); }
.ui-btn--danger.ui-btn--solid { background: var(--ui-bad); color: #fff; border-color: transparent; }
.ui-btn--danger.ui-btn--solid:hover { background: #8e1d16; }
.ui-btn--sm { min-height: var(--ui-control-h-sm); padding: 0 12px; font-size: var(--ui-fs-sm); border-radius: 6px; }
.ui-btn--sm .ui-icon { width: 16px; height: 16px; }
.ui-btn--lg { min-height: var(--ui-control-h-lg); padding: 0 24px; font-size: 16px; }
.ui-btn--block { width: 100%; }
.ui-btn--icon { width: var(--ui-control-h); padding: 0; }
.ui-btn--icon .ui-icon { margin: 0; }
.ui-btn--icon.ui-btn--sm { width: var(--ui-control-h-sm); }
.ui-btn--pill { border-radius: var(--ui-radius-pill); }
.ui-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ui-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: ui-spin .7s linear infinite; }
.ui-btn--ghost.is-loading::after, .ui-btn--secondary.is-loading::after { border-color: rgba(29,28,25,.15); border-top-color: var(--ui-ink-2); }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); }
.ui-btn-row--end { justify-content: flex-end; }
.ui-link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--ui-link); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ui-link-btn:hover { color: var(--ui-primary-deep); }
.ui-link-btn--danger { color: var(--ui-bad); }

/* ---------- 6. Поля ---------- */
.ui-field { display: grid; gap: 6px; min-width: 0; }
.ui-field--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ui-s2); }
.ui-label { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ui-ink); line-height: 1.3; }
.ui-label__req { color: var(--ui-bad); font-weight: 700; }
.ui-label__opt { color: var(--ui-muted); font-weight: 400; font-size: var(--ui-fs-sm); }
.ui-input, .ui-select, .ui-textarea {
  width: 100%; min-height: var(--ui-input-h); padding: 10px 14px;
  border: 1px solid var(--ui-line-input); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-ink);
  font-family: var(--ui-font); font-size: 16px; line-height: 1.3;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-placeholder); }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-ink-2); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-focus); }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { background: var(--ui-surface-2); color: var(--ui-muted); cursor: not-allowed; }
.ui-input[readonly] { background: var(--ui-surface-2); }
.ui-textarea { min-height: 96px; resize: vertical; }
.ui-select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4843' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
}
.ui-select option { font-family: var(--ui-font); }
.ui-input--num { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; letter-spacing: .01em; }
.ui-input--lg { min-height: var(--ui-control-h-lg); font-size: 18px; }
.ui-input-group { position: relative; display: block; }
.ui-input-group .ui-input { padding-right: 56px; }
.ui-input-group__unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); font-size: 16px; font-weight: 500; pointer-events: none; }
.ui-input-group--icon .ui-input { padding-left: 42px; }
.ui-input-group__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; }
.ui-hint { font-size: var(--ui-fs-sm); color: var(--ui-muted); line-height: 1.4; }
.ui-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--ui-fs-sm); color: var(--ui-bad); line-height: 1.4; }
.ui-error .ui-icon { width: 16px; height: 16px; margin-top: 1px; }
.ui-field.is-error .ui-input, .ui-field.is-error .ui-select, .ui-field.is-error .ui-textarea { border-color: var(--ui-bad); }
.ui-field.is-error .ui-input:focus { box-shadow: 0 0 0 3px rgba(168, 35, 27, .25); }
.ui-form { display: grid; gap: var(--ui-s5); }
.ui-form__row { display: grid; gap: var(--ui-s4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ui-form__section { display: grid; gap: var(--ui-s4); }
.ui-form__section-title { font-size: var(--ui-fs-h3); font-weight: 600; margin: 0; padding-bottom: var(--ui-s2); border-bottom: 1px solid var(--ui-line); }
.ui-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--ui-s2); }
.ui-fieldset > legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; }

/* Галочка и переключатель */
.ui-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: var(--ui-fs-md); line-height: 1.4; }
.ui-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ui-primary); cursor: pointer; }
.ui-check__text { display: grid; gap: 2px; }
.ui-check__hint { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: var(--ui-fs-md); }
.ui-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-switch__track { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--ui-line-strong); position: relative; transition: background-color .15s ease; }
.ui-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s ease; }
.ui-switch input:checked + .ui-switch__track { background: var(--ui-primary); }
.ui-switch input:checked + .ui-switch__track::after { transform: translateX(18px); }
.ui-switch input:focus-visible + .ui-switch__track { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }

/* Файл с превью (логотип, печать, подпись) */
.ui-file { display: flex; align-items: center; gap: var(--ui-s3); }
.ui-file__preview { width: 72px; height: 72px; flex: none; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface-2); display: grid; place-items: center; overflow: hidden; color: var(--ui-muted); }
.ui-file__preview img { width: 100%; height: 100%; object-fit: contain; }
.ui-file__body { display: grid; gap: 6px; min-width: 0; }
.ui-file__name { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Вердикт под числом: норма / отклонение */
.ui-verdict { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--ui-radius); font-size: var(--ui-fs-md); font-weight: 600; line-height: 1.3; }
.ui-verdict--hint { background: var(--ui-surface-2); color: var(--ui-muted); font-weight: 500; }
.ui-verdict--ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-verdict--bad { background: var(--ui-bad-bg); color: var(--ui-bad); }
.ui-verdict--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }

/* ---------- 7. Чипы-переключатели (radio / checkbox как крупные кнопки) ---------- */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--ui-s2); }
.ui-chips--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ui-chips--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ui-input-h); padding: 8px 16px;
  /* Рамка — как у полей ввода (≈3:1 на белом): у чипа она единственный признак «это вариант выбора» (аудит E-15). */
  border: 1.5px solid var(--ui-line-input); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-ink);
  font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center;
  cursor: pointer; user-select: none; transition: border-color .12s ease, background-color .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ui-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-chip:hover { border-color: var(--ui-ink-2); }
.ui-chip .ui-icon { width: 20px; height: 20px; color: var(--ui-muted); }
.ui-chip:has(input:checked) { border-color: var(--ui-primary); background: var(--ui-primary-tint); color: var(--ui-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ui-primary); }
.ui-chip:has(input:checked) .ui-icon { color: currentColor; }
.ui-chip:has(input:focus-visible) { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
.ui-chip--ok:has(input:checked) { border-color: var(--ui-ok); background: var(--ui-ok-bg); color: var(--ui-ok); box-shadow: inset 0 0 0 1px var(--ui-ok); }
.ui-chip--bad:has(input:checked) { border-color: var(--ui-bad); background: var(--ui-bad-bg); color: var(--ui-bad); box-shadow: inset 0 0 0 1px var(--ui-bad); }
.ui-chip--warn:has(input:checked) { border-color: var(--ui-warn); background: var(--ui-warn-bg); color: var(--ui-warn); box-shadow: inset 0 0 0 1px var(--ui-warn); }
.ui-chip--sm { min-height: 36px; padding: 4px 12px; font-size: var(--ui-fs-sm); font-weight: 600; border-radius: var(--ui-radius-pill); border-width: 1px; }
.ui-chip--sm:has(input:checked) { box-shadow: none; }
.ui-chip--block { width: 100%; }
.ui-chip__sub { display: block; font-size: var(--ui-fs-xs); font-weight: 400; color: var(--ui-muted); }
.ui-chip:has(input:checked) .ui-chip__sub { color: inherit; opacity: .8; }
.ui-chip--stack { flex-direction: column; gap: 2px; padding: 10px 12px; }
/* Без :has() (Android WebView до 105, iOS до 15.4) отмеченный чип подсвечивает класс is-checked из
   site-shell.js (аудит E-14). Отдельными правилами: старый браузер отбрасывает список селекторов
   с :has() целиком — вместе с соседним .is-checked. */
.ui-chip.is-checked { border-color: var(--ui-primary); background: var(--ui-primary-tint); color: var(--ui-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ui-primary); }
.ui-chip.is-checked .ui-icon { color: currentColor; }
.ui-chip--ok.is-checked { border-color: var(--ui-ok); background: var(--ui-ok-bg); color: var(--ui-ok); box-shadow: inset 0 0 0 1px var(--ui-ok); }
.ui-chip--bad.is-checked { border-color: var(--ui-bad); background: var(--ui-bad-bg); color: var(--ui-bad); box-shadow: inset 0 0 0 1px var(--ui-bad); }
.ui-chip--warn.is-checked { border-color: var(--ui-warn); background: var(--ui-warn-bg); color: var(--ui-warn); box-shadow: inset 0 0 0 1px var(--ui-warn); }
.ui-chip--sm.is-checked { box-shadow: none; }
.ui-chip.is-checked .ui-chip__sub { color: inherit; opacity: .8; }
@supports not selector(:has(*)) {
  .ui-chip:focus-within { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
}
/* Ряд фильтров-чипов (ссылки/кнопки, не input) */
.ui-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-pill); background: var(--ui-surface); color: var(--ui-ink-2); font: 600 var(--ui-fs-sm)/1 var(--ui-font); text-decoration: none; cursor: pointer; }
.ui-filter-chip:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-filter-chip.is-active { background: var(--ui-ink); color: #fff; border-color: var(--ui-ink); }
.ui-filter-chip__count { font-weight: 500; opacity: .7; }

/* ---------- 8. Карточки ---------- */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); min-width: 0; }
.ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); padding: var(--ui-s4) var(--ui-s5); border-bottom: 1px solid var(--ui-line); }
.ui-card__title { font-size: var(--ui-fs-h3); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.ui-card__title .ui-icon { color: var(--ui-primary); }
.ui-card__sub { font-size: var(--ui-fs-sm); color: var(--ui-muted); margin: 2px 0 0; }
.ui-card__body { padding: var(--ui-s5); }
.ui-card__body--flush { padding: 0; }
.ui-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); padding: var(--ui-s3) var(--ui-s5); border-top: 1px solid var(--ui-line); background: #fbfaf7; border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg); }
.ui-card--flat { background: var(--ui-surface-2); border-color: transparent; }
.ui-card--accent { background: var(--ui-amber-tint); border-color: var(--ui-amber-line); }
.ui-card--primary { background: var(--ui-primary-tint); border-color: var(--ui-primary-line); }
.ui-card--elevated { box-shadow: var(--ui-shadow-sm); }
.ui-card--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.ui-card--link:hover { border-color: var(--ui-line-strong); background: #fdfcfa; color: inherit; }
.ui-card--compact .ui-card__body { padding: var(--ui-s4); }

/* Ключ — значение (реквизиты, карточка сотрудника) */
.ui-kv { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.ui-kv dt { color: var(--ui-muted); font-size: var(--ui-fs-sm); padding-top: 2px; }
.ui-kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- 9. Таблица журнала ---------- */
/* min-width: 0 и max-width: 100% — чтобы обёртка в grid/flex не растягивалась под широкую таблицу
   и прокручивалась сама, а не вся страница (аудит 09.2026, E-1: тарифы на телефоне). */
.ui-table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); -webkit-overflow-scrolling: touch; }
.ui-table-wrap:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.4; }
.ui-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 14px; text-align: left; white-space: nowrap;
  background: var(--ui-surface-2); color: var(--ui-muted);
  font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--ui-line);
}
.ui-table th:first-child { border-top-left-radius: var(--ui-radius-lg); }
.ui-table th:last-child { border-top-right-radius: var(--ui-radius-lg); }
.ui-table td { padding: 12px 14px; border-bottom: 1px solid var(--ui-line); vertical-align: top; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table--zebra tbody tr:nth-child(even) td { background: #fbfaf7; }
.ui-table tbody tr:hover td { background: var(--ui-surface-2); }
.ui-table--dense td { padding: 8px 12px; }
.ui-table--dense th { padding: 8px 12px; }
.ui-table .ui-num, .ui-table__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ui-table__primary { font-weight: 600; color: var(--ui-ink); }
.ui-table__muted { color: var(--ui-muted); }
.ui-table__actions { text-align: right; white-space: nowrap; }
.ui-table__actions .ui-btn { vertical-align: middle; }
.ui-table tr.is-today td { background: #fffaf0; }
.ui-table tr.is-today td:first-child { box-shadow: inset 3px 0 0 var(--ui-amber-bright); }
.ui-table tr.is-bad td:first-child { box-shadow: inset 3px 0 0 var(--ui-bad); }
.ui-table__date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-table__time { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-table__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); padding: 10px 14px; border-top: 1px solid var(--ui-line); font-size: var(--ui-fs-sm); color: var(--ui-muted); }

/* ---------- 10. Бейджи статусов (цвет + иконка + текст) ---------- */
.ui-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px 3px 8px; border-radius: var(--ui-radius-pill); background: var(--ui-neutral-bg); color: var(--ui-neutral); font-size: var(--ui-fs-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; vertical-align: middle; }
.ui-badge .ui-icon { width: 16px; height: 16px; stroke-width: 2; }
.ui-badge--ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-badge--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-badge--bad { background: var(--ui-bad-bg); color: var(--ui-bad); }
.ui-badge--info { background: var(--ui-primary-tint); color: var(--ui-primary); }
.ui-badge--amber { background: var(--ui-amber-tint); color: var(--ui-amber-text); }
.ui-badge--ink { background: var(--ui-ink); color: #fff; }
.ui-badge--lg { min-height: 32px; padding: 4px 12px 4px 10px; font-size: 14px; }
.ui-badge--lg .ui-icon { width: 18px; height: 18px; }
.ui-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ui-badge--dot { padding-left: 10px; }
.ui-badge--dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ui-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ui-radius-pill); background: var(--ui-neutral-bg); color: var(--ui-neutral); font-size: var(--ui-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-count--bad { background: var(--ui-bad); color: #fff; }
.ui-count--warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-count--primary { background: var(--ui-primary); color: #fff; }

/* ---------- 11. Пустое состояние ---------- */
.ui-empty { display: grid; justify-items: center; text-align: center; gap: var(--ui-s2); padding: var(--ui-s10) var(--ui-s6); }
.ui-empty__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ui-primary-tint); color: var(--ui-primary); display: grid; place-items: center; margin-bottom: var(--ui-s1); }
.ui-empty__icon .ui-icon { width: 28px; height: 28px; stroke-width: 1.5; }
.ui-empty__title { font-size: 18px; font-weight: 600; margin: 0; }
.ui-empty__text { margin: 0; color: var(--ui-muted); max-width: 46ch; }
.ui-empty__example { margin: var(--ui-s2) 0 0; padding: 10px 14px; border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius); background: var(--ui-paper); font-size: var(--ui-fs-sm); color: var(--ui-ink-2); }
.ui-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-s2); margin-top: var(--ui-s3); }
.ui-empty--compact { padding: var(--ui-s6) var(--ui-s4); }
.ui-empty--left { justify-items: start; text-align: left; }
.ui-empty--left .ui-empty__actions { justify-content: flex-start; }

/* ---------- 12. Уведомления ---------- */
.ui-notice { display: flex; align-items: flex-start; gap: var(--ui-s3); padding: 12px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-notice > .ui-icon { flex: none; margin-top: 2px; color: var(--ui-primary); }
.ui-notice__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ui-notice__title { font-weight: 600; }
.ui-notice__text { color: var(--ui-ink-2); font-size: 14px; line-height: 1.45; }
.ui-notice__actions { display: flex; align-items: center; gap: var(--ui-s2); flex: none; }
.ui-notice__close { flex: none; margin: -6px -8px -6px 0; }
.ui-notice--success { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); }
.ui-notice--success > .ui-icon { color: var(--ui-ok); }
.ui-notice--warning { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); }
.ui-notice--warning > .ui-icon { color: var(--ui-warn); }
.ui-notice--error { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); }
.ui-notice--error > .ui-icon { color: var(--ui-bad); }
.ui-notices { display: grid; gap: var(--ui-s2); }
/* Уведомление с кнопками действий: на телефоне кнопки переносятся под текст (см. медиазапрос 700px) */
.ui-notice--wrap { flex-wrap: wrap; }
.ui-notice--wrap .ui-notice__body { flex: 1 1 220px; }
.ui-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: min(520px, calc(100vw - 32px)); box-shadow: var(--ui-shadow-lg); }

/* ---------- 13. Боковая панель и навигация ---------- */
.ui-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ui-s4); padding: var(--ui-s4) var(--ui-s3); background: var(--ui-surface-2); border-right: 1px solid var(--ui-line); }
.ui-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: var(--ui-ink); text-decoration: none; min-width: 0; }
.ui-brand:hover { color: var(--ui-ink); }
.ui-brand__mark { width: 36px; height: 36px; flex: none; border-radius: 9px; }
.ui-brand__text { display: grid; min-width: 0; }
.ui-brand__name { font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.ui-brand__sub { font-size: var(--ui-fs-xs); color: var(--ui-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav { display: grid; gap: 2px; }
.ui-nav__group { padding: 12px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ui-muted); }
.ui-nav__item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--ui-radius); color: var(--ui-ink-2); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background-color .12s ease, color .12s ease; }
.ui-nav__item .ui-icon { width: 20px; height: 20px; color: var(--ui-muted); transition: color .12s ease; }
.ui-nav__item:hover { background: rgba(29, 28, 25, .05); color: var(--ui-ink); }
.ui-nav__item:hover .ui-icon { color: var(--ui-ink-2); }
.ui-nav__item.is-active { background: var(--ui-surface); color: var(--ui-primary); font-weight: 600; box-shadow: var(--ui-shadow-sm); }
.ui-nav__item.is-active .ui-icon { color: var(--ui-primary); }
.ui-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-primary); }
.ui-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav__count { margin-left: auto; }
.ui-nav__item--muted { color: var(--ui-muted); font-weight: 400; min-height: 36px; }
.ui-sidebar__foot { margin-top: auto; display: grid; gap: 2px; padding-top: var(--ui-s3); border-top: 1px solid var(--ui-line); }
.ui-sidebar__company { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0; }
.ui-sidebar__company-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sidebar__company-sub { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ui-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ui-amber-tint); color: var(--ui-amber-text); display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* Верхняя полоса (компьютер): название компании слева, действия справа */
.ui-topbar { position: sticky; top: 0; z-index: 20; height: var(--ui-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); padding: 0 var(--ui-page-x); background: rgba(247, 245, 240, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ui-line); }
.ui-topbar__title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.ui-topbar__title .ui-badge { font-weight: 600; }
.ui-topbar__actions { display: flex; align-items: center; gap: var(--ui-s2); }

/* Мобильная шапка с бургером */
.ui-mobilebar { display: none; position: sticky; top: 0; z-index: 30; height: var(--ui-topbar-h); align-items: center; gap: 10px; padding: 0 12px 0 16px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.ui-mobilebar .ui-brand { padding: 0; gap: 8px; }
.ui-mobilebar .ui-brand__mark { width: 32px; height: 32px; border-radius: 8px; }
.ui-mobilebar__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mobilebar__burger { margin-left: auto; }

/* Выезжающее меню */
.ui-drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.ui-drawer.is-open, .ui-drawer:target { display: block; }
.ui-drawer__backdrop { position: absolute; inset: 0; background: rgba(29, 28, 25, .45); border: 0; padding: 0; margin: 0; width: 100%; cursor: pointer; }
.ui-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); display: flex; flex-direction: column; gap: var(--ui-s3); padding: var(--ui-s3); overflow-y: auto; animation: ui-slide-in .2s ease-out; }
.ui-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 8px; }
.ui-drawer .ui-nav__item { min-height: 48px; font-size: 16px; }
@keyframes ui-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Нижняя панель на телефоне: Сегодня / Журналы / Ещё */
.ui-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ui-surface); border-top: 1px solid var(--ui-line); grid-auto-flow: column; grid-auto-columns: 1fr; }
.ui-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ui-muted); font-size: 11px; font-weight: 600; text-decoration: none; border: 0; background: none; font-family: inherit; }
.ui-tabbar__item .ui-icon { width: 24px; height: 24px; }
.ui-tabbar__item:hover { color: var(--ui-ink-2); }
.ui-tabbar__item.is-active, .ui-tabbar__item.is-active:hover { color: var(--ui-primary); }
.ui-tabbar__item.is-active .ui-icon { stroke-width: 2; }
.ui-tabbar__item:active { background: var(--ui-surface-2); }

/* ---------- 14. Вкладки и сегменты ---------- */
.ui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ui-line); overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ui-muted); font: 600 var(--ui-fs-md)/1 var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ui-tab:hover { color: var(--ui-ink); }
.ui-tab.is-active { color: var(--ui-ink); border-bottom-color: var(--ui-primary); }
.ui-tab .ui-count { margin-left: -2px; }
.ui-segment { display: inline-flex; padding: 3px; border-radius: var(--ui-radius-pill); background: var(--ui-surface-2); border: 1px solid var(--ui-line); }
.ui-segment__item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--ui-radius-pill); border: 0; background: none; color: var(--ui-muted); font: 600 14px/1 var(--ui-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ui-segment__item.is-active { background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow-sm); }
.ui-segment--block { display: flex; }
.ui-segment--block .ui-segment__item { flex: 1; }

/* ---------- 15. Выпадающее меню «…» (без JS, на <details>) ---------- */
.ui-menu { position: relative; display: inline-block; }
.ui-menu > summary { list-style: none; cursor: pointer; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 35; min-width: 240px; padding: 6px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-lg); display: grid; gap: 2px; }
.ui-menu--left .ui-menu__list { right: auto; left: 0; }
.ui-menu__item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--ui-radius); background: none; color: var(--ui-ink); font: 500 14.5px/1.2 var(--ui-font); text-decoration: none; text-align: left; cursor: pointer; width: 100%; }
.ui-menu__item .ui-icon { color: var(--ui-muted); }
.ui-menu__item:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-menu__item--danger { color: var(--ui-bad); }
.ui-menu__item--danger .ui-icon { color: var(--ui-bad); }
.ui-menu__item--danger:hover { background: var(--ui-bad-bg); color: var(--ui-bad); }
.ui-menu__sep { height: 1px; margin: 4px 6px; background: var(--ui-line); }
.ui-menu__label { padding: 8px 12px 4px; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }

/* ---------- 16. Прогресс, полоска дней, «сегодня N из M» ---------- */
.ui-progress { height: 8px; border-radius: var(--ui-radius-pill); background: var(--ui-surface-3); overflow: hidden; }
.ui-progress__bar { height: 100%; border-radius: inherit; background: var(--ui-primary); transition: width .3s ease; }
.ui-progress--warn .ui-progress__bar { background: #d99a1e; }
.ui-progress--bad .ui-progress__bar { background: var(--ui-bad); }
.ui-progress--thin { height: 4px; }
.ui-days { display: flex; gap: 4px; }
.ui-day { flex: 1; height: 10px; border-radius: 3px; background: var(--ui-surface-3); min-width: 6px; }
.ui-day--ok { background: var(--ui-ok); opacity: .85; }
.ui-day--bad { background: var(--ui-bad); }
.ui-day--warn { background: #d99a1e; }
.ui-day--skip { background: var(--ui-line-strong); }
.ui-day--future { background: transparent; border: 1px dashed var(--ui-line-strong); }
.ui-day--today { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-amber-bright); }
.ui-days--labeled { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ui-days--labeled .ui-day { height: 36px; min-width: 0; display: grid; place-items: center; font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-ink-2); border-radius: 6px; }
.ui-days--labeled .ui-day--ok, .ui-days--labeled .ui-day--bad { color: #fff; opacity: 1; }
.ui-days__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ui-days__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ui-days__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.ui-today { --p: 0; display: flex; align-items: center; gap: var(--ui-s4); padding: var(--ui-s4) var(--ui-s5); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); }
.ui-today__ring { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; background: conic-gradient(var(--ui-primary) calc(var(--p) * 1%), var(--ui-surface-3) 0); display: grid; place-items: center; }
.ui-today__ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--ui-surface); }
.ui-today__ring b { position: relative; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-today__ring.is-done { background: var(--ui-ok); }
.ui-today__ring.is-done b { color: var(--ui-ok); }
.ui-today__body { min-width: 0; display: grid; gap: 2px; flex: 1; }
.ui-today__title { font-size: var(--ui-fs-h3); font-weight: 600; }
.ui-today__text { color: var(--ui-muted); font-size: 14px; }
.ui-today__actions { flex: none; }
.ui-today--bad .ui-today__ring { background: conic-gradient(var(--ui-bad) calc(var(--p) * 1%), var(--ui-surface-3) 0); }

/* Метрика-плитка */
.ui-stat { display: grid; gap: 4px; padding: var(--ui-s4) var(--ui-s5); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); color: inherit; text-decoration: none; min-width: 0; }
.ui-stat__label { font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-muted); display: flex; align-items: center; gap: 6px; }
.ui-stat__value { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-stat__value small { font-size: 15px; font-weight: 500; color: var(--ui-muted); margin-left: 4px; }
.ui-stat__meta { font-size: var(--ui-fs-sm); color: var(--ui-muted); display: flex; align-items: center; gap: 6px; }
.ui-stat--bad .ui-stat__value { color: var(--ui-bad); }
.ui-stat--warn .ui-stat__value { color: var(--ui-warn); }
.ui-stat--ok .ui-stat__value { color: var(--ui-ok); }
a.ui-stat:hover { border-color: var(--ui-line-strong); background: #fdfcfa; color: inherit; }

/* ---------- 17. Списки-строки (журналы, сотрудники, записи на телефоне) ---------- */
.ui-list { display: grid; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); overflow: hidden; }
.ui-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); padding: 12px 16px; background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-ink-2); }
.ui-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--ui-line); color: var(--ui-ink); text-decoration: none; background: var(--ui-surface); min-height: 64px; }
.ui-row:first-child, .ui-list__head + .ui-row { border-top: 0; }
a.ui-row:hover, .ui-row--link:hover { background: #fbfaf7; color: var(--ui-ink); }
.ui-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.ui-row__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--ui-primary-tint); color: var(--ui-primary); display: grid; place-items: center; }
.ui-row__icon--amber { background: var(--ui-amber-tint); color: var(--ui-amber-text); }
.ui-row__icon--muted { background: var(--ui-surface-2); color: var(--ui-muted); }
.ui-row__icon--bad { background: var(--ui-bad-bg); color: var(--ui-bad); }
.ui-row__body { min-width: 0; display: grid; gap: 3px; }
.ui-row__title { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ui-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--ui-fs-sm); color: var(--ui-muted); line-height: 1.35; }
.ui-row__meta .ui-icon { width: 14px; height: 14px; }
.ui-row__aside { display: flex; align-items: center; gap: var(--ui-s2); flex: none; }
.ui-row--muted { opacity: .6; }

/* ---------- 18. Липкая панель действий (форма на кухне) ---------- */
.ui-sticky-actions { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 10px; align-items: center; padding: 12px 0; margin-top: var(--ui-s4); background: linear-gradient(to top, var(--ui-paper) 70%, rgba(247, 245, 240, 0)); }
.ui-sticky-actions .ui-btn--primary { flex: 1; }
.ui-sticky-actions__secondary { display: flex; gap: 8px; }

/* Плавающая кнопка помощника */
.ui-fab { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-pill); background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow-lg); font: 600 14px/1 var(--ui-font); cursor: pointer; }
.ui-fab .ui-icon { color: var(--ui-amber-text); }
.ui-fab:hover { border-color: var(--ui-line-strong); }

/* ---------- 19. Шаги (регистрация / мастер) ---------- */
.ui-steps { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; list-style: none; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-steps li { display: flex; align-items: center; gap: 8px; }
.ui-steps li + li::before { content: ""; width: 20px; height: 1px; background: var(--ui-line-strong); }
.ui-steps__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ui-surface-2); color: var(--ui-muted); border: 1px solid var(--ui-line-strong); }
.ui-steps .is-active { color: var(--ui-ink); font-weight: 600; }
.ui-steps .is-active .ui-steps__n { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
.ui-steps .is-done .ui-steps__n { background: var(--ui-ok-bg); color: var(--ui-ok); border-color: var(--ui-ok-line); }

/* ---------- 20. Публичные страницы (минимум) ---------- */
.ui-public-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s4); height: 64px; }
.ui-public-nav__links { display: flex; align-items: center; gap: var(--ui-s5); }
.ui-public-nav__links a { color: var(--ui-ink-2); font-weight: 500; text-decoration: none; }
.ui-public-nav__links a:hover { color: var(--ui-ink); }
.ui-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: var(--ui-s10); align-items: center; padding: var(--ui-s12) 0; }
.ui-hero__copy { display: grid; gap: var(--ui-s4); }
.ui-hero__text { font-size: var(--ui-fs-lg); color: var(--ui-ink-2); max-width: 54ch; margin: 0; }
.ui-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); margin-top: var(--ui-s1); }
.ui-hero__shot { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); overflow: hidden; box-shadow: var(--ui-shadow-sm); }
.ui-hero__shot img { display: block; width: 100%; }
.ui-band { background: var(--ui-surface-2); border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); padding: var(--ui-s10) 0; }
.ui-feature { display: grid; gap: var(--ui-s2); align-content: start; }
.ui-feature__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ui-primary-tint); color: var(--ui-primary); display: grid; place-items: center; }
.ui-feature__icon .ui-icon { width: 24px; height: 24px; }
.ui-feature__title { font-size: var(--ui-fs-h3); font-weight: 600; margin: 0; }
.ui-feature__text { color: var(--ui-muted); margin: 0; }
.ui-price { font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ui-price small { font-size: 15px; font-weight: 500; color: var(--ui-muted); letter-spacing: 0; }
.ui-footer { display: flex; justify-content: space-between; gap: var(--ui-s4); padding: var(--ui-s6) 0; margin-top: var(--ui-s8); border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.ui-footer nav { display: flex; flex-wrap: wrap; gap: var(--ui-s4); justify-content: flex-end; }
.ui-footer a { color: var(--ui-ink-2); text-decoration: none; }
.ui-footer a:hover { color: var(--ui-ink); }

/* ---------- 21. Утилиты ---------- */
.ui-hide-mobile { display: initial; }
.ui-hide-desktop { display: none !important; }
.ui-mt-1 { margin-top: var(--ui-s1); } .ui-mt-2 { margin-top: var(--ui-s2); } .ui-mt-3 { margin-top: var(--ui-s3); } .ui-mt-4 { margin-top: var(--ui-s4); } .ui-mt-6 { margin-top: var(--ui-s6); }
.ui-mb-2 { margin-bottom: var(--ui-s2); } .ui-mb-3 { margin-bottom: var(--ui-s3); } .ui-mb-4 { margin-bottom: var(--ui-s4); }
.ui-w-full { width: 100%; }
.ui-text-center { text-align: center; }
.ui-nowrap { white-space: nowrap; }
.ui-flex-1 { flex: 1; min-width: 0; }
.ui-hr { border: 0; border-top: 1px solid var(--ui-line); margin: var(--ui-s4) 0; }

/* ---------- 22. Адаптив ---------- */
@media (max-width: 1100px) {
  :root { --ui-sidebar-w: 224px; --ui-page-x: 20px; }
  .ui-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-grid--sidebar { grid-template-columns: 1fr; }
  .ui-hero { grid-template-columns: 1fr; gap: var(--ui-s6); padding: var(--ui-s8) 0; }
}

@media (max-width: 900px) {
  :root { --ui-page-x: 16px; --ui-fs-h1: 24px; }
  .ui-shell { grid-template-columns: minmax(0, 1fr); }
  .ui-sidebar { display: none; }
  .ui-topbar { display: none; }
  .ui-mobilebar { display: flex; }
  .ui-tabbar { display: grid; }
  .ui-main--with-tabbar { padding-bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom) + 8px); }
  .ui-hide-mobile { display: none !important; }
  .ui-hide-desktop { display: initial !important; }
  .ui-page-head { flex-direction: column; align-items: stretch; padding: var(--ui-s4) 0 var(--ui-s3); }
  .ui-page-head__actions { padding-top: 0; }
  .ui-page-head__actions .ui-btn:not(.ui-btn--icon) { flex: 1; }
  .ui-grid--3, .ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-grid--3 { grid-template-columns: 1fr; }
  .ui-card__head, .ui-card__body, .ui-card__foot { padding-left: var(--ui-s4); padding-right: var(--ui-s4); }
  .ui-sticky-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ui-main--with-tabbar .ui-sticky-actions { bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom)); }
  .ui-fab { bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom) + 12px); right: 12px; }
  .ui-main--with-tabbar .ui-fab { bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom) + 12px); }
  /* Кнопка ИИ-помощника не ложится на нижнюю панель кабинета и прячется при открытой клавиатуре (аудит E-6). */
  body.has-tabbar .ai-assistant:not(.is-open) { bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom) + 12px); }
  .ai-assistant.is-keyboard:not(.is-open) { display: none; }
  .ui-public-nav__links { display: none; }
  .ui-footer { flex-direction: column; }
  .ui-footer nav { justify-content: flex-start; }
  .ui-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .ui-kv dt { padding-top: 8px; }
  .ui-today { flex-wrap: wrap; }
  .ui-today__actions { width: 100%; }
  .ui-today__actions .ui-btn { width: 100%; }
}

@media (max-width: 700px) {
  .ui-grid--2, .ui-grid--4 { grid-template-columns: 1fr; }
  .ui-stat__value { font-size: 24px; }
  .ui-btn-row--mobile-stack { flex-direction: column; align-items: stretch; }
  .ui-btn-row--mobile-stack .ui-btn { width: 100%; }
  .ui-empty { padding: var(--ui-s8) var(--ui-s4); }
  .ui-chips--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-row { grid-template-columns: auto minmax(0, 1fr); }
  .ui-row__aside { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .ui-row__aside .ui-btn { min-height: 44px; }
  /* Меню «…» в строке справочника — тоже 44 px под палец (аудит E-17) */
  .ui-row__aside .ui-menu > summary.ui-btn--sm { min-width: 44px; min-height: 44px; }
  .ui-row--plain .ui-row__aside { grid-column: 1; }
  .ui-menu__list { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); min-width: 0; }
  .ui-main--with-tabbar .ui-menu__list { bottom: calc(var(--ui-tabbar-h) + 12px + env(safe-area-inset-bottom)); }
  .ui-menu__item { min-height: 48px; font-size: 16px; }
  .ui-notice--wrap .ui-notice__actions { width: 100%; padding-left: 32px; }
  .ui-notice--wrap .ui-notice__actions .ui-btn--sm { min-height: 44px; }

  /* Таблица журнала → карточки «метка — значение» */
  .ui-table--cards { display: block; }
  .ui-table--cards thead { display: none; }
  .ui-table--cards tbody, .ui-table--cards tr, .ui-table--cards td { display: block; }
  .ui-table--cards tr { padding: 6px 0; border-bottom: 1px solid var(--ui-line); }
  .ui-table--cards tr:last-child { border-bottom: 0; }
  .ui-table--cards td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; padding: 6px 16px; border: 0 !important; background: transparent !important; }
  .ui-table--cards td::before { content: attr(data-label); color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding-top: 2px; }
  .ui-table--cards td.ui-table__primary { grid-template-columns: 1fr; padding-top: 10px; font-size: 16px; }
  .ui-table--cards td.ui-table__primary::before { display: none; }
  .ui-table--cards td.ui-table__actions { grid-template-columns: 1fr; text-align: left; padding-bottom: 10px; }
  .ui-table--cards td.ui-table__actions::before { display: none; }
  .ui-table--cards td.ui-table__num { text-align: left; }
  .ui-table--cards tr.is-today { background: #fffaf0; box-shadow: inset 3px 0 0 var(--ui-amber-bright); }
  .ui-table--cards tr.is-bad { box-shadow: inset 3px 0 0 var(--ui-bad); }
  .ui-table--cards td[data-label=""]::before { display: none; }
  .ui-table-wrap:has(> .ui-table--cards) { overflow-x: visible; }
}

/* ---------- 22a. Атрибут hidden ----------
   Компоненты с display: flex/grid (.ui-notice, .ui-filter-chip) игнорировали hidden — на форме
   регистрации всегда висела пустая зелёная плашка (аудит 09.2026, E-2). Одно правило для всех. */
[hidden] { display: none !important; }

/* ---------- 23. Печать и доступность ---------- */
@media print {
  .ui-sidebar, .ui-topbar, .ui-mobilebar, .ui-tabbar, .ui-sticky-actions, .ui-fab, .ui-drawer, .ui-menu, .ui-public-header, .ui-shell__footer, .ai-assistant, .ui-pwa-banner { display: none !important; }
  .ui-shell { display: block; background: #fff; }
  .ui-root { background: #fff; color: #000; }
  .ui-card, .ui-table-wrap, .ui-list { border-color: #bbb; box-shadow: none; }
  .ui-table th { position: static; background: #f0f0f0; color: #333; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-root *, .ui-root *::before, .ui-root *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 24. Оболочка кабинета (base.html): дополнения к панели, шапкам, подвалу ---------- */
.ui-brand__mark { object-fit: contain; }
.ui-sidebar__company-text { display: grid; min-width: 0; }
.ui-sidebar__logout { margin: 0; }
button.ui-nav__item { width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left; }
button.ui-nav__item:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: -3px; }
.ui-topbar__title > .ui-truncate { min-width: 0; }
.ui-topbar__upsell { min-height: 40px; padding: 0 14px; font-size: 14px; }
.ui-topbar__upsell .ui-icon { color: var(--ui-primary); }
.ui-topbar .ui-btn--icon { width: 40px; min-height: 40px; }
.ui-topbar .ui-btn--icon .ui-icon { color: var(--ui-amber-text); }
.ui-mobilebar .ui-btn--icon .ui-icon { color: var(--ui-ink-2); }
.ui-mobilebar [data-ai-open] .ui-icon { color: var(--ui-amber-text); }
.ui-mobilebar__burger { margin-left: 0; }

/* Публичная шапка гостя */
.ui-public-header { background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.ui-public-nav { height: auto; min-height: 64px; gap: var(--ui-s3); }
.ui-public-nav .ui-brand { padding: 4px 0; }
.ui-public-nav__links { margin-left: auto; }
.ui-public-nav__links a { font-size: 14.5px; white-space: nowrap; }
.ui-public-nav__actions { display: flex; align-items: center; gap: var(--ui-s2); }
.ui-public-nav__burger { display: none; }

/* Выезжающее меню: шапка, кнопки для гостя, блокировка прокрутки страницы */
.ui-drawer[aria-hidden="true"] { display: none; }
.ui-drawer.is-open[aria-hidden="true"] { display: block; }
.ui-drawer__panel > .ui-sidebar__foot { margin-top: auto; }
.ui-drawer__actions { display: grid; gap: var(--ui-s2); padding: var(--ui-s3) 4px 4px; margin-top: auto; }
.ui-drawer .ui-brand__mark { width: 32px; height: 32px; border-radius: 8px; }
body.is-drawer-open { overflow: hidden; }

/* Сообщения Django и подвал */
.ui-shell__messages { padding-top: var(--ui-s4); }
.ui-notices.messages { padding: 0; gap: var(--ui-s2); }
.ui-notice.message { color: var(--ui-ink); }
.ui-notice.message.error { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); color: var(--ui-ink); }
.ui-notice.message.first-step { background: var(--ui-amber-tint); border-color: var(--ui-amber-line); color: var(--ui-ink); font-weight: 600; }
.ui-notice.message.first-step > .ui-icon { color: var(--ui-amber-text); }
.ui-shell__footer { margin-top: auto; }
.ui-footer__brand { display: grid; gap: 2px; }
.ui-footer__brand strong { color: var(--ui-ink-2); font-weight: 600; }
.ui-footer__brand small { font-size: var(--ui-fs-xs); }
.ui-shell--guest .ui-main > .ui-shell__footer .ui-footer { margin-top: var(--ui-s6); }

/* Баннер «Добавить на экран»: светлая карточка над нижней панелью */
.ui-pwa-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 46; display: grid; gap: var(--ui-s3); padding: var(--ui-s4); box-shadow: var(--ui-shadow-lg); }
.ui-main--with-tabbar .ui-pwa-banner { bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom) + 12px); }
.ui-pwa-banner[hidden] { display: none; }
.ui-pwa-banner [hidden] { display: none !important; }
.ui-pwa-banner__text { display: grid; gap: 4px; }
.ui-pwa-banner__text strong { font-size: 15px; }
.ui-pwa-banner__text span { font-size: var(--ui-fs-sm); color: var(--ui-muted); line-height: 1.45; }
.ui-pwa-banner__actions { display: flex; gap: var(--ui-s2); flex-wrap: wrap; }
.ui-pwa-banner__actions .ui-btn { flex: 1 1 120px; }

/* Помощник: кнопка с искрой в шапке (data-ai-open) или .ui-fab для гостя; панель — карточка
   с диалогом (пузыри, «печатает», чипы-подсказки, кнопки-действия) и формой «Написать в
   поддержку» на втором экране. Разметка — base.html, поведение — static/js/ai-assistant.js.
   На телефоне панель занимает весь экран (body.is-ai-open запирает прокрутку страницы). */
.ai-assistant { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: min(480px, calc(100vw - 32px)); pointer-events: none; font-family: var(--ui-font); }
.ai-assistant [hidden] { display: none !important; }
.ai-assistant-toggle, .ai-assistant-panel { pointer-events: auto; }
.ai-assistant-toggle { position: static; float: right; }
.ai-assistant-toggle[hidden], .ai-assistant.is-open .ai-assistant-toggle, .ai-assistant-panel[hidden] { display: none; }
.ai-assistant-panel { position: absolute; right: 0; bottom: 0; width: 100%; height: min(780px, calc(100vh - 48px)); height: min(780px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); }
.ai-assistant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-s3); padding: 14px 16px; border-bottom: 1px solid var(--ui-line); background: var(--ui-surface-2); }
.ai-assistant-head__text { min-width: 0; }
.ai-assistant-head strong { display: flex; align-items: center; gap: 6px; font-size: var(--ui-fs-h3); font-weight: 600; color: var(--ui-ink); }
.ai-assistant-head span { display: block; margin-top: 2px; color: var(--ui-muted); font-size: var(--ui-fs-sm); line-height: 1.35; }
.ai-assistant-view { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.ai-assistant-view[hidden] { display: none; }
.ai-assistant-body { display: grid; align-content: start; gap: 10px; padding: 14px; overflow: auto; overscroll-behavior: contain; }
.ai-message { width: fit-content; max-width: 92%; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 14px; padding: 11px 14px; color: var(--ui-ink); line-height: 1.5; font-size: 15px; }
.ai-message-bot { background: var(--ui-surface-2); border: 1px solid var(--ui-line); }
.ai-message-user { margin-left: auto; background: var(--ui-primary-tint); border: 1px solid var(--ui-primary-line); }
.ai-typing { display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 10px 14px; }
.ai-typing__label { margin-right: 6px; color: var(--ui-muted); font-size: 13px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-muted); animation: ai-typing 1s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.ai-assistant-chips, .ai-action-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-assistant-chips[hidden] { display: none; }
.ai-assistant-chips button, .ai-action-links a, .ai-action-links button { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-pill); background: var(--ui-surface); color: var(--ui-ink-2); font: 600 var(--ui-fs-sm)/1.2 var(--ui-font); text-align: left; text-decoration: none; cursor: pointer; }
.ai-assistant-chips button:hover, .ai-action-links a:hover, .ai-action-links button:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ai-action-links a, .ai-action-links button { border-color: var(--ui-primary-line); background: var(--ui-primary-tint); color: var(--ui-primary); }
.ai-action-links a:hover, .ai-action-links button:hover { background: #d6eadf; color: var(--ui-primary-deep); }
.ai-escalate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; max-width: 92%; padding: 10px 12px; border: 1px dashed var(--ui-line-strong); border-radius: 12px; color: var(--ui-ink-2); font-size: var(--ui-fs-sm); line-height: 1.4; }
.ai-assistant-form { display: grid; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--ui-line); background: var(--ui-surface); }
.ai-assistant-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.ai-assistant-input .ui-textarea { min-height: 48px; max-height: 140px; padding: 12px 14px; resize: none; line-height: 1.4; }
.ai-assistant-send { width: 48px; min-height: 48px; border-radius: 12px; }
.ai-assistant-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); }
.ai-assistant-foot .ui-hint { font-size: var(--ui-fs-xs); text-align: right; }
.ai-assistant-support { display: grid; align-content: start; gap: 12px; min-height: 0; padding: 12px 14px 14px; overflow: auto; overscroll-behavior: contain; }
.ai-assistant-support[hidden], .ai-assistant-support__fields[hidden], .ai-assistant-support__done[hidden], .ai-assistant-support__error[hidden] { display: none; }
.ai-assistant-support__fields { display: grid; gap: 12px; }
.ai-assistant-support__back { justify-self: start; margin-left: -8px; }
.ai-assistant-support__title { display: grid; gap: 4px; }
.ai-assistant-support__title strong { font-size: var(--ui-fs-h3); font-weight: 600; color: var(--ui-ink); }
.ai-assistant-support__title span { color: var(--ui-muted); font-size: var(--ui-fs-sm); line-height: 1.4; }
.ai-assistant-support__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s3); }
.ai-assistant-support__done { display: grid; gap: 12px; }
.ai-assistant-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .ui-public-nav__links, .ui-public-nav__actions { display: none; }
  .ui-public-nav__burger { display: inline-flex; margin-left: auto; }
  .ui-public-nav { min-height: var(--ui-topbar-h); }
  .ui-public-header { position: sticky; top: 0; z-index: 30; }
  .ui-public-nav .ui-brand__mark { width: 32px; height: 32px; border-radius: 8px; }
  .ui-public-nav .ui-brand__sub { display: none; }
  .ai-assistant { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
  .ui-main--with-tabbar .ai-assistant { bottom: calc(var(--ui-tabbar-h) + env(safe-area-inset-bottom) + 12px); }
  .ai-assistant.is-open { inset: 0; width: auto; z-index: 60; }
  .ai-assistant-panel { position: fixed; inset: 0; width: auto; height: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); }
  .ai-assistant-head { padding: 12px 14px; }
  .ai-assistant-body { padding: 12px; }
  .ai-message, .ai-escalate { max-width: 96%; }
  .ai-assistant-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ai-assistant-foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .ai-assistant-foot .ui-hint { text-align: left; }
  .ai-assistant-support { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .ai-assistant-support__actions .ui-btn--primary { width: 100%; }
  body.is-ai-open { overflow: hidden; }
}

/* ---------- 25. Совместимость: старые классы app.css в новой палитре и шрифте ----------
   Страницы переводятся на .ui-* целиком (см. docs/design-system.md, п. 8). Пока перевод идёт,
   старые токены и базовые блоки app.css (.button, .panel, .notice, .status, поля) берут цвета
   и шрифт из дизайн-системы, чтобы рядом с новой оболочкой не было двух палитр.
   После перевода всех страниц раздел удаляется вместе со старыми классами. */
.ui-root {
  --bg: var(--ui-paper);
  --panel: var(--ui-surface);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --accent: var(--ui-primary);
  --accent-2: var(--ui-green);
  --danger: var(--ui-bad);
  --radius: var(--ui-radius);
  --shadow: none;
}
.ui-root .button {
  min-height: var(--ui-control-h); padding: 0 18px; border-radius: var(--ui-radius);
  font-family: var(--ui-font); font-size: var(--ui-fs-md); font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ui-root .button.primary { background: var(--ui-primary); color: #fff; }
.ui-root .button.primary:hover { background: var(--ui-primary-deep); color: #fff; }
.ui-root .button.secondary { background: var(--ui-primary-tint); color: var(--ui-primary); border: 1px solid var(--ui-primary-line); }
.ui-root .button.secondary:hover { background: #d6eadf; color: var(--ui-primary-deep); }
.ui-root .button.ghost { background: var(--ui-surface); color: var(--ui-ink-2); border: 1px solid var(--ui-line-strong); }
.ui-root .button.ghost:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ui-root .button.danger { background: var(--ui-surface); color: var(--ui-bad); border: 1px solid var(--ui-bad-line); }
.ui-root .button.danger:hover { background: var(--ui-bad-bg); }
.ui-root .button:focus-visible, .ui-root .link-button:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
.ui-root .link-button, .ui-root .public-text-link { color: var(--ui-link); font-family: var(--ui-font); font-weight: 600; }
.ui-root .public-text-link:hover { color: var(--ui-primary-deep); }
.ui-root .eyebrow { color: var(--ui-primary); font-weight: 600; letter-spacing: .06em; }
.ui-root .panel, .ui-root .form-card, .ui-root .metrics article, .ui-root .metrics .metric-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: none; }
.ui-root .metric-card:hover, .ui-root .metric-card:focus-visible { border-color: var(--ui-line-strong); background: #fdfcfa; box-shadow: none; transform: none; }
.ui-root .metric-card.is-active { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-tint); }
.ui-root .metrics strong { font-size: 28px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-root .notice { background: var(--ui-surface-2); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.ui-root .notice.warning { background: var(--ui-warn-bg); color: var(--ui-warn); border-color: var(--ui-warn-line); }
.ui-root .notice a { color: var(--ui-link); font-weight: 600; }
.ui-root .status, .ui-root .control-badge, .ui-root .frequency-pill { font-weight: 600; font-size: var(--ui-fs-sm); background: var(--ui-neutral-bg); color: var(--ui-neutral); }
.ui-root .status-submitted, .ui-root .status-approved, .ui-root .status-done, .ui-root .control-badge-ok, .ui-root .frequency-pill-daily { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-root .status-rejected, .ui-root .status-overdue, .ui-root .status-deviation, .ui-root .control-badge-danger { background: var(--ui-bad-bg); color: var(--ui-bad); }
.ui-root .status-corrected, .ui-root .status-control, .ui-root .status-pending, .ui-root .control-badge-warn, .ui-root .frequency-pill-event { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-root .status-draft, .ui-root .status-skipped, .ui-root .control-badge-task, .ui-root .frequency-pill-scheduled { background: var(--ui-neutral-bg); color: var(--ui-neutral); }
.ui-root label { color: var(--ui-ink); font-weight: 600; }
.ui-root :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) { font-family: var(--ui-font); font-size: 16px; border-color: var(--ui-line-input); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-ink); }
.ui-root :where(input, textarea, select):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 0; border-color: var(--ui-primary); }
.ui-root th { background: var(--ui-surface-2); color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-root .actions a, .ui-root .team-section-head a, .ui-root .compact-empty a, .ui-root .site-footer a { color: var(--ui-link); font-weight: 600; }
.ui-root .filter-chip { font-family: var(--ui-font); }
.ui-root .filter-chip.is-active { background: var(--ui-ink); color: #fff; border-color: var(--ui-ink); }
.ui-root .page-head p, .ui-root .muted, .ui-root .empty { color: var(--ui-muted); }
/* Старые ссылки без класса наследовали цвет текста; в новой системе они зелёные, но карточки-ссылки остаются чёрными */
.ui-root :where(.metric-card, .journal-row, .row-card, .action-list a, .first-entry-main, .public-brand, .brand, .nav a) { color: inherit; }
/* Старый знак «А» на янтарной плашке (страницы входа и регистрации) — рисуем новым знаком до перевода страниц */
.ui-root .brand-mark { background: url("../img/logo-mark.378a6e1f17c0.svg") center / cover no-repeat; color: transparent; border-radius: 10px; font-size: 0; }
.ui-root .ui-drawer__panel:focus { outline: none; }

/* ==========================================================================
   26. Правки после визуальной проверки 13.09.2026 (оболочка)
   ========================================================================== */
/* Публичный подвал с реквизитами внутри кабинета не нужен — там боковая панель и «Выйти». */
body.is-authenticated .ui-footer { display: none; }
/* Закрытое меню «…» не должно распирать страницу: правило общее, а не в трёх страничных css. */
details.ui-menu:not([open]) > .ui-menu__list,
details.ui-menu:not([open]) > .ui-menu__form,
details.ui-menu:not([open]) > .ui-menu__row { display: none; }
@media (max-width: 700px) {
  /* Строки-списки: правая часть (шеврон/кнопка) остаётся справа по центру, а не уезжает под текст. */
  .ui-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .ui-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-row__aside { justify-self: end; }
  /* Плавающий помощник у гостя: маленькая круглая кнопка с искрой, без слова. */
  .ui-fab { width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center; border-radius: 50%; right: 16px; bottom: 16px; }
  .ui-fab span { display: none; }
}


/* ==========================================================================
   27. Публичная шапка и подвал: «Для кого», «Новости», телефон (SEO 24.09.2026)
   ========================================================================== */
/* В строке шапки теперь шесть ссылок. На ноутбуке им тесно, поэтому по мере сужения экрана:
   сначала прячем подпись под логотипом и сжимаем промежутки, затем — второстепенные пункты
   (ui-public-nav__more: «Новости», «Контакты» — они есть в подвале), а на узком ноутбуке
   ссылки уходят в выезжающее меню, как на телефоне; «Войти» и главная кнопка остаются.
   Точки перелома подобраны по замерам ширины строки, а не на глаз. */
.ui-public-nav__phone { display: none; }
@media (max-width: 1280px) {
  .ui-public-nav .ui-brand__sub { display: none; }
  .ui-public-nav__links { gap: var(--ui-s4); }
}
@media (max-width: 1160px) {
  .ui-public-nav__more { display: none; }
}
@media (max-width: 1040px) {
  .ui-public-nav__links { display: none; }
  .ui-public-nav__actions { margin-left: auto; }
  .ui-public-nav__burger { display: inline-flex; }
  /* Кнопка-трубка рядом с бургером — позвонить одним нажатием, не открывая меню. С той же
     ширины, что и бургер: на планшете (iPad лёжа — 1024 px) ссылки уже в меню и место есть. */
  .ui-public-nav__phone { display: inline-flex; }
}
@media (max-width: 900px) {
  /* Телефон: «Войти» и главная кнопка скрыты — трубку с бургером прижимаем вправо. */
  .ui-public-nav__phone { margin-left: auto; }
  .ui-public-nav__phone + .ui-public-nav__burger { margin-left: 0; }
}
/* Подвал: номер телефона — отдельной строкой под реквизитами, кликабельный. */
.ui-footer__brand .ui-footer__phone { color: var(--ui-ink-2); font-weight: 600; }

/* Помощник «с руками» (26.09.2026): форма кода из письма в чате и тихая полоска на образцах */
.ai-code-form { display: grid; gap: 10px; max-width: 92%; padding: 12px; border: 1px solid var(--ui-primary-line); border-radius: 12px; background: var(--ui-primary-tint); color: var(--ui-ink); font-size: var(--ui-fs-sm); line-height: 1.4; }
.ai-code-form p { margin: 0; }
.ai-code-form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ai-code-form__row .ui-input { min-height: 44px; font-size: 20px; letter-spacing: 0.25em; text-align: center; font-variant-numeric: tabular-nums; }
.ai-code-form__consent { font-size: var(--ui-fs-xs); }
.ai-code-form__consent a { color: inherit; }
.ai-code-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ai-code-form__foot .ui-hint, .ai-code-form__foot .ui-error { font-size: var(--ui-fs-xs); }
.ai-code-form.is-done { border-style: dashed; opacity: .85; }
.ai-nudge { position: fixed; left: 50%; bottom: 20px; z-index: 44; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(680px, calc(100vw - 32px)); padding: 10px 10px 10px 16px; border: 1px solid var(--ui-line-strong); border-radius: 18px; background: var(--ui-surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); font: 500 var(--ui-fs-sm)/1.35 var(--ui-font); color: var(--ui-ink); }
.ai-nudge[hidden], .is-ai-open .ai-nudge { display: none; }
.ai-nudge__text { flex: 1 1 auto; }
.ai-nudge__close { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); font: 20px/1 var(--ui-font); cursor: pointer; }
.ai-nudge__close:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
@media (max-width: 900px) {
  .ai-nudge { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); transform: none; max-width: none; flex-wrap: wrap; border-radius: 14px; }
  .ai-nudge .ui-btn { flex: 1 1 auto; }
  .ai-assistant.is-keyboard ~ .ai-nudge { display: none; }
}
/* «Куда отправить бланк?» — форма почты в чате (26.09.2026) */
.ai-code-form--email .ai-code-form__row .ui-input { font-size: 16px; letter-spacing: 0; text-align: left; }
.ai-code-form__consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ui-ink-2); }
.ai-code-form__consent input { margin-top: 3px; flex: none; }
.ai-code-form.is-done .ai-code-form__consent { opacity: .7; }
.ai-code-form__legal { margin: 0; color: var(--ui-muted); font-size: var(--ui-fs-xs); line-height: 1.4; }
.ai-code-form__legal a { color: inherit; }
/* Имя и телефон в форме кода помощника (27.09.2026) */
.ai-code-form__contacts { display: grid; gap: 8px; }
.ai-code-form__contacts .ui-input { min-height: 44px; font-size: 16px; letter-spacing: 0; text-align: left; }
/* Персонаж «Агата» и пузырь-тизер (26.09.2026) */
.agata-mascot { display: block; overflow: visible; }
.agata-mascot__body { transform-origin: 32px 32px; animation: agata-float 4s ease-in-out infinite; }
.agata-mascot__eyes { transform-origin: 32px 28px; animation: agata-blink 5s infinite; }
.agata-mascot__spark { transform-origin: 52px 12px; animation: agata-spark 3s ease-in-out infinite; }
.ai-assistant.is-thinking .agata-mascot__eyes { animation: agata-look 1.1s ease-in-out infinite; }
.ai-teaser.is-in .agata-mascot__body { animation: agata-wave .9s ease-in-out 1, agata-float 4s ease-in-out .9s infinite; }
@keyframes agata-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes agata-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes agata-spark { 0%, 100% { transform: scale(.85) rotate(0); opacity: .8; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
@keyframes agata-wave { 0% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes agata-look { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.6px); } }
.ai-fab__avatar { display: inline-flex; margin-left: -4px; }
.ai-fab__avatar .agata-mascot { width: 32px; height: 32px; }
.ai-assistant-toggle { padding-left: 10px; }
.ai-assistant-toggle.is-pulse { animation: agata-pulse 1.6s ease-out 2; }
@keyframes agata-pulse { 0% { box-shadow: var(--ui-shadow-lg), 0 0 0 0 rgba(47, 138, 99, .45); } 100% { box-shadow: var(--ui-shadow-lg), 0 0 0 14px rgba(47, 138, 99, 0); } }
.ai-head__avatar { display: inline-flex; }
.ai-head__avatar .agata-mascot { width: 28px; height: 28px; }
.ai-online { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.ai-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fa36b; box-shadow: 0 0 0 3px rgba(47, 163, 107, .18); }
.ai-teaser { position: absolute; right: 0; bottom: 0; width: min(440px, calc(100vw - 32px)); padding: 16px 16px 14px; border: 1px solid rgba(31, 107, 78, .18); border-radius: 22px; background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%); box-shadow: 0 22px 60px rgba(0, 0, 0, .2), 0 0 0 6px rgba(47, 138, 99, .07); pointer-events: auto; opacity: 0; transform: translateY(28px) scale(.94); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .25, 1.15); }
.ai-teaser.is-in { opacity: 1; transform: none; }
.ai-assistant.is-open .ai-teaser { display: none; }
.ai-teaser__close { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); font: 20px/1 var(--ui-font); cursor: pointer; }
.ai-teaser__close:hover { background: var(--ui-surface-2); color: var(--ui-ink); }
.ai-teaser__head { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.ai-teaser__avatar { flex: 0 0 auto; display: inline-flex; perspective: 520px; }
.ai-teaser__avatar .agata-mascot { width: 64px; height: 64px; filter: drop-shadow(0 10px 18px rgba(31, 107, 78, .3)); transform-style: preserve-3d; transition: transform .14s ease-out; will-change: transform; }
.ai-teaser.is-in .ai-teaser__avatar { animation: agata-pop .7s cubic-bezier(.34, 1.56, .64, 1) 1; }
@keyframes agata-pop { 0% { transform: translateY(20px) scale(.2) rotate(-18deg); opacity: 0; } 65% { transform: translateY(-4px) scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.ai-teaser__who { min-width: 0; }
.ai-teaser__name { font: 700 18px/1.2 var(--ui-font); color: var(--ui-ink); }
.ai-teaser__status { margin-top: 3px; color: var(--ui-muted); font-size: 13px; }
.ai-online { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13px; color: #1f8a57; }
.ai-online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fa36b; box-shadow: 0 0 0 0 rgba(47, 163, 107, .5); animation: ai-online-pulse 1.8s ease-out infinite; }
@keyframes ai-online-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 163, 107, .5); } 100% { box-shadow: 0 0 0 8px rgba(47, 163, 107, 0); } }
.ai-teaser__log { display: grid; gap: 8px; margin-top: 14px; min-height: 44px; }
.ai-teaser__log:empty { display: none; }
.ai-teaser__msg { width: fit-content; max-width: 100%; padding: 11px 14px; border: 1px solid var(--ui-line); border-radius: 16px 16px 16px 6px; background: var(--ui-surface); color: var(--ui-ink); font-size: 15px; line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); animation: ai-msg-in .3s ease-out; }
.ai-teaser__typing { border-radius: 16px 16px 16px 6px; background: var(--ui-surface); }
.ai-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -2px; animation: ai-caret 1s steps(2) infinite; }
@keyframes ai-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ai-msg-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.ai-teaser__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; animation: ai-msg-in .35s ease-out; }
.ai-teaser__form .ui-input { min-height: 50px; font-size: 15px; }
.ai-teaser__form .ui-btn--icon { width: 50px; min-height: 50px; border-radius: 14px; }
.ai-teaser__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; animation: ai-msg-in .35s ease-out .1s both; }
.ai-teaser__chips:empty { display: none; }
.ai-teaser__chips button { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-pill); background: var(--ui-surface); color: var(--ui-ink-2); font: 600 13px/1.2 var(--ui-font); text-align: left; cursor: pointer; }
.ai-teaser__chips button:hover { background: var(--ui-primary-tint); border-color: var(--ui-primary-line); color: var(--ui-primary-deep); }
.ai-teaser__note { margin: 10px 0 0; font-size: 12px; line-height: 1.35; color: var(--ui-muted); animation: ai-msg-in .35s ease-out .15s both; }
.ai-fab__avatar { perspective: 400px; }
.ai-fab__avatar .agata-mascot { transform-style: preserve-3d; transition: transform .14s ease-out; }
@media (max-width: 900px) {
  .ai-teaser { width: calc(100vw - 16px); right: -4px; bottom: -4px; padding: 14px 14px 12px; border-radius: 20px; }
  .ai-teaser__avatar .agata-mascot { width: 56px; height: 56px; }
  .ai-assistant.is-keyboard .ai-teaser { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .agata-mascot *, .ai-assistant-toggle.is-pulse { animation: none !important; }
  .ai-teaser { transition: none; }
}