/*! Premium UI v1.0.0 — CSS-библиотека Premium Units. Не редактируйте: собрано из src/ скриптом build.py */

/* ===== fonts.css ===== */
/* Фирменные шрифты. Пути относительны файлу premium-ui.css (папка fonts/ рядом).
   Neutral Face: лицензия запрещает распространение — раздавайте только со своих серверов. */
@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-Italic.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 700; font-display: swap; }
@font-face { font-family: "Neutral Face"; src: url("fonts/NeutralFace.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Neutral Face"; src: url("fonts/NeutralFace-Bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; }

/* ===== tokens.css ===== */
/* ==========================================================================
   Premium UI — design tokens
   Источник истины: BRAND GUIDLINE_Premium Units (стр. 26–30).
   Фирменные цвета стоят на 500-х (green, blue), 900 (navy) и 300 (gray)
   ступенях шкал; остальные ступени рассчитаны от них с тем же тоном.
   ========================================================================== */
:root {
  /* ---- Фирменная палитра (брендбук, стр. 26) ---- */
  --pu-brand-green: #25b98b;   /* основной цвет бренда, Pantone 339 */
  --pu-brand-navy:  #101b35;   /* тёмно-синий, Pantone 2767 */
  --pu-brand-gray:  #b5c5cd;   /* серо-голубой, Pantone 650 */
  --pu-brand-blue:  #17b3f0;   /* голубой акцент, Pantone 306 */
  --pu-brand-white: #ffffff;

  /* ---- Шкалы ---- */
  --pu-green-50:  #eefbf7;
  --pu-green-100: #daf6ed;
  --pu-green-200: #b6ecdb;
  --pu-green-300: #7cdebf;
  --pu-green-400: #41d2a4;
  --pu-green-500: #25b98b;
  --pu-green-600: #18a075;
  --pu-green-700: #0e815c;   /* текст/ссылки на белом: контраст 4.9:1 */
  --pu-green-800: #0c5f45;
  --pu-green-900: #0b4130;

  --pu-navy-50:  #f2f4f8;
  --pu-navy-100: #e2e5ee;
  --pu-navy-200: #c5ccdd;
  --pu-navy-300: #9aa6c1;
  --pu-navy-400: #6a7aa0;
  --pu-navy-500: #48577a;
  --pu-navy-600: #2f3e60;
  --pu-navy-700: #212f50;
  --pu-navy-800: #182544;
  --pu-navy-900: #101b35;

  --pu-gray-50:  #f6f8f9;
  --pu-gray-100: #ecf1f3;
  --pu-gray-200: #dae2e7;
  --pu-gray-300: #b5c5cd;
  --pu-gray-400: #90a3ad;
  --pu-gray-500: #6a808a;
  --pu-gray-600: #52666f;
  --pu-gray-700: #3b4c54;
  --pu-gray-800: #28373e;
  --pu-gray-900: #19242a;

  --pu-blue-50:  #ecf9fd;
  --pu-blue-100: #d0effb;
  --pu-blue-200: #a0dff8;
  --pu-blue-300: #66ccf4;
  --pu-blue-400: #36bdf2;
  --pu-blue-500: #17b3f0;
  --pu-blue-600: #088fc4;
  --pu-blue-700: #056f99;
  --pu-blue-800: #06526f;
  --pu-blue-900: #06384b;

  /* Служебные цвета статусов (в брендбуке не заданы — подобраны под палитру) */
  --pu-red-50:  #fff1ef;
  --pu-red-100: #fbdcd8;
  --pu-red-200: #f2c3bd;
  --pu-red-500: #c4483b;
  --pu-red-600: #a8372b;
  --pu-amber-50:  #fff6e0;
  --pu-amber-100: #fbe6b8;
  --pu-amber-500: #a56b0b;
  --pu-amber-600: #8a5700;

  /* ---- Семантические роли ---- */
  --pu-bg:            #eef3f5;              /* фон страницы (светлый серо-голубой, как в брендбуке) */
  --pu-surface:       #ffffff;
  --pu-surface-glass: rgba(255, 255, 255, .96);
  --pu-surface-soft:  var(--pu-gray-50);
  --pu-surface-sunken: var(--pu-gray-100);

  --pu-text:        var(--pu-navy-900);
  --pu-text-strong: var(--pu-navy-900);
  --pu-text-soft:   var(--pu-navy-600);
  --pu-muted:       var(--pu-gray-600);
  --pu-subtle:      var(--pu-gray-500);

  --pu-line:        var(--pu-gray-200);
  --pu-line-strong: var(--pu-gray-300);
  --pu-line-soft:   var(--pu-gray-100);

  --pu-accent:        var(--pu-brand-green);   /* заливки: кнопки, активные элементы */
  --pu-accent-hover:  var(--pu-green-600);
  --pu-accent-active: var(--pu-green-700);
  --pu-accent-soft:   var(--pu-green-50);
  --pu-accent-muted:  var(--pu-green-100);
  --pu-accent-text:   var(--pu-green-700);     /* текст и ссылки зелёным */
  --pu-on-accent:     #ffffff;

  --pu-success:      var(--pu-green-700);
  --pu-success-soft: var(--pu-green-50);
  --pu-info:         var(--pu-blue-700);
  --pu-info-soft:    var(--pu-blue-50);
  --pu-warning:      var(--pu-amber-500);
  --pu-warning-soft: var(--pu-amber-50);
  --pu-danger:       var(--pu-red-500);
  --pu-danger-hover: var(--pu-red-600);
  --pu-danger-soft:  var(--pu-red-50);
  --pu-danger-line:  var(--pu-red-200);
  --pu-neutral:      var(--pu-gray-700);
  --pu-neutral-soft: var(--pu-gray-100);

  --pu-focus-ring: 0 0 0 3px var(--pu-green-100);

  /* ---- Градиенты (брендбук, стр. 27) ---- */
  /* для фонов */
  --pu-gradient-navy-green: linear-gradient(135deg, var(--pu-brand-navy) 0%, var(--pu-brand-green) 100%);
  --pu-gradient-green-white: linear-gradient(135deg, var(--pu-brand-green) 0%, #ffffff 100%);
  --pu-gradient-gray-white: linear-gradient(135deg, var(--pu-brand-gray) 0%, #ffffff 100%);
  /* для графических элементов */
  --pu-gradient-blue-fade:  linear-gradient(90deg, rgba(23, 179, 240, 1) 0%, rgba(23, 179, 240, 0) 100%);
  --pu-gradient-green-fade: linear-gradient(90deg, rgba(37, 185, 139, 1) 0%, rgba(37, 185, 139, 0) 100%);
  --pu-gradient-white-fade: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

  /* ---- Типографика (брендбук, стр. 30) ---- */
  --pu-font-display: "Neutral Face", "PT Sans", Arial, sans-serif; /* заголовки: Regular, ВЕРХНИЙ РЕГИСТР */
  --pu-font-body:    "PT Sans", Arial, sans-serif;                 /* текст */
  --pu-fs-xs: 11px;
  --pu-fs-sm: 12.5px;
  --pu-fs-md: 14px;
  --pu-fs-lg: 16px;
  --pu-fs-xl: 17px;
  --pu-fs-h1: clamp(26px, 3vw, 38px);

  /* ---- Форма ---- */
  --pu-radius-xs: 8px;
  --pu-radius-sm: 12px;
  --pu-radius-md: 15px;
  --pu-radius-lg: 20px;
  --pu-radius-xl: 24px;
  --pu-radius-pill: 999px;

  --pu-shadow-sm: 0 1px 2px rgba(16, 27, 53, .05), 0 4px 12px rgba(16, 27, 53, .05);
  --pu-shadow:    0 16px 45px rgba(16, 27, 53, .08);
  --pu-shadow-lg: 0 24px 70px rgba(16, 27, 53, .18);
  --pu-shadow-accent: 0 8px 18px rgba(37, 185, 139, .22);
  --pu-shadow-danger: 0 8px 18px rgba(196, 72, 59, .14);

  --pu-space-1: 4px;
  --pu-space-2: 8px;
  --pu-space-3: 12px;
  --pu-space-4: 16px;
  --pu-space-5: 20px;
  --pu-space-6: 24px;
  --pu-space-8: 32px;

  --pu-topbar-height: 65px;
  --pu-container: 1600px;
  --pu-transition: .15s ease;
}

/* ===== base.css ===== */
/* ==========================================================================
   Base: сброс, типографика и «бесклассовые» элементы.
   Голые <button>, <input>, <select>, <textarea>, <label>, <table>, <h1>, <h2>
   выглядят по бренду внутри контейнера с классом .pu-classless
   (обычно <body class="pu-classless">) — так устроена эталонная админка.
   :where() обнуляет специфичность, поэтому стили страницы всегда главнее.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--pu-font-body);
  color: var(--pu-text);
  background: var(--pu-bg);
}
body { -webkit-font-smoothing: antialiased; }

a { color: var(--pu-accent-text); }

:focus-visible { outline: 3px solid rgba(37, 185, 139, .35); outline-offset: 2px; }

/* ---- Заголовки: Neutral Face, Regular, только верхний регистр ---- */
:where(.pu-classless) h1,
.pu-h1,
.pu-display {
  font-family: var(--pu-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.3px;
}
:where(.pu-classless) h1 { font-size: var(--pu-fs-h1); margin: 0 0 24px; }
/* Подзаголовки: PT Sans Bold (допускается брендбуком) */
:where(.pu-classless) h2 { font-size: var(--pu-fs-xl); font-weight: 700; margin: 0 0 14px; color: var(--pu-text-soft); }

/* ---- Поля ввода ---- */
:where(.pu-classless) input[type="text"],
:where(.pu-classless) input[type="tel"],
:where(.pu-classless) input[type="search"],
:where(.pu-classless) input[type="password"],
:where(.pu-classless) input[type="email"],
:where(.pu-classless) input[type="url"],
:where(.pu-classless) select,
:where(.pu-classless) textarea {
  width: 100%;
  font-size: var(--pu-fs-md);
}
:where(.pu-classless) input[type="text"],
:where(.pu-classless) input[type="tel"],
:where(.pu-classless) input[type="search"],
:where(.pu-classless) input[type="password"],
:where(.pu-classless) input[type="email"],
:where(.pu-classless) input[type="url"],
:where(.pu-classless) input[type="number"],
:where(.pu-classless) input[type="date"],
:where(.pu-classless) input[type="datetime-local"],
:where(.pu-classless) input[type="time"],
:where(.pu-classless) input[type="file"],
:where(.pu-classless) select,
:where(.pu-classless) textarea {
  min-height: 43px;
  padding: 10px 13px;
  border: 1px solid var(--pu-line-strong);
  border-radius: var(--pu-radius-sm);
  background: var(--pu-surface-soft);
  color: var(--pu-text);
  font-family: inherit;
  transition: border-color var(--pu-transition), box-shadow var(--pu-transition), background var(--pu-transition);
}
/* у «нетекстовых» полей рамка 2px (как системная), но светлее — габариты не меняются */
:where(.pu-classless) input[type="number"],
:where(.pu-classless) input[type="date"],
:where(.pu-classless) input[type="datetime-local"],
:where(.pu-classless) input[type="time"] { border-width: 2px; border-color: var(--pu-line); }
:where(.pu-classless) input[type="file"] { border-width: 0; }
:where(.pu-classless) textarea { resize: vertical; }
:where(.pu-classless) input:focus,
:where(.pu-classless) select:focus,
:where(.pu-classless) textarea:focus {
  outline: none;
  border-color: var(--pu-accent);
  box-shadow: var(--pu-focus-ring);
  background: var(--pu-surface);
}
:where(.pu-classless) input:disabled,
:where(.pu-classless) select:disabled,
:where(.pu-classless) textarea:disabled { opacity: .6; cursor: not-allowed; }
:where(.pu-classless) input[type="checkbox"],
:where(.pu-classless) input[type="radio"] { accent-color: var(--pu-accent); }

:where(.pu-classless) label {
  display: block;
  margin-bottom: 6px;
  color: var(--pu-muted);
  font-size: var(--pu-fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ---- Кнопки ---- */
:where(.pu-classless) button,
.btn {
  display: inline-block;
  min-height: 41px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--pu-radius-sm);
  background: var(--pu-accent);
  color: var(--pu-on-accent);
  box-shadow: var(--pu-shadow-accent);
  font-family: inherit;
  font-size: var(--pu-fs-md);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pu-transition), border-color var(--pu-transition), color var(--pu-transition), transform .05s;
}
:where(.pu-classless) button:hover,
.btn:hover { background: var(--pu-accent-hover); }
:where(.pu-classless) button:active,
.btn:active { transform: translateY(1px); }
:where(.pu-classless) button:disabled,
.btn[aria-disabled="true"] {
  background: var(--pu-gray-300);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ---- Таблицы ---- */
:where(.pu-classless) table { width: 100%; border-collapse: collapse; font-size: var(--pu-fs-sm); }
:where(.pu-classless) th,
:where(.pu-classless) td {
  padding: 12px;
  border-bottom: 1px solid var(--pu-line-soft);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
:where(.pu-classless) th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pu-gray-100);
  color: var(--pu-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:where(.pu-classless) tbody tr:hover { background: var(--pu-gray-50); }
:where(.pu-classless) td.wrap-text { white-space: normal; min-width: 160px; }

/* ===== components.css ===== */
/* ==========================================================================
   Components
   Имена классов совпадают с эталонной админкой Premium Units
   (.btn, .card, .badge, .table-scroll, .crumbs …).
   ========================================================================== */

/* ---------- Кнопки: варианты ---------- */
.btn-ghost {
  background: var(--pu-surface);
  color: var(--pu-accent-text);
  border: 1px solid var(--pu-line-strong);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--pu-accent-soft); border-color: var(--pu-accent); }

.pu-btn-secondary { background: var(--pu-accent-soft); color: var(--pu-accent-text); box-shadow: none; }
.pu-btn-secondary:hover { background: var(--pu-accent-muted); }

.pu-btn-dark { background: var(--pu-brand-navy); color: #fff; box-shadow: var(--pu-shadow-sm); }
.pu-btn-dark:hover { background: var(--pu-navy-700); }

.btn-danger { background: var(--pu-danger); box-shadow: var(--pu-shadow-danger); }
.btn-danger:hover { background: var(--pu-danger-hover); }

.pu-btn-link { min-height: 0; padding: 0; background: none; color: var(--pu-accent-text); box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.pu-btn-link:hover { background: none; color: var(--pu-green-800); }

.btn-small { min-height: 32px; margin: 3px; padding: 7px 12px; font-size: var(--pu-fs-sm); }
.pu-btn-lg { min-height: 50px; padding: 13px 24px; font-size: var(--pu-fs-lg); }
.pu-btn-block { display: block; width: 100%; text-align: center; }
.pu-btn-icon { display: inline-grid; place-items: center; width: 41px; padding: 0; }

/* ---------- Карточки ---------- */
.card {
  margin-bottom: 20px;
  padding: 24px 26px;
  border: 1px solid var(--pu-line);
  border-radius: var(--pu-radius-lg);
  background: var(--pu-surface-glass);
  box-shadow: var(--pu-shadow);
  backdrop-filter: blur(10px);
}
.pu-card-soft { background: var(--pu-surface-soft); box-shadow: none; }
.pu-card-dark { background: var(--pu-brand-navy); border-color: var(--pu-navy-700); color: #fff; }
.pu-card-brand { background: var(--pu-gradient-navy-green); border: 0; color: #fff; }

/* Карточка-плитка со ссылкой (главная админки, разделы) */
.pu-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--pu-line);
  border-radius: var(--pu-radius-lg);
  background: var(--pu-surface-glass);
  box-shadow: var(--pu-shadow);
  color: var(--pu-text);
  text-decoration: none;
  transition: transform var(--pu-transition), border-color var(--pu-transition), box-shadow var(--pu-transition);
}
.pu-tile:hover { transform: translateY(-2px); border-color: var(--pu-accent); }
.pu-tile__body { display: grid; flex: 1; gap: 4px; min-width: 0; }
.pu-tile__title { font-size: var(--pu-fs-xl); font-weight: 700; }
.pu-tile__desc { color: var(--pu-muted); font-size: 13.5px; }

.pu-icon-box {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--pu-accent-soft);
  color: var(--pu-accent-text);
}
.pu-icon-box svg { width: 26px; height: 26px; }

/* ---------- Таблицы ---------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--pu-line);
  border-radius: var(--pu-radius-md);
  background: var(--pu-surface);
}
.table-scroll table { border: none; }
.table-scroll th:first-child, .table-scroll td:first-child { padding-left: 14px; }

/* Таблица превращается в карточки на телефоне: <td data-label="…"> */
@media (max-width: 680px) {
  .pu-table-cards table, .pu-table-cards tbody { display: block; width: 100%; min-width: 0; }
  .pu-table-cards thead { display: none; }
  .pu-table-cards tbody { display: grid; gap: 12px; }
  .pu-table-cards tbody tr { display: block; padding: 3px 14px; border: 1px solid var(--pu-line); border-radius: 14px; background: var(--pu-surface-soft); box-shadow: var(--pu-shadow-sm); }
  .pu-table-cards tbody td { display: grid; grid-template-columns: minmax(112px, 38%) minmax(0, 1fr); gap: 12px; width: 100%; padding: 10px 0; white-space: normal; overflow-wrap: anywhere; }
  .pu-table-cards tbody tr td:last-child { border-bottom: 0; }
  .pu-table-cards tbody td > * { justify-self: start; }
  .pu-table-cards tbody td:first-child { padding-left: 0; }
  .pu-table-cards tbody td::before { content: attr(data-label); color: var(--pu-muted); font-size: var(--pu-fs-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
}

/* ---------- Бейджи ---------- */
.badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--pu-radius-pill);
  background: var(--pu-accent-soft);
  color: var(--pu-accent-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-success { background: var(--pu-success-soft); color: var(--pu-success); }
.badge-info    { background: var(--pu-info-soft);    color: var(--pu-info); }
.badge-warning { background: var(--pu-warning-soft); color: var(--pu-warning); }
.badge-danger  { background: var(--pu-danger-soft);  color: var(--pu-danger); }
.badge-neutral { background: var(--pu-neutral-soft); color: var(--pu-neutral); }
.badge-solid   { background: var(--pu-accent); color: var(--pu-on-accent); }

/* Счётчик (красный кружок с числом в меню) */
.pu-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: var(--pu-radius-pill);
  background: var(--pu-danger);
  color: #fff;
  font-family: var(--pu-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Метка-«ярлык» над заголовком */
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--pu-radius-pill);
  background: var(--pu-accent-soft);
  color: var(--pu-accent-text);
  font-family: var(--pu-font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Уведомления ---------- */
.pu-alert {
  margin-bottom: 16px;
  padding: 11px 15px;
  border: 1px solid var(--pu-line);
  border-radius: 13px;
  background: var(--pu-surface-soft);
  color: var(--pu-text);
  font-size: var(--pu-fs-md);
}
.pu-alert-danger  { border-color: var(--pu-danger-line); background: var(--pu-danger-soft); color: var(--pu-danger); }
.pu-alert-success { border-color: var(--pu-green-200); background: var(--pu-success-soft); color: var(--pu-success); }
.pu-alert-warning { border-color: var(--pu-amber-100); background: var(--pu-warning-soft); color: var(--pu-warning); }
.pu-alert-info    { border-color: var(--pu-blue-100); background: var(--pu-info-soft); color: var(--pu-info); }

/* ---------- Формы ---------- */
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.row > div { flex: 1; min-width: 160px; }

.field { display: grid; gap: 8px; }
.field > span, .field-label { color: var(--pu-muted); font-size: var(--pu-fs-md); }
.field-hint { margin: 0; color: var(--pu-muted); font-size: 13px; line-height: 1.4; }
.field-error { color: var(--pu-danger); font-size: 13px; line-height: 1.35; }
.field-error[hidden] { display: none; }
.is-invalid, .field input.is-invalid { border-color: var(--pu-danger) !important; box-shadow: 0 0 0 3px var(--pu-danger-soft) !important; }
.required { color: var(--pu-danger); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--pu-radius-sm);
  background: var(--pu-surface-sunken);
}
.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--pu-text);
  font-size: var(--pu-fs-md);
  font-weight: 400;
  text-transform: none;
}

/* Выбор «таблетками»: <label class="choice"><input type="radio"><span>…</span></label> */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--pu-line-strong);
  border-radius: 10px;
  background: var(--pu-surface);
  color: var(--pu-text-soft);
  transition: border-color var(--pu-transition), background var(--pu-transition);
}
.choice:hover span { border-color: var(--pu-green-300); }
.choice input:checked + span { border-color: var(--pu-accent); background: var(--pu-accent-soft); color: var(--pu-accent-text); font-weight: 700; }
.choice input:focus-visible + span { outline: 3px solid rgba(37, 185, 139, .3); outline-offset: 2px; }
.choice input:disabled + span { opacity: .45; cursor: not-allowed; }

/* Загрузка файла */
.file-drop {
  position: relative;
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 16px;
  border: 1px dashed var(--pu-line-strong);
  border-radius: 14px;
  background: var(--pu-surface-soft);
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color var(--pu-transition), background var(--pu-transition);
}
.file-drop:hover, .file-drop.has-file { border-color: var(--pu-accent); background: var(--pu-accent-soft); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop span, .file-drop strong { color: var(--pu-accent-text); }
.file-drop small { color: var(--pu-muted); }

/* ---------- Навигация ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--pu-muted); font-size: 13px; }
.crumbs a { color: var(--pu-muted); text-decoration: none; }
.crumbs a:hover { color: var(--pu-accent-text); }
.crumbs [aria-current] { color: var(--pu-text); font-weight: 700; }

.back-link { width: max-content; color: var(--pu-muted); text-decoration: none; }
.back-link:hover { color: var(--pu-accent-text); }

/* Верхняя панель: белая, фиксированная, пункты Neutral Face капсом с подчёркиванием */
.pu-topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--pu-topbar-height);
  padding: 0 max(20px, calc((100vw - 1400px) / 2));
  border-bottom: 1px solid var(--pu-line);
  background: var(--pu-surface-glass);
  backdrop-filter: blur(16px);
}
.pu-topbar__brand { display: flex; align-items: center; height: 100%; flex-shrink: 0; text-decoration: none; }
.pu-topbar__brand img { display: block; height: 34px; width: auto; }
.pu-topnav { display: flex; align-items: center; height: 100%; gap: 2px; }
.pu-topnav > a, .pu-topnav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: var(--pu-muted);
  font-family: var(--pu-font-display);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.pu-topnav > a:hover, .pu-topnav > a.is-active, .pu-topnav__link:hover, .pu-topnav__link.is-active {
  border-color: var(--pu-accent);
  color: var(--pu-accent-text);
}

/* Выпадающее меню */
.pu-menu {
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--pu-line);
  border-radius: 13px;
  background: var(--pu-surface);
  box-shadow: var(--pu-shadow);
}
.pu-menu a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--pu-text); font-size: var(--pu-fs-md); text-decoration: none; }
.pu-menu a small { display: block; margin-top: 2px; color: var(--pu-muted); font-size: 12px; }
.pu-menu a:hover, .pu-menu a.is-active { background: var(--pu-bg); color: var(--pu-accent-text); }

/* Вкладки-таблетки */
.pu-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pu-tabs > a, .pu-tabs > button {
  min-height: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--pu-surface-sunken);
  box-shadow: none;
  color: var(--pu-text);
  font-size: var(--pu-fs-md);
  font-weight: 400;
  text-decoration: none;
}
.pu-tabs > a:hover, .pu-tabs > button:hover { background: var(--pu-accent-soft); color: var(--pu-accent-text); }
.pu-tabs > .is-active, .pu-tabs > .active { background: var(--pu-accent); color: var(--pu-on-accent); }

/* ---------- Модальное окно ---------- */
.pu-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 16px; }
.pu-modal[hidden] { display: none; }
.pu-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 27, 53, .58); }
.pu-modal__panel {
  position: relative;
  width: min(570px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--pu-line);
  border-radius: 22px;
  background: var(--pu-surface);
  box-shadow: var(--pu-shadow-lg);
}
.pu-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--pu-line);
  border-radius: 50%;
  background: var(--pu-surface);
  box-shadow: none;
  color: var(--pu-muted);
  font-size: 25px;
  line-height: 1;
}
.pu-modal__close:hover { background: var(--pu-bg); color: var(--pu-text); }
.pu-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
dialog.pu-modal__panel::backdrop { background: rgba(16, 27, 53, .58); }

