/* Токены — перенос packages/ui_kit/lib/src/tokens.dart один в один.
   Правило то же, что в приложении: цвет/отступ/радиус берётся отсюда, а не
   пишется в месте использования. Разъехавшийся токен — это разъехавшийся веб
   и телефон, ради сверки которых веб и существует. */
:root {
  --brand: #0a834e;
  --brand-deep: #086b40;
  --brand-soft: rgba(10, 131, 78, 0.1);
  --brand-line: rgba(10, 131, 78, 0.35);
  --brand-on-dark: #35c97f;

  --ink: #101528;
  --ink-soft: rgba(16, 21, 40, 0.85);
  --mute: rgba(60, 60, 67, 0.55);
  --hair: rgba(60, 60, 67, 0.14);
  --hair-strong: rgba(60, 60, 67, 0.35);

  --bg: #f2f2f7;
  --surface: #ffffff;
  --navy: #022951;
  --navy-deep: #011b36;
  --onboard-base: #080d1a;
  --logo-uz: #0d3e74;
  --avatar-dark: #26304a;

  --gold: #c9982f;
  --ok: #1e8e4e;
  --ok-soft: rgba(46, 164, 96, 0.12);

  --status-new: #c9982f;
  --status-plan: #0a834e;
  --status-work: #1e5a99;
  --status-done: #5b6474;
  --danger: #e8503a;
  --status-new-ink: #a87a1e;
  --danger-ink: #c63a2b;

  --cta-disabled-bg: rgba(118, 118, 128, 0.16);
  --cta-disabled-ink: rgba(60, 60, 67, 0.35);
  --tab-bar-fill: rgba(249, 249, 251, 0.72);
  --bubble-in: #e9e9ec;
  --fill: rgba(118, 118, 128, 0.12);
  --warn: #b35309;
  --warn-soft: #fdf0e7;

  /* Gap из tokens.dart */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 20px;
  --gap-xxl: 28px;

  /* Radii */
  --r-card: 18px;
  --r-card-sm: 16px;
  --r-card-lg: 20px;
  --r-cta: 16px;
  --r-field: 15px;
  --r-chip: 12px;
  --r-sheet: 30px;
  --r-pill: 999px;

  --cta-h: 52px;
  --field-h: 56px;

  --card-sh: 0 1px 2px rgba(16, 21, 40, 0.04), 0 8px 24px rgba(16, 21, 40, 0.06);
  --cta-sh: 0 6px 18px rgba(10, 131, 78, 0.3);

  /* Флаттеровский Scaffold знает про системные панели сам; в вебе это
     env(safe-area-*), а на десктопе — нули (рамка их не изображает). */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* Плавающий таб-бар лежит ПОВЕРХ контента (extendBody: true), поэтому
     нижний отступ лент считается от его высоты, а не проставляется руками
     на каждом экране — ровно то правило, из-за которого в макете партнёрки
     кнопки трижды уезжали под бар. */
  --tab-h: 62px;
  --tab-inset: calc(var(--tab-h) + var(--sab) + 18px);
}

/* Тёмная тема приложения (MyLawPalette.dark). Клиентское приложение её пока
   не включает, но веб-харнесс обязан уметь показать оба режима: контраст
   проверяется глазами, а не по значениям. */
