/* helper classes (Tailwind CDN не поддерживает @apply — дублируем правила) */

* { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }

html { -webkit-text-size-adjust: 100%; }

body { overflow-x: hidden; }

.lbl {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(51 65 85);
  margin-bottom: 0.25rem;
}

.inp {
  width: 100%;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: white;
  font-size: 16px;            /* 16px — iOS не зумит при фокусе */
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.inp:focus {
  border-color: rgb(37 99 235);
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}
select.inp { min-height: 44px; }      /* удобный тап */

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-weight: 500;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 0;
  transition: background .15s;
}
.btn-primary { background: rgb(29 78 216); color: white; }
.btn-primary:hover { background: rgb(30 64 175); }
.btn-secondary { background: rgb(226 232 240); color: rgb(30 41 59); }
.btn-secondary:hover { background: rgb(203 213 225); }

.nav-link {
  padding: 0.45rem 0.7rem;
  border-radius: 0.4rem;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}
.nav-link:hover { background: rgba(255,255,255,0.12); }

tbody tr.hover\:bg-slate-50:hover { background: rgb(248 250 252); }

/* Контейнеры с таблицами: плавная инерционная прокрутка по горизонтали
   + лёгкий «намёк», что есть скролл, на узких экранах */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Формы-кнопки внутри строк не должны схлопываться */
form button { min-height: 38px; }