/* ---------- Прочее ---------- */
.muted { color: var(--pu-muted); font-size: var(--pu-fs-sm); }

.pu-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pu-accent-soft);
  color: var(--pu-accent-text);
  font-family: var(--pu-font-display);
  font-size: 18px;
  text-transform: uppercase;
}
.pu-avatar-lg { width: 108px; height: 108px; border: 6px solid #fff; font-size: 38px; box-shadow: var(--pu-shadow); }

.pu-empty { padding: 42px; border: 1px dashed var(--pu-line-strong); border-radius: 18px; color: var(--pu-muted); text-align: center; }

.pu-progress-ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 6px solid var(--pu-accent-soft);
  border-top-color: var(--pu-accent);
  border-radius: 50%;
  color: var(--pu-accent-text);
  font-size: 17px;
}

.pu-bubble { max-width: 88%; padding: 10px 12px 7px; border: 1px solid var(--pu-line); border-radius: 4px 12px 12px; background: var(--pu-surface); }
.pu-bubble--own { margin-left: auto; border-color: var(--pu-green-200); border-radius: 12px 4px 12px 12px; background: var(--pu-accent-soft); }
.pu-bubble time { display: block; margin-top: 4px; color: var(--pu-subtle); font-size: 10px; text-align: right; }

.pu-divider { height: 1px; margin: 16px 0; border: 0; background: var(--pu-line); }