:root[data-theme='dark'] {
  --brand: #35c97f;
  --brand-deep: #2aa868;
  --brand-soft: rgba(53, 201, 127, 0.15);
  --brand-line: rgba(53, 201, 127, 0.35);
  --ink: #f2f4f8;
  --ink-soft: rgba(242, 244, 248, 0.85);
  --mute: rgba(235, 235, 245, 0.6);
  --hair: rgba(235, 235, 245, 0.14);
  --hair-strong: rgba(235, 235, 245, 0.35);
  --bg: #0c1018;
  --surface: #161b26;
  --navy: #0b2949;
  --navy-deep: #07182e;
  --gold: #e0b44b;
  --ok: #35c97f;
  --ok-soft: rgba(53, 201, 127, 0.15);
  --status-new: #e0b44b;
  --status-plan: #35c97f;
  --status-work: #5b9be0;
  --status-done: #8a93a6;
  --danger: #ff6b57;
  --status-new-ink: #e8c878;
  --danger-ink: #ff8d7d;
  --cta-disabled-bg: rgba(235, 235, 245, 0.12);
  --cta-disabled-ink: rgba(235, 235, 245, 0.35);
  --tab-bar-fill: rgba(22, 27, 38, 0.78);
  --bubble-in: #232936;
  --fill: rgba(235, 235, 245, 0.12);
  --warn: #e8a24a;
  --warn-soft: rgba(232, 162, 74, 0.15);
  --card-sh: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Шрифт продукта. В приложении на вебе тема ставит 'IBM Plex Sans'
   (packages/ui_kit/.../theme.dart), поэтому DOM-клиент везёт тот же файл, а не
   надеется на системный стек: без него Windows рисовал Segoe UI, Linux —
   DejaVu, и один и тот же экран выглядел тремя разными продуктами.
   Один переменный файл на все начертания (100–700), латиница + кириллица,
   125 КБ. `swap` — текст читается сразу, шрифт подменяется по загрузке. */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

body {
  /* iPhone-у оставляем системный SF первым запасным: если файл не доехал,
     интерфейс всё равно выглядит нативно. */
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'Segoe UI', Roboto, 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ оболочка */

/* Мобильный браузер: приложение занимает экран целиком.
   Десктоп: телефон в рамке + панель разработчика сбоку (см. @media ниже). */
#shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* Лента экрана. Прокрутка живёт ЗДЕСЬ, а не на body: иначе на iOS адресная
   строка сжимает вьюпорт и таб-бар начинает прыгать. */
#screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--sat);
}

.dev-bar {
  display: none;
}

@media (min-width: 900px) {
  body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 28px;
    padding: 24px;
    background: #e7e8ee;
  }

  :root[data-theme='dark'] body {
    background: #05070c;
  }

  #shell {
    width: 402px;
    height: min(874px, calc(100dvh - 48px));
    border-radius: 42px;
    box-shadow: 0 0 0 10px #1b1d24, 0 30px 70px rgba(0, 0, 0, 0.35);
    grid-column: 2;
  }

  .dev-bar {
    display: flex;
    grid-column: 3;
    justify-self: start;
    flex-direction: column;
    gap: 10px;
    width: 230px;
    font-size: 13px;
    color: var(--mute);
  }
}

/* --------------------------------------------------------- типографика */

.h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.56px;
  color: var(--ink);
  margin: 0;
}

.section-title {
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0;
}

/* Подпись раздела в деле: «СЕЙЧАС», «КОНСУЛЬТАЦИИ». */
.caption {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mute);
}

.mute {
  color: var(--mute);
}

.sum {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- карточки */

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--card-sh);
  padding: 14px;
}

button.card,
.card.tappable {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.card.tappable:active {
  transform: scale(0.995);
}

/* --------------------------------------------------------------- кнопки */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cta-h);
  border: 0;
  border-radius: var(--r-cta);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--cta-sh);
}

.btn:disabled {
  background: var(--cta-disabled-bg);
  color: var(--cta-disabled-ink);
  box-shadow: none;
  cursor: default;
}

.btn.small {
  height: 44px;
  font-size: 14.5px;
}

.btn.ghost {
  background: transparent;
  color: var(--mute);
  box-shadow: none;
  font-weight: 600;
  font-size: 13.5px;
  height: 40px;
}

.btn.tonal {
  background: var(--brand-soft);
  color: var(--brand-deep);
  box-shadow: none;
}

/* Вторичные действия равного веса — как в карточке счёта. */
.btn-row {
  display: flex;
  gap: var(--gap-sm);
}

.btn-row > * {
  flex: 1;
}

/* Липкая панель действий внизу экрана (StickyActionBar). */
.sticky-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--gap-md);
  padding: 10px var(--gap-lg) calc(10px + var(--sab));
  background: linear-gradient(to bottom, rgba(242, 242, 247, 0), var(--bg) 38%);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-h);
  height: var(--cta-h);
  flex: 0 0 var(--cta-h);
  border: 0;
  border-radius: var(--r-cta);
  background: var(--brand-soft);
  color: var(--brand-deep);
  cursor: pointer;
}

.icon-btn:disabled {
  background: var(--cta-disabled-bg);
  color: var(--cta-disabled-ink);
  cursor: default;
}

/* ---------------------------------------------------------------- поля */

.field {
  width: 100%;
  height: var(--field-h);
  padding: 0 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-field);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

textarea.field {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}

.field:focus {
  outline: none;
  border-color: var(--brand);
}

.field::placeholder {
  color: var(--hair-strong);
}

/* --------------------------------------------------------------- статусы */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
}

.tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tag.new {
  background: rgba(201, 152, 47, 0.14);
  color: var(--status-new-ink);
}