/* Кнопки/ссылки-действия — крупнее палец на мобайле */
@media (max-width: 640px) {
  .inp { font-size: 16px; padding: 0.7rem 0.8rem; }
  button, .btn-primary, .btn-secondary, [type="submit"] { min-height: 46px; }
  a.nav-link { padding: 0.6rem 0.8rem; }

  /* таблицы: компактнее, но читаемо; первая колонка прилипает */
  table { font-size: 13px; }
  th, td { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

  /* модал подтверждения удаления — на всю ширину снизу */
  #del-dialog { width: 94% !important; }

  /* заголовки страниц чуть компактнее */
  h1 { line-height: 1.2; }
}

/* Планшет: средняя плотность */
@media (min-width: 641px) and (max-width: 1024px) {
  main { padding-left: 1rem; padding-right: 1rem; }
}

/* Печать (квитанция / отчёт) — скрыть навигацию */
@media print {
  header, footer, #del-dialog { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
}

/* ============================================================
   ЕДИНАЯ ПРИГЛУШЁННАЯ ТЕМА
   Все аккаунты — один спокойный, десатурированный набор.
   Семантика сохранена: синий = бренд/действие, зелёный = деньги/успех,
   розовый = опасность, янтарь = предупреждение.
   Фиолетовый/бирюзовый/голубой сведены к бренду — без «кислотных» пятен.
   Перебивает яркие классы Tailwind CDN через !important.
   ============================================================ */

/* ——— БРЕНД / ПЕРВИЧНЫЙ (blue + indigo + sky + cyan + purple + fuchsia) ——— */
.bg-blue-800,.bg-indigo-800,.bg-purple-800,.bg-fuchsia-800,.bg-sky-800,.bg-cyan-800{background-color:#384659!important}
.bg-blue-700,.bg-indigo-700,.bg-purple-700,.bg-fuchsia-700,.bg-sky-700,.bg-cyan-700{background-color:#43536a!important}
.bg-blue-600,.bg-indigo-600,.bg-purple-600,.bg-fuchsia-600,.bg-sky-600,.bg-cyan-600{background-color:#51637c!important}
.bg-blue-500,.bg-indigo-500,.bg-purple-500,.bg-fuchsia-500,.bg-sky-500,.bg-cyan-500{background-color:#5f7088!important}
.hover\:bg-blue-800:hover,.hover\:bg-indigo-800:hover,.hover\:bg-purple-800:hover,.hover\:bg-fuchsia-800:hover{background-color:#303c4d!important}
.hover\:bg-blue-700:hover,.hover\:bg-indigo-700:hover,.hover\:bg-purple-700:hover,.hover\:bg-fuchsia-700:hover{background-color:#384659!important}
.hover\:bg-blue-800:hover{background-color:#303c4d!important}
.text-blue-700,.text-indigo-700,.text-purple-700,.text-fuchsia-700,.text-sky-700,.text-cyan-700{color:#43536a!important}
.text-blue-800,.text-indigo-800,.text-purple-800,.text-fuchsia-800,.text-sky-800,.text-cyan-800{color:#3a4a60!important}
.text-blue-600,.text-indigo-600,.text-purple-600,.text-fuchsia-600,.text-sky-600,.text-cyan-600{color:#51637c!important}
.border-blue-200,.border-indigo-200,.border-purple-200,.border-fuchsia-200,.border-sky-200,.border-cyan-200{border-color:#cdd6e2!important}
.bg-blue-50,.bg-indigo-50,.bg-purple-50,.bg-fuchsia-50,.bg-sky-50,.bg-cyan-50{background-color:#f2f5f9!important}
.bg-blue-100,.bg-indigo-100,.bg-purple-100,.bg-fuchsia-100,.bg-sky-100,.bg-cyan-100{background-color:#e5eaf1!important}
.bg-blue-200,.bg-indigo-200{background-color:#d3dbe6!important}
.text-blue-800.bg-blue-100,.text-purple-800,.text-fuchsia-800{color:#3c4a5e!important}

/* ——— УСПЕХ / ДЕНЬГИ-ПРИХОД (green + emerald + teal) ——— */
.bg-green-700,.bg-emerald-700{background-color:#476a57!important}
.bg-green-600,.bg-emerald-600{background-color:#547961!important}
.bg-teal-700{background-color:#3f6a64!important}
.bg-teal-600{background-color:#4b766f!important}
.hover\:bg-green-700:hover,.hover\:bg-emerald-700:hover{background-color:#3d5e4c!important}
.hover\:bg-green-700:hover{background-color:#3d5e4c!important}
.hover\:bg-emerald-700:hover{background-color:#3d5e4c!important}
.hover\:bg-teal-700:hover{background-color:#365c57!important}
.text-emerald-700,.text-green-700{color:#3f6a55!important}
.text-emerald-800,.text-green-800{color:#365c49!important}
.text-teal-700{color:#3f6a64!important}
.border-emerald-200,.border-green-200,.border-teal-200{border-color:#c6d8cc!important}
.bg-emerald-50,.bg-green-50,.bg-teal-50{background-color:#eef4f0!important}
.bg-emerald-100,.bg-green-100,.bg-teal-100{background-color:#dde9e1!important}

/* ——— ОПАСНОСТЬ (rose + red) ——— */
.bg-rose-800,.bg-red-800{background-color:#73404a!important}
.bg-rose-700,.bg-red-700{background-color:#86505a!important}
.bg-rose-600,.bg-red-600{background-color:#985d67!important}
.hover\:bg-rose-800:hover,.hover\:bg-red-800:hover{background-color:#653843!important}
.hover\:bg-rose-700:hover,.hover\:bg-red-700:hover{background-color:#73404a!important}
.hover\:bg-rose-200:hover{background-color:#e3cccf!important}
.text-rose-700,.text-red-700{color:#86505a!important}
.text-rose-600,.text-red-600{color:#985d67!important}
.text-rose-800,.text-red-800,.text-red-900{color:#6e3c46!important}
.border-rose-200,.border-red-200{border-color:#e0c8cc!important}
.bg-rose-50,.bg-red-50{background-color:#f8f1f2!important}
.bg-rose-100,.bg-red-100{background-color:#efe1e3!important}
.bg-rose-200{background-color:#e3cccf!important}

/* ——— ПРЕДУПРЕЖДЕНИЕ (amber + orange + yellow) ——— */
.bg-amber-700,.bg-yellow-700{background-color:#806630!important}
.bg-amber-600,.bg-yellow-600{background-color:#937740!important}
.bg-orange-600{background-color:#946a3f!important}
.bg-orange-500{background-color:#a67c4a!important}
.hover\:bg-amber-700:hover{background-color:#6e5829!important}
.hover\:bg-orange-600:hover{background-color:#7e5b35!important}
.text-amber-700,.text-yellow-700,.text-orange-700{color:#7e6531!important}
.text-amber-800,.text-amber-900,.text-yellow-800{color:#6c5628!important}
.border-amber-200,.border-yellow-200,.border-orange-200{border-color:#e2d4b4!important}
.bg-amber-50,.bg-yellow-50,.bg-orange-50{background-color:#f7f3ea!important}
.bg-amber-100,.bg-yellow-100,.bg-orange-100{background-color:#ece1c8!important}

/* Шапка: ровный матовый бренд-фон + аккуратная тень */
header.bg-blue-700{background-color:#43536a!important;box-shadow:0 1px 3px rgba(0,0,0,.12)!important}

/* Лёгкая общая мягкость: убрать слишком резкие тени */
.shadow,.shadow-sm,.shadow-md,.shadow-lg{box-shadow:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04)!important}

/* Кнопки-компоненты в той же приглушённой гамме */
.btn-primary{background:#43536a!important}
.btn-primary:hover{background:#384659!important}

/* Скруглённые «таблетки» статусов: чуть приглушить насыщенный текст */
.rounded-full{letter-spacing:.1px}

body{background-color:#f4f5f7}

/* details > summary без маркера-треугольника (для «Настройки ▾») */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* ---- AI-кнопка исправления текста (везде, где пишут вручную) ---- */
.ai-fix-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.3px;
  color:#4a3f7a;background:#ece9f7;border:1px solid #d6cff0;
  padding:4px 8px;border-radius:9999px;cursor:pointer;
  min-height:0;transition:background .15s,border-color .15s,opacity .15s;
  vertical-align:middle;white-space:nowrap;
}
.ai-fix-btn:hover{background:#e0dbf2;border-color:#c4bae8}
.ai-fix-btn:active{background:#d3ccec}
.ai-fix-btn.ai-fix-loading{opacity:.6;cursor:progress}
.ai-fix-btn .ai-fix-spark{font-size:12px}
@media (max-width:640px){ .ai-fix-btn{ min-height:0;padding:5px 9px } }

/* Подсветка поля после успешного исправления */
.ai-fix-flash{
  animation:aiFixFlash 1.2s ease;
}
@keyframes aiFixFlash{
  0%{box-shadow:0 0 0 2px rgba(63,122,82,.55);border-color:#3f7a52}
  100%{box-shadow:0 0 0 2px rgba(63,122,82,0)}
}

/* ============================================================
   МОБИЛЬНАЯ КОРРЕКТНОСТЬ (общая, перебивает Tailwind)
   1) Никакого зума при тапе в поле  2) ничего не вылезает за экран
   ============================================================ */

/* Страница не «едет» вбок: горизонтальный выход за рамки запрещён */
html, body { max-width: 100%; overflow-x: hidden; }
/* Медиа/таблицы не шире контейнера */
img, svg, video, canvas { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  /* iOS зумит страницу, если шрифт поля < 16px. Делаем ВСЕ поля 16px. */
  input, select, textarea,
  input.inp, .inp, input[type="search"], input[type="date"],
  input[type="number"], input[type="text"], input[type="tel"],
  input[type="password"], input[type="email"], input[type="time"] {
    font-size: 16px !important;
  }

  /* ТАБЛИЦЫ: слова НЕ рвём посимвольно. Контент остаётся цельным,
     широкая таблица скроллится по горизонтали ВНУТРИ обёртки .overflow-x-auto
     (а не ломает вёрстку и не «шинкует» слова типа «Админист-ратор»). */
  .overflow-x-auto table td,
  .overflow-x-auto table th { white-space: nowrap; }
  /* Бейджи, кнопки и ссылки внутри ячеек тоже не переносятся */
  td .rounded-full, td a, td button { white-space: nowrap; }
  .overflow-x-auto { max-width: 100%; }

  /* Сетки фильтров/карточек — строго в одну колонку на телефоне */
  .m-stack-1 { grid-template-columns: 1fr !important; display: grid !important; }
  .m-stack-1 > * { min-width: 0; }

  /* Точечный перенос длинного свободного текста — только по классу */
  .break-anywhere { overflow-wrap: anywhere; word-break: break-word; white-space: normal !important; }
}

/* ============================================================
   ЕДИНАЯ КАРТОЧКА ЗАЯВКИ (.ocard) — общий дизайн для всех ролей
   Левая цветная «рейка» с № / городом / статусом, мягкие инфо-строки,
   мягкие кнопки. Цвета — из общей приглушённой темы (без «кислоты»).
   Меняется ТОЛЬКО внешний вид; ссылки/формы/логика прежние.
   ============================================================ */
.ocard{
  display:flex; background:#fff; border:1px solid #e6e9ef;
  border-radius:1rem; overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
  transition:box-shadow .15s, transform .05s;
}
/* Длинные списки (до 200 карточек): не рисуем то, что вне экрана —
   резко убирает фризы при прокрутке. Панели-детали не трогаем. */
.ocard-grid .ocard:not(.ocard--panel){
  content-visibility:auto;
  contain-intrinsic-size:0 200px;
}
a.ocard:hover{ box-shadow:0 4px 14px rgba(15,23,42,.10); }
a.ocard:active{ transform:scale(.997); }
.ocard-grid{ display:grid; gap:.75rem; }
@media (min-width:768px){ .ocard-grid.cols-2{ grid-template-columns:1fr 1fr; } }

.ocard-rail{
  flex:0 0 88px; width:88px; padding:.85rem .4rem;
  color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem; text-align:center;
  background-color:#5f7088;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.7px);
  background-size:13px 13px;
}
.ocard-rail--pickup { background-color:#a67c4a; }
.ocard-rail--measure{ background-color:#51637c; }
.ocard-rail--wash   { background-color:#6a6a86; }
.ocard-rail--deliver{ background-color:#4b766f; }
.ocard-rail--done   { background-color:#547961; }
.ocard-rail--cancel { background-color:#985d67; }
.ocard-rail--claim  { background-color:#86505a; }
.ocard-num{ font-size:1.55rem; font-weight:800; line-height:1; }
.ocard-city{ font-size:.78rem; opacity:.95; line-height:1.15; word-break:break-word; }
.ocard-chip{
  margin-top:.1rem; font-size:.62rem; font-weight:600; line-height:1.2;
  background:rgba(255,255,255,.22); padding:.22rem .45rem; border-radius:9999px;
}
.ocard-rail .ocard-div{ width:60%; height:1px; background:rgba(255,255,255,.3); margin:.15rem 0; }

.ocard-body{ flex:1 1 auto; min-width:0; padding:.85rem .95rem;
  display:flex; flex-direction:column; gap:.55rem; }
.ocard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.ocard-date{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; color:#7e6531; background:#f7f3ea;
  border:1px solid #e2d4b4; padding:.28rem .55rem; border-radius:.6rem;
}
.ocard-tag{
  display:inline-flex; align-items:center; font-size:.66rem; font-weight:600;
  color:#43536a; background:#eaeef4; border:1px solid #d7dde7;
  padding:.22rem .5rem; border-radius:9999px; white-space:nowrap;
}
.ocard-name{ font-weight:700; font-size:1.05rem; line-height:1.2; }
.ipill{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:#43526a; min-width:0; }
.ipill .ic{ flex:0 0 1.15rem; text-align:center; font-size:.95rem; }
.ipill .v{ min-width:0; overflow-wrap:anywhere; }
.ipill--money .v{ color:#3f6a55; font-weight:700; }
.ocard-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.1rem; }
.ocard-actions form{ margin:0; }
.act{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:.82rem; font-weight:600; padding:.5rem .75rem; border-radius:.7rem;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.act-green{ background:#e7efe9; color:#3f6a55; border-color:#cfe0d4; }
.act-amber{ background:#f5efe2; color:#7e6531; border-color:#e6dabd; }
.act-blue { background:#e9edf3; color:#43536a; border-color:#d6dde8; }
.act-cta{
  width:100%; background:#3a4a60; color:#fff; padding:.8rem; border-radius:.8rem;
  font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.act-cta:hover{ background:#303c4d; }
@media (max-width:380px){ .ocard-rail{ flex-basis:66px; width:66px; } .ocard-num{ font-size:1.3rem; } }

/* ============================================================
   ЕДИНАЯ ДИЗАЙН-СИСТЕМА (ГЛОБАЛЬНО)
   Один стиль на весь UI: карточки, формы, поля, списки, таблицы,
   кнопки, фильтры, модалки, блоки статистики. Используем :where()
   (нулевая специфичность) — НИЧЕГО не ломаем, шаблоны не трогаем,
   логика не меняется. Цвета — из общей приглушённой темы.
   ============================================================ */

/* — Поля ввода / выбор / textarea: единый радиус, рамка, фокус — */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]),
       select, textarea) {
  border-radius: .65rem;
  border: 1px solid #cdd6e2;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
       select, textarea):focus {
  outline: none;
  border-color: #5f7088;
  box-shadow: 0 0 0 3px rgba(95,112,136,.18);
}
.inp { border-radius: .65rem; }
.inp:focus { border-color:#5f7088; box-shadow:0 0 0 3px rgba(95,112,136,.18); }

/* — Кнопки: единый радиус, вес, отклик на нажатие — */
:where(button, .btn-primary, .btn-secondary, [type=submit], a.act, .act, .act-cta) {
  border-radius: .7rem;
  font-weight: 600;
  transition: background .15s, box-shadow .15s, transform .04s;
}
:where(button, .btn-primary, .btn-secondary, [type=submit]):active { transform: scale(.985); }
:where(button, .btn-primary, .btn-secondary):focus-visible {
  outline: 2px solid #5f7088; outline-offset: 2px;
}

/* — Карточки / контейнеры: единый радиус, мягкая рамка и тень — */
:where(.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-3xl,
       .rounded-2xl.border, .rounded-xl.border) {
  border-radius: 1rem;
  border: 1px solid #e6e9ef;
}
:where(.bg-white.rounded-xl, .bg-white.rounded-2xl) {
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
}
/* Кликабельные карточки-ссылки слегка приподнимаются */
:where(a.bg-white.rounded-xl, a.bg-white.rounded-2xl):hover {
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
}

/* — Таблицы: единый аккуратный вид (как в новых карточках) — */
:where(table) { width: 100%; border-collapse: collapse; }
:where(table) thead { background: #eef1f5; }
:where(table) thead th {
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .7rem; font-weight: 700; color: #5f6b80;
}
:where(table) th, :where(table) td { padding: .6rem .75rem; }
:where(table tbody tr) { transition: background .12s; }
:where(table tbody tr:hover) { background: #f6f8fb; }
/* Обёртка таблицы — единый скруглённый контейнер */
:where(.overflow-x-auto.bg-white, .bg-white .overflow-x-auto) { border-radius: 1rem; }

/* — «Таблетки» статусов и фильтров: ровный мягкий вид — */
:where(.rounded-full) { font-weight: 600; }
:where(a.rounded-full) { transition: background .15s, color .15s; }

/* — Блоки статистики (сводка кассы у руководителя): радиус + лёгкий
     левый акцент в стиле «рейки» карточек — */
:where(section .rounded-2xl.border.p-4) {
  border-radius: 1rem;
  border-left: 4px solid rgba(95,112,136,.45);
}

/* — Модальное окно подтверждения — единый радиус — */
:where(dialog) { border-radius: 1rem; }

/* — Заголовки разделов: ровный ритм — */
:where(main h1) { letter-spacing: -.01em; }
:where(main h2.font-semibold) { letter-spacing: -.005em; }

/* Анимация появления контента убрана намеренно: на слабых телефонах
   она пере-проигрывалась при каждом обновлении и давала микро-фризы. */

/* ============================================================
   ДИЗАЙН-ТОКЕНЫ + PRO-ПОЛИРОВКА  (ui-ux-pro-max)
   Единая система отступов/радиусов/теней/цвета в рамках текущей
   приглушённой темы. Чек-лист качества: видимый фокус, тач-цели
   44px, курсор-указатель, чёткие SVG-иконки вместо emoji,
   уважение prefers-reduced-motion. Только внешний вид.
   ============================================================ */
:root{
  --c-brand:#43536a; --c-brand-2:#5f7088; --c-ink:#2b3441; --c-muted:#5f6b80;
  --c-line:#e6e9ef; --c-line-soft:#eef1f5; --c-bg:#f4f5f7; --c-card:#fff;
  --c-money:#3f6a55; --c-danger:#86505a; --c-warn:#7e6531;
  --r-sm:.5rem; --r-md:.7rem; --r-lg:1rem; --r-pill:9999px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 1px 1px rgba(15,23,42,.03);
  --sh-2:0 6px 18px rgba(15,23,42,.10);
  --tap:44px;
  --fs-xs:.72rem; --fs-sm:.85rem; --fs-md:.95rem; --fs-lg:1.05rem;
}

/* Системный шрифт (без веб-шрифта — мгновенно и оффлайн в WebView) */
:where(body){
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Чёткие линейные иконки вместо emoji (масштаб по тексту, цвет наследуется) */
.i{ display:inline-flex; width:1.05em; height:1.05em; flex:0 0 auto;
    vertical-align:-0.15em; }
.i svg{ width:100%; height:100%; display:block; }
.ipill .ic{ color:var(--c-brand-2); }
.ipill--money .ic{ color:var(--c-money); }

/* Тач-цели и курсор: всё кликабельное удобно пальцу */
:where(.act,.act-cta,a.ocard,button,.btn-primary,.btn-secondary){ cursor:pointer; }
@media (max-width:640px){
  :where(.act){ min-height:var(--tap); }
}
:where(.ocard[onclick]){ cursor:pointer; }

/* Видимый фокус для клавиатуры/доступности (чек-лист: Critical) */
:where(a.ocard,.ocard[onclick],.act,.act-cta,a.act):focus-visible{
  outline:2px solid var(--c-brand-2); outline-offset:2px; border-radius:var(--r-md);
}

/* Карточка: токены радиуса/тени, чуть живее наведение/нажатие */
:where(.ocard){ border-radius:var(--r-lg); box-shadow:var(--sh-1); }
:where(a.ocard:hover,.ocard[onclick]:hover){ box-shadow:var(--sh-2); }
:where(a.ocard:active,.ocard[onclick]:active){ transform:scale(.997); }

/* Кнопки действий: ровные, читаемые, единые */
:where(.act){ border-radius:var(--r-md); font-weight:600; }
:where(.act-cta){ border-radius:var(--r-md); letter-spacing:.01em; }

/* Заголовок раздела с тонким брендовым акцентом-чёрточкой */
:where(main section > .flex h2, main section > h2){ position:relative; }

/* Таблицы-контейнеры: единый радиус и аккуратная линия */
:where(.bg-white.rounded-2xl, .bg-white.rounded-xl){ border-color:var(--c-line); }

/* Фильтр-таблетки: плавность по чек-листу дашборда */
:where(a.rounded-full){ transition:background .15s,color .15s,box-shadow .15s; }
:where(a.rounded-full:hover){ box-shadow:0 0 0 2px rgba(95,112,136,.12); }

/* Уважать «меньше движения» */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* — Карточка-панель (детальные страницы заявки: без левой рейки) — */
.ocard--panel{ display:block; overflow:visible; }
.ocard--panel > .ocard-body{ padding:1.1rem 1.15rem; gap:.5rem; }
.ocard--panel .ocard-top{ padding-bottom:.6rem; border-bottom:1px solid var(--c-line); margin-bottom:.3rem; }
.ocard--panel .ipill{ padding:.15rem 0; }
.ocard--panel .ipill .v{ font-size:var(--fs-sm); }

/* — Сигнатурная чёрточка-акцент у заголовков разделов (единый ритм) — */
:where(main h1){ position:relative; padding-left:.7rem; }
:where(main h1)::before{
  content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:4px;
  border-radius:4px; background:var(--c-brand-2);
}

/* — Таймлайн истории: точки в брендовом цвете — */
:where(ol[class*="border-s"] li > span:first-child){
  background:var(--c-brand-2)!important;
}

/* Поля выбора с длинными вариантами не выходят за контейнер */
select.inp { max-width: 100%; }

/* Поля даты/времени: на iOS нативный контрол центрирует значение и имеет
   свою min-width — из-за этого поля «съезжают» вправо и не выравниваются
   с остальными. Нормализуем: на всю ширину, текст слева, значок справа. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
}