/* Логотип: используйте SVG из папки logo/ */
.pu-logo { display: inline-block; height: 40px; width: auto; }

/* ---------- Адаптив ---------- */
@media (max-width: 560px) {
  .card { padding: 18px 16px; border-radius: 16px; }
  .row { gap: 10px; }
  .row > div { min-width: 100%; }
  .pu-modal__panel { padding: 22px 18px; border-radius: 18px; }
}

/* ===== utilities.css ===== */
/* ==========================================================================
   Utilities — мелкие вспомогательные классы
   ========================================================================== */
.pu-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pu-stack   { display: grid; gap: var(--gap, 16px); }
.pu-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 10px); }
.pu-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 280px), 1fr)); gap: var(--gap, 18px); }
.pu-container { width: min(var(--pu-container), calc(100% - 32px)); margin-inline: auto; }

.pu-text-muted   { color: var(--pu-muted); }
.pu-text-accent  { color: var(--pu-accent-text); }
.pu-text-danger  { color: var(--pu-danger); }
.pu-text-success { color: var(--pu-success); }
.pu-text-warning { color: var(--pu-warning); }
.pu-text-center  { text-align: center; }
.pu-text-upper   { text-transform: uppercase; }
.pu-font-display { font-family: var(--pu-font-display); font-weight: 400; text-transform: uppercase; }
.pu-nowrap { white-space: nowrap; }

.pu-bg-navy-green { background: var(--pu-gradient-navy-green); color: #fff; }
.pu-bg-green-white { background: var(--pu-gradient-green-white); }
.pu-bg-gray-white { background: var(--pu-gradient-gray-white); }
.pu-bg-navy { background: var(--pu-brand-navy); color: #fff; }
.pu-bg-soft { background: var(--pu-surface-soft); }

.pu-m-0 { margin: 0 !important; }
.pu-mt-0 { margin-top: 0 !important; }
.pu-mb-0 { margin-bottom: 0 !important; }
.pu-w-100 { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}