.tag.plan {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.tag.work {
  background: rgba(30, 90, 153, 0.12);
  color: var(--status-work);
}

.tag.done {
  background: var(--fill);
  color: var(--status-done);
}

.tag.cancelled {
  background: rgba(232, 80, 58, 0.12);
  color: var(--danger-ink);
}

/* Счётчик «сколько ждёт человека» на карточке дела. */
.needs-badge {
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  font-weight: 800;
}

.unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------- трекер */

.tracker {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}

.tracker::-webkit-scrollbar {
  display: none;
}

.tracker-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Больше пяти шагов — лента едет вбок фиксированными ячейками (правило
   ui_kit: с подписью 104, «голая» точка 44). */
.tracker.scrollable .tracker-cell {
  flex: 0 0 44px;
}

.tracker.scrollable .tracker-cell.labelled {
  flex: 0 0 104px;
}

.tracker-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.tracker-line {
  flex: 1;
  height: 2px;
  background: var(--hair);
}

.tracker-line.done {
  background: var(--brand);
}

.tracker-line.blank {
  background: transparent;
}

.tracker-dot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  border: 1px solid var(--hair);
  background: transparent;
}

.tracker-dot.current {
  border: 2px solid var(--brand);
  color: var(--brand-deep);
}

.tracker-dot.done {
  border: 0;
  background: var(--brand);
  color: var(--surface);
}

.tracker-label {
  margin-top: var(--gap-sm);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -0.1px;
  font-weight: 600;
  color: var(--mute);
  text-align: center;
}

.tracker-label.current {
  font-weight: 700;
  color: var(--ink);
}

.tracker-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--mute);
  text-align: center;
}

/* Полоса прогресса на карточке дела и в блоке «Сейчас» (CaseProgressRail). */
.progress-rail {
  display: flex;
  gap: 4px;
}

.progress-rail > i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--hair);
}

.progress-rail > i.done {
  background: var(--brand);
}

/* ---------------------------------------------------------------- лента */

.timeline-item {
  display: flex;
  gap: 11px;
}

.timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 10px;
}

.timeline-rail > b {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.timeline-rail > i {
  flex: 1;
  width: 2px;
  background: var(--hair);
}

/* --------------------------------------------------------------- таб-бар */

.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sab) + 10px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.tabbar-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--tab-bar-fill);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 8px 30px rgba(16, 21, 40, 0.14);
  pointer-events: auto;
}

.tabbar button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 66px;
  padding: 6px 0 4px;
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.tabbar button.on {
  color: var(--brand-deep);
}

.tabbar .badge {
  position: absolute;
  top: 2px;
  right: 14px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* ---------------------------------------------------------------- шапка */

.appbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.appbar h2 {
  flex: 1;
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

/* --------------------------------------------------------------- шторка */

.scrim {
  /* Слой оверлеев сам по себе прозрачен для кликов — ловит их шторка. */
  pointer-events: auto;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-end;
  z-index: 20;
  animation: fade 0.16s ease-out;
}

.sheet {
  width: 100%;
  max-height: 88%;
  overflow-y: auto;
  padding: var(--gap-lg) var(--gap-lg) calc(var(--gap-lg) + var(--sab));
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  animation: rise 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

/* Диалог (AlertDialog) — то же затемнение, но по центру. */
.scrim.center {
  align-items: center;
  justify-content: center;
  padding: var(--gap-xl);
}

.dialog {
  width: 100%;
  max-width: 330px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  animation: rise 0.18s ease-out;
}

.dialog h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

/* ------------------------------------------------- сноска-окошко (popover)

   Номер источника в ответе ассистента: тап — и норма перед глазами, без ухода
   со страницы. Position: fixed, координаты считает js/ui.js `popover()`. */

.pop {
  position: fixed;
  z-index: 45;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
  max-height: 46vh;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(16, 21, 40, 0.18);
  animation: rise 0.14s ease-out;
  overscroll-behavior: contain;
}

.pop .pop-head {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 5px;
}

.pop .pop-sub {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: -2px 0 6px;
}

.pop .pop-text {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.pop .pop-link {
  display: inline-block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}

/* Номер источника в тексте ответа — сноска, а не декоративная плашка:
   у неё есть вид нажимаемого. */
.ref-pill {
  padding: 1px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  transition: background 0.12s ease-out;
}

.ref-pill:hover,
.ref-pill[aria-expanded='true'] {
  background: var(--brand);
  color: #fff;
}

/* ----------------------------------------------------------------- тост */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tab-inset) + 8px);
  transform: translateX(-50%);
  max-width: 88%;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(16, 21, 40, 0.92);
  color: #fff;
  font-size: 13.5px;
  z-index: 40;
  animation: fade 0.16s ease-out;
}

/* --------------------------------------------------------------- прочее */

.spinner {
  width: 26px;
  height: 26px;
  border: 2.4px solid var(--hair);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--fill);
  flex: 0 0 auto;
}

