/* Dental OPG AI — app.css
   RRLab UI Kit v2. Standalone: daisyUI не требуется, классы совпадают с китом.
   Правки только здесь. В разметке — ни одного style="".
   Шрифт подключён в <head> ссылкой (позже самохостить вместе с ассетами). */

/* ---------- 16. Токены ---------- */
:root {
  font-size: 131.25%;            /* = 21px при базовых 16px, но без ломки настроек пользователя */
  color-scheme: dark;
}

/* Мобильный масштаб: всё свёрстано в rem, поэтому телефон — это один
   коэффициент, весь интерфейс ужимается соразмерно. 640 — мобильный порог. */
@media (max-width: 640px) {
  :root { font-size: 112.5%; }   /* = 18px */
}

:root {

  --font-sans: "Golos Text", ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", sans-serif;

  --color-bg-start: #24303f;
  --color-bg-end: #131a23;
  --color-text: #e8edf4;
  --color-muted: #a3abb5;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-content: #ffffff;
  --color-accent: #2dd4bf;
  --color-focus: #fbbf24;

  --surface-1: #ffffff08;
  --surface-2: #ffffff0d;
  --surface-hover: #ffffff17;
  --border-1: #ffffff1f;
  --border-strong: #ffffff59;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .8rem;
  --space-4: 1rem;
  --space-5: 1.2rem;
  --space-6: 1.6rem;

  --radius-control: .9rem;
  --radius-card: 1rem;
  --radius-panel: 1.2rem;
  --control-min-block: 3.8rem;

  /* Фактура цветных кнопок: inline SVG feTurbulence, без запросов */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

/* Свечение живёт на фоне документа, приколото к окну и гаснет до края:
   у него нет коробки внутри панели, значит нету и шва. Панель полупрозрачная — свет читается сквозь. */
html {
  background-color: var(--color-bg-end);
  background-image:
    radial-gradient(78vw 30vh at 50% 26vh, #4f7dff33, transparent 100%),
    radial-gradient(46vw 30vh at 62% 62vh, #8b5cf62b, transparent 100%),
    linear-gradient(180deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-text-size-adjust: 100%;
  /* Полоса прокрутки то есть, то нет — без резерва панель прыгает по ширине
     между экранами разной высоты. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 0 .6rem;
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: pretty;
}

h1, h2, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: #7ceadd; }

/* ---------- 17. Фокус, доступность, движение ---------- */
.skip {
  position: fixed; inset-inline-start: .6rem; inset-block-start: .6rem;
  transform: translateY(-200%);
  padding: .6rem 1rem; border-radius: var(--radius-control);
  background: var(--color-primary); color: var(--color-primary-content); text-decoration: none;
}
.skip:focus { transform: none; z-index: 1000; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: .16rem solid var(--color-focus);
  outline-offset: .14rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 3. Стеклянная панель ---------- */
.wrap {
  width: 100%;
  min-height: calc(100vh - 2.4rem);
  min-height: calc(100svh - 2.4rem);
  margin: 1.2rem auto;
  padding: 1.1rem 1rem .4rem;
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-panel);
}
main { flex: 1; display: flex; flex-direction: column; }

footer {
  margin-top: 1.2rem; padding: .8rem 0 .6rem;
  border-top: 1px solid #ffffff14;
  font-size: .72rem; line-height: 1.5;
  color: var(--color-muted); text-align: center;
}

@media (min-width: 1024px) {
  .wrap { max-width: 46rem; padding: 1.6rem 2rem .6rem; }
}

/* ---------- 4. Сетка и вертикальный ритм ---------- */
.inner { width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.inner.wide { max-width: none; }
.col { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: .6rem; }
.row > * { flex: 1; width: auto; min-width: 0; }

/* ---------- 6. Навигация ---------- */
.nav {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.2rem; padding-bottom: .7rem;
  border-bottom: 1px solid #ffffff14;
}
.nav .breadcrumbs { flex: 1; min-width: 0; font-size: .78rem; color: var(--color-muted); }
/* путь всегда виден целиком: переносим, а не прячем в скролл */
.nav .breadcrumbs ol { display: flex; flex-wrap: wrap; white-space: normal; gap: .2rem .5rem; }
.nav .breadcrumbs li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }
.nav .breadcrumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid #ffffff33; }
.nav .breadcrumbs a:hover { color: var(--color-text); border-bottom-color: currentColor; }
.nav .breadcrumbs [aria-current="page"] { color: var(--color-text); }
/* Имя кейса в крошках: пользовательское, до 255 символов — режем многоточием */
.nav .breadcrumbs [data-diag-crumb] {
  display: inline-block; max-width: 14rem; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Короткие действия юзера справа в шапке: профиль, жетоны, заглушка. */
.nav-acts { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.nav-pill {
  min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-2); color: var(--color-text);
  font: 600 .8rem/1 var(--font-sans);
}
button.nav-pill { cursor: pointer; }
button.nav-pill:hover { background: var(--surface-hover); }
.nav-pill-empty { color: var(--color-muted); border-color: var(--border-1); }

/* На телефоне пилюли юзера живут над панелью, по центру. На десктопе
   верхний блок скрыт, пилюли остаются в шапке справа. */
.top-acts { display: none; }
@media (max-width: 640px) {
  .top-acts { display: flex; justify-content: center; margin: .9rem 0 0; }
  .top-acts .nav-acts { margin-inline-start: 0; }
  .top-acts + .wrap { margin-top: .7rem; }
  .nav .nav-acts { display: none; }
}

/* Маркетинг: плитка-карточка — фото фоном, подпись плашкой поверх;
   призрак с плюсом добавляет карточку. */
.mcard-tile { position: relative; overflow: hidden; }
.mcard-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard-tile .name {
  position: relative; z-index: 1; max-width: 92%;
  background: #0d1520cc; padding: .2rem .55rem; border-radius: .5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcard-ghost .ghost-plus { font-size: 1.7rem; opacity: .7; }

/* Маркетинг: ряд «изображение + текст». Плитка-пикер в облике призрака,
   после выбора картинка занимает плитку целиком. На телефоне — в столбик. */
.mt-row {
  display: grid; grid-template-columns: 9rem 1fr; gap: .7rem; align-items: stretch;
}
.mt-pick {
  position: relative; overflow: hidden; min-height: 9rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
  background: var(--surface-1); color: var(--color-muted);
}
.mt-pick:hover { background: var(--surface-hover); }
.mt-ghost { font-size: 1.6rem; opacity: .75; }
.mt-cap { font-size: .72rem; }
.mt-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-text {
  width: 100%; min-width: 0; resize: vertical; min-height: 9rem; padding: .6rem .7rem;
  font-size: .85rem; font-family: inherit; line-height: 1.5; color: var(--color-text);
  border: 1px solid var(--border-strong); border-radius: .65rem; background: #0d1520a6;
}
@media (max-width: 640px) {
  .mt-row { grid-template-columns: 1fr; }
  .mt-pick { min-height: 7rem; }
  .mt-text { min-height: 6rem; }
}

/* Поле формы: подпись, контрол, мелкие пояснения. */
.field {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .9rem; border: 1px solid var(--border-1);
  border-radius: var(--radius-card); background: var(--surface-1);
}
.field-label { font-size: .84rem; font-weight: 600; }
.field small { color: var(--color-muted); font-size: .7rem; line-height: 1.45; }
.field input[type="file"],
.field input[type="text"] {
  width: 100%; min-width: 0; min-height: 2.7rem; padding: .38rem;
  font-size: .72rem; font-family: inherit; color: var(--color-text);
  border: 1px solid var(--border-strong); border-radius: .65rem;
  background: #0d1520a6;
}
.field input[type="text"] { padding: 0 .7rem; font-size: .85rem; }
.field input[type="file"]::file-selector-button {
  min-height: 1.9rem; margin-inline-end: .6rem; padding: .3rem .65rem;
  border: 1px solid #3f6fe0a6; border-radius: .45rem;
  background: #2563eb1f; color: var(--color-text);
  font: 600 .72rem/1 var(--font-sans); cursor: pointer;
}
.field-error { color: #f87171; font-size: .75rem; }
/* Место превью занято с первого рендера — выбор файла меняет содержимое
   рамки, не геометрию экрана (UI-GUIDE-v2, «Интерфейс не появляется внезапно»). */
.opg-preview-box {
  position: relative;
  width: 100%; aspect-ratio: 5 / 2; max-height: 18rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-1); border-radius: .8rem; background: #0d1520a6;
  overflow: hidden;
}
.opg-preview-ghost { width: 3rem; height: 3rem; opacity: .3; color: var(--color-muted); }
.opg-preview { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Оповещения: галочка, рядом появляется кнопка подключения. */
.notify-row { display: flex; align-items: center; gap: .8rem; min-height: 2.6rem; }
.consent { display: flex; align-items: center; gap: .7rem; line-height: 1.4; flex: 1; cursor: pointer; }
.consent input { width: 1.4rem; height: 1.4rem; flex: none; accent-color: var(--color-primary); cursor: pointer; }
.notify-row .btn { width: auto; min-height: 2.4rem; font-size: .8rem; padding: 0 .9rem; flex: none; }

/* ---------- Первый экран ---------- */
.hero {
  text-align: center;
  padding: 2.2rem .4rem 1rem;
}
.title {
  font-size: 2.05rem; font-weight: 800; line-height: 1.02;
  letter-spacing: -.03em; overflow-wrap: break-word;
  /* темная копия на пиксель вниз-вправо — печатная плотность букв */
  text-shadow: 1px 1px 0 #08111ceb;
}
.title .mark { color: var(--color-accent); }

/* AI: буквы контурные, заливка ползёт змейкой по траектории буквы.
   A: слева вверх к вершине и вниз по правой ноге. I: просто вверх.
   Слив — тем же маршрутом. Механика: фон буквы — SVG, где по скелету буквы
   едет толстый штрих (SMIL stroke-dashoffset), а форму даёт сам глиф через
   background-clip: text. Ноль JS. Вторая буква стартует со сдвигом в четверть цикла.
   text-shadow обязан быть выключен: у прозрачных букв тень рисует силуэт. */
@supports (-webkit-background-clip: text) {
  .mark-fill {
    color: transparent;
    -webkit-text-stroke: .042em var(--color-accent);
    text-shadow: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M10 110 L30 -10 L50 110' fill='none' stroke='%232dd4bf' stroke-width='36' pathLength='100' stroke-dasharray='100 100' stroke-dashoffset='100'%3E%3Canimate attributeName='stroke-dashoffset' values='100;0;0;-100;-100' keyTimes='0;0.25;0.5;0.75;1' calcMode='spline' keySplines='.6 0 .4 1;0 0 1 1;.6 0 .4 1;0 0 1 1' dur='14s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") no-repeat center / 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .mark-fill-2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 100'%3E%3Cpath d='M12 110 L12 -10' fill='none' stroke='%232dd4bf' stroke-width='30' pathLength='100' stroke-dasharray='100 100' stroke-dashoffset='100'%3E%3Canimate attributeName='stroke-dashoffset' values='100;0;0;-100;-100' keyTimes='0;0.25;0.5;0.75;1' calcMode='spline' keySplines='.6 0 .4 1;0 0 1 1;.6 0 .4 1;0 0 1 1' dur='14s' begin='3.5s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  }
}
@media (prefers-reduced-motion: reduce) {
  .mark-fill {
    animation: none;
    color: var(--color-accent);
    -webkit-text-stroke: 0;
    background: none;
  }
}
.lead {
  margin: .9rem 0 0; font-size: 1.05rem; line-height: 1.35;
  color: var(--color-muted); text-wrap: pretty;
  text-shadow: 1px 1px 0 #08111c8c;
}
.lead .u {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: .09em;
  text-underline-offset: .2em;
}
@media (min-width: 1024px) {
  .hero { padding: 3rem .4rem 1.4rem; }
  .title { font-size: 2.9rem; }
  .lead { font-size: 1.15rem; }
}

/* ---------- 5. Кнопки ---------- */
.btn {
  /* кнопка всегда во всю ширину контейнера; сузить может только .row */
  width: 100%;
  min-height: var(--control-min-block);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.1rem;
  font-family: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; overflow-wrap: anywhere;
  border: 1px solid transparent; border-radius: var(--radius-control);
  background-color: transparent; color: var(--color-text);
  box-shadow: none; cursor: pointer;
  text-shadow: 1px 1px 0 #08111c73;
  transition: background-color .15s, border-color .15s;
}

/* Базовое состояние — чистый контур с бликом по верхней кромке.
   На ховере приходит тело: центр светлее, бока утемнены — кнопка читается объёмной. */
.btn-primary {
  border-color: #3f6fe0a6;
  background-color: #2563eb1f;
  color: var(--color-text);
  box-shadow: inset 0 1px 0 #ffffff3d;
}
.btn-primary:hover {
  background-color: var(--color-primary); color: var(--color-primary-content);
  background-image:
    var(--noise),
    linear-gradient(90deg, #05132fa6 0%, #05132f00 26%, #05132f00 74%, #05132fa6 100%),
    radial-gradient(120% 150% at 50% 0%, #ffffff2b 0%, #ffffff00 62%);
  background-size: 160px 160px, auto, auto;
  border-color: #1b3fa8;
  box-shadow: inset 0 1px 0 #ffffff6b, 0 .3rem .9rem -.35rem #1d4ed8a6;
}
.btn-primary:active {
  background-image:
    var(--noise),
    linear-gradient(90deg, #05132fbf 0%, #05132f0d 30%, #05132f0d 70%, #05132fbf 100%);
  background-size: 160px 160px, auto;
  box-shadow: inset 0 2px 5px #05132f80;
}
.btn-outline {
  border: 1.5px solid var(--border-strong); color: var(--color-text); background-image: none;
  box-shadow: inset 0 1px 0 #ffffff1f;
}
.btn-outline:hover {
  background-color: #ffffff12; border-color: #ffffff8c; color: var(--color-text);
  background-image:
    linear-gradient(90deg, #05132f80 0%, #05132f00 26%, #05132f00 74%, #05132f80 100%),
    radial-gradient(120% 150% at 50% 0%, #ffffff17 0%, #ffffff00 60%);
  box-shadow: inset 0 1px 0 #ffffff33;
}
.btn-outline:hover { background-color: #ffffff14; border-color: #ffffff8c; color: var(--color-text); }
.btn-ghost { min-height: 3rem; background-image: none; }
.btn-ghost:hover { background-color: #ffffff14; }
/* Разрушающее действие: приглушённый бордовый, «опасно, но контролируемо». */
.btn-error { background-color: #7f1d1d; color: #fecaca; border: 1px solid #f8717155; }
.btn-error:hover { background-color: #991b1b; color: #fecaca; }
.btn-compact {
  width: auto; min-height: 2.15rem;
  padding: .35rem .75rem;
  border-radius: .6rem;
  font-size: .72rem;
}
/* Мёртвая кнопка гаснет целиком и не отвечает на ховер — иначе неотличима от живой.
   Селекторы с :hover/:active перебивают .btn-primary:hover и .btn-outline:hover. */
.btn:disabled, .btn[aria-disabled="true"],
.btn:disabled:hover, .btn[aria-disabled="true"]:hover,
.btn:disabled:active, .btn[aria-disabled="true"]:active {
  opacity: .55; cursor: not-allowed;
  color: var(--color-muted);
  border-color: var(--border-1);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}
@media (forced-colors: active) {
  .btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
}

/* ---------- Переключатель языка ---------- */
/* Язык — это настройка, а не действие экрана. Синий закреплён за главным
   действием, поэтому выбранный язык отмечается нейтральной заливкой.
   Состояние держит aria-current, класс его не дублирует. */
.langs { display: flex; flex-direction: column; gap: .5rem; }
.btn-lang {
  min-height: 3.1rem; font-size: .95rem;
  padding-inline: .4rem; white-space: nowrap;
  border: 1.5px solid var(--border-1); color: var(--color-muted);
}
.btn-lang:hover {
  background-color: #ffffff0f; border-color: var(--border-strong); color: var(--color-text);
}
/* текущий язык отмечен не только цветом: заливка, контраст, подчёркивание */
.btn-lang[aria-current="true"] {
  position: relative;
  background-color: var(--surface-hover); border-color: var(--border-strong);
  color: var(--color-text); box-shadow: inset 0 1px 0 #ffffff1f;
}
.btn-lang[aria-current="true"]::after {
  content: ""; position: absolute; inset-inline: 28%; inset-block-end: .5rem;
  height: .12rem; border-radius: .12rem; background: currentColor; opacity: .85;
}

/* ---------- 8. Карточки, разделители, мелочь ---------- */
.card {
  display: block; padding: 1rem 1.1rem;
  background: var(--surface-2); border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  color: inherit; text-decoration: none; line-height: 1.55;
}
a.card:hover { background: var(--surface-hover); color: inherit; }
.card b { display: block; font-size: 1.1rem; margin-bottom: .3rem; }
.card p { color: var(--color-muted); font-size: .92rem; overflow-wrap: anywhere; }

.sep { border-top: 1px solid var(--border-1); margin: .6rem 0 .2rem; }
.sect { font-weight: 700; font-size: 1.1rem; text-align: center; }
.sect-row { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.sect-help {
  width: 1.2rem; height: 1.2rem; flex: none;
  border: 0; border-radius: 50%; background: #ffffff14; color: var(--color-muted);
  font-size: .7rem; font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.sect-help:hover { background: #ffffff26; color: var(--color-text); }

/* Шаги распознавания: тонкая полоса прогресса сразу под шапкой. */
progress.steps {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: .28rem;
  margin-bottom: 1.2rem; border: 0; border-radius: 999px;
  background: #ffffff14; overflow: hidden;
}
progress.steps::-webkit-progress-bar { background: #ffffff14; border-radius: 999px; }
progress.steps::-webkit-progress-value {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 999px;
}
progress.steps::-moz-progress-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 999px;
}
.muted { color: var(--color-muted); }
.accent { color: var(--color-accent); }

/* ---------- Переключение экранов ---------- */
[hidden] { display: none !important; }
.view { flex: 1; min-width: 0; }

.nav .breadcrumbs button {
  margin: 0; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: none; border-bottom: 1px solid #ffffff33;
}
.nav .breadcrumbs button:hover {
  color: var(--color-text); border-bottom-color: currentColor;
}

/* Архив прайсов: плитки, выбор через aria-pressed, вайрфрейм при нуле,
   пагинация от девяти. Крестик — соседняя кнопка поверх плитки, не вложенная. */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.price-cell { position: relative; }
.price-tile {
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--border-1); border-radius: .9rem; background: var(--surface-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: .5rem; text-align: center;
  color: inherit; font-family: inherit;
}
button.price-tile { cursor: pointer; }
button.price-tile:hover { background: var(--surface-hover); }
button.price-tile:disabled { opacity: .45; cursor: not-allowed; }
button.price-tile:disabled:hover { background: var(--surface-1); }
.price-tile[aria-pressed="true"] { border-color: var(--color-accent); background: #2dd4bf14; }
.price-tile .doc { font-size: 1.4rem; line-height: 1; }
.price-tile .name {
  font-size: .62rem; font-weight: 600; line-height: 1.25; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.price-tile .date { font-size: .62rem; font-weight: 600; color: var(--color-muted); }
.price-tile .sel {
  position: absolute; top: .3rem; left: .3rem; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: transparent;
}
.price-tile[aria-pressed="true"] .sel { border-color: var(--color-accent); background: var(--color-accent); color: #042f2e; }
.price-x {
  position: absolute; top: .3rem; right: .3rem; width: 1.2rem; height: 1.2rem;
  border: 0; border-radius: 50%; background: #ffffff14; color: var(--color-muted);
  font-size: .6rem; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.price-x:hover { background: #7f1d1d; color: #fecaca; }
.price-pen {
  position: absolute; top: .3rem; right: 1.9rem; width: 1.2rem; height: 1.2rem;
  border: 0; border-radius: 50%; background: #ffffff14; color: var(--color-muted);
  font-size: .6rem; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.price-pen:hover { background: #ffffff26; color: var(--color-text); }
.price-share {
  position: absolute; top: .3rem; right: 3.5rem; width: 1.2rem; height: 1.2rem;
  border: 0; border-radius: 50%; background: #ffffff14; color: var(--color-muted);
  font-size: .55rem; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.price-share:hover { background: #ffffff26; color: var(--color-text); }
.price-tile-failed { border-color: #f8717166; }
button.price-tile-failed:hover { background: #f871711a; }

.price-tile-processing .gear {
  font-size: 1.4rem; line-height: 1; display: inline-block;
  animation: gear-spin 3s linear infinite;
}
@keyframes gear-spin { to { transform: rotate(360deg); } }

.price-tile-ghost { border-style: dashed; opacity: .55; }
.price-pen:disabled { opacity: .4; cursor: not-allowed; }
.price-mic {
  position: absolute; top: .3rem; right: .3rem; width: 1.7rem; height: 1.7rem;
  border: 0; border-radius: 50%; background: #ffffff14; color: var(--color-text);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.price-mic svg { width: .95rem; height: .95rem; }
.price-mic:hover { background: #ffffff26; }
.price-mic:disabled { opacity: .4; cursor: not-allowed; }

/* Шаг 4: чипы направлений — кирпичная кладка: по два в ряд, нечётный
   последний на всю строку; длинное имя режется многоточием, полное — в title. */
.dirs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
/* Шаг скорости: один тоггл в строку, плашка компактнее. */
.dirs.speed-dirs { grid-template-columns: 1fr; }
/* Системный размер поясняющего текста плашек — вешать классом text-note. */
.text-note { font-size: .75rem; }
.speed-note p { margin: 0; }
.speed-note p + p { margin-top: .4rem; }
.dir-chip {
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  padding: .55rem .9rem; border: 1px solid var(--border-1); border-radius: .7rem;
  background: var(--surface-1); color: inherit; font-family: inherit; font-size: .9rem;
  cursor: pointer;
}
.dir-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dir-chip .dir-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Мобайл: одна категория — одна строка, кирпич не нужен. */
@media (max-width: 640px) {
  .dirs { grid-template-columns: 1fr; }
  /* фильтры дат в диагностиках остаются 2 в ряд и на телефоне */
  .dirs.diag-ranges { grid-template-columns: 1fr 1fr; }
  .dir-chip:last-child:nth-child(odd) { grid-column: auto; }
}

.label-hint { font-weight: 400; color: var(--color-muted); font-size: .8rem; }

/* Отзывы: видео-плейсхолдер 16:9 с плей-кружком, подпись — клиника и страна. */
.review-ph { display: flex; flex-direction: column; gap: .5rem; }
.review-video {
  aspect-ratio: 16 / 9; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-1); border-radius: .8rem; background: #0d1520a6;
}
.review-video svg { width: 2.6rem; height: 2.6rem; opacity: .3; color: var(--color-muted); }
.review-caption { display: flex; align-items: center; gap: .6rem; }
.review-caption .bar { display: block; height: .5rem; border-radius: .25rem; background: var(--border-1); width: 38%; }
.review-caption .bar + .bar { width: 18%; }

/* Шаг 5: рамка логотипа стоит всегда — файл меняет содержимое, не геометрию. */
.logo-box {
  height: 8rem; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-1); border-radius: .8rem; background: #0d1520a6;
  overflow: hidden;
}
.logo-ghost { width: 2.4rem; height: 2.4rem; opacity: .3; color: var(--color-muted); }
.logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dir-chip:hover { background: var(--surface-hover); }
/* Disabled = мёртвый: ни клика, ни ховера, ни курсора. */
.dir-chip[disabled] { cursor: default; opacity: .55; }
.dir-chip[disabled]:hover { background: var(--surface-1); }
.dir-chip .sel {
  width: 1.1rem; height: 1.1rem; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff14; color: transparent; font-size: .65rem;
}
.dir-chip[aria-pressed="true"] { border-color: var(--color-accent); background: #2dd4bf14; }
.dir-chip[aria-pressed="true"] .sel { background: var(--color-accent); color: #042f2e; }
.price-tile-ghost .doc { filter: grayscale(1); opacity: .6; }
.price-tile .bar { display: block; width: 68%; height: .32rem; border-radius: .2rem; background: var(--border-1); }
.price-tile .bar + .bar { width: 44%; }

/* Мои диагностики: панель поиска и фильтров над сеткой. */
.diag-tools { display: flex; flex-direction: column; gap: .8rem; }

/* Мои диагностики: статусы кейсов и сетка 3/2. Готовый — зеленоватый с
   галочкой, полуготовый (ответ есть, отчёта нет) — янтарный с полукругом. */
.diag-mark {
  position: absolute; top: .3rem; left: .3rem; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .65rem; line-height: 1;
}
.diag-done { border-color: #4ade8066; background: #4ade8014; }
.diag-done .diag-mark { background: #15803d; color: #dcfce7; }
.diag-half { border-color: #fbbf2466; background: #fbbf240f; }
.diag-half .diag-mark { background: #b45309; color: #fef3c7; }
@media (max-width: 640px) {
  .diag-grid { grid-template-columns: 1fr 1fr; }
}

/* Экран запуска анализа: крупная шестерёнка и островок-плейсхолдер текста. */
.launch-gear { display: flex; justify-content: center; }
.launch-gear .gear { font-size: 3rem; line-height: 1; display: inline-block; animation: gear-spin 3s linear infinite; }
.launch-note { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.4rem 1.2rem; }
.launch-note .bar { display: block; width: 72%; height: .4rem; border-radius: .2rem; background: var(--border-1); }
.launch-note .bar:nth-child(2) { width: 56%; }
.launch-note .bar:nth-child(3) { width: 40%; }
.price-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.price-pager .btn { width: auto; min-width: 3rem; min-height: 2.4rem; font-size: 1rem; }
.price-pager-info { font-size: .8rem; color: var(--color-muted); min-width: 2.6rem; text-align: center; }

/* ---------- 10. Диалоги ---------- */
/* fixed + inset + margin:auto центрируют безусловно. Без этого диалог,
   попавший внутрь flex-контейнера, считается флекс-элементом и уезжает вбок. */
.viewer { max-width: 56rem; }
.viewer img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto 1rem; border-radius: .8rem; }
.viewer-text {
  white-space: pre-wrap; overflow-wrap: anywhere; text-align: start;
  max-height: 60vh; overflow-y: auto; line-height: 1.5;
  background: #ffffff08; border: 1px solid var(--border-1); border-radius: .8rem;
  padding: 1rem; margin-bottom: 1rem; font-family: inherit; font-size: .95rem;
}
/* Просмотрщик текста — редактируемый: textarea в облике той же плашки. */
textarea.viewer-text { display: block; width: 100%; height: 50vh; min-height: 14rem; resize: vertical; color: inherit; }

.dictate-opg-box {
  overflow: hidden; border-radius: .8rem; background: #0d1520a6;
  touch-action: none; cursor: grab;
}
.dictate-opg-box { position: relative; }
.dictate-opg-box:active { cursor: grabbing; }
/* Схема «раздвигай пальцами» поверх снимка: ненавязчиво дышит и гаснет */
.pinch-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; color: #ffffffd9; opacity: 1; transition: opacity 1.2s ease;
}
.pinch-hint.gone { opacity: 0; }
.pinch-hint svg { width: 64px; height: 64px; filter: drop-shadow(0 1px 6px #000000b3); }
.pinch-hint .pinch-f1 { animation: pinch-a 2.2s ease-in-out infinite; }
.pinch-hint .pinch-f2 { animation: pinch-b 2.2s ease-in-out infinite; }
@keyframes pinch-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, 4px); } }
@keyframes pinch-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -4px); } }
.dictate-opg-box img {
  display: block; width: 100%; max-height: 40vh; object-fit: contain;
  transform-origin: 0 0; user-select: none; -webkit-user-drag: none;
}
.dictate-hint { display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* Пациенты: таблица вовлечённости. Сортируемые хедеры — кнопки со стрелкой
   через aria-sort; на узких экранах таблица скроллится внутри обёртки. */
.ptable-wrap { overflow-x: auto; }
.sect-refresh {
  margin: 0 0 0 .55rem; padding: 0; border: 1px solid var(--border-1);
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--color-muted);
  cursor: pointer; vertical-align: middle;
}
.sect-refresh svg { width: .95rem; height: .95rem; }
.sect-refresh:hover { color: var(--color-accent); background: var(--surface-hover); border-color: var(--border-strong); }
.sect-refresh:disabled { opacity: .45; cursor: default; }

/* Покупка жетонов: 6 пакетов 2 в ряд, выбранный светится акцентом */
.tokens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.token-tile { aspect-ratio: auto; min-height: 5.2rem; gap: .15rem; position: relative; }
.token-tile .token-amount { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.token-tile .token-price { font-size: .78rem; color: var(--color-muted); }
.token-tile[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 18px #2dd4bf40;
}
.token-tile[aria-pressed="true"] .token-price { color: var(--color-accent); }
.tokens-note { text-align: center; font-size: .82rem; }
.bonus-tip {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  background: #2dd4bf1f; border: 1px solid #2dd4bf59; color: var(--color-accent);
  font-weight: 700; white-space: nowrap;
}
.ptable { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ptable th, .ptable td { padding: .55rem .6rem; border-bottom: 1px solid var(--border-1); text-align: left; white-space: nowrap; }
.ptable th button, .ptable th span {
  margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--color-muted); font: 700 .72rem/1.2 var(--font-sans);
  text-transform: uppercase; letter-spacing: .06em;
}
.ptable th button { cursor: pointer; }
.ptable th button:hover { color: var(--color-text); }
.ptable th[aria-sort] button { color: var(--color-text); }
.ptable td.n { text-align: right; font-variant-numeric: tabular-nums; }
.ptable .plink {
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--color-text); font: inherit; border-bottom: 1px solid #ffffff33;
}
.ptable .plink:hover { border-bottom-color: currentColor; }
.ptable-empty { color: var(--color-muted); }
/* Призрачные строки: таблица всегда высотой в 10 строк */
.ptable-ghost .bar { display: inline-block; height: .8em; border-radius: 4px; background: var(--surface-hover); vertical-align: middle; }
.ptable-ghost td:nth-child(1) .bar { width: 72%; }
.ptable-ghost td:nth-child(2) .bar { width: 52%; }
.ptable-ghost td:nth-child(3) .bar { width: 64%; }
.ptable-ghost td:nth-child(4) .bar { width: 40%; }
.ptable-ghost td:nth-child(5) .bar { width: 46%; }
.ptable-ghost td:nth-child(6) .bar { width: 34%; }
/* Карточка пациента: две колонки — подпись и значение; кликабельное
   выглядит единым ссылочным стилем сайта. */
.pcard { width: 100%; border-collapse: collapse; margin: .2rem 0 .4rem; }
.pcard td { padding: .34rem 0; font-size: .85rem; }
.pcard td:first-child { color: var(--color-muted); width: 42%; padding-right: .8rem; }
.pcard-phone {
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--color-accent);
  text-decoration: underline; text-underline-offset: .18em;
}
.pcard-phone:hover { color: #7ceadd; }
.pcard-visits {
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--border-1);
  font-size: .74rem; color: var(--color-muted);
  max-height: 9rem; overflow: auto;
}
.pcard-visits-ghost .bar {
  display: inline-block; width: 70%; height: .7em; border-radius: 4px;
  background: var(--surface-hover); vertical-align: middle;
}
.pcard-visits-t { width: 100%; border-collapse: collapse; }
.pcard-visits-t th {
  text-align: left; font-weight: 700; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .15rem .35rem .3rem 0;
}
.pcard-visits-t td { padding: .18rem .35rem .18rem 0; color: var(--color-text); }
.pcard-visits-t th:last-child, .pcard-visits-t td:last-child { padding-right: 0; }
.pcard-visits-t td.n, .pcard-visits-t th:not(:first-child) { text-align: right; }
@media (max-width: 640px) {
  .pcard-visits-t { table-layout: fixed; font-size: .7rem; }
  .pcard-visits-t th { font-size: .52rem; letter-spacing: 0; }
  .pcard-visits-t th:nth-child(1) { width: 32%; }
  .pcard-visits-t th:nth-child(2) { width: 34%; }
  .pcard-visits-t th:nth-child(3) { width: 17%; }
  .pcard-visits-t th:nth-child(4) { width: 17%; }
  .pcard-visits-t td { overflow-wrap: anywhere; }
}
/* Экран на всю ширину; размер страницы — ряд из трёх чипов над пейджером */
[data-view-panel="patients"] .inner { max-width: none; }
/* Мобильный набор колонок: ФИО, дата, минуты — главный сигнал остаётся
   на виду. Телефон и план живут в карточке по тапу на имя. */
.ptable .col-mini { display: none; }
/* Часики минут на мобиле прижаты вправо, к своим числам. */
@media (max-width: 640px) {
  .ptable th:has([data-psort="minutes"]) { text-align: right; }
  .ptable th:nth-child(3), .ptable td:nth-child(3),
  .ptable th:nth-child(5), .ptable td:nth-child(5),
  .ptable th:nth-child(6), .ptable td:nth-child(6) { display: none; }
  .ptable th, .ptable td { padding: .5rem .35rem; }
  /* заголовок минут — эмодзи времени, полному слову тесно */
  .ptable .col-full { display: none; }
  .ptable .col-mini { display: inline; font-size: .9rem; }
}
.rec-dot { width: .8rem; height: .8rem; flex: none; border-radius: 50%; background: #f87171; animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .25; } }

.policy {
  position: fixed; inset: 0; margin: auto;
  width: calc(100% - 1.6rem); max-width: 32rem;
  max-height: 85vh; max-height: 85svh; overflow-y: auto;
  padding: 1.3rem 1.2rem 1.2rem;
  border: 1px solid #ffffff2e; border-radius: var(--radius-panel);
  background: #1c2634; color: var(--color-text);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.5;
  /* Системный скроллбар светлый, со стрелками и режет скруглённый угол.
     thin убирает стрелки, цвет уводит полосу в тему панели. */
  scrollbar-width: thin;
  scrollbar-color: #ffffff2e transparent;
}
/* Запасной путь для сборок без scrollbar-width. */
.policy::-webkit-scrollbar { width: .45rem; }
.policy::-webkit-scrollbar-track { background: transparent; }
.policy::-webkit-scrollbar-thumb { background: #ffffff2e; border-radius: 999px; }
.policy::-webkit-scrollbar-thumb:hover { background: #ffffff4a; }
.policy::backdrop { background: #000000b3; }
.policy h2 { font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 1.1rem; }
.policy b { display: block; font-size: .95rem; margin-bottom: .15rem; }
.policy p { color: var(--color-muted); font-size: .88rem; }
.policy-lines { display: flex; flex-direction: column; gap: .4rem; }
/* Кнопка не липнет к тексту диалога — воздух перед действием. */
.policy .btn { margin-top: .6rem; }
.policy form { margin-top: 1.2rem; }

/* ---------- Загрузка: призраки блестят ---------- */
/* Место занято призраком с первого рендера. Пока контейнер занят (aria-busy="true"),
   по призракам идёт блеск — видно, что данные в пути. Reduced motion гасится общим правилом выше. */
[aria-busy="true"] .bar {
  background-image: linear-gradient(90deg, transparent 0%, #ffffff29 50%, transparent 100%);
  background-size: 200% 100%;
  animation: bar-shimmer 1.4s linear infinite;
}
@keyframes bar-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Кнопка обновления у заголовка крутится, пока занята (aria-busy="true"): виден повторный запрос. */
.sect-refresh[aria-busy="true"] { animation: gear-spin 1.2s linear infinite; }

/* ---------- e8354: вход, текст и дерево эмоций ---------- */
/* Пароль и текст — в облике текстового поля. Кегль 1rem: телефон не зумит
   страницу при фокусе. */
.field input[type="password"],
.field textarea {
  width: 100%; min-width: 0; min-height: 2.7rem; padding: 0 .7rem;
  font-size: 1rem; font-family: inherit; color: var(--color-text);
  border: 1px solid var(--border-strong); border-radius: .65rem;
  background: #0d1520a6;
}
.field textarea { display: block; min-height: 6rem; padding: .6rem .7rem; line-height: 1.45; resize: vertical; }

/* Дерево стоит целиком с первого рендера: три этажа, вложенные нативные details
   без JS. Порядок — как в дереве и не меняется: от запуска к запуску меняются
   только числа и заливка шкалы. */
.emo-tree {
  border: 1px solid var(--border-1); border-radius: var(--radius-card);
  background: var(--surface-1); overflow: hidden;
}
.emo-root + .emo-root { border-top: 1px solid var(--border-1); }
.emo-root[open] > summary { background: var(--surface-2); }
.emo-branch { border-top: 1px solid #ffffff14; }

/* Строка параметра одна на все три этажа: имя, своя и общая цифра, перевод, шкала.
   Этажи различаются отступом и жирностью имени, кегль один. */
.emo-row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .1rem .6rem;
  padding: .6rem 1rem .7rem 2rem;
}
.emo-branch > .emo-row { padding-left: 2.6rem; }
.emo-branch li.emo-row { padding-left: 3.2rem; }
summary.emo-row { cursor: pointer; list-style: none; }
summary.emo-row::-webkit-details-marker { display: none; }
/* Стрелка нарисована рамкой: не зависит от шрифта. */
summary.emo-row::before {
  content: ""; position: absolute; left: 1rem; top: 1.05rem;
  width: .42rem; height: .42rem;
  border: solid var(--color-muted); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s;
}
.emo-branch > summary.emo-row::before { left: 1.6rem; }
details[open] > summary.emo-row::before { transform: rotate(45deg); }
summary.emo-row:hover { background: var(--surface-hover); }
/* Плашка режет всё, что выступает за край, — фокус рисуем внутрь. */
summary.emo-row:focus-visible { outline-offset: -.16rem; }

.emo-name { min-width: 0; overflow-wrap: anywhere; hyphens: auto; font-weight: 600; }
.emo-root > summary .emo-name { font-weight: 800; }
.emo-branch li .emo-name { font-weight: 400; }
/* Своя цифра — ответ про сам параметр, общая — по цепочке. В подсказке над деревом
   те же классы работают легендой. */
.emo-own { font-weight: 600; color: var(--color-text); }
.emo-chain { font-weight: 600; color: var(--color-accent); }
.emo-row .emo-own, .emo-row .emo-chain { min-width: 2.3rem; text-align: right; font-variant-numeric: tabular-nums; }
.emo-row .bar { display: inline-block; width: 1.9rem; height: .7em; border-radius: 4px; background-color: var(--surface-hover); vertical-align: middle; }
/* Перевод — одной строкой во всю ширину, длинный режется многоточием, целиком — в title. */
.emo-ru {
  grid-column: 1 / -1; min-width: 0;
  color: var(--color-muted); font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Перевод с is_mock: 1 не выверен руками — подчёркнут пунктиром. */
.emo-ru[data-mock="1"] { text-decoration: underline dashed; text-underline-offset: .2em; }
progress.meter { grid-column: 1 / -1; height: .28rem; margin: .25rem 0 0; }
/* Телефон: отступы этажей уже, имени листа хватает ширины на слово в 13 букв. */
@media (max-width: 640px) {
  .emo-row { gap: .1rem .45rem; padding-right: .8rem; padding-left: 1.9rem; }
  summary.emo-row::before { left: .9rem; }
  .emo-branch > .emo-row { padding-left: 2.3rem; }
  .emo-branch > summary.emo-row::before { left: 1.3rem; }
  .emo-branch li.emo-row { padding-left: 2.7rem; }
}

/* Выборки: самые высокие и самые низкие по своей цифре, со всех трёх этажей.
   Стоят одна под другой во всю ширину; число строк ведёт ползунок. */
.tops { display: flex; flex-direction: column; gap: 1rem; }
/* Шапка выборки: заголовок и кнопка копии, под ними ползунок и его число. */
.top-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem .6rem;
  padding: .7rem 1rem .3rem;
}
/* Ширина под самые длинные значения: «Скопировано» и «130» ничего не двигают. */
.top-head .btn { min-width: 6.6rem; }
.top-range { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; }
.top-range output { flex: none; min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.top-range input[type="range"] {
  flex: 1; min-width: 0; min-height: 2.2rem; margin: 0;
  accent-color: var(--color-primary); cursor: pointer;
}
.top ol:not(:empty) { border-top: 1px solid var(--border-1); }
.top .emo-row { grid-template-columns: minmax(0, 1fr) auto; padding: .5rem 1rem .55rem; }
.top .emo-row + .emo-row { border-top: 1px solid #ffffff14; }
/* В выборке путь и перевод видны целиком: строка переносится, а не режется. */
.top .emo-ru { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.top .emo-name .bar { width: 6.5rem; }
.top .emo-ru .bar { width: 10rem; max-width: 100%; }

/* Переключатель экранов в шапке: два квадратика в облике кнопок языка. Экран — это режим,
   а не действие, поэтому текущий отмечен нейтральной заливкой и подчёркиванием. */
.screens { display: flex; gap: .4rem; }
.screens .btn-lang { width: auto; min-height: 2.4rem; padding: .3rem .9rem; border-radius: .6rem; font-size: .8rem; }
.screens .btn-lang[aria-current="true"]::after { inset-block-end: .3rem; }
/* Заголовок экрана и вопрос, который экран задаёт Clef. */
.screen-head { display: flex; flex-direction: column; gap: .3rem; text-align: center; }