.avatar.letters {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 700;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.col {
  display: flex;
  flex-direction: column;
}

.grow {
  flex: 1;
  min-width: 0;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pad {
  padding: var(--gap-md) var(--gap-xl) var(--tab-inset);
}

.stack > * + * {
  margin-top: var(--gap-sm);
}

/* Просмотр вложенной картинки во весь экран: клик или Escape закрывают. */
.zoom-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 21, 40, 0.86);
  cursor: zoom-out;
}

.zoom-layer img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}

/* Три шага записи: оплата → подтверждение юриста → консультация. Ряд, а не
   список: человек должен увидеть весь путь одним взглядом, до оплаты. */
.steps3 {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
}

.steps3-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.steps3-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 700;
}

/* ---------------------------------------------------- фирменный лоадер */

/* Знак mylaw.uz вместо безымянного кольца там, где человек ждёт ЭКРАН.
   Пульсация знака + бегущая полоса: полоса отвечает на вопрос «оно вообще
   живое?», знак — на вопрос «куда я попал». */
.bloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.bloader-mark {
  animation: bloader-pulse 1.6s ease-in-out infinite;
}

.bloader-bar {
  position: relative;
  width: 132px;
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
  overflow: hidden;
}

.bloader-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: 2px;
  background: var(--brand);
  animation: bloader-run 1.15s ease-in-out infinite;
}

.bloader-label {
  font-size: 13.5px;
  color: var(--mute);
}

@keyframes bloader-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.62;
    transform: scale(0.94);
  }
}

@keyframes bloader-run {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(240%);
  }
}

/* Уважение к настройке «меньше движения»: знак остаётся, дёрганья нет. */
@media (prefers-reduced-motion: reduce) {
  .bloader-mark,
  .bloader-bar i {
    animation: none;
  }
  .bloader-bar i {
    width: 100%;
  }
}

/* Первый кадр приложения: лоадер по центру окна, пока не восстановлена
   сессия и не пришёл каталог. До этого экран был просто белым. */
#boot-loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* ---------------------------------------------------- платёжная карта */

/* Пропорции настоящей карты (85.6 × 54 мм). Фон — фирменный navy, потому что
   рисовать чужие бренды нельзя, а серый прямоугольник не читается как карта. */
.paycard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1.586;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(140deg, #0a4a8c 0%, #022951 55%, #011c39 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(2, 41, 81, 0.22);
}

.paycard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Чип — та же деталь, по которой карту узнают на ощупь. */
.paycard-chip {
  width: 34px;
  height: 25px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f0d78a, #c9982f 60%, #f5e6b0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.paycard-def {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11.5px;
  font-weight: 700;
}

.paycard-num {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 1.6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.paycard-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}

.paycard-foot b {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #fff;
}

/* Список карт: плашки сеткой, действия под каждой. */
.paycards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
}

.paycard-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-left: 4px;
}

/* ── Блок-баннер: единственный блок, который собирается ЦЕЛИКОМ с сервера ──
   Заголовок, текст и кнопка приходят в props (config.ui.screens.*), поэтому
   вид задан здесь, а не в разметке: объявление или плашка про новую модель
   ставится на любой экран правкой конфига, без выкатки веба. */
.block-banner {
  margin: 20px 20px 0;
  padding: 16px 18px;
  border-radius: var(--r-card, 18px);
  border: 1px solid var(--brand-line, rgba(10, 131, 78, 0.35));
  background: var(--brand-soft);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* На мониторе баннер живёт внутри колонки страницы — свои поля ему не нужны. */
.page .block-banner {
  margin: 26px 0 0;
}

/* Тихий вариант — для служебных сообщений, которые не должны спорить с CTA. */
.block-banner.quiet {
  border-color: var(--hair);
  background: var(--surface-2, transparent);
}

.block-banner-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.block-banner-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft, inherit);
}

.block-banner-cta {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
}

.block-banner-cta:hover {
  text-decoration: underline;
}

/* ── Кнопки блоков ───────────────────────────────────────────────────────
   Общие для баннера, CTA и всего, что соберут с сервера. Три роли и не
   больше: главная, вторая и ссылка. Четвёртая роль на витрине означает, что
   человек не понимает, что нажимать. */
.blk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.blk-actions.stack {
  flex-direction: column;
  align-items: stretch;
}

.blk-btn {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r-chip, 12px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s ease, background .15s ease;
}

.blk-btn.primary { background: var(--brand); color: #fff; }
.blk-btn.primary:hover { filter: brightness(1.06); }
.blk-btn.secondary { background: transparent; border-color: var(--hair-strong); color: var(--ink); }
.blk-btn.secondary:hover { background: var(--fill); }
.blk-btn.link { background: none; padding: 9px 2px; color: var(--brand-deep); }
.blk-btn.link:hover { text-decoration: underline; }
.blk-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Тона блоков ─────────────────────────────────────────────────────────
   Тон — это акцент блока, а не тема страницы: он красит рамку и подложку,
   но никогда не трогает цвет основного текста, иначе блок перестаёт
   читаться в тёмной теме. */
.block-banner.quiet { border-color: var(--hair); background: var(--surface-2, transparent); }
.block-banner.navy { border-color: transparent; background: var(--navy); }
.block-banner.navy .block-banner-title { color: #fff; }
.block-banner.navy .block-banner-text { color: rgba(234, 240, 247, .72); }
.block-banner.navy .blk-btn.link { color: var(--brand-on-dark, #35c97f); }
.block-banner.navy .blk-btn.secondary { border-color: rgba(255, 255, 255, .25); color: #fff; }
.block-banner.gold { border-color: rgba(201, 152, 47, .45); background: rgba(201, 152, 47, .12); }

/* Полоса — для служебных сообщений: занимает меньше, чем карточка. */
.block-banner.v-strip {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
}
.block-banner.v-strip .blk-actions { margin-top: 0; margin-left: auto; }
.block-banner.v-strip .block-banner-text { flex: 1; }

/* Крупная плашка — когда блок и есть главное на экране. */
.block-banner.v-hero { padding: 22px 24px; gap: 9px; }
.block-banner.v-hero .block-banner-title { font-size: 22px; line-height: 1.25; letter-spacing: -.3px; }
.block-banner.v-hero .block-banner-text { font-size: 15.5px; }

@media (max-width: 640px) {
  .block-banner.v-strip { flex-direction: column; align-items: flex-start; }
  .block-banner.v-strip .blk-actions { margin-left: 0; }
}

/* ── Блок «кнопки» ───────────────────────────────────────────────────── */
.block-cta {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: var(--r-card, 18px);
  border: 1px solid var(--hair);
  background: var(--surface);
  box-shadow: var(--card-sh);
}

.block-cta.brand { border-color: var(--brand-line); background: var(--brand-soft); }
.block-cta.navy { border-color: transparent; background: var(--navy); }
.block-cta.navy .block-cta-title { color: #fff; }
.block-cta.navy .block-banner-text { color: rgba(234, 240, 247, .72); }
.block-cta.gold { border-color: rgba(201, 152, 47, .45); background: rgba(201, 152, 47, .12); }

.block-cta-title { font-size: 16px; font-weight: 700; line-height: 1.3; }

/* ── Категории плитками и чипами ─────────────────────────────────────── */
.block-cats { margin-top: 20px; }

.blk-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-top: 10px;
}

.blk-tile {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  padding: 14px 14px;
  border-radius: var(--r-card-sm, 16px);
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--card-sh);
}

.blk-tile:hover { border-color: var(--brand-line); }

.blk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.blk-chip {
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.blk-chip:hover { border-color: var(--brand-line); background: var(--brand-soft); }

/* Витрина адвокатов сеткой на телефоне (вариант блока «сеткой»): ширину
   задаёт сетка, карточка растягивается. Десктопная .lgrid для этого не
   годится — она рассчитана на широкие карточки кабинета. */
.blk-lgrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  padding: 0 20px;
}

/* ============================================================ ЗАЯВКИ
 * Мастер заявки, публикация и карточка заявки (биржа, решение владельца
 * 22.08). Цвета и радиусы — только токенами сверху.
 */

.intake {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.intake-bar h2 {
  font-size: 15px;
  color: var(--mute);
  font-weight: 600;
}

.intake-pos {
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-deep);
  white-space: nowrap;
}

/* Прогресс — сегментами по числу шагов: видно, сколько осталось, а не
   абстрактный процент. */
.intake-progress {
  display: flex;
  gap: 4px;
  padding: 2px 20px 0;
}

.intake-progress > i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
  transition: background 0.2s ease;
}

.intake-progress > i.done,
.intake-progress > i.cur {
  background: var(--brand);
}

.intake-body {
  flex: 1;
  padding: 22px 20px 24px;
}

.intake-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.intake-hint {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}

.intake-step {
  margin-top: 20px;
}

.intake-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fill);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.intake-seeing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--brand-soft);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-deep);
}

.intake-foot {
  gap: var(--gap-sm);
}

.intake-foot .intake-back {
  width: auto;
  flex: 0 0 auto;
  height: var(--cta-h);
  padding: 0 18px;
  color: var(--ink);
}

.intake-foot .intake-next {
  flex: 1;
}

.intake-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  min-height: 18px;
}

.intake-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--mute);
}

.intake-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--danger-ink);
}

.intake-text {
  min-height: 180px;
  line-height: 1.5;
}

.field.bad {
  border-color: var(--danger);
}

/* Вариант ответа: одна карточка — один тап. Выбор подчёркивается рамкой и
   заливкой, а не сменой кегля: ряд не должен прыгать. */
.opt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--r-card-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair), var(--card-sh);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.opt:active {
  transform: scale(0.99);
}

.opt.on {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.opt-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--hair-strong);
  background: var(--surface);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.opt-mark.sq {
  border-radius: 7px;
}

.opt.on .opt-mark {
  border-color: var(--brand);
  background: var(--brand);
}

.opt-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.opt-label {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

.opt-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mute);
}

.opt-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Сумма: единица измерения стоит внутри поля справа. */
.money-field {
  position: relative;
}

.money-field .field {
  padding-right: 64px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.money-unit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
}

.quote-box {
  margin-top: 14px;
  padding: 4px 14px;
  border-radius: 14px;
  background: var(--fill);
}

.quote-box p {
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Файлы к описанию. */
.files {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.files-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--card-sh);
}

.file-kind {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.file-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
}

.file-x:hover {
  background: var(--fill);
  color: var(--ink);
}

.files-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 16px;
  border: 1.5px dashed var(--hair-strong);
  border-radius: var(--r-card-sm);
  background: transparent;
  color: var(--brand-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  /* Подпись приходит с сервера и на узбекском длиннее: пусть переносится по
     центру, а не растягивает кнопку и не вылезает за пунктир. */
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.files-drop:hover,
.files-drop.over {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.files-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-soft);
}

/* Календарь выбора дней. */
.cal {
  margin-top: 18px;
}

.cal-month + .cal-month {
  margin-top: 16px;
}

.cal-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  padding: 4px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--mute);
}

.cal-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.cal-day.today {
  box-shadow: inset 0 0 0 1.5px var(--brand-line);
}

.cal-day.on {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--cta-sh);
}

.cal-day:disabled {
  background: transparent;
  box-shadow: none;
  color: var(--hair-strong);
  cursor: default;
}

.spinner.light {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

/* ---------------------------------------------------------- публикация */

.lens {
  padding: 16px 18px 14px;
  border-radius: var(--r-card-lg);
  background: var(--surface);
  box-shadow: var(--card-sh);
  border: 1px solid var(--hair);
}

.lens-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lens-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-deep);
}

.lens-title {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.lens-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  background: var(--fill);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.lens-summary {
  margin-top: 12px;
  min-height: 44px;
}

.lens-summary p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}

.lens-skeleton > i {
  display: block;
  height: 12px;
  margin: 8px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fill) 25%, var(--hair) 50%, var(--fill) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.lens-foot {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-deep);
  cursor: pointer;
  text-decoration: none;
}

.link-btn.mute {
  color: var(--mute);
}

.link-btn:disabled {
  color: var(--cta-disabled-ink);
  cursor: default;
}

.pub-block {
  margin-top: 22px;
}

.opt.consent {
  cursor: default;
  align-items: center;
}

.opt.consent .opt-mark {
  cursor: pointer;
  border-width: 1.5px;
  padding: 0;
}

.opt.consent .opt-body {
  cursor: pointer;
}

.pub-phone {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-card-sm);
  background: var(--surface);
  box-shadow: var(--card-sh);
}

.pub-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
}

.phone-cc {
  display: flex;
  align-items: center;
  height: var(--field-h);
  padding: 0 12px;
  border-radius: var(--r-field);
  background: var(--surface);
  border: 1px solid var(--hair);
  font-weight: 600;
}

/* «Готово»: знак в два кольца — тот же язык, что у подтверждения записи. */
.intake.done {
  justify-content: center;
}

.done-wrap {
  padding: 40px 24px;
  text-align: center;
}

.done-mark {
  display: flex;
  justify-content: center;
}

.done-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--ok-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

.done-core {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: var(--cta-sh);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.done-title {
  margin: 22px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.done-sub {
  margin: 10px auto 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}

.done-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 26px auto 0;
}

/* ------------------------------------------------------------- заявки */

.order-new-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--brand-line), var(--card-sh);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.order-new-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--cta-sh);
}

.order-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.order-offers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-deep);
}

.order-head {
  padding: 8px 0 4px;
}

.order-title {
  margin: 10px 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.order-stages {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}

.order-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.order-stage-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
}

.order-stage.current .order-stage-dot {
  border: 2px solid var(--brand);
  color: var(--brand-deep);
}

.order-stage.done .order-stage-dot {
  border: 0;
  background: var(--brand);
}

.order-stage-label {
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--mute);
}

.order-stage.current .order-stage-label {
  color: var(--ink);
  font-weight: 700;
}

.order-wait {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--card-sh);
}

.order-wait-pulse {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.order-wait-pulse > i {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--brand);
}

.order-wait-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-soft);
  animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.25); opacity: 0; }
}

.offer {
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--card-sh);
}

.offer.chosen {
  box-shadow: inset 0 0 0 2px var(--brand), var(--card-sh);
}

.offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--mute);
}

.offer-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.offer-text {
  margin: 12px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.btn.offer-btn {
  width: auto;
  height: 38px;
  padding: 0 14px;
  font-size: 13.5px;
}

.matched {
  margin: 4px 0 20px;
  padding: 16px 18px;
  border-radius: var(--r-card-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--brand-line), var(--card-sh);
}

.matched a.btn {
  text-decoration: none;
}

.order-summary {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
}

.order-rows {
  margin-top: 12px;
  border-top: 1px solid var(--hair);
}

.order-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13.5px;
}

.order-row > span:last-child {
  font-weight: 600;
  text-align: right;
}

.file-row.tap {
  width: 100%;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.legal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--fill);
  color: inherit;
  text-decoration: none;
}

.cases-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 14px;
  background: var(--fill);
}

.cases-seg button {
  flex: 1;
  padding: 9px 6px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cases-seg button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
}

.pane-seg {
  padding: 0 14px 10px;
}

.pane-list .order-card.on {
  box-shadow: inset 0 0 0 2px var(--brand), var(--card-sh);
}

/* Виджет заявки на главной. */
.order-widget {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--card-sh);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.order-widget-title {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.order-widget-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Приглашение к заявке — navy-плитка: заметная, но не кричащая. */
.order-invite {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--r-card-lg);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(2, 41, 81, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.order-invite:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(2, 41, 81, 0.3);
}

.order-invite-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--brand);
  box-shadow: var(--cta-sh);
}

.order-invite-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.order-invite-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

/* Ассистент: «Оформить заявку» под ответом. */
.pick-order {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.pick-order-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--surface);
}

/* Чат до подтверждения: только текст. */
.pre-match {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* Документ площадки внутри кабинета. */
.legal-body { padding: 18px 20px; font-size: 15px; line-height: 1.6; }
.legal-body h1, .legal-body h2, .legal-body h3 { margin: 18px 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.legal-body h1:first-child, .legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul, .legal-body ol { margin: 0 0 12px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--brand-deep); }

/* ------------------------------------------------------------ тумблер

   Общий компонент: им пользуются и фильтр «свободен сегодня» в каталоге
   (раскладка — в desktop.css), и строка уведомлений в профиле. Живёт здесь,
   а не в desktop.css: `index.html` его не подключает, и на телефоне тумблер
   остался бы серой полоской. */

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 21px;
  border-radius: 999px;
  background: var(--hair-strong);
  transition: background 0.16s ease;
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.16s ease;
}

.on > .switch,
.filter-switch.on .switch {
  background: var(--brand);
}

.on > .switch::after,
.filter-switch.on .switch::after {
  transform: translateX(15px);
}


/* ═══════════════════════════════════════════════════════ ИСТОРИИ ═════════
   Кружки на главной и полноэкранные кадры за ними. Сцена — та же, что в
   онбординге приложения: мятная подложка иллюстрации (#EAF5EF = _artOf()
   в intro_screen.dart) и белый лист с текстом. Отдельной палитры у историй
   нет намеренно: это то же обещание продукта, только в другом месте. */

.stories {
  display: flex;
  gap: 14px;
  padding: 18px 20px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.stories::-webkit-scrollbar {
  display: none;
}

.page .stories {
  padding-left: 0;
  padding-right: 0;
}

.story-ring {
  flex: none;
  width: 68px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}

/* Кольцо непросмотренной истории — фирменный градиент; просмотренная гаснет
   до волоска. Именно кольцо, а не подпись, отличает новое от прочитанного:
   так это читается в телеграме и не требует объяснений. */
.story-ring-art {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(from 210deg, #35c97f, #0a834e 35%, #022951 72%, #35c97f);
  transition: transform 0.14s ease;
}

.story-ring:active .story-ring-art {
  transform: scale(0.94);
}

.story-ring.seen .story-ring-art {
  background: var(--hair);
}

/* Волосок цвета фона между кольцом и картинкой — иначе градиент касается
   иллюстрации и кольцо перестаёт читаться как кольцо. */
.story-ring-art::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  pointer-events: none;
}

.story-ring-art img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--art, #eaf5ef);
  display: block;
}

.story-ring.seen .story-ring-art img {
  filter: saturate(0.45) opacity(0.75);
}

.story-ring-label {
  font-size: 11.5px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--ink-soft);
  max-width: 68px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-ring.seen .story-ring-label {
  color: var(--mute);
}

.story-ring:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ─────────────────────────────────────────────────────────── просмотрщик */

body.story-open {
  overflow: hidden;
}

.story-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--art, #eaf5ef);
  display: flex;
  flex-direction: column;
  animation: story-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* На мониторе кадр не растягиваем во всю ширину: история сделана под телефон,
   и растянутая иллюстрация с абзацем в 200 символов читается как ошибка. */
@media (min-width: 720px) {
  .story-view {
    inset: 0;
    background: rgb(8 13 26 / 0.72);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
  }

  .story-view > * {
    width: min(420px, 100%);
  }

  .story-view .story-art,
  .story-view .story-sheet {
    background-clip: padding-box;
  }

  .story-view .story-bars {
    padding-top: 22px;
  }
}

@keyframes story-in {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
}

.story-bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: calc(14px + var(--sat)) 14px 0;
}

.story-bar {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgb(2 41 81 / 0.16);
  overflow: hidden;
}

.story-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--navy);
}

.story-bar.done i {
  width: 100%;
}

.story-bar.live i {
  animation: story-fill 5200ms linear forwards;
}

.story-view.paused .story-bar.live i {
  animation-play-state: paused;
}

@keyframes story-fill {
  to {
    width: 100%;
  }
}

.story-head {
  position: absolute;
  top: calc(28px + var(--sat));
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
}

.story-who {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--ink);
}

.story-x {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgb(2 41 81 / 0.07);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Зоны тапа: право — дальше, лево — назад. Лежат НАД иллюстрацией и ПОД
   листом с кнопкой: кнопка обязана оставаться нажимаемой. */
.story-zones {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
}

.story-z {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.story-z.prev {
  flex: 0 0 34%;
}

.story-art {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(74px + var(--sat)) 26px 12px;
  background: var(--art, #eaf5ef);
}

.story-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.story-sheet {
  position: relative;
  z-index: 3;
  background: var(--surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 26px 22px calc(22px + var(--sab));
  box-shadow: 0 -8px 30px rgb(16 21 40 / 0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 288px;
}

.story-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.story-kicker:empty {
  display: none;
}

.story-title {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.5px;
  color: var(--ink);
  text-wrap: balance;
}

.story-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.story-cta {
  margin-top: auto;
  height: var(--cta-h);
  border: 0;
  border-radius: var(--r-cta);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--cta-sh);
}

.story-cta:hover {
  filter: brightness(1.06);
}

/* «Понятно» — кнопка без действия: она закрывает историю, и обещать зелёным
   ей нечего. */
.story-cta.ghost {
  background: var(--fill);
  color: var(--ink);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .story-view {
    animation: none;
  }

  .story-bar.live i {
    width: 100%;
    animation: none;
  }
}

/* Цена отклика — первое, по чему сравнивают специалистов, поэтому она стоит
   НАД текстом и набрана крупно. Отклик без цены (партнёрка старше 23.08)
   честно говорит «цену обсудим», а не показывает ноль. */
.offer-price {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--r-chip);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.offer-price.none {
  font-size: 14px;
  font-weight: 600;
}

/* Пульс площадки — живые цифры на главной (владелец 23.08: «интерес с обеих
   сторон»). Цифры приходят готовыми с сервера, здесь только вид. */
.block-pulse {
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pulse-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse-blink 1.4s ease-in-out infinite alternate;
}

@keyframes pulse-blink {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* Уважаем системную настройку «меньше движения»: мигающая точка — украшение. */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; opacity: 1; }
}

.pulse-cap {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--mute);
}

.pulse-online {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pulse-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--mute);
}

.pulse-stats {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.pulse-stat {
  flex: 1;
  min-width: 0;
}

.pulse-stat b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pulse-stat b.small {
  font-size: 13px;
  font-weight: 600;
  color: var(--mute);
}

.pulse-stat span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--mute);
}