/* ==========================================================================
   BAL Health Care — локальный макет маркетплейса
   Светлая и тёмная темы 1:1 с макетом. Акцентный цвет один — фирменный лайм.
   Все размеры в rem: на больших экранах интерфейс плавно масштабируется.
   Всё содержимое — в одном центральном блоке (как у apple.com и Google Store):
   не больше 4 карточек в ряд, по бокам широкого экрана — свободное поле.
   ========================================================================== */

/* ---------- Токены: светлая тема (по умолчанию) ---------- */
:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs: 1;
  --root: 16px;
  --pad: clamp(1rem, 3.11vw, 8rem);
  --card-min: 23.25rem;
  /* ширина центрального блока: ровно 4 карточки в ряд (1568 px — как в макете на 1672 px) */
  --maxw: 98rem;

  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-soft: #f6f7f8;
  --bg-muted: #ebedee;
  --bg-hover: #f2f3f5;
  --text: #090b18;
  --text-2: #1f1f2b;
  --text-sub: #6c6d72;
  --text-muted: #94959b;
  --text-brand: #4e5058;
  --text-strong: #05060d;
  --nav-text: #1c1e2a;
  --line: #f0f0f2;
  --line-2: #e4e4e9;
  --line-3: #d9d9df;
  --dot: #cbced8;
  --dot-active: #232c46;
  --page-muted: #a7a6a7;
  --badge: #fc2a14;
  --tint-ok: #14b83c;
  --err: #d9352b;
  --shadow-pop: 0 18px 48px rgba(16, 18, 30, .14), 0 2px 8px rgba(16, 18, 30, .06);
  --shadow-card: 0 1px 2px rgba(16, 18, 30, .04), 0 8px 24px rgba(16, 18, 30, .06);
  --overlay: rgba(12, 14, 20, .36);
  --img-shadow: drop-shadow(0 10px 14px rgba(20, 24, 40, .16)) drop-shadow(0 2px 3px rgba(20, 24, 40, .10));
  /* «стекло» для кнопки покупки в карточке */
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-hover: rgba(255, 255, 255, .9);
  --glass-shadow: 0 .75rem 2rem rgba(16, 18, 30, .12), 0 .125rem .375rem rgba(16, 18, 30, .07), inset 0 0 0 .5px rgba(16, 18, 30, .1), inset 0 1px 0 rgba(255, 255, 255, .9);

  /* фирменный лайм — единственный акцентный цвет */
  --accent: #a2e024;
  --accent-ink: #62b224;
  --accent-on: #102006;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --link: var(--accent-ink);
  --tab-active: var(--accent);

  --radius: .5rem;
  --radius-lg: .875rem;
  --radius-xl: 1.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Тёмная тема ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1110;
  --bg-elev: #171918;
  --bg-soft: #151716;
  --bg-muted: #1b1d1c;
  --bg-hover: #1d1f1e;
  --text: #fdffff;
  --text-2: #f4f6f6;
  --text-sub: #d8dadb;
  --text-muted: #8e9192;
  --text-brand: #dddfe0;
  --text-strong: #ffffff;
  --nav-text: #f8fafa;
  --line: #1b1d1c;
  --line-2: #2d2f2f;
  --line-3: #3a3d3d;
  --dot: #444849;
  --dot-active: #f3f5f5;
  --page-muted: #6d7070;
  --badge: #fc381f;
  --tint-ok: #22c84f;
  --err: #ff6a5c;
  --shadow-pop: 0 22px 60px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --overlay: rgba(0, 0, 0, .62);
  --img-shadow: drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
  --glass-bg: rgba(255, 255, 255, .08);
  --glass-bg-hover: rgba(255, 255, 255, .15);
  --glass-shadow: 0 .75rem 2rem rgba(0, 0, 0, .55), 0 .125rem .375rem rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .12);

  --accent: #ecfa61;
  --accent-ink: #e3ee5c;
  --accent-on: #151800;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---------- Высокий контраст (доступность) ---------- */
[data-contrast="high"] {
  --text-sub: #3f4046;
  --text-muted: #5f6066;
  --text-brand: #33343b;
  --line-2: #b9b9c2;
  --line-3: #a3a3ad;
  --dot: #9ea2ae;
  --page-muted: #5f6066;
  --link: color-mix(in oklab, var(--accent-ink) 52%, #000);
  --tab-active: var(--link);
}
[data-theme="dark"][data-contrast="high"] {
  --text-sub: #f0f2f2;
  --text-muted: #c4c7c8;
  --text-brand: #f0f2f2;
  --line-2: #5a5e5e;
  --line-3: #6a6e6e;
  --dot: #7a7f80;
  --page-muted: #b9bcbd;
  --link: var(--accent-ink);
  --tab-active: var(--accent);
}

/* ---------- Плавное масштабирование на больших экранах ---------- */
@media (min-width: 1800px) {
  :root { --root: clamp(16px, calc(16px + (100vw - 1800px) * .0025), 20px); }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(var(--root) * var(--fs)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: .375rem; }
.skip {
  position: fixed; left: 1rem; top: -3.75rem; z-index: 1000;
  background: var(--text); color: var(--bg); padding: .625rem 1rem; border-radius: .5rem;
  font-weight: 600; transition: top .2s var(--ease);
}
.skip:focus { top: .75rem; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.i { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i path, .i circle, .i rect { vector-effect: non-scaling-stroke; }
.i-sm { width: 1.125rem; height: 1.125rem; }
.i-lg { width: 1.75rem; height: 1.75rem; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Кнопки / поля ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  height: 3rem; padding: 0 1.375rem; border-radius: .625rem;
  font-size: 1rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), opacity .18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 88%, var(--text)); }
.btn-outline { border-color: var(--line-3); color: var(--text); background: transparent; }
.btn-outline:hover { background: var(--bg-hover); }
.btn-ghost { color: var(--text); background: var(--bg-muted); }
.btn-ghost:hover { background: color-mix(in oklab, var(--bg-muted) 85%, var(--text)); }
.btn-block { width: 100%; }
.btn-sm { height: 2.375rem; padding: 0 .875rem; font-size: .9375rem; border-radius: .5625rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { color: var(--link); font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.muted { color: var(--text-muted); }

.field { display: grid; gap: .4375rem; }
.field > span, .field-label { font-size: .875rem; font-weight: 500; color: var(--text-2); }
.field small { font-size: .8125rem; color: var(--text-muted); }
.field .opt { font-weight: 400; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; height: 3rem; padding: 0 .875rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: .625rem;
  font-size: 1rem; outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.textarea { height: auto; min-height: 6rem; padding: .75rem .875rem; resize: vertical; line-height: 1.45; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238a8c92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.25rem; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--err); }
.field .err { color: var(--err); font-size: .8125rem; display: none; }
.field.has-error .err { display: block; }
.check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; font-size: .9375rem; color: var(--text-2); line-height: 1.45; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin: 1px 0 0; border: 1.5px solid var(--line-3); border-radius: .375rem; display: grid; place-items: center; background: var(--bg); transition: all .15s var(--ease); cursor: pointer; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: .625rem; height: .375rem; border: 2px solid var(--accent-on); border-top: 0; border-right: 0; transform: translate(0, -1px) rotate(-45deg); }
.check a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.check.has-error input { border-color: var(--err); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .9375rem;
  border: 1px solid var(--line-2); border-radius: 999px; font-size: .9375rem; color: var(--text-2);
  background: var(--bg); transition: all .15s var(--ease); cursor: pointer; user-select: none;
}
.chip:hover { border-color: var(--line-3); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip.is-on, .chip:has(input:checked) { border-color: var(--text); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.chip:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .25rem; border-radius: .75rem; background: var(--bg-muted); }
.seg button { height: 2.375rem; border-radius: .5625rem; font-size: .875rem; font-weight: 500; color: var(--text-sub); display: inline-flex; align-items: center; justify-content: center; gap: .4375rem; padding: 0 .5rem; white-space: nowrap; transition: background-color .15s, color .15s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); }
[data-theme="dark"] .seg button[aria-pressed="true"], [data-theme="dark"] .seg button[aria-selected="true"] { background: #2a2d2c; }

.switch { position: relative; width: 2.75rem; height: 1.625rem; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-3); transition: background-color .2s var(--ease); }
.switch span::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(1.125rem); }
.switch input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }

.badge-pill { display: inline-flex; align-items: center; gap: .375rem; height: 1.625rem; padding: 0 .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; background: var(--bg-muted); color: var(--text-sub); }
.badge-pill .dotc { width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }
.badge-pill.ok { color: var(--link); background: var(--accent-soft); }

/* ==========================================================================
   Шапка
   ========================================================================== */
.site-header { position: relative; z-index: 42; background: var(--bg); }  /* выше ленты вкладок: панель поиска перекрывает её */
.hdr { position: relative; height: 6.5rem; padding-top: 1.5rem; display: flex; align-items: center; }
.hdr-left { display: flex; align-items: center; min-width: 0; }
.hdr-right { margin-left: auto; display: flex; align-items: center; }

/* логотип BΛL® HEALTH CARE (оригинальный знак + подпись как на упаковке) */
.logo { position: relative; top: -.28rem; display: inline-flex; color: var(--text); flex: none; }
.logo-svg { height: 2.937523rem; width: auto; aspect-ratio: 291.004 / 144.5; overflow: visible; }

.hbtn {
  display: inline-flex; align-items: center; gap: .9375rem; height: 2.75rem;
  color: var(--nav-text); font-size: 1.0625rem; font-weight: 400; letter-spacing: -.005em;
  border-radius: .625rem; white-space: nowrap; transition: color .15s, opacity .15s;
}
.hbtn:hover { opacity: .72; }
.hbtn .i { width: 1.625rem; height: 1.625rem; stroke-width: 1.8; }
.hbtn .chev { width: 1.375rem; height: 1.375rem; stroke-width: 1.8; }

/* Поиск: иконка лупы без плашки. Наведение (зона чуть больше иконки) → поле раскрывается
   с подчёркиванием и мигающим курсором; мышь ушла — сворачивается */
.hsearch { position: relative; display: flex; align-items: center; margin-left: 2.5rem; height: 2.75rem; }
.hsearch::before { content: ""; position: absolute; top: -.875rem; bottom: -.875rem; left: -.875rem; right: -1rem; }
.hsearch-btn { position: relative; z-index: 1; flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--nav-text); border-radius: 50%; transition: color .15s; }
.hsearch-btn .i { width: 1.625rem; height: 1.625rem; stroke-width: 1.9; }
.hsearch-field { position: relative; z-index: 1; display: flex; align-items: center; width: 0; opacity: 0; overflow: hidden; transition: width .38s var(--ease), opacity .22s var(--ease); }
.hsearch.is-open .hsearch-field { width: clamp(15rem, 24vw, 28rem); opacity: 1; }
.hsearch-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; border-radius: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .38s var(--ease), background-color .2s; }
.hsearch.is-open .hsearch-field::after { transform: scaleX(1); }
.hsearch-field:focus-within::after { background: var(--accent); }
.hsearch-input {
  flex: 1; min-width: 0; height: 2.5rem; padding: 0 2.25rem 0 .25rem; border: 0; border-radius: 0; background: transparent;
  font-size: 1.0625rem; letter-spacing: -.005em; color: var(--text); outline: none; caret-color: var(--link);
  appearance: none; -webkit-appearance: none;
}
.hsearch-input::placeholder { color: var(--text-muted); }
.hsearch-input::-webkit-search-cancel-button, .hsearch-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.hsearch-input:focus-visible { outline: none; }
/* мигающая «вертикальная линия», пока поле раскрыто, но ещё не в фокусе */
.hsearch-caret { position: absolute; left: .25rem; top: 50%; width: 2px; height: 1.25rem; margin-top: -.625rem; border-radius: 1px; background: var(--link); opacity: 0; pointer-events: none; }
.hsearch.is-open:not(.has-text) .hsearch-field:not(:focus-within) .hsearch-caret { animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hsearch-clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; display: none; place-items: center; color: var(--text-muted); }
.hsearch-clear:hover { color: var(--text); background: var(--bg-hover); }
.hsearch-clear .i { width: 1.125rem; height: 1.125rem; }
.hsearch.has-text .hsearch-clear { display: grid; }

/* Справа: корзина · настройки · войти · язык — единый ритм */
.hdr-right .hbtn + .hbtn { margin-left: 3rem; }
.settings-btn { gap: .75rem; }
.settings-btn .i { width: 1.875rem; height: 1.875rem; stroke-width: 1.8; }
.login-btn { gap: .625rem; }
.login-btn .i { width: 2.25rem; height: 2.25rem; stroke-width: 1.8; }
.login-btn .avatar { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; font-size: .8125rem; font-weight: 700; }
.cart-btn { gap: 1rem; }
.cart-ico { position: relative; display: inline-flex; }
.cart-ico .i { width: 2.5rem; height: 2.5rem; stroke-width: 1.9; }
.cart-badge {
  position: absolute; top: -.375rem; right: -.5rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem;
  border-radius: .75rem; background: var(--badge); color: #fff; font-size: .875rem; font-weight: 600;
  display: grid; place-items: center; line-height: 1; font-variant-numeric: tabular-nums;
}
.cart-badge.bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.lang-btn { gap: .5625rem; }
.flag { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.menu-btn { display: none; }

/* ---------- Выпадающие меню ---------- */
.pop {
  position: absolute; z-index: 60; min-width: 15rem; padding: .5rem;
  background: var(--bg-elev); border: 0; border-radius: .875rem; box-shadow: var(--shadow-pop);
  animation: popIn .16s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pop-title { padding: .5rem .75rem .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pop-list { display: grid; gap: 2px; max-height: min(60vh, 28.75rem); overflow: auto; }
.pop-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem; border-radius: .5625rem; font-size: .9375rem; text-align: left; color: var(--text-2); }
.pop-item:hover, .pop-item:focus-visible { background: var(--bg-hover); outline: none; }
.pop-item .grow { flex: 1; }
.pop-item .i-check { width: 1.125rem; height: 1.125rem; color: var(--link); stroke-width: 2.2; visibility: hidden; }
.pop-item[aria-checked="true"] { color: var(--text); font-weight: 600; }
.pop-item[aria-checked="true"] .i-check { visibility: visible; }
.pop-item small { color: var(--text-muted); font-weight: 400; }

/* ---------- Поиск ---------- */
.search-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 55;
  background: var(--bg-elev); box-shadow: var(--shadow-pop);
  animation: popIn .18s var(--ease);
}
.search-body { padding: 1.25rem 0 1.625rem; }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.125rem, 1fr)); gap: .375rem 1.125rem; padding-top: .875rem; }
.sr-item { display: flex; align-items: center; gap: .875rem; padding: .5rem; border-radius: .75rem; }
.sr-item:hover, .sr-item:focus-visible, .sr-item.is-active { background: var(--bg-hover); outline: none; }
.sr-img { width: 3.5rem; height: 3.5rem; flex: none; display: flex; align-items: center; justify-content: center; }
.sr-img .ph { width: 100%; height: 100%; }
.sr-name { font-weight: 500; font-size: .9375rem; line-height: 1.3; }
.sr-spec { font-size: .8125rem; color: var(--text-sub); }
.search-all { margin-top: .875rem; }
.search-empty { padding: 1.375rem 0 .5rem; color: var(--text-sub); }

/* ==========================================================================
   Вкладки категорий (без разделительной линии — по требованию)
   ========================================================================== */
.cats-wrap { position: relative; }
.cats {
  display: flex; justify-content: space-between; gap: 2rem;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--pad);
}
.cats::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; display: block;
  padding: 1rem 0 1.625rem; font-size: 1.0625rem; line-height: 1.5rem; letter-spacing: -.005em;
  color: var(--text-muted); white-space: nowrap; scroll-snap-align: start; transition: color .15s;
}
.tab:hover { color: var(--text-strong); }
.tab.is-active { color: var(--text-strong); font-weight: 500; }
.tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3.25rem; height: 1px; border-radius: 0;
  background: var(--accent);
}

/* ==========================================================================
   Каталог
   ========================================================================== */
.page { padding-bottom: 4.5rem; }
.cat-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-top: 1.875rem; }
.cat-head h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.cat-head .count { color: var(--text-muted); font-size: 1rem; }
.cat-head .clear-q { margin-left: auto; }

/* Сетка: колонок столько, сколько помещается по ширине; на странице — только полные ряды */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr)); column-gap: 1.5rem; row-gap: 2.75rem; padding-top: 1.8125rem; }
/* карточки ряда одной высоты (сетка тянет их по самой высокой); цена и плашка покупки прижаты к низу,
   поэтому в каждом ряду стоят на одном уровне, как бы ни переносились название и характеристика */
.card { display: flex; align-items: stretch; min-width: 0; container-type: inline-size; }
.card-media { flex: 0 0 7.875rem; width: 7.875rem; margin-right: 2.3125rem; }
/* высокие упаковки вписаны по высоте, широкие фото выходят за колонку симметрично (как в макете) */
.card-img { position: relative; display: flex; justify-content: center; align-items: center; height: 11.25rem; border-radius: .625rem; }
.card-img .ph { height: 100%; max-width: 11.625rem; transition: opacity .45s var(--ease-apple); }
.card-img .ph:not(.is-photo) img { filter: var(--img-shadow); }
.card:hover .card-img .ph:not(.is-photo) img { transform: translateY(-3px); }
/* фото из галереи — слоями поверх, при наведении плавно сменяют друг друга */
.card-img .ph.is-photo { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 1; max-width: none; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.card-img .ph.is-photo.is-active { opacity: 1; }
.card-img.show-photo > .ph:first-child { opacity: 0; }
.dots { display: flex; justify-content: center; gap: .65625rem; margin-top: .1875rem; height: 1rem; align-items: center; }
.dot { width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--dot); padding: 0; transition: background-color .15s, transform .15s; position: relative; }
.dot::before { content: ""; position: absolute; inset: -.3125rem; }
.dot:hover { transform: scale(1.25); }
.dot.is-active { background: var(--dot-active); }
@media (hover: hover) {
  .card .dots { opacity: 0; transform: translate3d(0, -.3125rem, 0); transition: opacity .28s var(--ease-rv), transform .45s var(--ease-rv); }
  .card:hover .dots, .card:has(:focus-visible) .dots { opacity: 1; transform: none; transition: opacity .35s var(--ease-rv) .06s, transform .5s var(--ease-rv) .06s; }
}

.card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; padding-top: .375rem; }
.card-title { font-size: 1.25rem; line-height: 1.625rem; font-weight: 500; letter-spacing: -.012em; color: var(--text); overflow-wrap: anywhere; }
.card-title a:hover { opacity: .75; }
.card-spec { margin-top: .25rem; font-size: 1.0625rem; line-height: 1.5rem; color: var(--text-sub); letter-spacing: -.005em; }
.card-price { margin-top: .5rem; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* Покупка в карточке (минимализм): сама карточка без рамки и фона, пока не навели — ничего лишнего.
   Низ карточки прижат к низу ряда — в каждом ряду сумма и плашка стоят на одном уровне.
   При наведении снизу поднимается «стеклянная» кнопка (полупрозрачная, размывает то, что под ней):
   «В корзину», а если товар уже в корзине — «− N +» (минус до нуля убирает товар), и над ней
   сумма этого товара в корзине (цена × N) */
.card-foot { margin-top: auto; padding-top: 1rem; }
.card-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem; min-height: 1.5rem;
  font-size: .875rem; line-height: 1.5rem; color: var(--text-sub);
  opacity: 0; visibility: hidden; transform: translate3d(0, .375rem, 0);
  transition: opacity .22s var(--ease-rv), transform .3s var(--ease-rv), visibility 0s linear .3s;
}
.card-sum.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-rv), transform .45s var(--ease-rv), visibility 0s; }
.card-sum b { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-buy { display: flex; align-items: center; gap: .625rem; margin-top: .375rem; height: 2.5rem; }
.qbar {
  position: relative; display: inline-flex; align-items: center; gap: .375rem; height: 2.5rem; padding: 0 1.0625rem 0 .75rem;
  border-radius: 999px; white-space: nowrap; color: var(--text); font-size: .9375rem; font-weight: 500; letter-spacing: -.01em;
  background: var(--glass-bg); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  opacity: 0; visibility: hidden; transform: translate3d(0, .875rem, 0) scale(.96); filter: blur(6px);
  transition: opacity .22s var(--ease-rv), transform .32s var(--ease-rv), filter .22s var(--ease-rv), background-color .2s, visibility 0s linear .32s;
}
.card:hover .qbar, .card:has(:focus-visible) .qbar, .card.in-cart .qbar {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .3s var(--ease-rv), transform .5s var(--ease-rv), filter .35s var(--ease-rv), background-color .2s, visibility 0s;
}
.qbar .i { width: 1.625rem; height: 1.625rem; stroke-width: 1.9; flex: none; }
.qbar > .i { color: var(--link); }   /* «В корзину»: значок — акцентным цветом, подпись — основным (белая в тёмной теме) */
.qbar:hover { background: var(--glass-bg-hover); }
button.qbar:active { transform: scale(.97); transition-duration: .1s; }
.qbar:focus-visible, .qb:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.qbar.is-in { flex: none; gap: .125rem; padding: 0 .375rem; color: var(--text); }
/* значок корзины у плашки «− N +»: сам по себе, без фона (акцентным цветом) */
.qcart { flex: none; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; color: var(--link); }
.qcart .i { width: 1.625rem; height: 1.625rem; stroke-width: 1.9; }
.qb { position: relative; width: 1.75rem; height: 1.75rem; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--text); transition: background-color .15s, transform .1s; }
.qb::before { content: ""; position: absolute; inset: -.375rem -.125rem; }
.qb:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.qb:active { transform: scale(.9); }
.qb .i { width: 1.125rem; height: 1.125rem; stroke-width: 1.8; }
.qv { display: inline-block; min-width: 1.75rem; text-align: center; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* количество: цифра прокручивается вверх (+) или вниз (−) */
.qv.tick-up { animation: tickUp .26s var(--ease-rv); }
.qv.tick-down { animation: tickDown .26s var(--ease-rv); }
@keyframes tickUp { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
@keyframes tickDown { from { opacity: 0; transform: translateY(-.55em); } to { opacity: 1; transform: none; } }
/* смена «В корзину» ⇄ «− N +»: ширина плашки меняется плавно (JS), содержимое проявляется */
.qbar.is-new > * { animation: qIn .32s var(--ease-rv) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }

/* на сенсорных экранах наведения нет — кнопка видна всегда */
@media (hover: none) {
  .qbar { opacity: 1; visibility: visible; transform: none; filter: none; }
}

/* карточка подстраивается под собственную ширину — при любом числе колонок */
@container (max-width: 23rem) {
  .card-media { flex-basis: 6.75rem; width: 6.75rem; margin-right: 1.375rem; }
  .card-img { height: 9.375rem; }
  .card-img .ph { max-width: 8.5rem; }
  .card-title { font-size: 1.125rem; line-height: 1.5rem; }
  .card-spec { font-size: 1rem; }
  .card-price { font-size: 1.0625rem; }
}

.stepper {
  display: inline-grid; grid-template-columns: 1.875rem 1fr 1.875rem; align-items: center;
  width: 5.625rem; height: 2.1875rem; flex: none; border: 1px solid var(--line-2); border-radius: .4375rem; background: var(--bg);
}
.stepper button { height: 100%; display: grid; place-items: center; color: var(--text); border-radius: .375rem; transition: background-color .12s; }
.stepper button:hover { background: var(--bg-hover); }
.stepper button:disabled { color: var(--text-muted); cursor: default; background: none; }
.stepper .i { width: 1.1875rem; height: 1.1875rem; stroke-width: 1.5; }
.stepper input {
  width: 100%; min-width: 0; height: 100%; border: 0; background: transparent; text-align: center; padding: 0;
  font-size: 1.25rem; font-weight: 600; color: var(--text); outline: none; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { background: var(--bg-hover); border-radius: .25rem; }
.stepper-lg { width: 8.25rem; height: 3rem; grid-template-columns: 2.625rem 1fr 2.625rem; border-radius: .625rem; }
.stepper-lg .i { width: 1.25rem; height: 1.25rem; }


/* Пагинация — точки (минимализм): активная страница — вытянутая «пилюля», по краям стрелки */
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; }
.pg-arrow { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: var(--text); transition: background-color .2s, opacity .2s; }
.pg-arrow:hover { background: var(--bg-hover); }
.pg-arrow .i { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; }
.pg-arrow.is-disabled { opacity: .25; pointer-events: none; }
.pg-dots { display: flex; align-items: center; gap: .625rem; }
.pg-dot { position: relative; display: block; flex: none; width: .5rem; height: .5rem; border-radius: 999px; background: var(--dot); transition: width .4s var(--ease-apple), background-color .25s var(--ease-apple), transform .25s var(--ease-apple); }
.pg-dot::before { content: ""; position: absolute; inset: -.875rem -.3125rem; }
.pg-dot:hover { background: var(--text-muted); }
.pg-dot.is-active { width: 1.75rem; background: var(--dot-active); }
.pg-dot.is-small { transform: scale(.6); }
.pg-dot:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }

.empty { display: grid; justify-items: center; text-align: center; gap: .75rem; padding: 4.5rem 1rem 2.5rem; }
.empty .i { width: 3.5rem; height: 3.5rem; color: color-mix(in srgb, var(--text-muted) 72%, var(--bg)); stroke-width: 1.2; }
.empty .empty-title { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; color: var(--text-muted); }
.empty p { color: var(--text-muted); max-width: 27.5rem; }
[data-contrast="high"] .empty .i { color: var(--text-muted); }
.empty .btn { margin-top: .625rem; }

/* Одна строка рекомендаций: карточек ровно столько, сколько колонок */
.recs { margin-top: 4.5rem; }
.recs .grid { padding-top: 1.625rem; }

/* ==========================================================================
   Подвал: без линии сверху, одна линия — над копирайтом
   ========================================================================== */
.site-footer { margin-top: 1.5rem; background: var(--bg); }
.ft-top { display: grid; grid-template-columns: minmax(15rem, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding: 3.75rem 0 2.75rem; }
.ft-brand p { margin-top: 1.125rem; color: var(--text-sub); font-size: .9375rem; line-height: 1.55; max-width: 22rem; }
.ft-brand .logo { top: 0; }
.ft-brand .logo-svg { height: 2.741688rem; }
.socials { display: flex; gap: .625rem; margin-top: 1.375rem; }
.socials a { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center; background: transparent; color: var(--text); transition: opacity .15s; }
.socials a:hover { background: transparent; opacity: .8; }
.socials img { display: block; width: 1.375rem; height: 1.375rem; object-fit: contain; }
.ft-col h3 { font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 1.125rem; }
.ft-col ul { list-style: none; display: grid; gap: .6875rem; }
.ft-col a { font-size: .9375rem; color: var(--text-2); transition: color .15s; }
.ft-col a:hover { color: var(--link); }
.ft-contacts { display: grid; gap: 1.25rem; align-content: start; }
.ft-contact { display: grid; gap: .75rem; }
.ft-contact a, .ft-contact div { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; color: var(--text-2); }
.ft-contact .i { width: 1.125rem; height: 1.125rem; margin-top: 2px; color: var(--text-muted); }
.ft-contact b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.staff-link { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--text-sub); font-size: .9375rem; transition: color .15s; }
.staff-link:hover { color: var(--text); }
.staff-link .i { width: 1rem; height: 1rem; }
.auth-tabs > a { display: inline-flex; align-items: center; justify-content: center; gap: .4375rem; padding: 0 .5rem; color: var(--text-sub); font-size: .875rem; font-weight: 500; }
.auth-tabs > a:hover { color: var(--text); }
.ft-bottom { border-top: 1px solid var(--line-2); padding: 1.375rem 0 1.875rem; display: grid; gap: 1rem; }
.ft-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.ft-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; }
.ft-legal a { color: var(--text-sub); }
.ft-legal a:hover { color: var(--text); }
.ft-copy { font-size: .875rem; color: var(--text-sub); }
.pay { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pay span.lbl { font-size: .8125rem; color: var(--text-muted); margin-right: .25rem; }
.pay i { font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: .375rem .625rem; border-radius: .4375rem; background: var(--bg-muted); color: var(--text-2); }
.ft-disc { width: 100%; margin-inline: auto; text-align: center; font-size: .75rem; color: var(--text-muted); line-height: 1.55; }

/* ==========================================================================
   Общие элементы страниц
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: 1.625rem; font-size: .875rem; color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .i { width: .875rem; height: .875rem; stroke-width: 2; opacity: .7; }
.crumbs [aria-current] { color: var(--text-sub); }
.page-title { font-size: 2.25rem; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; margin-top: .875rem; }
.page-title.flush { margin-top: 0; }
.page-lead { margin-top: .75rem; font-size: 1.125rem; color: var(--text-sub); max-width: 52rem; line-height: 1.55; }
.section-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.section-sub { margin-top: .25rem; color: var(--text-sub); }

/* ---------- Товар: 3 колонки на широких экранах, 2 — на ноутбуках, 1 — на мобильных ---------- */
.pdp { display: grid; gap: 2.5rem 4rem; margin-top: 1.625rem; align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "gallery info" "gallery buy"; }
.gallery { grid-area: gallery; position: sticky; top: 1.5rem; display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1.125rem; }
.pdp-info { grid-area: info; padding-top: .375rem; min-width: 0; }
.pdp-buy { grid-area: buy; min-width: 0; }
.gallery.single { grid-template-columns: minmax(0, 1fr); }
/* миниатюры не растягивают галерею: столбец высотой со сцену, лишние — прокруткой */
.thumbs { display: grid; gap: .625rem; align-content: start; height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { width: 5.25rem; height: 5.25rem; border-radius: .75rem; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; padding: .5rem; background: var(--bg); transition: border-color .15s; overflow: hidden; }
.thumb .ph { width: 100%; height: 100%; }
.thumb.is-photo { padding: 0; }
.thumb.is-photo .ph { border-radius: 0; }
.thumb:hover { border-color: var(--line-3); }
.thumb[aria-current="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: calc(100vh - 9rem); min-height: 20rem; border-radius: var(--radius-xl); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stage .ph { width: 78%; height: 78%; animation: fadeIn .3s var(--ease); }
.stage .ph:not(.is-photo) img { filter: var(--img-shadow); }
.stage .ph.is-photo { width: 100%; height: 100%; border-radius: 0; }
.stage .ph.is-photo ~ .dots .dot { background: rgba(255, 255, 255, .45); }
.stage .ph.is-photo ~ .dots .dot.is-active { background: #fff; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.stage-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bg); color: var(--text); display: grid; place-items: center; box-shadow: var(--shadow-card); opacity: 0; transition: opacity .2s; }
.stage:hover .stage-nav, .stage-nav:focus-visible { opacity: 1; }
.stage-nav.prev { left: 1rem; } .stage-nav.next { right: 1rem; }
.stage .dots { position: absolute; bottom: 1.125rem; left: 0; right: 0; margin: 0; }

.pdp-title { font-size: 2.25rem; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; margin-top: .375rem; }
.pdp-spec { font-size: 1.1875rem; color: var(--text-sub); margin-top: .5rem; }
.variant { margin-top: 1.625rem; }
.variant .field-label { display: block; margin-bottom: .625rem; }
.vchips { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.vchip { position: relative; min-width: 3.3rem; height: 3.3rem; padding: 0 0 .45rem; font-size: 1.2rem; border-radius: 0; border: 0; background: transparent; color: var(--text-muted); font-weight: 500; box-shadow: none; transition: color .15s; }
a.vchip { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-size: 1.125rem; }
.vchip:hover { color: var(--text-strong); }
.vchip[aria-pressed="true"], .vchip[aria-current="page"] { color: var(--text-strong); font-weight: 500; }
.vchip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); opacity: 0; transition: opacity .15s; }
.vchip[aria-pressed="true"]::after, .vchip[aria-current="page"]::after { opacity: 1; }
.vchips { --variant-line: #219653; }
[data-theme="dark"] .vchips { --variant-line: var(--accent); }
.vchip::after { background: var(--variant-line); }
.vchip:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--text-muted); text-underline-offset: .3em; }
.vchip .sw { width: 1.35rem; height: 1.35rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
[data-theme="dark"] .vchip .sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.variant + .variant { margin-top: 1.25rem; }
.keyspecs { margin-top: 1.75rem; }
.keyspecs h2 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.keyspecs dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); column-gap: 2rem; }
.keyspecs dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; font-size: .9375rem; }
.keyspecs dt { color: var(--text-sub); }
.keyspecs dd { margin: 0; text-align: right; color: var(--text); }
.keyspecs .link { display: inline-block; margin-top: .75rem; font-size: .9375rem; }
.buybox { padding: 0; }
.buybox .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .625rem; font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.buybox .price small { font-size: .9375rem; font-weight: 400; letter-spacing: 0; color: var(--text-sub); }
.buy-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.buy-row .btn { flex: 1 1 11.25rem; }
.in-cart-note { margin-top: .75rem; font-size: .9375rem; color: var(--text-sub); display: flex; align-items: center; gap: .5rem; }
.in-cart-note .i { width: 1.125rem; height: 1.125rem; color: var(--link); stroke-width: 2.2; }
.perks { display: grid; gap: .875rem; margin-top: 1.375rem; }
.perk { display: flex; gap: .875rem; align-items: flex-start; font-size: .9375rem; }
.perk .i { width: 1.375rem; height: 1.375rem; color: var(--text-sub); margin-top: 1px; }
.perk b { font-weight: 500; }
.perk small { display: block; color: var(--text-sub); font-size: .875rem; margin-top: 2px; }
.pro-note { margin-top: 1.375rem; font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }

.ptabs { margin-top: 4rem; }
.ptab-list { display: flex; gap: 2.125rem; overflow-x: auto; scrollbar-width: none; }
.ptab-list::-webkit-scrollbar { display: none; }
.ptab { position: relative; padding: .875rem 0 1rem; font-size: 1.0625rem; color: var(--text-sub); white-space: nowrap; }
.ptab:hover { color: var(--text); }
.ptab[aria-selected="true"] { color: var(--text); font-weight: 500; }
.ptab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; border-radius: 0; background: var(--accent); }
.ptab-panel { padding-top: 1.75rem; font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); }
.ptab-panel p { max-width: 56rem; }
.ptab-panel p + p { margin-top: .875rem; }
.ptab-panel p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.props-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); column-gap: 3rem; }
.props-grid > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .8125rem 0; font-size: 1rem; }
.props-grid dt { color: var(--text-sub); }
.props-grid dd { margin: 0; text-align: right; color: var(--text); }
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .625rem; }
.doc { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: .75rem; border: 1px solid var(--line-2); text-align: left; width: 100%; transition: border-color .15s, background-color .15s; }
.doc:hover { border-color: var(--line-3); background: var(--bg-hover); }
.doc .i { width: 1.5rem; height: 1.5rem; color: var(--text-sub); }
.doc b { display: block; font-weight: 500; font-size: 1rem; color: var(--text); }
.doc small { display: block; color: var(--text-muted); font-size: .8125rem; }
.doc .dl { margin-left: auto; color: var(--text-muted); }

/* ---------- Корзина ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) clamp(21rem, 24vw, 30rem); gap: 3rem; align-items: start; margin-top: 1.75rem; }
/* корзина: список товаров и «Ваша заявка» — два равных блока */
.two-col.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
.sum-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .625rem; margin-top: 1.25rem; }
.summary .sum-actions .btn, .summary .sum-actions .btn + .btn { margin: 0; }
.cart-head { display: flex; align-items: baseline; gap: .875rem; flex-wrap: wrap; }
.cart-head .count { color: var(--text-muted); font-size: 1.125rem; }
.cart-head .btn-clear { margin-left: auto; font-size: .9375rem; color: var(--err); display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: .5rem; transition: background-color .15s; }
.cart-head .btn-clear:hover { background: color-mix(in srgb, var(--err) 10%, transparent); }
.cart-head .btn-clear .i { width: 1.125rem; height: 1.125rem; }
.lines { list-style: none; margin-top: 1.375rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 36rem), 1fr)); column-gap: 2.5rem; border-top: 1px solid var(--line-2); }
.line { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1.375rem; padding: 1.375rem 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.line-img { width: 7rem; height: 7rem; display: flex; align-items: center; justify-content: center; }
.line-img .ph { width: 100%; height: 100%; }
.line-img .ph img { filter: var(--img-shadow); }
.line-name { font-size: 1.1875rem; font-weight: 500; letter-spacing: -.01em; margin-top: 1px; }
.line-name a:hover { opacity: .75; }
.line-spec { color: var(--text-sub); font-size: 1rem; margin-top: 2px; }
.line-sku { color: var(--text-muted); font-size: .8125rem; margin-top: .375rem; }
.line-side { display: grid; justify-items: end; gap: .75rem; }
.line-price { font-size: 1.0625rem; font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.line-remove { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--err); padding: .25rem .375rem; border-radius: .5rem; transition: background-color .15s; }
.line-remove:hover { background: color-mix(in srgb, var(--err) 10%, transparent); }
.line-remove .i { width: 1.0625rem; height: 1.0625rem; }

.summary { position: sticky; top: 1.5rem; padding: 1.625rem; border-radius: var(--radius-xl); background: var(--bg-soft); }
.summary h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.sum-rows { display: grid; gap: .75rem; margin: 1.125rem 0 1.25rem; font-size: 1rem; }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-sub); }
.sum-row b { color: var(--text); font-weight: 500; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; border-top: 1px solid var(--line-2); font-size: 1.125rem; font-weight: 600; }
.sum-note { display: flex; gap: .625rem; margin-top: 1rem; font-size: .875rem; color: var(--text-sub); line-height: 1.5; }
.sum-note .i { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 1px; color: var(--text-muted); }
.summary .btn { margin-top: 1.125rem; }
.summary .btn + .btn { margin-top: .625rem; }

/* ---------- Формы ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.125rem; margin-top: 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }

/* ---------- Успешное действие: запасная галочка ---------- */
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- Личный кабинет: левая панель разделов | содержимое ---------- */
.pf { display: grid; grid-template-columns: clamp(16rem, 19vw, 19rem) minmax(0, 1fr); gap: 2.5rem; margin-top: 1.75rem; align-items: start; }
.pf-side { position: sticky; top: 1.5rem; padding: .75rem; border-radius: var(--radius-xl); background: var(--bg-soft); }
.pf-acc { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem .875rem; }
.pf-acc b { display: block; min-width: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pf-nav { display: grid; gap: 1px; }
.pf-nav a, .pf-out { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem; border-radius: .75rem; font-size: .9375rem; color: var(--text-2); text-align: left; transition: background-color .15s, color .15s; }
.pf-nav a:hover, .pf-out:hover { background: var(--bg-muted); }
.pf-nav a[aria-current="page"] { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: var(--shadow-card); }
.pf-nav .i, .pf-out .i { width: 1.375rem; height: 1.375rem; flex: none; color: var(--link); stroke-width: 1.8; }
.pf-nav span { flex: 1; }
.pf-out { margin-top: .375rem; color: var(--err); }
.pf-out .i { color: var(--err); }
.pf-main { min-width: 0; }
.pf-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; }
.pf-title h1 { font-size: 2rem; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.pf-title .muted { font-size: .9375rem; }
.pf-sec + .pf-sec { margin-top: 2.25rem; }
.pf-sec > h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: .875rem; display: flex; align-items: baseline; gap: 1rem; }
.pf-sec > h2 .link { margin-left: auto; font-size: .9375rem; font-weight: 500; }
/* карточки-показатели */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: .75rem; margin-top: 1.375rem; }
.kpi { display: grid; align-content: start; gap: .25rem; padding: 1.125rem 1.25rem; border-radius: var(--radius-lg); background: var(--bg-soft); color: inherit; transition: background-color .15s, transform .2s var(--ease-rv); }
a.kpi:hover { background: var(--bg-muted); }
.kpi > span { font-size: .875rem; color: var(--text-sub); display: flex; align-items: center; gap: .5rem; }
.kpi > span .i { width: 1.125rem; height: 1.125rem; color: var(--link); }
.kpi b { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi small { font-size: .8125rem; color: var(--text-muted); }
.kpi small.is-err { color: var(--err); font-weight: 500; }
.bar { height: .375rem; border-radius: 999px; background: var(--bg-muted); overflow: hidden; margin-top: .375rem; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
/* таблицы кабинета: ровные колонки, суммы по правому краю, на телефоне — прокрутка */
.tbl-wrap { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-lg); background: var(--tbl-bg); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tbl th { padding: .875rem 1rem .75rem; text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.tbl td { padding: .8125rem 1rem; border-top: .25px solid color-mix(in srgb, var(--line-2) 50%, transparent); vertical-align: top; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .nw { white-space: nowrap; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.tbl tfoot td { border-top: 1px solid var(--line-3); font-weight: 600; }
.tbl b { font-weight: 600; }
.tbl .sub { display: block; font-size: .8125rem; color: var(--text-muted); }
.tbl tr.is-hl { background: var(--accent-soft); }
.st { display: inline-flex; align-items: center; gap: .375rem; height: 1.625rem; padding: 0 .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; white-space: nowrap; background: var(--bg-muted); color: var(--text-sub); }
.st::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }
.st.ok { background: var(--accent-soft); color: var(--link); }
.st.err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
/* «mid» — промежуточное состояние (в пути, на проверке). Не «info»: этот класс занят сеткой информационных страниц */
.st.mid { background: var(--bg-muted); color: var(--text); }
.pf-note { display: flex; gap: .75rem; padding: 1rem 1.125rem; border-radius: var(--radius-lg); background: var(--bg-soft); font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.pf-note .i { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 1px; color: var(--link); }
.pf-note.warn { box-shadow: inset 3px 0 0 var(--err); }
.pf-note.warn .i { color: var(--err); }
/* список «ключ — значение» в кабинете (не путать с table.kv на информационных страницах) */
.kvl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0 2rem; }
.kvl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line-2); font-size: .9375rem; }
.kvl dt { color: var(--text-sub); }
.kvl dd { margin: 0; text-align: right; font-weight: 500; }

/* ---------- Кабинет: разделы (как в приложении BALPHARM, в стиле сайта: мягкие подложки, без рамок) ---------- */
.pf-main { animation: pfIn .45s var(--ease-rv) backwards; }
/* заголовок раздела только для читалок — первый видимый блок раздела без отступа сверху (вровень с панелью разделов) */
.pf-main > h1.sr + * { margin-top: 0; }
.pf-bar { display: flex; align-items: center; gap: .5rem 1.25rem; }
.pf-bar > .tscroll { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.pf-bar > .pf-title-act { flex: none; margin-left: auto; }
@keyframes pfIn { from { opacity: 0; transform: translate3d(-.5rem, 0, 0); } to { opacity: 1; transform: none; } }
.pf-acc { border-radius: .875rem; transition: background-color .15s; }
.pf-acc:hover { background: var(--bg-muted); }
.pf-nav .pm-badge { margin-left: auto; }
.pf-sec { margin-top: 2.25rem; }
.pf-sec.pf-sec-tight { margin-top: 1.25rem; }
.pf-sec > h2 .btn { margin-left: auto; }
.pf-title-act { margin-left: auto; font-size: .9375rem; }
.kpi b.is-err { color: var(--err); }
.pf-hint { margin-top: 1rem; font-size: .875rem; }
/* обзор: плитки */
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.pf-tile { display: grid; align-content: start; gap: .3125rem; padding: 1.125rem 1.25rem; border-radius: var(--radius-lg); background: var(--bg-soft); font-size: .9375rem; }
.pf-tile-ic { width: 2.25rem; height: 2.25rem; margin-bottom: .375rem; border-radius: .625rem; display: grid; place-items: center; background: var(--bg); color: var(--link); }
.pf-tile-ic .i { width: 1.25rem; height: 1.25rem; }
.pf-tile b { font-weight: 600; }
.pf-tile > span:not([class]) { color: var(--text-sub); }
.pf-tile-foot { margin-top: .25rem; }
/* история: строка заказа раскрывается */
.tbl tr.o-row.is-tg { cursor: pointer; }
.tbl tr.o-row.is-tg:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.tbl tr.od-row:hover { background: none; }
.tbl tr.od-row > td { border-top: 0; padding: 0 1rem 1.25rem; }
.od { animation: odIn .35s var(--ease-rv) both; }
@keyframes odIn { from { opacity: 0; transform: translate3d(0, -.375rem, 0); } to { opacity: 1; transform: none; } }
.od-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1rem; margin-top: 1.25rem; align-items: start; }
.tbl-wrap.is-plain { --tbl-bg: var(--bg); }
.tbl-sm { font-size: .875rem; }
.tbl-sm th { padding: .625rem .875rem .5rem; }
.tbl-sm td { padding: .625rem .875rem; }
.od-side { display: grid; gap: 1rem; padding: .5rem 1.125rem 1.125rem; border-radius: var(--radius-lg); background: var(--tbl-card); }
.kvl.kvl-1 { grid-template-columns: 1fr; }
.kvl-1 > div { padding: .5625rem 0; font-size: .875rem; }
.kvl-1 > div:last-child { border-bottom: 0; }
.od-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.tbl .is-pos { color: var(--link); }
.tbl .is-neg { color: var(--err); }
.tbl .is-warn { color: #8a5a00; }
[data-theme="dark"] .tbl .is-warn { color: #f1c160; }
/* «Тип транзакции» — акцентом, как cell-accent в ERP */
.lg-type { color: var(--text); font-weight: 500; }
.tbl-ledger td.lg-prod { min-width: 13rem; }
.tbl tr.is-muted td { color: var(--text-muted); }
.tbl .act { width: 1%; text-align: right; white-space: nowrap; }
/* этапы заказа и сервиса — лента, как в приложении */
.tl { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; }
.tl li { position: relative; display: grid; align-content: start; gap: .125rem; padding-top: 1.5rem; font-size: .875rem; color: var(--text-muted); }
.tl li i { position: absolute; top: .25rem; left: 0; z-index: 1; width: .75rem; height: .75rem; border-radius: 50%; background: var(--line-3); box-shadow: 0 0 0 3px var(--bg-soft); }
.tbl-wrap .tl li i { box-shadow: 0 0 0 3px var(--tbl-bg); }
.tl li::before { content: ""; position: absolute; top: .5625rem; left: .75rem; right: -.75rem; height: 2px; border-radius: 2px; background: var(--line-2); }
.tl li:last-child::before { display: none; }
.tl li.is-on { color: var(--text); }
.tl li.is-on i { background: var(--accent); }
.tl li.is-on:has(+ .is-on)::before { background: var(--accent); }
.tl b { font-weight: 600; }
.tl small { font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* оплата */
.pf-req { display: grid; gap: 1rem; padding: .5rem 1.375rem 1.375rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.pf-req .pf-note { background: var(--bg); }
.pf-req .kvl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kvl > div.is-wide { grid-column: 1 / -1; }
.pf-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* контакты */
.who { display: inline-flex; align-items: center; gap: .625rem; }
.who b { font-weight: 500; }
.pm-ava.is-sm { width: 2rem; height: 2rem; font-size: .6875rem; background: var(--bg-muted); color: var(--text); }
.call-btn { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; color: var(--link); transition: color .15s, transform .15s; }
.call-btn:hover { color: var(--text); }
.call-btn:active { transform: scale(.92); }
.call-btn .i { width: 1.375rem; height: 1.375rem; stroke-width: 1.8; }
/* договор обязательств */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr); gap: 1rem; }
.ct-terms { padding: .25rem 1.375rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.ct-terms .kvl-1 > div { padding: .75rem 0; font-size: .9375rem; }
.ct-sign { display: grid; align-content: start; justify-items: start; gap: .25rem; padding: 1.25rem 1.375rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.ct-sign b { font-weight: 600; }
.ct-sign small { font-size: .8125rem; color: var(--text-muted); }
.ct-sign .btn { margin-top: .75rem; }
.sig { width: 13rem; height: auto; margin: .75rem 0 .25rem; color: var(--text); }
.sig path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: sigDraw 1.5s var(--ease-rv) .15s both; }
.sig path + path { opacity: .45; animation-duration: .6s; animation-delay: 1.2s; }
@keyframes sigDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ct-duties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ct-duties section { padding: 1.25rem 1.375rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.ct-duties h3 { margin-bottom: .75rem; font-size: 1rem; font-weight: 600; }
.ct-duties .bul { display: grid; gap: .5rem; padding: 0; list-style: none; }
.ct-duties .bul li { position: relative; padding-left: 1.25rem; font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.ct-duties .bul li::before { content: ""; position: absolute; left: .125rem; top: .62em; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--accent); }
.doc-cell { display: inline-flex; align-items: flex-start; gap: .625rem; }
.doc-cell .i { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .0625rem; color: var(--link); }
.doc-cell b { display: block; font-weight: 500; }
.doc-cell small { display: block; font-size: .8125rem; color: var(--text-muted); }
/* название документа переносится, если не хватает места, — таблица помещается целиком, номер в конце не обрезается */
.dt-table td.doc-t { white-space: normal; min-width: 13rem; }
/* статус подписи документа — без подложки: точка и текст */
.sgn { display: inline-flex; align-items: center; gap: .4375rem; font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--text-sub); }
.sgn::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; flex: none; }
.sgn.is-ok { color: var(--link); }
.sgn.is-cancel { color: var(--err); }
.sgn.is-none { color: var(--text-muted); }
/* «Подпишите на телефоне» */
.sgp .modal-body { display: grid; justify-items: center; gap: .875rem; text-align: center; }
.sgp-art { color: var(--text); }
.sgp-ph { width: 4.5rem; height: 7rem; }
.sgp-ink { color: var(--link); stroke: var(--link); stroke-dasharray: 1; stroke-dashoffset: 1; animation: sgpInk 2.4s var(--ease-rv) .2s infinite; }
@keyframes sgpInk { 0% { stroke-dashoffset: 1; } 55%, 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sgp-doc { display: grid; gap: .125rem; }
.sgp-doc b { font-size: 1.0625rem; font-weight: 600; }
.sgp-doc span { font-size: .875rem; color: var(--text-muted); }
.sgp-text { max-width: 24rem; font-size: .9375rem; line-height: 1.55; color: var(--text-sub); }
.sgp-wait { display: inline-flex; align-items: center; gap: .625rem; font-size: .875rem; color: var(--text-muted); }
.sgp-dots { display: inline-flex; gap: .25rem; }
.sgp-dots i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--link); animation: sgpDot 1.2s ease-in-out infinite; }
.sgp-dots i:nth-child(2) { animation-delay: .15s; }
.sgp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sgpDot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
.sgp .btn-block { margin-top: .25rem; }
.sgp-demo { font-size: .8125rem; color: var(--text-muted); }
.rules { display: grid; gap: .625rem; padding: 0; list-style: none; counter-reset: r; max-width: 60rem; }
.rules li { position: relative; padding: 1rem 1.25rem 1rem 3.5rem; border-radius: var(--radius-lg); background: var(--bg-soft); font-size: .9375rem; line-height: 1.55; counter-increment: r; }
.rules li::before { content: counter(r); position: absolute; left: 1.125rem; top: .9375rem; width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-size: .8125rem; font-weight: 600; }
.ct-accepted { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; margin-top: 1.125rem; font-size: .875rem; }
/* статистика: график нарастающим итогом, структура закупок */
.lg-ord::before, .lg-paid::before { content: ""; width: .75rem; height: .1875rem; border-radius: 2px; background: var(--text); }
.lg-paid::before { background: var(--accent-ink); }
/* профиль: четыре раздела 2 × 2 (название организации — в панели слева, над меню) —
   «Юридическое лицо» · «Директор» / «Бухгалтерия» · «Ответственные»; между колонками и рядами — тонкие линии.
   «Редактировать» — справа на уровне «Директор»; в редактировании поля подчёркнуты (как поиск в таблицах) */
.pro { --pro-label: var(--text-sub); --pro-sub: var(--text-muted); --pro-gap: 5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pro-gap);
  grid-template-areas: "legal dir" "hr hr" "acc staff" "bar bar" "foot foot"; }
[data-theme="dark"] .pro { --pro-label: #afb2b3; --pro-sub: #9c9fa0; }
.pro-q { position: relative; min-width: 0; padding: 1.125rem 0 2.75rem; }
.pro-q[data-q="legal"] { grid-area: legal; }
.pro-q[data-q="dir"] { grid-area: dir; }
.pro-q[data-q="acc"] { grid-area: acc; padding: 2.25rem 0 .75rem; }
.pro-q[data-q="staff"] { grid-area: staff; padding: 2.25rem 0 .75rem; }
.pro-q[data-q="dir"]::before, .pro-q[data-q="staff"]::before { content: ""; position: absolute; left: calc(var(--pro-gap) / -2); width: 1px; background: var(--line-2); }
.pro-q[data-q="dir"]::before { top: 0; bottom: 1.5rem; }
.pro-q[data-q="staff"]::before { top: 1.5rem; bottom: 0; }
.pro-hr { grid-area: hr; height: 1px; background: linear-gradient(90deg, var(--line-2) calc(50% - 1.5rem), transparent 0 calc(50% + 1.5rem), var(--line-2) 0); }   /* разрыв в центре, как у вертикальных линий */
.pro-q > h2 { margin-bottom: 2rem; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.015em; }
/* строки «подпись — значение» */
.pro-kv { display: grid; gap: 1rem; margin: 0; }
.pro-kv > div { display: grid; grid-template-columns: minmax(6.5rem, 44%) minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
.pro-kv dt { font-size: 1.0625rem; line-height: 1.5; color: var(--pro-label); }
.pro-kv dd { min-width: 0; margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.pro-num, .pro-tel, .pro-geo { font-variant-numeric: tabular-nums; }
.pro-none { color: var(--pro-sub); font-weight: 400; }
.pro-tel { color: inherit; transition: color .15s; }
.pro-tel:hover { color: var(--link); }
.pro-phones { display: grid; justify-items: start; gap: .375rem; }
.pro-geo { color: inherit; transition: color .15s; }
.pro-geo .i { display: inline-block; width: 1.0625rem; height: 1.0625rem; margin-right: .375rem; vertical-align: -.1875rem; color: var(--link); }
.pro-geo:hover { color: var(--link); }
.pro-geo:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* бухгалтерия — ФИО и телефон, как у директора; бухгалтеры разделены воздухом, без линий */
.pro-items:not(.pro-plist) > .pro-item + .pro-item { margin-top: 1.75rem; }
/* ответственные — ФИО, должность под ним, телефон справа */
.pro-plist { margin: -.6875rem 0 0; padding: 0; list-style: none; }
.pro-p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); column-gap: 1rem; align-items: center; padding: .6875rem 0; }
.pro-p-main { display: grid; gap: .125rem; min-width: 0; }
.pro-p-main b { font-size: 1.0625rem; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.pro-p-main small { font-size: 1rem; line-height: 1.4; color: var(--pro-sub); }
.pro-p > .pro-tel { font-size: 1.0625rem; }
.pro-empty { font-size: 1.0625rem; color: var(--pro-sub); }
/* «Редактировать» ⇄ «Отмена · Сохранить» — справа, на уровне заголовка «Директор» */
.pro-acts { grid-area: dir; position: relative; z-index: 1; justify-self: end; align-self: start; display: flex; align-items: center; gap: .5rem; margin-top: .8125rem; }
.pro-edit { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; height: 2.375rem; margin-right: -.625rem; padding: 0 .625rem; border-radius: .5625rem; color: var(--pro-label); font-size: 1rem; font-weight: 500; white-space: nowrap; transition: color .15s, background-color .15s; }
.pro-edit:hover { color: var(--text); background: var(--bg-soft); }
.pro-edit .i { width: 1.5rem; height: 1.5rem; color: var(--link); }
/* в редактировании — внизу, по ширине квадрантов: слева «Сохранить», справа «Отменить» */
.pro-bar { grid-area: bar; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .25rem; margin-top: 2.25rem; }
.pro-bar .btn { width: 100%; }
.pro-bar .pro-save { border-radius: .75rem .25rem .25rem .75rem; }
.pro-bar .pro-cancel { border-radius: .25rem .75rem .75rem .25rem; color: var(--err); }   /* «Отменить» — красным */
.pro-save .i { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.pro-foot { grid-area: foot; margin-top: 1.25rem; font-size: .875rem; }
/* редактирование на месте: подчёркнутые поля, «×» и корзина — справа от поля, «+ Добавить …» — под списком */
.pro.is-edit .pro-kv { gap: .875rem; }
.pro.is-edit .pro-kv dd { padding-right: 2.5rem; }
.pro-fld, .pro-line { position: relative; display: block; min-width: 0; }
.pro-in { display: block; width: 100%; min-width: 0; height: 2.25rem; margin: 0; padding: 0 0 .1875rem; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -1px 0 var(--line-3); color: var(--text); font: inherit; font-size: 1.0625rem; line-height: 1.5; font-weight: 400; outline: none; transition: box-shadow .2s var(--ease); }
.pro-in::placeholder { color: var(--text-muted); font-weight: 400; opacity: 1; }
.pro-in:hover { box-shadow: inset 0 -1px 0 var(--text-muted); }
.pro-in:focus { box-shadow: inset 0 -1.5px 0 var(--tab-line); }
textarea.pro-in { height: auto; min-height: 2.25rem; padding: .3125rem 0 .375rem; resize: none; overflow: hidden; field-sizing: content; }
.pro-fld.has-err > .pro-line > .pro-in { box-shadow: inset 0 -1.5px 0 var(--err); }
.pro-err { display: none; margin-top: .375rem; font-size: .8125rem; line-height: 1.35; font-weight: 400; color: var(--err); }
.pro-fld.has-err > .pro-err { display: block; animation: msgIn .25s var(--ease-rv) both; }
.pro-ib { position: absolute; top: .125rem; right: -2.5rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); transition: color .15s, background-color .15s, transform .15s; }
.pro-ib:hover { color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); }
.pro-ib:active { transform: scale(.92); }
.pro-ib .i { width: 1.0625rem; height: 1.0625rem; }
.pro-ib.is-loc:hover { color: var(--link); background: var(--accent-soft); }
.pro-ib.is-del { top: 0; width: 2.25rem; height: 2.25rem; color: var(--err); }
.pro-ib.is-del .i { width: 1.25rem; height: 1.25rem; }
.pro-ib.is-del:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.pro-item[data-item="acc"] { position: relative; }
.pro-item[data-item="acc"] > .pro-ib { top: 50%; right: 0; margin-top: -1.125rem; }
.pro-ib.is-busy { color: var(--link); cursor: progress; }
.pro-ib.is-busy .i { animation: proPulse 1s ease-in-out infinite; }
@keyframes proPulse { 50% { opacity: .35; transform: scale(.85); } }
.pro.is-edit .pro-phones { display: block; justify-items: normal; }   /* строки телефонов — на всю ширину колонки */
.pro-ph + .pro-ph { margin-top: .5rem; }
/* телефон: страна — круглый флаг и шеврон слева в поле (как выбор языка в шапке), код — в самом номере */
.pro-tel-in > .pro-in { padding-left: 2.625rem; }
.pro-cc { position: absolute; top: 0; left: 0; z-index: 1; height: 2.25rem; padding: 0 .25rem .1875rem 0; display: inline-flex; align-items: center; gap: .1875rem; color: var(--text-muted); transition: color .15s; }
.pro-cc:hover, .pro-cc[aria-expanded="true"] { color: var(--text); }
.pro-cc .flag { width: 1.25rem; height: 1.25rem; }
.pro-cc .flag.is-none { box-shadow: none; stroke-width: 1.5; }
.pro-cc .cc-chev { width: .875rem; height: .875rem; stroke-width: 2; transition: transform .25s var(--ease-rv); }
.pro-cc[aria-expanded="true"] .cc-chev { transform: rotate(180deg); }
/* выбор страны телефона — просто: флаг, страна, код справа; выбранная — мягкий фон с тонкой рамкой, без галочки */
.pop.pro-ccpop { min-width: 16rem; padding: .375rem; border-radius: 1rem; }
.pro-ccpop .pop-list { gap: .125rem; }
.pro-ccpop .cc-item { gap: .75rem; padding: .5625rem .75rem; border: 1px solid transparent; border-radius: .625rem; font-size: .9375rem; font-weight: 500; color: var(--text); }
.pro-ccpop .cc-item .flag { width: 1.5rem; height: 1.5rem; }
.pro-ccpop .cc-item small { font-size: .875rem; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* выделение — как в левом меню кабинета: наведение — заметная серая подсветка, выбранная страна — белая плашка
   с тенью и жирным текстом (светлая тема, список на сером фоне как меню); в тёмной — те же явные ступени яркости */
.pop.pro-ccpop { background: var(--bg-soft); }
.pro-ccpop .cc-item { transition: background-color .15s, box-shadow .15s; }
.pro-ccpop .cc-item:hover, .pro-ccpop .cc-item:focus-visible { background: var(--bg-muted); outline: none; }
.pro-ccpop .cc-item[aria-selected="true"] { background: var(--bg); font-weight: 600; box-shadow: var(--shadow-card); }
.pro-ccpop .cc-item[aria-selected="true"] small { color: var(--text-sub); font-weight: 600; }
[data-theme="dark"] .pop.pro-ccpop { background: var(--bg-elev); }
[data-theme="dark"] .pro-ccpop .cc-item:hover, [data-theme="dark"] .pro-ccpop .cc-item:focus-visible { background: color-mix(in srgb, var(--text) 6%, var(--bg-elev)); }
[data-theme="dark"] .pro-ccpop .cc-item[aria-selected="true"] { background: color-mix(in srgb, var(--text) 11%, var(--bg-elev)); box-shadow: none; }
.pro-phones.is-single .pro-ib { display: none; }
/* «+ Добавить …»: плюс — лаймовый, надпись — основным цветом */
.pro-add { display: inline-flex; align-items: center; gap: .4375rem; height: 2.25rem; margin: .625rem 0 0 -.5rem; padding: 0 .625rem 0 .4375rem; border-radius: .5625rem; color: var(--text); font-size: .9375rem; font-weight: 500; transition: background-color .15s; }
.pro-add:hover { background: var(--bg-soft); }
.pro-add .i { width: 1.25rem; height: 1.25rem; stroke-width: 2; color: var(--link); }
.pro-q > .pro-add { margin-top: 1rem; }
.pro.is-edit .pro-plist { margin-top: -.875rem; }
.pro.is-edit .pro-p { grid-template-columns: minmax(0, 1fr) minmax(0, 40%) 2.25rem; align-items: start; padding: .875rem 0; }
.pro.is-edit .pro-p-main { gap: .625rem; }
.pro.is-edit .pro-p > .pro-ib { position: static; align-self: center; }
/* должность: из списка или своя */
.pro-combo .pro-in { padding-right: 1.75rem; }
.pro-combo-b { position: absolute; top: 0; right: 0; width: 1.75rem; height: 2.25rem; display: grid; place-items: center; color: var(--text-muted); transition: color .15s; }
.pro-combo-b:hover { color: var(--text); }
.pro-combo-b .i { width: 1rem; height: 1rem; transition: transform .25s var(--ease-rv); }
.pro-role[aria-expanded="true"] + .pro-combo-b .i { transform: rotate(180deg); }
.pop.pro-opts { top: calc(100% + .375rem); left: -.75rem; z-index: 30; min-width: calc(100% + 1.5rem); width: max-content; max-width: 18rem; max-height: 17rem; overflow-y: auto; padding: .375rem; }
.pro-opts .pop-item { padding: .5rem .75rem; font-size: 1rem; cursor: pointer; }
.pro-opts .pop-item.is-active { background: var(--bg-hover); color: var(--text); }
.pro-opts .pop-item[aria-selected="true"] { color: var(--text); font-weight: 600; }
.pro-opts .i-check { visibility: visible; }
@keyframes proBar { from { opacity: 0; transform: translate3d(0, 1rem, 0); } }
/* одна колонка: там, где рядом с панелью разделов места мало, и на планшете / телефоне */
@media (max-width: 889px), (min-width: 1081px) and (max-width: 1199px) {
  .pro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "legal" "dir" "acc" "staff" "bar" "foot"; }
  .pro-hr, .pro-q::before { display: none; }
  .pro-q, .pro-q[data-q="acc"], .pro-q[data-q="staff"] { padding: 1.75rem 0; }
  .pro-q[data-q="legal"] { padding-top: .25rem; }
  .pro-q + .pro-q, .pro-hr + .pro-q { border-top: 1px solid var(--line-2); }
  .pro-acts { grid-area: legal; margin-top: -.0625rem; }
}
@media (max-width: 820px) {
  /* редактирование на телефоне: «Сохранить · Отменить» — стеклянной плашкой внизу экрана, уведомления — над ней */
  .pro.is-edit { padding-bottom: 5.5rem; }
  .pro.is-edit .pro-bar { position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 45; margin: 0; padding: .5rem; border-radius: 1.25rem; background: var(--glass-bg); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); animation: proBar .35s var(--ease-rv) .45s backwards; }
  .pro.is-edit .pro-bar .btn { height: 2.75rem; }
  .pro.is-edit .pro-in { scroll-margin-bottom: 6.5rem; }
  html:has(.pro.is-edit) .toasts { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .pro-kv > div { grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); column-gap: .75rem; }
  .pro.is-edit .pro-kv dd { padding-right: 2.25rem; }
  .pro-ib { right: -2.25rem; }
  .pro-p { grid-template-columns: minmax(0, 1fr) auto; }
  .pro.is-edit .pro-p { grid-template-columns: minmax(0, 1fr) 2.25rem; }
  .pro.is-edit .pro-p > .pro-ib { grid-column: 2; grid-row: 1 / span 2; }
  .pro.is-edit .pro-p-ph { grid-column: 1; grid-row: 2; margin-top: .625rem; }
}
/* язык */
.lang-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; max-width: 52rem; }
.lang-tile { display: flex; align-items: center; gap: 1rem; height: 4.5rem; padding: 0 1.25rem; border-radius: var(--radius-lg); background: var(--bg-soft); text-align: left; transition: background-color .15s, box-shadow .15s; }
.lang-tile:hover { background: var(--bg-muted); }
.lang-tile b { flex: 1; font-size: 1.0625rem; font-weight: 500; }
.lt-code { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center; background: var(--bg); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.lt-tick { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-3); color: transparent; }
.lt-tick .i { width: .875rem; height: .875rem; stroke-width: 2.6; }
.lang-tile[aria-checked="true"] { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text); }
.lang-tile[aria-checked="true"] .lt-tick { background: var(--accent); color: var(--accent-on); box-shadow: none; }
/* уведомления */
.ev-list { list-style: none; padding: 0; border-radius: var(--radius-lg); background: var(--bg-soft); overflow: hidden; }
.ev-list li + li { border-top: 1px solid var(--line-2); }
.ev { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .875rem 1.25rem; transition: background-color .15s; }
.ev:hover { background: var(--bg-muted); }
.ev-ic { position: relative; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--link); }
.ev-ic .i { width: 1.5rem; height: 1.5rem; }
.ev.is-err .ev-ic { color: var(--err); }
/* непрочитанное событие — без красной точки: вся строка залита ультралёгким розовато-красным (≈7%, т. е. ~93% прозрачности);
   после нажатия событие прочитано — заливка уходит; у прочитанных заливки нет */
.ev.is-new { background: color-mix(in srgb, var(--badge) 7%, transparent); }
.ev.is-new:hover { background: color-mix(in srgb, var(--badge) 11%, transparent); }
/* без рамки: подсвеченная строка — чистый скруглённый блок, разделительные линии над ней и под ней не рисуются */
.ev.is-new { border-radius: .75rem; }
.ev-list li:has(> .ev.is-new), .ev-list li:has(> .ev.is-new) + li { border-top-color: transparent; }
.ev:focus:not(:focus-visible) { outline: none; }
.ev-main { display: grid; gap: .125rem; min-width: 0; }
.ev-main b { font-weight: 500; }
.ev.is-new .ev-main b { font-weight: 700; }
.ev-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--text-sub); }
.ev-meta { display: grid; justify-items: end; gap: .1875rem; font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: .75rem; }
.news-card { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.125rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.news-img { width: 7rem; height: 7rem; border-radius: .875rem; display: flex; align-items: center; justify-content: center; background: var(--bg); overflow: hidden; }
.news-img .ph { width: 78%; height: 78%; }
.news-card time { font-size: .8125rem; color: var(--text-muted); }
.news-card h3 { margin: .125rem 0 .25rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.news-card p { margin-bottom: .375rem; font-size: .875rem; color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .link { font-size: .875rem; }
/* шапка: точка непрочитанных у «Профиль» */
.ava-ico { position: relative; display: inline-grid; }
.hdot { position: absolute; top: .125rem; right: 0; width: .625rem; height: .625rem; border-radius: 50%; background: var(--badge); box-shadow: 0 0 0 2px var(--bg); }
/* подтверждение по SMS: сумма заказа или документ */
.modal.is-narrow { width: min(29rem, 100%); }
.auth-sum { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .125rem 1rem; margin-top: 1rem; padding: .875rem 1rem; border-radius: .875rem; background: var(--bg-soft); }
.auth-sum > span { font-size: .875rem; color: var(--text-sub); }
.auth-sum b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.auth-sum small { grid-column: 1 / -1; font-size: .8125rem; color: var(--text-muted); }
.auth-sum.is-doc { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .875rem; }
.auth-sum.is-doc .i { width: 1.5rem; height: 1.5rem; color: var(--link); }
.auth-sum.is-doc b { display: block; font-size: 1rem; }
.auth-sum.is-doc small { display: block; }

/* успех: анимация из приложения + итог */
.modal.okv { width: min(27rem, 100%); padding: 1.25rem 1.75rem 1.75rem; text-align: center; }
.okv-x { position: absolute; top: .875rem; right: .875rem; z-index: 1; }
.okv-anim { width: 15rem; height: 15rem; margin: -.5rem auto -1.875rem; }
.okv-anim.is-static { height: 8rem; margin-bottom: .5rem; display: grid; place-items: center; }
.okv-check { width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-on); animation: pop .5s var(--ease); }
.okv-check .i { width: 2.5rem; height: 2.5rem; stroke-width: 2.2; }
.okv-text { position: relative; animation: okvIn .55s var(--ease-rv) .3s both; }
@keyframes okvIn { from { opacity: 0; transform: translate3d(0, .5rem, 0); } to { opacity: 1; transform: none; } }
.okv-text h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.okv-text > p { margin-top: .5rem; font-size: .9375rem; line-height: 1.5; color: var(--text-sub); }
.okv-rows { margin-top: 1.125rem; padding: .25rem 1rem; border-radius: .875rem; background: var(--bg-soft); text-align: left; }
.okv-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5625rem 0; border-bottom: 1px solid var(--line-2); font-size: .875rem; }
.okv-rows > div:last-child { border-bottom: 0; }
.okv-rows dt { color: var(--text-sub); }
.okv-rows dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.okv-actions { display: grid; gap: .5rem; margin-top: 1.25rem; }

/* ==========================================================================
   Кабинет v2: вкладки как в приложении, таблицы разделов (как TableWorkbench в веб-части ERP),
   заказы, история, оплата, сервис, жалобы, статистика, окна
   ========================================================================== */
:root { --tab-line: var(--accent-ink); --tab-bg: var(--bg); --ctl: var(--bg-soft); --ctl-hover: var(--bg-muted); }
/* Поверхность таблиц: мягкая подложка; в тёмной теме — см. блок «Тёмная тема без фоновых блоков» в конце файла */
:root { --tbl-bg: var(--bg-soft); --tbl-card: var(--bg); }
[data-theme="dark"] { --tab-line: #bcf568; --ctl: var(--bg-muted); --ctl-hover: #242625; }

/* панель разделов: в светлой теме — мягкая подложка (на белом иконки иначе теряются), в тёмной — без подложки */
[data-theme="dark"] .pf-side { background: none; padding-left: 0; padding-right: 0; }
[data-theme="dark"] .pf-nav a:hover, [data-theme="dark"] .pf-out:hover, [data-theme="dark"] .pf-acc:hover { background: var(--bg-soft); }
[data-theme="dark"] .pf-nav a[aria-current="page"] { background: var(--bg-muted); box-shadow: none; }

/* ---------- Вкладки — как в приложении: текст и тонкое зелёное подчёркивание, без фона; «Все» закреплена ---------- */
.tabrow { position: relative; display: flex; align-items: flex-end; gap: 1.25rem; min-height: 3.125rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.tabrow::-webkit-scrollbar { display: none; }
.tabx { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4375rem; min-width: 2.75rem; padding: .5rem 0 .75rem; font-size: 1rem; font-weight: 500; line-height: 1.375rem; color: var(--text-muted); white-space: nowrap; transition: color .18s var(--ease); }
.tabx:hover { color: var(--text-sub); }
.tabx[aria-selected="true"] { color: var(--text); }
.tabx::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 1px; border-radius: 0; background: var(--accent); opacity: 0; transform: translateX(-50%) scaleX(.2); transition: transform .32s var(--ease-rv), opacity .18s var(--ease); }
.tabx[aria-selected="true"]::after { opacity: 1; transform: translateX(-50%); }
.tabx .pm-badge { margin-left: .125rem; }
.tabx:focus-visible { outline-offset: 1px; }
/* «Все» стоит на месте, остальные вкладки листаются под ней (как в приложении) */
.tabrow > .tabx:first-child { position: sticky; left: 0; z-index: 2; background: var(--tab-bg); }
.tabrow > .tabx:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 1.25rem; background: linear-gradient(90deg, var(--tab-bg), transparent); pointer-events: none; }
.tabrow.is-sub { min-height: 2.75rem; gap: 1.125rem; }
.tabrow.is-sub .tabx { padding: .4375rem 0 .625rem; font-size: .9375rem; }
.tabrow.is-sub .tabx::before { width: 1.125rem; }
.tscroll { position: relative; min-width: 0; }
.tscroll.is-sec { margin-top: .75rem; }
.tscroll.is-mini { margin-top: 0; }
.tarrow { position: absolute; top: calc(50% - .125rem); z-index: 3; width: 1.875rem; height: 1.875rem; margin-top: -.9375rem; border-radius: 50%; display: none; place-items: center; color: var(--text); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-card); transition: transform .2s var(--ease), opacity .2s; }
.tarrow:hover { transform: scale(1.08); }
.tarrow .i { width: 1.0625rem; height: 1.0625rem; stroke-width: 2; }
.tarrow.is-prev { left: calc(var(--pin, 2.75rem) + .375rem); }
.tarrow.is-next { right: 0; }
.tscroll.can-prev > .tarrow.is-prev, .tscroll.can-next > .tarrow.is-next { display: grid; }
.tscroll.can-prev > .tabrow > .tabx:first-child::before { width: 3.5rem; background: linear-gradient(90deg, var(--tab-bg) 60%, transparent); }
.tscroll.can-next > .tabrow { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 4.5rem); mask-image: linear-gradient(270deg, transparent 0, #000 4.5rem); }
@media (hover: none) { .tarrow { display: none !important; } }
.tabrow.is-mini { min-height: 0; gap: 1rem; }
.tabrow.is-mini .tabx { min-width: 0; padding: .25rem 0 .5rem; font-size: .875rem; }

/* ---------- Таблицы разделов: строка заголовка — название слева, панель справа (как «поднятая» панель в ERP);
   ниже вкладки и плитки; над таблицей — счётчик и «Развернуть». Панель без подложек: при наведении — лёгкая подсветка ---------- */
.dt { display: flex; flex-direction: column; }
.dt-top { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.5rem; min-height: 2.5rem; }
.dt-top.is-bare { min-height: 0; }
.dt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem 1rem; min-width: 0; margin-right: auto; }
.dt-head h1 { font-size: 2rem; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.dt-head h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.dt-head .muted { font-size: .9375rem; }
.dt-head .btn, .dt-head #histBal { align-self: center; }
.dt-head .link { font-size: .9375rem; }
.dt-tabs { display: grid; margin-top: .5rem; }
.dt-sub { display: grid; gap: .125rem; }
.dt-tabs:empty, .dt-sub:empty { display: none; }
.dt-bar { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .125rem .25rem; margin-left: auto; }
.dt-sel {
  height: 2.25rem; padding: 0 1.625rem 0 .5rem; border: 0; border-radius: .5rem; background-color: transparent; color: var(--text-sub);
  font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238a8c92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .375rem center; background-size: 1rem; transition: color .15s, background-color .15s;
}
.dt-sel:not(:has(option[value=""]:checked)) { color: var(--text); }
.dt-sel:focus { outline: none; box-shadow: none; }
.dt-sel:focus-visible { color: var(--text); background-color: var(--bg-muted); }
.dt-btn { height: 2.25rem; padding: 0 .5rem; border-radius: .5rem; background: transparent; color: var(--text-sub); font-size: .9375rem; font-weight: 500; display: inline-flex; align-items: center; gap: .4375rem; white-space: nowrap; transition: color .15s, background-color .15s, transform .15s; }
.dt-btn .i { width: 1.125rem; height: 1.125rem; }
.dt-btn:active, .dt-kpi:active, .dt-fs:active { transform: scale(.96); }
.dt-sel:hover, .dt-btn:hover, .dt-btn[aria-expanded="true"] { color: var(--text); background-color: var(--bg-soft); }
/* поиск — лупа; при наведении (в фокусе, с текстом) поле плавно раскрывается в строке панели и сдвигает
   «Все годы · Все месяцы · Excel · PDF · Столбцы» влево; без подложки — только нижняя линия */
.dt-bar > * { flex-shrink: 0; }
.dt-search { position: relative; flex: 0 1 auto; width: 2.25rem; min-width: 2.25rem; height: 2.25rem; margin-left: .25rem;
  transition: width .42s var(--ease-rv) .2s, min-width .42s var(--ease-rv) .2s; }
.dt-search::before { content: ""; position: absolute; inset: -.375rem -.25rem; }
.dt-search-in { position: relative; display: flex; align-items: center; gap: .5rem; width: 100%; height: 100%; padding: 0 .5625rem; color: var(--text-sub); cursor: pointer; overflow: hidden; }
.dt-search-in::after { content: ""; position: absolute; left: .375rem; right: .375rem; bottom: .125rem; height: 1px; border-radius: 1px; background: var(--line-3); transform: scaleX(0); transform-origin: right center; transition: transform .38s var(--ease-rv) .2s, background-color .2s, height .2s; }
.dt-search-in .i { width: 1.125rem; height: 1.125rem; flex: none; }
.dt-search-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .9375rem; outline: none; opacity: 0; transition: opacity .18s var(--ease); }
.dt-search-in input::placeholder { color: var(--text-muted); }
.dt-search-in input::-webkit-search-cancel-button { cursor: pointer; }
.dt-search:hover, .dt-search:focus-within, .dt-search:has(input:not(:placeholder-shown)) { width: 13rem; min-width: 8rem; transition: width .42s var(--ease-rv) .04s, min-width .42s var(--ease-rv) .04s; }
.dt-search:hover .dt-search-in, .dt-search:focus-within .dt-search-in, .dt-search:has(input:not(:placeholder-shown)) .dt-search-in { cursor: text; }
.dt-search:hover .dt-search-in::after, .dt-search:focus-within .dt-search-in::after, .dt-search:has(input:not(:placeholder-shown)) .dt-search-in::after { transform: none; transition-delay: .06s; }
.dt-search:hover input, .dt-search:focus-within input, .dt-search:has(input:not(:placeholder-shown)) input { opacity: 1; transition-delay: .16s; }
.dt-search:focus-within .dt-search-in::after { height: 1.5px; background: var(--tab-line); }
/* шеврон плиток («Expand») — зелёный, без подложки */
.dt-kpi { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .5rem; display: grid; place-items: center; background: transparent; color: var(--tab-line); transition: color .15s, background-color .15s, transform .15s; }
.dt-kpi:hover { background: var(--bg-soft); }
.dt-kpi .i { width: 1.625rem; height: 1.625rem; stroke-width: 1.4; transition: transform .38s var(--ease-rv); }
.dt-kpi[aria-expanded="true"] .i { transform: rotate(180deg); }
/* плитки-показатели раскрываются по шеврону */
.dt-tiles { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-rv); }
.dt-tiles.is-open { grid-template-rows: 1fr; }
.dt-tiles-in { min-height: 0; overflow: hidden; }
.dt-tiles .kpis { margin-top: 0; padding-top: .875rem; opacity: 0; transform: translate3d(0, -.375rem, 0); transition: opacity .25s var(--ease), transform .45s var(--ease-rv); }
.dt-tiles.is-open .kpis { opacity: 1; transform: none; }
.dt-meta { display: flex; align-items: center; justify-content: flex-end; gap: .25rem 1rem; min-height: 2.25rem; margin: .5rem 0 .25rem; font-size: .875rem; color: var(--text-muted); }
.dt-meta-l { margin-right: auto; }
/* «Развернуть таблицу» ⇄ «Свернуть»: таблица поверх страницы на весь экран, со всеми функциями */
.dt-fs { width: 2.25rem; height: 2.25rem; margin-right: -.375rem; border-radius: .5rem; display: grid; place-items: center; color: var(--text-sub); transition: color .15s, background-color .15s, transform .15s; }
.dt-fs:hover, .dt-fs[aria-pressed="true"] { color: var(--text); background: var(--bg-soft); }
.dt-fs .i { width: 1.25rem; height: 1.25rem; stroke-width: 1.7; }
html.dt-lock { overflow: hidden; }
.dt.is-full { position: fixed; inset: 0; z-index: 58; height: 100vh; height: 100dvh; padding: 1.25rem var(--pad); background: var(--bg); overflow: hidden; animation: dtFull .34s var(--ease-rv) both; }
@keyframes dtFull { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.dt.is-full .dt-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dt.is-full .dt-x { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dt.is-full .dt-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.dt.is-full .dt-body > .empty { flex: 1 1 auto; align-content: center; }
.dt.is-full .dt-foot { flex: none; }
.dt.is-full .dt-tiles.is-open .kpis { padding-bottom: .25rem; }
.dt-body.is-swap > .dt-x, .dt-body.is-swap > .empty { animation: dtIn .3s var(--ease-rv) both; }
@keyframes dtIn { from { opacity: .35; } to { opacity: 1; } }
.dt-body > .empty { padding: 3rem 1rem 2rem; }
.dt-body > .empty .empty-title { font-size: 1.25rem; }
/* таблица: шапка закреплена, первая строка без линии, длинные ячейки переносятся */
.dt-scroll { max-height: max(24rem, calc(100vh - 8rem)); overflow: auto; container-type: inline-size; }
/* полосы прокрутки таблицы видны всегда (тонкие, в цвет линий) — сразу видно, что справа есть ещё столбцы */
/* Единый скролл: тонкий ползунок без дорожки, рамки, стрелок и угловой подложки.
   Ленты вкладок со scrollbar-width: none сохраняют свою навигацию стрелками. */
::-webkit-scrollbar { width: .625rem; height: .625rem; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner { background: transparent; border: 0; box-shadow: none; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--line-3) padding-box; box-shadow: none; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; } }
/* «Соглашение» — как в приложении: текст в окне без рамки и подложки, прокрутка внутри окна */
.agr { position: relative; margin-top: 1rem; }
.agr-win { position: relative; height: max(24rem, calc(100vh - 14rem)); height: max(24rem, calc(100dvh - 14rem)); overflow-y: auto; outline: none; }
.agr-doc { max-width: 50rem; padding: 0 1.25rem 6rem 0; font-size: 1rem; line-height: 1.62; color: var(--text); overflow-wrap: anywhere; }
.agr-wait { padding: 1rem 0; color: var(--text-muted); }
.agr-title { font-size: 1.375rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.agr-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .625rem; font-size: .875rem; color: var(--text-muted); }
.agr-v { color: var(--link); font-weight: 600; }
.agr-lang { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; font-size: .875rem; color: var(--text-sub); }
.agr-lang .i { width: 1.125rem; height: 1.125rem; color: var(--link); }
.agr-sub { margin-top: .75rem; font-size: .9375rem; color: var(--text-sub); }
.agr-doc p { margin-top: .75rem; }
.agr-h { margin-top: 2.25rem; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.agr-small { font-size: .875rem; color: var(--text-muted); }
.agr-toc { margin: .5rem 0 0; padding: 0; list-style: none; columns: 2 18rem; column-gap: 2.5rem; }
.agr-toc li { break-inside: avoid; }
.agr-toc-a { display: block; width: 100%; padding: .25rem 0; text-align: left; font-size: .9375rem; line-height: 1.4; color: var(--text-sub); transition: color .15s; }
.agr-toc-a:hover { color: var(--link); }
.agr-tw { margin-top: 1rem; overflow-x: auto; }
.agr-tbl { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.5; }
.agr-tbl th, .agr-tbl td { padding: .5rem 1rem .5rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
.agr-tbl tr > :first-child { min-width: 8.5rem; }
.agr-tbl th { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.agr-sign { display: grid; justify-items: start; gap: .375rem; margin-top: 2.75rem; padding-top: 1.5rem; box-shadow: 0 -1px 0 var(--line-2); }
.agr-sign h3 { font-size: 1.125rem; font-weight: 700; }
.agr-sign .sig { width: 15rem; height: 5rem; color: #1e4faf; }
.agr-sign .sig path { animation-play-state: paused; }
.agr-sign.is-seen .sig path { animation-play-state: running; }
[data-theme="dark"] .agr-sign .sig { color: #86a8ff; }
.agr-sign b { font-size: 1.0625rem; font-weight: 600; }
.agr-sign span { font-size: .875rem; color: var(--text-muted); }
/* кнопка «Вниз / Наверх» — как LegalDocumentScrollButton: два уголка, второй «подталкивается» первым (цикл 1,9 с) */
.agr-fab { position: absolute; right: 2.75rem; bottom: 2.5rem; z-index: 2; display: inline-flex; align-items: center; gap: .65rem; padding: .89375rem 1.259375rem; border-radius: 999px; background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-2) 72%, transparent), 0 8px 20px rgba(16, 18, 30, .16); font-size: 1.2025rem; font-weight: 700; line-height: 1.15; color: var(--text); opacity: 0; transform: translateY(.625rem); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease-rv); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-theme="dark"] .agr-fab { box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-2) 72%, transparent), 0 8px 20px rgba(0, 0, 0, .44); }
.agr-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.agr-fab:active { transform: scale(.97); }
.agr-fab.is-swap .agr-fab-l { animation: agrSwap .22s var(--ease-rv); }
.agr-chev { position: relative; width: 1.625rem; height: 1.7875rem; flex: none; color: var(--link); transition: transform .22s var(--ease-rv); }
.agr-fab[data-dir="up"] .agr-chev { transform: rotate(180deg); }
.agr-c { position: absolute; left: 0; top: .0625rem; width: 1.25rem; height: 1.25rem; }
.agr-c:first-child { animation: agrC1 1.9s linear infinite; }
.agr-c:last-child { animation: agrC2 1.9s linear infinite; }
@keyframes agrC1 { 0%, 4% { transform: translateY(-4px); opacity: .64; animation-timing-function: ease-in-out; } 16% { transform: translateY(.2px); opacity: 1; animation-timing-function: ease-in-out; } 28%, 100% { transform: translateY(-4px); opacity: .64; } }
@keyframes agrC2 { 0%, 24% { transform: translateY(4px); opacity: .64; animation-timing-function: ease-in-out; } 36% { transform: translateY(8.2px); opacity: 1; animation-timing-function: ease-in-out; } 48%, 100% { transform: translateY(4px); opacity: .64; } }
@keyframes agrSwap { from { opacity: 0; transform: translateY(.25rem); } }
@media (max-width: 700px) { .agr-win { height: max(22rem, calc(100dvh - 12rem)); } .agr-doc { padding-right: .5rem; } .agr-fab { right: 1.75rem; } }
/* стрелки ‹ › у краёв широкой таблицы — как у ленты вкладок */
.dt-x { position: relative; min-height: 0; }


.dt-cnt { margin-left: -.125rem; font-size: .8125rem; font-weight: 600; color: var(--link); font-variant-numeric: tabular-nums; }
.dt-table { font-size: .875rem; }
.dt-table th, .dt-table td { white-space: nowrap; }
.dt-table td { padding: .75rem 1rem; }
.dt-table thead th { position: sticky; top: 0; z-index: 2; background: var(--tbl-bg); box-shadow: inset 0 -1px 0 var(--line-2); }
/* Заказы и контакты профиля: шапка без разделительной линии. */
.dt-table.tbl-orders thead th, .dt-table.tbl-contacts thead th { box-shadow: none; }
.dt-table > tbody > tr:first-child > td { border-top-color: transparent; }
.dt-table td.wrap { white-space: normal; min-width: 16rem; max-width: 26rem; }
/* позиции построчно: название и количество */
.ln-list { display: grid; gap: .1875rem; }
.ln-list > span { white-space: nowrap; }
.ln-list b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* Только списки товаров в заказах и истории профиля. */
.tbl-orders .ln-list > span, .tbl-ledger .ln-list > span { color: var(--text-muted); }
.tbl-orders .ln-list b, .tbl-ledger .ln-list b { color: var(--text-strong); font-weight: 600; }
/* «Действие» закреплено справа (после него — номер); тень — только пока столбец «прилип» и закрывает соседние */
.dt-table .is-stick { position: sticky; right: 0; z-index: 1; background: var(--tbl-bg); text-align: right; transition: box-shadow .2s; }
.dt-table thead th.is-stick { z-index: 3; }
.dt-scroll.is-pin .is-stick { box-shadow: inset 1px 0 0 var(--line-2), -.75rem 0 1rem -.75rem rgba(16, 18, 30, .28); }
[data-theme="dark"] .dt-scroll.is-pin .is-stick { box-shadow: inset 1px 0 0 var(--line-2), -.75rem 0 1rem -.75rem rgba(0, 0, 0, .7); }
.dt-table tbody tr:hover > td.is-stick, .dt-table tr.is-open > td.is-stick { background: linear-gradient(color-mix(in srgb, var(--text) 3%, transparent), color-mix(in srgb, var(--text) 3%, transparent)), var(--tbl-bg); }
.dt-table tr.is-hl > td.is-stick { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--tbl-bg); }
.dt-table mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 50%, transparent); color: inherit; }
.dt-table tfoot td { background: var(--tbl-bg); }
/* фильтр в заголовке столбца */
.th-btn { display: inline-flex; align-items: center; gap: .375rem; margin: -.25rem -.375rem; padding: .25rem .375rem; border-radius: .4375rem; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; transition: background-color .15s, color .15s; }
.th-btn:hover, .th-btn[aria-expanded="true"] { background: var(--bg-muted); color: var(--text-sub); }
.th-btn .th-i { width: .8125rem; height: .8125rem; opacity: 0; transition: opacity .15s; }
.th-btn:hover .th-i, .th-btn:focus-visible .th-i, .th-btn[aria-expanded="true"] .th-i, .th-btn.is-on .th-i { opacity: 1; }
.th-btn.is-on { color: var(--link); }
@media (hover: none) { .th-btn .th-i { opacity: .55; } }
/* низ таблицы слева: ‹ 1 • • ● • • 10 › — кругляшки = страницы (как точки каталога), текущая — зелёная точка;
   шевроны как у плиток. По 50 строк; одна страница — без пагинации */
.dt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; min-height: 2.5rem; margin-top: .625rem; font-size: .875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dt-pages { display: inline-flex; align-items: center; gap: .5625rem; margin-left: -.5rem; }
.dt-arr { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .5rem; display: grid; place-items: center; color: var(--tab-line); transition: color .15s, background-color .15s, transform .15s, opacity .15s; }
.dt-arr .i { width: 1.625rem; height: 1.625rem; stroke-width: 1.4; }
.dt-arr:hover:not(:disabled) { background: var(--bg-soft); }
.dt-arr:active:not(:disabled) { transform: scale(.92); }
.dt-arr:disabled { color: var(--text-muted); opacity: .35; cursor: default; }
.dt-num { min-width: 1.5rem; height: 2.25rem; padding: 0 .25rem; border-radius: .5rem; font-size: .9375rem; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color .15s; }
.dt-num:hover, .dt-num.is-on { color: var(--text); }
.dt-dots { display: inline-flex; align-items: center; gap: .6875rem; padding: 0 .625rem; }
.dt-dot { position: relative; display: block; flex: none; width: .5rem; height: .5rem; padding: 0; border-radius: 999px; background: var(--dot); transition: width .4s var(--ease-apple), background-color .25s var(--ease-apple), transform .25s var(--ease-apple); }
.dt-dot::before { content: ""; position: absolute; inset: -.875rem -.34375rem; }
.dt-dot:hover { background: var(--text-muted); }
.dt-dot.is-active { background: var(--tab-line); transform: scale(1.25); }   /* текущая страница — зелёная точка */
.dt-dot.is-small { transform: scale(.6); }
.dt-dot:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
/* меню «Столбцы», фильтр столбца, комментарий этапа */
.pop.dt-colpop { min-width: 17rem; max-width: min(22rem, calc(100vw - 1.5rem)); }
.dt-colpop .pop-list { max-height: min(56vh, 24rem); }
.dt-colpop label.pop-item { padding: .5rem .75rem; cursor: pointer; }
.dt-colpop input[type="checkbox"] { width: 1.0625rem; height: 1.0625rem; flex: none; margin: 0; accent-color: var(--accent-ink); cursor: pointer; }
.dt-colpop .pop-item.is-all { margin-bottom: .25rem; border-radius: .5625rem .5625rem 0 0; box-shadow: 0 1px 0 var(--line-2); font-weight: 600; }
.hf-hint { max-width: 19rem; padding: 0 .75rem .5rem; font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }
.pop-foot { display: flex; gap: .5rem; margin-top: .375rem; padding: .5rem .25rem .25rem; box-shadow: 0 -1px 0 var(--line-2); }
.pop-foot .btn { flex: 1; }
.note-pop { max-width: 20rem; padding: .125rem .75rem .625rem; font-size: .9375rem; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Заказы: этапы с комментарием, действия, раскрытие строки ---------- */
.stg-v { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* этап — как warehouse_stage_cell в веб-части ERP: дата, под ней значки без фона (комментарий · аудио · фото · файл) */
/* Ячейки таблицы выровнены сверху общим правилом .tbl td.
   Вложения идут под датой, незанятое место остаётся снизу. */
.stg { display: grid; align-content: start; gap: .1875rem; min-width: 7.625rem; }
.stg .stg-v.is-cancel { font-weight: 600; color: var(--err); }
.stg .stg-v.is-sub { font-size: .8125rem; color: var(--text-muted); }
.stg-art { display: flex; align-items: center; flex-wrap: wrap; gap: .125rem; margin: 0 0 -.25rem -.3125rem; }
.stg-b { width: 2.125rem; height: 2.125rem; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--link); transition: color .14s, transform .14s; }
.stg-b:hover { color: var(--text); }
.stg-b:active { transform: scale(.92); }
.gi { width: 1.5rem; height: 1.5rem; flex: none; }
.gi-audio { width: 1.125rem; }
/* окно этапа: комментарий, плеер, фото, файлы */
.modal.stg-modal { width: min(36rem, 100%); }
.modal.stg-modal.is-photo { width: min(44rem, 100%); }
.modal.stg-modal.is-zoom { width: min(96vw, 84rem); }
.stg-modal .modal-head { align-items: flex-start; }
.stg-h { min-width: 0; }
.stg-sub { margin-top: .25rem; font-size: .9375rem; color: var(--text-sub); }
.stg-hacts { display: flex; gap: .25rem; margin: -.25rem -.5rem 0 0; }
.stg-modal .modal-body { display: grid; gap: .875rem; }
.stg-note { white-space: pre-wrap; font-size: 1rem; line-height: 1.55; }
.stg-note + .stg-note { padding-top: .875rem; box-shadow: 0 -1px 0 var(--line-2); }
.stg-who { display: block; margin-bottom: .25rem; font-size: .8125rem; font-weight: 600; color: var(--text-muted); }
.stg-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.stg-chip { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--bg-muted); color: var(--text-sub); transition: background-color .15s, color .15s; }
.stg-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); }
.stg-player { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem 1.125rem; border-radius: 1.125rem; background: var(--bg-soft); }
.stg-play { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-on); transition: transform .15s; }
.stg-play:active { transform: scale(.94); }
.stg-play .gi { width: 1.625rem; height: 1.625rem; }
.stg-track { display: grid; gap: .375rem; min-width: 0; }
.stg-wave { display: flex; align-items: center; gap: 3px; height: 2.75rem; cursor: pointer; }
.stg-wave i { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--line-3); transition: background-color .1s; }
.stg-wave i.is-on { background: var(--link); }
.stg-time { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stg-cap { font-size: .875rem; color: var(--text-sub); overflow-wrap: anywhere; }
.stg-photo { margin: 0; border-radius: .875rem; overflow: hidden; background: var(--bg-soft); display: grid; place-items: center; }
.stg-photo .ph { width: 100%; max-height: min(64vh, 34rem); }
.stg-photo .ph img, .stg-img { width: 100%; max-height: min(64vh, 34rem); object-fit: contain; }
.stg-modal.is-zoom .stg-photo .ph, .stg-modal.is-zoom .stg-photo .ph img, .stg-modal.is-zoom .stg-img { max-height: 80vh; }
.stg-nopic { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; color: var(--text-muted); font-size: .9375rem; text-align: center; }
.stg-nopic .gi { width: 2.5rem; height: 2.5rem; }
.stg-files { display: grid; gap: .25rem; list-style: none; }
.stg-file { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .25rem; border-radius: .5rem; font-weight: 600; color: var(--link); text-align: left; }
.stg-file:hover { background: var(--bg-hover); }
.stg-file span { overflow-wrap: anywhere; }
.dt-table tr.is-open { background: color-mix(in srgb, var(--text) 3%, transparent); }
.dt-table tr.is-hl { background: var(--accent-soft); }
/* подсветка строки — как непрочитанное событие в «Уведомлениях»: ультралёгкая заливка (≈7 %) без рамки — без линий
   над и под строкой, края скруглены. Красным — незакрытый заказ / обращение (оценки ещё нет) и отгрузка в «Истории»,
   зелёным — оплата в «Истории» */
.dt-table tbody tr.is-pending, .tbl-ledger tbody tr.lg-order { --tint: var(--badge); }
.tbl-ledger tbody tr.lg-pay { --tint: var(--tint-ok); }
.dt-table tbody tr:is(.is-pending, .lg-order, .lg-pay) > td { background: color-mix(in srgb, var(--tint) 7%, transparent); }
.dt-table tbody tr:is(.is-pending, .lg-order, .lg-pay):hover > td { background: color-mix(in srgb, var(--tint) 11%, transparent); }
.dt-table tbody tr:is(.is-pending, .lg-order, .lg-pay) > td:first-child { border-radius: .75rem 0 0 .75rem; }
.dt-table tbody tr:is(.is-pending, .lg-order, .lg-pay) > td:last-child { border-radius: 0 .75rem .75rem 0; }
/* Deeper corner cutouts between unfinished orders. */
.dt-table.tbl-orders tbody tr.is-pending > td:first-child { border-radius: 1.25rem 0 0 1.25rem; }
.dt-table.tbl-orders tbody tr.is-pending > td:last-child { border-radius: 0 1.25rem 1.25rem 0; }
.cell-strong { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cd { white-space: nowrap; }
.dt-top.is-c1 .dt-head > .muted, .dt-top.is-c2 .dt-head > .muted, .dt-top.is-c2 .dt-btn .dt-lbl { display: none; }
.link-plain { transition: color .15s; }
.link-plain:hover { color: var(--link); }
/* раскрытая строка: по ширине видимой части таблицы, не уезжает при прокрутке вбок */
.dt-scroll .dt-table tr.od-row > td { padding: 0 0 1.25rem; white-space: normal; }
.dt-scroll .dt-table tr.od-row .od { position: sticky; left: 0; width: 100cqw; padding: .375rem 1rem 0; }

/* ---------- История: остаток «сум / $» ---------- */
#histBal { margin-left: auto; align-self: center; }
.bal-pill { display: inline-flex; align-items: center; height: 2rem; padding: 0 .875rem; border-radius: 999px; background: var(--bg-soft); font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-pill.is-err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.bal-pill.is-ok { background: var(--accent-soft); color: var(--link); }

/* ---------- Оплата: вкладки номенклатуры ---------- */
.sl-list.is-swap { animation: swapIn .36s var(--ease-rv) both; }
@keyframes swapIn { from { opacity: .3; transform: translate3d(0, .25rem, 0); } to { opacity: 1; transform: none; } }

/* ---------- Комментарий с вложениями — как в приложении: поле, линия, «Аудио · Фото · Файл» ---------- */
.cmt-card { --cmt-bg: var(--bg); --att-bg: var(--bg-soft); --att-hover: var(--bg-muted); display: grid; gap: .875rem; padding: 1rem .875rem .875rem; border-radius: 1.25rem; background: var(--cmt-bg); transition: box-shadow .15s; }
[data-theme="dark"] .cmt-card { --cmt-bg: var(--bg-muted); --att-bg: #262827; --att-hover: #2f3130; }
.modal .cmt-card { --cmt-bg: var(--bg-soft); --att-bg: var(--bg-muted); --att-hover: #e1e3e5; }
[data-theme="dark"] .modal .cmt-card { --cmt-bg: var(--bg-muted); --att-bg: #262827; --att-hover: #2f3130; }
.cmt-card:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.field.has-error .cmt-card { box-shadow: inset 0 0 0 1.5px var(--err); }
.svc-form .field.has-error .cmt-card { box-shadow: inset 0 0 0 .5px var(--err); }
.cmt-input { display: block; width: 100%; min-height: 6.5rem; padding: 0 .125rem; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5; resize: vertical; outline: none; }
.cmt-input[rows="2"] { min-height: 3.5rem; }
.cmt-input::placeholder { color: var(--text-muted); }
/* «Аудио · Фото · Файл» — без линии над кнопками */
.att-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.att-btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; height: 3.125rem; padding: 0 1rem; border-radius: 1.25rem; background: var(--att-bg); color: var(--text); font-size: 1rem; font-weight: 500; text-align: left; transition: background-color .15s, color .15s, transform .15s; }
.att-btn:hover { background: var(--att-hover); }
.att-btn:active { transform: scale(.98); }
.att-btn .i { order: 2; width: 1.5rem; height: 1.5rem; color: var(--link); }
.att-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes recPulse { 50% { opacity: .35; transform: scale(.86); } }
/* запись голоса — белая панель на месте «Аудио» (как «Диктофон» iPhone): красная точка, чёрный таймер с сотыми, красная
   живая аудиограмма, «Пауза» и «Стоп» (красный квадрат); «Фото» и «Файл» на это время — значки */
.att-btns.is-recording { grid-template-columns: minmax(0, 1fr) auto auto; }
.att-btns.is-recording .att-btn { width: 3.125rem; padding: 0; justify-content: center; }
.att-btns.is-recording .att-btn .lbl { display: none; }
.att-rec { --rec-c: var(--err); display: flex; align-items: center; gap: .625rem; min-width: 0; height: 3.125rem; padding: 0 .3125rem 0 1rem; border-radius: 1.25rem; background: var(--att-bg); color: var(--text); animation: attIn .2s var(--ease-rv) both; }
.rec-dot { flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--rec-c); animation: recDot 1s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes recDot { 0%, 100% { transform: scale(.55); opacity: .45; box-shadow: 0 0 0 0 color-mix(in srgb, var(--rec-c) 45%, transparent); }
  45% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 0 .3125rem color-mix(in srgb, var(--rec-c) 0%, transparent); } }
.att-rec.is-paused .rec-dot { background: var(--text-muted); animation: none; }
.rec-t { flex: none; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--text); }
.rec-cv { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 1.75rem; }
.rec-b, .vp-b { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: background-color .15s, transform .15s; }
.rec-b:hover, .vp-b:hover { background: var(--att-hover); }
.rec-b:active, .vp-b:active { transform: scale(.92); }
.rec-b .gi, .vp-b .gi { width: 1.25rem; height: 1.25rem; }
.rec-b .sq, .vp-b .sq { width: .8125rem; height: .8125rem; border-radius: .1875rem; background: var(--rec-c, var(--err)); }
.rec-b.is-stop { width: 2.75rem; height: 2.75rem; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--err) 32%, transparent); animation: stopPulse 1.6s ease-in-out infinite; }
.rec-b.is-stop .sq { width: .9375rem; height: .9375rem; }
@keyframes stopPulse { 0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--err) 38%, transparent), 0 0 0 0 color-mix(in srgb, var(--err) 38%, transparent); }
  55% { transform: scale(1.06); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--err) 38%, transparent), 0 0 0 .6875rem color-mix(in srgb, var(--err) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rec-b.is-stop, .rec-dot { animation: none; } }
.rec-b .rdot { width: .8125rem; height: .8125rem; border-radius: 50%; background: var(--err); }
/* мини-плеер голосового */
/* плеер голосового — мягко, без чёрного: ▶ на светло-зелёном круге, проигранная часть дорожки — зелёная, ⏹ — серый */
.att-player { --vp-ink: #3b8212; --vp-on: var(--vp-ink); --vp-off: var(--line-3); gap: .625rem; padding: .4375rem; }
[data-theme="dark"] .att-player { --vp-ink: var(--accent); }
.att-player .vp-b { width: 2.75rem; height: 2.75rem; }
.att-player .vp-b.is-play { width: 3.5rem; height: 3.5rem; }
.att-player .vp-b.is-play .gi { width: 1.5rem; height: 1.5rem; }
.att-player .vp-b .sq { width: 1rem; height: 1rem; border-radius: .25rem; }
.att-player .vp-b.is-del .i { width: 1.5rem; height: 1.5rem; }
.vp-b.is-play { background: #dedee2; color: #505158; }
.vp-b.is-play:hover { background: #ceced4; }
[data-theme="dark"] .vp-b.is-play { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--vp-ink, var(--link)); }
[data-theme="dark"] .vp-b.is-play:hover { background: color-mix(in srgb, var(--accent) 36%, transparent); }
.vp-b.is-stop .sq { background: var(--text-muted); }
.vp-b.is-stop:hover .sq { background: var(--text-sub); }
.vp-b.is-del { color: var(--err); }
.vp-cv { display: block; flex: 1 1 auto; min-width: 0; height: 2rem; cursor: pointer; }
.vp-t { flex: none; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-sub); }
/* вложения: голосовое открывает плеер; фото — миниатюра; файл — значок формата */
.att-thumb { width: 100%; height: 100%; display: block; object-fit: cover; }
.att .ft { width: 2.5rem; height: 2.5rem; color: var(--text-sub); }
/* вложения — списком: каждое отдельной строкой (фото, файл, голосовое-плеер) */
.att-list { --att-row: var(--bg-soft); display: grid; gap: .5rem; }
[data-theme="dark"] .att-list { --att-row: var(--bg-muted); }
.att { display: flex; align-items: center; gap: .875rem; min-width: 0; padding: .4375rem .4375rem .4375rem .4375rem; border-radius: 1.125rem; background: var(--att-row, var(--bg-soft)); font-size: .9375rem; animation: attIn .22s var(--ease-rv) both; }
.modal .att, .fb-att .att { background: var(--att-row, var(--bg-soft)); }
.att-lead { flex: none; width: 3.5rem; height: 3.5rem; border-radius: .75rem; display: grid; place-items: center; overflow: hidden; color: var(--link); }
.att-lead > .i { width: 1.5rem; height: 1.5rem; }
.att-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: .125rem; }
.att-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.att small { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.att-x { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-sub); transition: background-color .15s, color .15s, transform .15s; }
.att-x:active { transform: scale(.92); }
.att-x:hover { background: var(--bg-muted); color: var(--err); }
.att-x .i { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
@keyframes attIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Сервис 24/7 — один блок, как в приложении: иконка, «Круглосуточное обслуживание», 24/7, «Что случилось», кнопка на всю ширину ---------- */
.svc-card { display: grid; gap: 1.5rem; margin-top: 1.375rem; padding: 1.5rem; border-radius: var(--radius-xl); background: var(--bg-soft); }
/* сервис: значок по центру, под ним «Круглосуточное обслуживание» и 24/7 — без лишнего текста */
.svc-hero { display: grid; justify-items: center; text-align: center; }
.svc-ic { width: 7.5rem; height: 7.5rem; border-radius: 1.25rem; display: grid; place-items: center; background: var(--bg); color: var(--text); }
[data-theme="dark"] .svc-ic { background: var(--bg-muted); }
.svc-glyph { width: 3.75rem; height: 3.75rem; overflow: visible; }
.svc-glyph .g-main { stroke: currentColor; }
.svc-glyph .g-acc { stroke: var(--link); }
.svc-hero-t { margin-top: 1.125rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.svc-247 { margin-top: .125rem; font-size: 2rem; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--link); }
.svc-form { display: grid; gap: .875rem; }
.svc-form .btn-primary { height: 3.25rem; font-size: 1.0625rem; transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); }
/* Пустая форма сервиса — мягкая серая кнопка без рамки.
   После ввода или вложения сохраняется обычное активное состояние. */
.svc-form:not(.is-ready) .btn-primary,
.svc-form:not(.is-ready) .btn-primary:hover { background: var(--bg-muted); color: var(--text-muted); border-color: transparent; box-shadow: none; }
.od .att-list { margin-top: .75rem; }

/* ---------- Жалобы и предложения — на всю ширину; строка ввода как в приложении: скрепка · поле · микрофон ⇄ отправить ---------- */
.fb { display: grid; gap: .875rem; }
.fb-note { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; color: var(--err); }
.fb-note .i { width: 1.125rem; height: 1.125rem; flex: none; }
.fb-thread { display: flex; flex-direction: column; gap: .5rem; height: min(62vh, 42rem); min-height: 22rem; max-height: min(62vh, 42rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.5rem; border-radius: var(--radius-xl); background: var(--bg-soft); }
.fb-thread > .msg, .fb-thread > .fb-day { flex-shrink: 0; }
.fb-day { align-self: center; margin: .375rem 0 .125rem; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fb-day span { padding: .1875rem .625rem; border-radius: 999px; background: var(--bg); }
.msg { max-width: min(40rem, 78%); padding: .625rem .875rem .4375rem; border-radius: 1.125rem; font-size: .9375rem; line-height: 1.45; animation: msgIn .32s var(--ease-rv) both; }
@keyframes msgIn { from { opacity: 0; transform: translate3d(0, .375rem, 0); } to { opacity: 1; transform: none; } }
.msg.me { align-self: flex-end; border-bottom-right-radius: .375rem; background: var(--accent-soft); color: var(--text); }
.msg.them { align-self: flex-start; border-bottom-left-radius: .375rem; background: var(--bg); }
.msg-who { display: block; margin-bottom: .125rem; font-size: .8125rem; font-weight: 600; color: var(--link); }
.msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg small { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; margin-top: .125rem; font-size: .6875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.msg-att { display: flex; flex-wrap: wrap; gap: .375rem; margin: .25rem 0 .125rem; }
.msg .att { height: 2rem; background: color-mix(in srgb, var(--text) 6%, transparent); }
.msg .att small, .msg .voice small { display: inline; margin: 0; font-size: .75rem; }
.ticks { display: inline-flex; color: var(--link); }
.ticks .i { width: .8125rem; height: .8125rem; stroke-width: 2.4; }
.ticks .i + .i { margin-left: -.5rem; }
.msg.typing { display: inline-flex; gap: .25rem; padding: .8125rem .875rem; }
.msg.typing i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--text-muted); animation: typing 1s infinite ease-in-out; }
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-.1875rem); } }
.fb-empty { margin: auto; max-width: 22rem; text-align: center; font-size: .9375rem; color: var(--text-muted); }
/* голосовое сообщение */
.voice { display: flex; align-items: center; gap: .625rem; min-width: min(14rem, 60vw); padding: .125rem 0 .25rem; }
.voice-ic { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-on); }
.voice-ic .i { width: 1.125rem; height: 1.125rem; }
.voice-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 1.75rem; color: var(--text-sub); }
.voice-wave i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px; background: currentColor; opacity: .55; }
.voice small { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fb-form { display: flex; align-items: flex-end; gap: .5rem; }
.fb-circle, .fb-send { width: 3.125rem; height: 3.125rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); color: var(--link); transition: background-color .15s, transform .15s; }
.fb-circle:hover { background: var(--bg-muted); }
.fb-circle[aria-expanded="true"] { background: var(--bg-muted); }
.fb-circle:active, .fb-send:active { transform: scale(.94); }
.fb-circle .i { width: 1.5rem; height: 1.5rem; }
.fb-circle[data-action="fb-attach"] { color: var(--text); }
.fb-circle[data-action="fb-attach"] .i { width: 1.375rem; height: 1.375rem; }
.fb-input { flex: 1; min-width: 0; height: 3.125rem; min-height: 3.125rem; max-height: 10rem; padding: .8125rem 1.125rem; border: 0; border-radius: 1.5625rem; background: var(--bg-soft); color: var(--text); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.4; resize: none; outline: none; transition: box-shadow .15s; }
.fb-input::placeholder { color: var(--text-muted); }
.fb-input:focus { box-shadow: 0 0 0 .375px color-mix(in srgb, var(--accent) 50%, transparent); }
.fb-send { background: var(--accent); color: var(--accent-on); }
.fb-send:hover { background: color-mix(in oklab, var(--accent) 88%, var(--text)); }
.fb-send .i { width: 1.5rem; height: 1.5rem; }
.fb-form:not(.has-content) .fb-send, .fb-form.has-content .fb-mic { display: none; }
.fb-form.has-content .fb-send, .fb-form:not(.has-content) .fb-mic { animation: fbSwap .24s var(--ease-rv) both; }
@keyframes fbSwap { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
.pop .pop-item .i { width: 1.25rem; height: 1.25rem; color: var(--link); }

/* ---------- Окна: запись голоса, подтверждение получения, оценка сервиса ---------- */
.rec-body { display: grid; justify-items: center; gap: .625rem; text-align: center; }
.rec-wave { display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 4.5rem; margin: .5rem 0 .25rem; color: var(--link); }
.rec-wave i { width: 4px; height: 100%; border-radius: 3px; background: currentColor; transform: scaleY(.18); animation: recWave 1.05s ease-in-out infinite; }
.rec-wave i:nth-child(2n) { animation-duration: .85s; }
.rec-wave i:nth-child(3n) { animation-duration: 1.25s; animation-delay: -.4s; }
.rec-wave i:nth-child(4n+1) { animation-delay: -.7s; }
.rec-wave i:nth-child(5n) { animation-duration: .95s; animation-delay: -.2s; }
@keyframes recWave { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }
.rec-time { font-size: 2.25rem; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rec-acts { display: grid; gap: .5rem; width: 100%; margin-top: .75rem; }
.rec-modal .modal-head h2 { display: inline-flex; align-items: center; gap: .625rem; }
.rec-modal .modal-head h2::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--err); animation: recPulse 1.1s ease-in-out infinite; }
.modal-acts { display: flex; gap: .5rem; margin-top: .25rem; }
.modal-acts .btn { flex: 1; }
/* «Оценка» — плоский смайлик, как в приложении: плохо — красный, средне — жёлтый, хорошо — зелёный */
.rt { display: inline-grid; justify-items: center; gap: .1875rem; min-width: 1.75rem; vertical-align: middle; }
.rt .stg-art { margin: 0 0 -.25rem; justify-content: center; flex-wrap: nowrap; }
.rt-v { display: inline-flex; }
.rt-face { width: 1.625rem; height: 1.625rem; flex: none; }
.rt-face > circle:first-child { fill: var(--rt-c); }
.rt-face .rt-e { fill: #363633; }
.rt-face .rt-m { fill: none; stroke: #363633; stroke-width: 2.1; }
.rt-face.is-good { --rt-c: #67bd64; }
.rt-face.is-ok { --rt-c: #fcd24f; }
.rt-face.is-bad { --rt-c: #ef6553; }
.textarea:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Статистика: слева кольцо (1:1 с приложением), справа график; «Развернуть график» оставляет только график ---------- */
/* кольцо: две стороны, «Куплено» ⇄ «Оплачено» — переворот 0,6 с (как в приложении) */
/* Кольцевая диаграмма — классическая ровная (как в образце). Цвета сегментов по порядку: светлая тема — лёгкие
   пастельные (заливка ровная), тёмная — сочные градиенты из приложения. --dcN — начало, --dcNb — конец градиента */
:root {
  --dc0: #e36bb5; --dc0b: #e36bb5; --dc1: #a08be3; --dc1b: #a08be3; --dc2: #b49be6; --dc2b: #b49be6;
  --dc3: #6c98de; --dc3b: #6c98de; --dc4: #7fc6f2; --dc4b: #7fc6f2; --dc5: #ef84c3; --dc5b: #ef84c3;
  --dc6: #f7b384; --dc6b: #f7b384; --dc7: #c585cf; --dc7b: #c585cf; --dc8: #86d8ac; --dc8b: #86d8ac;
  --dc9: #b7a1ea; --dc9b: #b7a1ea; --dc10: #a7d5f6; --dc10b: #a7d5f6; --dc11: #f4a9a0; --dc11b: #f4a9a0;
}
[data-theme="dark"] {
  --dc0: #c312a5; --dc0b: #6a0864; --dc1: #9329b4; --dc1b: #4b1266; --dc2: #6b3df1; --dc2b: #311a81;
  --dc3: #2b58c8; --dc3b: #152a6b; --dc4: #009ee0; --dc4b: #004a6e; --dc5: #e12525; --dc5b: #4a0a0a;
  --dc6: #e96125; --dc6b: #9a3018; --dc7: #e8a317; --dc7b: #8a5a06; --dc8: #16b37e; --dc8b: #0a5a40;
  --dc9: #d6337a; --dc9b: #6e0f39; --dc10: #4c63f0; --dc10b: #1f2c86; --dc11: #0fb5b0; --dc11b: #075b58;
}
.donut-flip { width: min(100%, 22.375rem); margin: 1.25rem auto 0; perspective: 62.5rem; }
.donut-in { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.175, .885, .32, 1.275); }
.donut-flip.is-paid .donut-in { transform: rotateY(180deg); }
.donut-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.donut-face.is-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.donut-svg { width: 100%; height: auto; overflow: visible; }
.dn-seg { cursor: pointer; transition: opacity .3s var(--ease); }
.dn-seg:hover { opacity: .8; }
.dn-empty { stroke: color-mix(in srgb, var(--text) 9%, var(--bg-soft)); }
.dn-m { font-size: 32px; font-weight: 700; letter-spacing: .5px; fill: var(--text); }
.dn-y { font-size: 28px; font-weight: 700; letter-spacing: .5px; fill: color-mix(in srgb, var(--text) 42%, var(--bg-soft)); }
.st-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-top: 1.875rem; }
.st-sum button { position: relative; display: grid; justify-items: center; align-content: start; gap: .125rem; height: 3.75rem; color: var(--text-muted); transition: color .16s; }
.st-sum button:hover { color: var(--text-sub); }
.st-sum span { font-size: .875rem; font-weight: 500; }
.st-sum b { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.st-sum button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 5px; background: var(--tab-line); opacity: 0; transition: opacity .16s; }
.st-sum button[aria-selected="true"] { color: var(--text); }
.st-sum button[aria-selected="true"]::after { opacity: 1; }

@media (max-width: 820px) {
  .dt-table.tbl-sticky thead th:first-child { z-index: 3; }
  .dt-scroll { max-height: none; }
  .dt-top { gap: .375rem 1rem; }
  .dt-bar { justify-content: flex-start; margin-left: -.5rem; }
  .dt-head h1 { font-size: 1.625rem; }
  .dt.is-full { padding: .75rem 1rem; }
  /* на телефоне закреплён только первый столбец; номер — последним столбцом, без закрепления */
  .dt-table .is-stick { position: static; box-shadow: none !important; background: none !important; }
  .dt-table > tbody > tr > td:first-child { white-space: normal; max-width: 9.75rem; }
  .dt-table td.doc-t { min-width: 0; }
  .fb-thread { min-height: 16rem; padding: 1rem; }
  #histBal { margin-left: 0; }
}
@media (max-width: 560px) {
  .svc-card { padding: 1.125rem; gap: 1.25rem; }
  .att-btn { flex-direction: column; justify-content: center; gap: .25rem; height: 4rem; padding: 0 .5rem; font-size: .875rem; }
  .att-btn .i { order: 0; width: 1.375rem; height: 1.375rem; }
  .att-btn .lbl { max-width: 100%; }
  /* на телефоне: аудиограмма — во всю ширину панели, под ней точка, таймер, «Пауза», «Стоп» */
  .att-rec { flex-wrap: wrap; height: auto; padding: .5rem .25rem .25rem .75rem; row-gap: .125rem; column-gap: .5rem; }
  .att-rec .rec-cv { order: -1; flex: 1 1 100%; height: 1.75rem; margin-right: .5rem; }
  .att-rec .rec-t { margin-right: auto; font-size: .875rem; }
  .att-btns.is-recording .att-btn { width: 3.5rem; height: auto; }
  .fb-form { gap: .375rem; }
  .fb-circle, .fb-send { width: 2.875rem; height: 2.875rem; }
  .fb-input { height: 2.875rem; min-height: 2.875rem; padding: .6875rem 1rem; }
  .msg { max-width: 90%; }
  .modal-acts { flex-direction: column-reverse; }
  .dt-btn .dt-lbl { display: none; }
  .dt-btn { padding: 0 .5rem; }
  .dt-sel { padding-right: 1.375rem; background-position: right .25rem center; }
}

/* ---------- Вход для сотрудников ---------- */
.staff-hero { display: flex; align-items: flex-start; gap: 1.125rem; margin-top: .875rem; }
.staff-hero .ic { width: 3.5rem; height: 3.5rem; border-radius: 1rem; flex: none; display: grid; place-items: center; background: var(--text); color: var(--bg); }
.depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1.75rem; }
.dept {
  position: relative; display: grid; gap: .625rem; align-content: start; text-align: left;
  padding: 1.125rem; border-radius: 1rem; border: 1px solid var(--line-2); background: var(--bg);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dept:hover { border-color: var(--line-3); transform: translateY(-1px); }
.dept[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.dept .ic { width: 2.625rem; height: 2.625rem; border-radius: .75rem; display: grid; place-items: center; background: var(--bg-muted); color: var(--text); }
.dept[aria-pressed="true"] .ic { background: var(--accent); color: var(--accent-on); }
.dept .ic .i { width: 1.375rem; height: 1.375rem; }
.dept b { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.dept small { font-size: .8125rem; color: var(--text-sub); line-height: 1.4; }
.dept .tick { position: absolute; top: .875rem; right: .875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--text); color: var(--bg); display: none; place-items: center; }
.dept .tick .i { width: .875rem; height: .875rem; stroke-width: 2.6; }
.dept[aria-pressed="true"] .tick { display: grid; }
.staff-go { margin-top: 1.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.375rem 1.5rem; border-radius: 1.125rem; background: var(--bg-soft); }
.staff-go .txt { flex: 1 1 20rem; }
.staff-go .txt b { display: block; font-size: 1.0625rem; font-weight: 600; }
.staff-go .txt small { display: block; color: var(--text-sub); font-size: .9375rem; margin-top: .1875rem; }
.staff-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.staff-note { display: flex; gap: .75rem; padding: 1rem; border-radius: .875rem; background: var(--bg-soft); font-size: .875rem; color: var(--text-sub); line-height: 1.45; }
.staff-note .i { width: 1.25rem; height: 1.25rem; flex: none; color: var(--text); }
.staff-mini .depts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.staff-mini .dept { padding: .75rem; gap: .5rem; grid-template-columns: 2.25rem 1fr; align-items: center; }
.staff-mini .dept .ic { width: 2.25rem; height: 2.25rem; border-radius: .625rem; }
.staff-mini .dept .ic .i { width: 1.1875rem; height: 1.1875rem; }
.staff-mini .dept small { display: none; }
.staff-mini .dept b { font-size: .9375rem; }
.staff-mini .dept .tick { top: 50%; transform: translateY(-50%); right: .625rem; width: 1.125rem; height: 1.125rem; }

/* ---------- Инфо-страницы: меню | текст | «на этой странице» ---------- */
.info { display: grid; grid-template-columns: clamp(14rem, 15vw, 18rem) minmax(0, 1fr) clamp(16rem, 18vw, 22rem); gap: 3.5rem; margin-top: 1.75rem; align-items: start; }
.info-nav { position: sticky; top: 1.5rem; display: grid; gap: 1.375rem; }
.info-nav h3 { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .5rem; }
.info-nav ul { list-style: none; display: grid; gap: 2px; }
.info-nav a { display: block; padding: .4375rem .75rem; border-radius: .5625rem; font-size: .9375rem; color: var(--text-sub); }
.info-nav a:hover { background: var(--bg-hover); color: var(--text); }
.info-nav a[aria-current="page"] { background: var(--bg-muted); color: var(--text); font-weight: 500; }
.info-main { min-width: 0; }
.info-aside { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.toc { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.toc h3, .help-card h3 { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; }
.toc ol { list-style: none; display: grid; gap: .125rem; counter-reset: toc; }
.toc a { display: block; padding: .3125rem 0; font-size: .875rem; color: var(--text-sub); line-height: 1.4; }
.toc a:hover { color: var(--text); }
.help-card { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--bg-soft); display: grid; gap: .625rem; }
.help-card p { font-size: .875rem; color: var(--text-sub); line-height: 1.5; }
.help-card a.hc-line { display: flex; gap: .625rem; align-items: center; font-size: .9375rem; color: var(--text); }
.help-card a.hc-line .i { width: 1.125rem; height: 1.125rem; color: var(--text-muted); }
.help-card .btn { margin-top: .375rem; }
.updated { margin-top: .625rem; font-size: .875rem; color: var(--text-muted); }
.blocks { margin-top: 1.875rem; display: grid; gap: 2.125rem; }
.blk { scroll-margin-top: 1.5rem; }
.blk h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: .875rem; }
.blk p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-2); max-width: 52rem; }
.blk p + p { margin-top: .75rem; }
.blk a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.blk ul.bul { display: grid; gap: .625rem; padding-left: 0; list-style: none; max-width: 52rem; }
.blk ul.bul li { position: relative; padding-left: 1.375rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
.blk ul.bul li::before { content: ""; position: absolute; left: .1875rem; top: .68em; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--accent); }
.blk ol.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .75rem; counter-reset: st; }
.blk ol.steps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .875rem; padding: 1rem; border-radius: .875rem; background: var(--bg-soft); counter-increment: st; }
.blk ol.steps li::before { content: counter(st); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-weight: 600; }
.blk ol.steps b { display: block; font-weight: 600; font-size: 1.0625rem; }
.blk ol.steps span { display: block; margin-top: .1875rem; color: var(--text-sub); line-height: 1.55; }
.blk .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .75rem; }
.blk .cardx { padding: 1.125rem; border-radius: .875rem; background: var(--bg-soft); }
.blk .cardx .ic { width: 2.5rem; height: 2.5rem; border-radius: .6875rem; background: var(--bg); display: grid; place-items: center; margin-bottom: .75rem; }
.blk .cardx .ic .i { width: 1.3125rem; height: 1.3125rem; }
.blk .cardx b { display: block; font-weight: 600; }
.blk .cardx span { display: block; margin-top: .25rem; color: var(--text-sub); font-size: .9375rem; line-height: 1.5; }
.blk .faq { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); gap: .5rem .75rem; align-items: start; }
.blk details { border-radius: .875rem; background: var(--bg-soft); overflow: hidden; }
.blk summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.0625rem 1.125rem; font-weight: 500; font-size: 1.0625rem; }
.blk summary::-webkit-details-marker { display: none; }
.blk summary .i { width: 1.25rem; height: 1.25rem; color: var(--text-muted); transition: transform .2s var(--ease); flex: none; }
.blk details[open] summary .i { transform: rotate(180deg); }
.blk details > div { padding: 0 1.125rem 1.125rem; color: var(--text-sub); line-height: 1.65; font-size: 1rem; }
.blk table.kv { width: 100%; max-width: 60rem; border-collapse: collapse; }
.blk table.kv th, .blk table.kv td { text-align: left; padding: .75rem 0; border-bottom: 1px solid var(--line-2); vertical-align: top; font-size: 1rem; }
.blk table.kv th { font-weight: 400; color: var(--text-sub); width: 40%; padding-right: 1.25rem; }
.blk .note { display: flex; gap: .75rem; padding: 1rem 1.125rem; border-radius: .875rem; background: var(--bg-soft); font-size: .9375rem; line-height: 1.55; color: var(--text-2); max-width: 60rem; }
.blk .note .i { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 1px; color: var(--text); }
.blk .note.warn { box-shadow: inset 3px 0 0 var(--accent); }
.blk .news { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .75rem; }
.blk .news article { padding: 1.25rem; border-radius: .875rem; background: var(--bg-soft); }
.blk .news time { font-size: .8125rem; color: var(--text-muted); }
.blk .news h3 { font-size: 1.125rem; font-weight: 600; margin-top: .25rem; letter-spacing: -.01em; }
.blk .news p { font-size: 1rem; margin-top: .375rem; color: var(--text-sub); }
.blk .jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: .625rem; }
.blk .job { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem 1.125rem; border-radius: .875rem; background: var(--bg-soft); }
.blk .job b { flex: 1 1 16rem; font-weight: 600; }
.blk .job span { font-size: .875rem; color: var(--text-sub); }
.blk .contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .75rem; }
.blk .contacts div { padding: 1.125rem; border-radius: .875rem; background: var(--bg-soft); }
.blk .contacts b { display: block; font-weight: 600; margin-bottom: .375rem; }
.blk .contacts span { display: block; color: var(--text-sub); font-size: .9375rem; line-height: 1.6; }

.sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 2rem; margin-top: 1.875rem; align-items: start; }
.sitemap section.wide { grid-column: span 2; }
.sitemap section.wide ul { display: block; columns: 2 16rem; column-gap: 2rem; }
.sitemap section.wide li { break-inside: avoid; margin-bottom: .5rem; }
.sitemap h2 { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }
.sitemap ul { list-style: none; display: grid; gap: .5rem; }
.sitemap a { color: var(--text-sub); font-size: .9375rem; }
.sitemap a:hover { color: var(--link); }

/* ==========================================================================
   Движение в духе apple.com
   ========================================================================== */
:root { --ease-apple: cubic-bezier(.4, 0, .6, 1); --ease-out: cubic-bezier(.25, .1, .25, 1); --ease-rv: cubic-bezier(.22, 1, .36, 1); }

/* 1. Мягкое проявление слева направо (fade from left): только прозрачность и сдвиг — без маски,
      поэтому ничего не обрезается (широкие фото и тени выходят за карточку) и в конце нет рывка.
      Движение целиком на видеокарте: быстрый старт и долгое мягкое торможение */
.rv { opacity: 0; transform: translate3d(-1rem, 0, 0); }
.rv.rv-in { animation: rvIn .8s var(--ease-rv) both; animation-delay: var(--rv-d, 0ms); }
@keyframes rvIn {
  from { opacity: 0; transform: translate3d(-1rem, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* короткое появление элементов шапки и вкладок при первом заходе */
.intro { opacity: 0; transform: translate3d(-.5rem, 0, 0); }
.intro.intro-in { animation: introIn .7s var(--ease-rv) both; animation-delay: var(--rv-d, 0ms); }
@keyframes introIn { from { opacity: 0; transform: translate3d(-.5rem, 0, 0); } to { opacity: 1; transform: none; } }

/* 2. Фото: <picture> AVIF/WebP. Сначала крошечное размытое превью, затем резкое фото мягко проступает */
.ph { position: relative; display: block; flex: none; aspect-ratio: var(--ar, 1); max-width: 100%; max-height: 100%; }
.ph picture { display: contents; }
.ph img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .55s var(--ease-apple), transform .35s var(--ease); }
.ph.is-loaded img { opacity: 1; }
.lqip { position: absolute; inset: 0; background-position: center; background-size: contain; background-repeat: no-repeat; filter: blur(10px) saturate(1.15); opacity: .9; transition: opacity .55s var(--ease-apple); pointer-events: none; }
.ph.is-loaded .lqip { opacity: 0; }
.ph.is-photo { overflow: hidden; border-radius: .875rem; background: var(--bg-soft); }
.ph.is-photo img { object-fit: cover; }
.ph.is-photo .lqip { background-size: cover; transform: scale(1.12); }
.ph.is-missing { width: 100%; height: 100%; border-radius: .75rem; background: var(--bg-soft); }

/* 3. Вкладки: лента прокручивается, по краям — мягкое затухание и стрелки */
.cats-wrap { z-index: 41; background: var(--bg); }
.cats-scroll { position: relative; max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; }
.cats-arrow { position: absolute; top: .875rem; width: 2rem; height: 2rem; border-radius: 50%; display: none; place-items: center; color: var(--text); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-card); z-index: 2; transition: transform .2s var(--ease); }
.cats-arrow:hover { transform: scale(1.08); }
.cats-arrow .i { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.cats-arrow.prev { left: calc(var(--pad) - 1rem); }
.cats-arrow.next { right: calc(var(--pad) - 1rem); }
.cats-scroll.can-prev .cats-arrow.prev, .cats-scroll.can-next .cats-arrow.next { display: grid; }
.cats-scroll.can-prev .cats { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--pad) + .75rem), #000 calc(var(--pad) + 4rem)); mask-image: linear-gradient(90deg, transparent calc(var(--pad) + .75rem), #000 calc(var(--pad) + 4rem)); }
.cats-scroll.can-next .cats { -webkit-mask-image: linear-gradient(270deg, transparent calc(var(--pad) + .75rem), #000 calc(var(--pad) + 4rem)); mask-image: linear-gradient(270deg, transparent calc(var(--pad) + .75rem), #000 calc(var(--pad) + 4rem)); }
.cats-scroll.can-prev.can-next .cats { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--pad) + .75rem), #000 calc(var(--pad) + 4rem), #000 calc(100% - var(--pad) - 4rem), transparent calc(100% - var(--pad) - .75rem)); mask-image: linear-gradient(90deg, transparent calc(var(--pad) + .75rem), #000 calc(var(--pad) + 4rem), #000 calc(100% - var(--pad) - 4rem), transparent calc(100% - var(--pad) - .75rem)); }
.tab.is-hover { color: var(--text-strong); }
/* на сенсорных экранах стрелок нет — лента листается пальцем, края мягко затухают */
@media (hover: none) {
  .cats-arrow { display: none !important; }
}

/* 4. Панель вкладки (как меню apple.com): раскрывается сверху вниз, пункты появляются каскадом */
.flyout {
  position: absolute; left: 0; right: 0; top: 100%; height: 0; overflow: hidden; visibility: hidden;
  background: var(--bg);
  transition: height .32s var(--ease-apple), visibility .32s step-end;
}
.flyout.is-open { visibility: visible; transition: height .32s var(--ease-apple), visibility .32s step-start; box-shadow: none; }
.flyout.is-closing { transition: height .24s var(--ease-apple) 60ms, visibility .3s step-end; }
.fly-inner { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 3.3fr) minmax(12rem, .85fr); gap: 1rem 4.5rem; padding-top: 2.125rem; padding-bottom: 3rem; align-items: start; }
.fly-col { display: grid; align-content: start; min-width: 0; }
.fly-h { font-size: .75rem; line-height: 1.33; letter-spacing: .01em; color: var(--text-muted); margin-bottom: .875rem; }
.fly-big { display: block; max-width: max-content; padding: .25rem 0; font-size: 1.5rem; line-height: 1.17; font-weight: 600; letter-spacing: .005em; color: var(--text); transition: color .32s var(--ease-apple); }
.fly-big:hover, .fly-big:focus-visible { color: var(--link); }
.fly-note { margin-top: .875rem; font-size: .8125rem; color: var(--text-muted); }
.fly-small { display: block; max-width: max-content; padding: .3125rem 0; font-size: .875rem; font-weight: 600; color: var(--text-2); transition: color .32s var(--ease-apple); }
.fly-small:hover { color: var(--link); }
.fly-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: .375rem 1.25rem; }
.fly-prod { display: flex; align-items: center; gap: 1rem; padding: .5rem .75rem .5rem .375rem; border-radius: .875rem; min-width: 0; transition: background-color .25s var(--ease-apple); }
.fly-prod:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.fly-prod .fp-img { width: 4.25rem; height: 4.25rem; flex: none; display: flex; align-items: center; justify-content: center; }
.fly-prod .fp-img .ph { width: 100%; height: 100%; }
.fly-prod .fp-img .ph img { filter: drop-shadow(0 4px 6px rgba(20, 24, 40, .14)); }
.fly-prod b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.fly-prod small { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--text-sub); }
.fly-cats { list-style: none; columns: 3 14rem; column-gap: 2.5rem; }
.fly-cats li { break-inside: avoid; }
.fly-cats a { display: block; max-width: max-content; padding: .3125rem 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 600; color: var(--text); transition: color .32s var(--ease-apple); }
.fly-cats a:hover { color: var(--link); }
.fly-cats small { margin-left: .4375rem; font-size: .75rem; font-weight: 500; color: var(--text-muted); }
.fly-item { opacity: 0; transform: translateY(-.5rem); transition: opacity .32s var(--ease-apple), transform .32s var(--ease-apple); transition-delay: calc(var(--fi, 0) * 20ms + (var(--fg, 0) + 1) * 80ms); }
.flyout.is-shown .fly-item { opacity: 1; transform: none; }
.flyout.is-closing .fly-item { transition-delay: 0s; transition-duration: .16s; }
.curtain {
  position: fixed; inset: 0; z-index: 30; visibility: hidden; opacity: 0;
  background: color-mix(in srgb, color-mix(in srgb, var(--bg-muted) 88%, white) 42%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: opacity .32s var(--ease-apple) 80ms, visibility .32s step-end 80ms;
}
.curtain.is-on { visibility: visible; opacity: 1; transition: opacity .32s var(--ease-apple) 80ms, visibility .32s step-start 80ms; }
@media (max-width: 1240px) {
  .fly-inner { grid-template-columns: minmax(13rem, 1fr) minmax(0, 3fr); gap: 1rem 3rem; }
  .fly-side { display: none; }
}
@media (hover: none), (max-width: 820px) {
  .flyout, .curtain { display: none !important; }
}

/* 5. Подгруппы категории (КТ · МРТ, стерильные · нестерильные …) — чипсы над сеткой */
.subtabs { display: flex; gap: 1.5rem; flex-wrap: wrap; padding-top: 1.5rem; }
.subtab { position: relative; display: inline-flex; align-items: center; gap: .5rem; height: 2.375rem; padding: 0 0 .375rem; font-size: .9375rem; color: var(--text-sub); background: transparent; transition: color .2s; }
.subtab:hover { color: var(--text-strong); }
.subtab[aria-current="page"] { color: var(--text-strong); font-weight: 500; }
.subtab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); }

/* ==========================================================================
   Оверлеи: модалка, выезжающая панель, тосты, cookie
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: 90; background: var(--overlay); animation: fadeIn .2s var(--ease); }
.scrim.closing { animation: fadeOut .2s var(--ease) forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(27.5rem, 100vw);
  background: var(--bg-elev); box-shadow: var(--shadow-pop); display: flex; flex-direction: column;
  animation: slideIn .28s var(--ease);
}
.drawer.left { right: auto; left: 0; animation-name: slideInL; }
.drawer.closing { animation: slideOut .22s var(--ease) forwards; }
.drawer.left.closing { animation-name: slideOutL; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slideOut { to { transform: translateX(100%); } }
@keyframes slideInL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slideOutL { to { transform: translateX(-100%); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.375rem 1.5rem 1.125rem; }
.drawer-head h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.drawer-head .logo { top: 0; }
.drawer-head .logo-svg { height: 2.480575rem; }
.icon-btn { width: 2.5rem; height: 2.5rem; border-radius: .625rem; display: grid; place-items: center; color: var(--text-sub); flex: none; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.drawer-body { flex: 1; overflow: auto; padding: .5rem 1.5rem 1.5rem; }
.drawer-foot { padding: 1rem 1.5rem 1.375rem; display: grid; gap: .625rem; box-shadow: 0 -1px 0 var(--line-2); }
.set-sec { padding: 1.25rem 0; }
.set-sec + .set-sec { box-shadow: 0 -1px 0 var(--line); }
.set-sec h3 { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .875rem; }
.set-row { display: grid; gap: .625rem; }
.set-row + .set-row { margin-top: 1.125rem; }
.set-row > label, .set-row > .lbl { font-size: .9375rem; font-weight: 500; }
.set-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.set-line + .set-line { margin-top: .875rem; }
.set-line span { font-size: .9375rem; }
.set-line small { display: block; color: var(--text-muted); font-size: .8125rem; margin-top: 2px; }
.set-saved { font-size: .8125rem; text-align: center; }
.theme-prev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.theme-card { display: grid; gap: .5rem; justify-items: center; font-size: .875rem; font-weight: 500; color: var(--text-sub); }
.theme-card .tp { width: 100%; aspect-ratio: 1.45; border-radius: .75rem; border: 2px solid var(--line-2); overflow: hidden; position: relative; transition: border-color .15s; }
.theme-card[aria-pressed="true"] { color: var(--text); }
.theme-card[aria-pressed="true"] .tp { border-color: var(--text); }
.tp.light { background: #fff; } .tp.dark { background: #0f1110; }
.tp.sys { background: linear-gradient(135deg, #fff 50%, #0f1110 50%); }
.tp i { position: absolute; left: 10%; height: 7%; border-radius: 4px; }
.tp i:nth-child(1) { top: 16%; width: 30%; }
.tp i:nth-child(2) { top: 36%; width: 58%; }
.tp i:nth-child(3) { top: 52%; width: 44%; }
.tp i:nth-child(4) { top: 72%; width: 24%; background: #a2e024 !important; }
.tp.light i { background: #e3e5ea; } .tp.dark i { background: #2c2f2e; }
.tp.dark i:nth-child(4) { background: #ecfa61 !important; }
.tp.sys i { background: #9a9ca3; opacity: .55; }

.modal-wrap { position: fixed; inset: 0; z-index: 91; display: grid; place-items: center; padding: 1.5rem; overflow: auto; }
.modal {
  position: relative; width: min(35rem, 100%); max-height: calc(100vh - 3rem); overflow: auto;
  background: var(--bg-elev); border-radius: 1.375rem; box-shadow: var(--shadow-pop); animation: modalIn .26s var(--ease);
}
.modal.closing { animation: modalOut .18s var(--ease) forwards; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.375rem 1.5rem 0; }
.modal-head h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.modal-body { padding: 1.125rem 1.5rem 1.625rem; }
.auth-tabs { margin-top: 2px; }
.auth-lead { color: var(--text-sub); font-size: .9375rem; margin-top: 1rem; }
.auth-form { display: grid; gap: .875rem; margin-top: 1.125rem; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .9375rem; }
.auth-alt { text-align: center; font-size: .9375rem; color: var(--text-sub); margin-top: .25rem; }
.demo-note { display: flex; gap: .625rem; align-items: center; font-size: .8125rem; color: var(--text-muted); padding: .625rem .75rem; border-radius: .625rem; background: var(--bg-soft); }
.demo-note .i { width: 1rem; height: 1rem; flex: none; }
/* Вход по телефону: номер → код из SMS (3 ячейки) */
.auth-step { animation: stepIn .32s var(--ease-rv); }
@keyframes stepIn { from { opacity: 0; transform: translate3d(.75rem, 0, 0); } to { opacity: 1; transform: none; } }
.input-lg { height: 3.25rem; font-size: 1.1875rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.auth-agree { font-size: .8125rem; line-height: 1.45; color: var(--text-muted); }
.auth-lead b { white-space: nowrap; }
.auth-agree a { color: var(--text-strong); }
.otp { display: flex; gap: .75rem; justify-content: center; margin: .5rem 0 0; }
.otp-cell {
  width: 3.5rem; height: 4rem; border-radius: .875rem; border: 1px solid var(--line-2); background: var(--bg);
  text-align: center; font-size: 1.75rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
  caret-color: var(--link); transition: border-color .15s, box-shadow .15s;
}
.otp-cell:focus { outline: none; border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.otp.is-bad .otp-cell { border-color: var(--err); }
.otp.is-bad { animation: shake .42s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-.375rem); } 40%, 80% { transform: translateX(.375rem); } }
.otp-err { min-height: 1.25rem; text-align: center; font-size: .875rem; color: var(--err); }

/* Меню «Профиль» в шапке (при наведении) */
.pmenu { width: 20rem; padding: .625rem; border: 0; }
.pmenu.closing { animation: fadeOut .16s var(--ease) forwards; }
.pm-head { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .75rem; }
.pm-head b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.pm-head small { display: block; font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pm-ava { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-on); font-size: .875rem; font-weight: 700; }
.pm-debt { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .125rem .75rem; margin: 0 .25rem .5rem; padding: .75rem .875rem; border-radius: .875rem; background: var(--bg-soft); transition: background-color .15s; }
.pm-debt:hover { background: var(--bg-muted); }
.pm-debt span { font-size: .8125rem; color: var(--text-sub); }
.pm-debt b { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-debt small { grid-column: 1 / -1; font-size: .75rem; color: var(--text-muted); }
.pm-list { display: grid; gap: 1px; }
.pm-list a, .pm-out { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5625rem .625rem; border-radius: .625rem; font-size: .9375rem; color: var(--text-2); text-align: left; transition: background-color .15s; }
.pm-list a:hover, .pm-out:hover { background: var(--bg-hover); }
.pm-list .i, .pm-out .i { width: 1.25rem; height: 1.25rem; color: var(--link); stroke-width: 1.8; flex: none; }
.pm-list span { flex: 1; }
.pm-badge { font-style: normal; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--badge); color: #fff; font-size: .75rem; font-weight: 600; display: grid; place-items: center; }
.pm-out { margin-top: .375rem; box-shadow: 0 -1px 0 var(--line); border-radius: 0 0 .625rem .625rem; color: var(--err); }
.pm-out .i { color: var(--err); }

.staff-cta { margin-top: 1rem; display: grid; gap: .625rem; }
.staff-cta small { font-size: .8125rem; color: var(--text-muted); display: flex; gap: .5rem; align-items: flex-start; line-height: 1.45; }
.staff-cta small .i { width: 1rem; height: 1rem; flex: none; margin-top: 1px; }

.toasts { position: fixed; z-index: 120; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: grid; gap: .625rem; justify-items: center; pointer-events: none; width: min(35rem, calc(100vw - 2rem)); }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .75rem .75rem .75rem 1rem; border-radius: .875rem; background: var(--text); color: var(--bg);
  box-shadow: var(--shadow-pop); font-size: .9375rem; animation: toastIn .28s var(--ease);
}
.toast.closing { animation: toastOut .22s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }
.toast .ti { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; flex: none; }
.toast .ti .i { width: 1rem; height: 1rem; stroke-width: 2.6; }
.toast .tt { flex: 1; min-width: 0; line-height: 1.35; }
.toast .ta { flex: none; height: 2.125rem; padding: 0 .75rem; border-radius: .5625rem; font-weight: 600; font-size: .875rem; color: var(--bg); background: color-mix(in srgb, var(--bg) 16%, transparent); white-space: nowrap; }
.toast .ta:hover { background: color-mix(in srgb, var(--bg) 26%, transparent); }

.cookie {
  position: fixed; z-index: 110; left: 1.5rem; bottom: 1.5rem; width: min(27.5rem, calc(100vw - 2rem));
  padding: 1.25rem; border-radius: 1.125rem; background: var(--bg-elev); box-shadow: var(--shadow-pop);
  animation: toastIn .35s var(--ease);
}
.cookie p { font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.cookie a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.cookie .row { display: flex; gap: .625rem; margin-top: .875rem; flex-wrap: wrap; }
.cookie .btn { flex: 1 1 8.75rem; height: 2.625rem; }

.noscript { padding: 2.5rem; text-align: center; }

/* Мобильное меню */
.mnav { display: grid; gap: .25rem; padding-top: .5rem; }
.mnav a, .mnav button { display: flex; align-items: center; gap: .875rem; width: 100%; padding: .8125rem .625rem; border-radius: .75rem; font-size: 1.0625rem; text-align: left; }
.mnav a:hover, .mnav button:hover { background: var(--bg-hover); }
.mnav .i { width: 1.375rem; height: 1.375rem; color: var(--text-sub); }
.mnav .val { margin-left: auto; color: var(--text-muted); font-size: .9375rem; }
.mnav .pm-badge { margin-left: .25rem; }
.mnav .mlang { padding: .25rem .625rem .5rem; }
.mnav hr { border: 0; height: 1px; background: var(--line-2); margin: .5rem 0; }

/* ==========================================================================
   Адаптив: от телефона до 27" и 4K. Шире 1672 px блок не растёт (только плавно
   масштабируется от 1800 px), по бокам остаётся свободное поле
   ========================================================================== */
@media (max-width: 1399px) {
  .info { grid-template-columns: clamp(13rem, 18vw, 16rem) minmax(0, 1fr); }
  .info-aside { display: none; }
}
@media (max-width: 1240px) {
  .hdr-right .hbtn + .hbtn { margin-left: 2.25rem; }
  .hsearch { margin-left: 2rem; }
  .pdp { gap: 2.5rem; }
}
@media (max-width: 1100px) {
  :root { --card-min: 20.5rem; }
}
@media (max-width: 1080px) {
  .hbtn .lbl { display: none; }
  .hdr-right .hbtn + .hbtn { margin-left: 1.625rem; }
  .pdp { grid-template-columns: 1fr; grid-template-areas: "gallery" "info" "buy"; }
  .gallery { position: static; max-width: 45rem; }
  .stage { max-height: none; }
  .two-col, .two-col.is-even { grid-template-columns: 1fr; gap: 2rem; }
  .summary { position: static; }
  .info { grid-template-columns: 1fr; gap: 1.5rem; }
  .info-nav { position: static; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
  .info-nav::-webkit-scrollbar { display: none; }
  .info-nav > div { display: contents; }
  .info-nav h3 { display: none; }
  .info-nav ul { display: flex; gap: .375rem; }
  .info-nav a { white-space: nowrap; background: var(--bg-soft); border-radius: 999px; padding: .4375rem .875rem; }
  .ft-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-top .ft-brand { grid-column: 1 / -1; }
  .staff-notes { grid-template-columns: 1fr; }
  .sitemap section.wide { grid-column: auto; }
}
@media (max-width: 1000px) {
  .depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  /* кабинет: разделы — лентой над содержимым */
  .pf { grid-template-columns: 1fr; gap: 1.25rem; }
  .pf-side { position: static; display: grid; gap: .25rem; padding: .5rem; }
  .pf-acc { padding: .5rem; }
  .pf-nav { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .125rem; }
  .pf-nav::-webkit-scrollbar { display: none; }
  .pf-nav a, .pf-out { flex: none; width: auto; white-space: nowrap; padding: .5rem .75rem; }
  .pf-out { margin-top: 0; }
  .od-grid, .ct-grid { grid-template-columns: 1fr; }
  /* раскрытый заказ в прокручиваемой таблице — по ширине видимой части, не уезжает вбок */
  .tbl tr.od-row .od { position: sticky; left: 1rem; width: calc(var(--cw, 100vw) - 2 * var(--pad) - 2rem); }
}
@media (max-width: 820px) {
  .hdr { height: 4.75rem; padding-top: 0; }
  .logo { top: 0; }
  .logo-svg { height: 2.350018rem; }
  .settings-btn, .lang-btn, .login-btn { display: none; }
  .hdr-left { flex: 1; min-width: 0; }
  .hsearch { margin-left: auto; }
  .hsearch::before { display: none; }
  /* на телефоне поле поиска раскрывается поверх шапки */
  .hsearch.is-open { position: absolute; left: var(--pad); right: var(--pad); top: 0; bottom: 0; height: auto; margin: 0; z-index: 5; background: var(--bg); }
  .hsearch.is-open::after { content: ""; position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); top: 0; bottom: 0; background: var(--bg); z-index: -1; }
  .hsearch.is-open .hsearch-field { flex: 1; width: auto; }
  .hsearch.is-open .hsearch-clear { display: grid; }
  .hdr-right { margin-left: .5rem; }
  .cart-btn { gap: 0; }
  .cart-ico .i { width: 2.125rem; height: 2.125rem; }
  .cart-badge { top: -.4375rem; right: -.5625rem; min-width: 1.25rem; height: 1.25rem; font-size: .75rem; padding: 0 .3125rem; }
  .hdr-right .hbtn.menu-btn { display: inline-flex; margin-left: 1rem; }
  .menu-btn .i { width: 1.75rem; height: 1.75rem; }
  .cats { justify-content: flex-start; gap: 1.75rem; }
  .tab { padding: .875rem 0 1.375rem; font-size: 1rem; }
  .tab.is-active::after { top: 2.875rem; }
  .grid { row-gap: 2.125rem; }
  .form-grid { grid-template-columns: 1fr; }
  .page-title, .pdp-title { font-size: 1.75rem; }
  .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; padding-top: 2.75rem; }
  .ft-top .ft-contacts { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .line { grid-template-columns: 5.25rem minmax(0, 1fr); gap: .75rem 1rem; }
  .line-img { width: 5.25rem; height: 5.25rem; }
  .line-side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .625rem; }
  .line-price { display: none; }
  .line-remove span { display: none; }
  .line-remove .i { width: 1.25rem; height: 1.25rem; }
  .gallery { grid-template-columns: 1fr; }
  .thumbs { grid-auto-flow: column; justify-content: start; order: 2; height: auto; min-height: 0; overflow-x: auto; overflow-y: hidden; }
  .thumb { width: 4.25rem; height: 4.25rem; }
  .toasts { bottom: 1rem; }
  .cookie { left: 1rem; bottom: 1rem; }
  .summary { padding: 1.25rem; }
}
@media (max-width: 820px) {
  .pf-title h1 { font-size: 1.625rem; }
  .ct-duties { grid-template-columns: 1fr; }
  .tl { grid-auto-flow: row; gap: .875rem; }
  .tl li { padding: 0 0 0 1.5rem; }
  .tl li i { top: .3125rem; }
  .tl li::before { top: 1.25rem; left: .3125rem; right: auto; bottom: -.875rem; width: 2px; height: auto; }
  .ev { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; padding: .875rem 1rem; }
  .ev-ic { width: 2.25rem; height: 2.25rem; }
  .ev-meta { grid-column: 2; grid-auto-flow: column; justify-content: start; gap: .75rem; }
  .news-card { grid-template-columns: 5rem minmax(0, 1fr); }
  .news-img { width: 5rem; height: 5rem; }
  /* широкие таблицы: первая колонка закреплена, остальное листается (как в приложении) */
  .tbl-sticky > * > tr > :first-child:not([colspan]) { position: sticky; left: 0; z-index: 1; background: var(--tbl-bg); box-shadow: inset -1px 0 0 var(--line-2); }
  .tbl-sticky tbody tr.is-hl > :first-child:not([colspan]) { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--tbl-bg); }
  .tbl-sticky tbody tr:is(.is-pending, .lg-order, .lg-pay) > :first-child:not([colspan]) { background: linear-gradient(color-mix(in srgb, var(--tint) 7%, transparent), color-mix(in srgb, var(--tint) 7%, transparent)), var(--tbl-bg); }
}
@media (max-width: 560px) {
  .depts { grid-template-columns: 1fr; }
  .modal.okv { padding: 1rem 1.25rem 1.25rem; }
  .fb-thread { padding: .875rem; }
  .msg { max-width: 90%; }
  .ev-meta { display: flex; flex-wrap: wrap; gap: .125rem .75rem; }
  .ft-top { grid-template-columns: 1fr; }
  .pager { gap: .5rem; }
  .buy-row .btn { flex-basis: 100%; }
  .keyspecs dl { grid-template-columns: 1fr; }
}

/* ---------- Меньше анимации ---------- */
[data-motion="reduce"] .rv, [data-motion="reduce"] .intro { opacity: 1 !important; transform: none !important; animation: none !important; }
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .rv, .intro { opacity: 1 !important; transform: none !important; animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Печать ---------- */
@media print {
  .site-header, .cats-wrap, .site-footer, .toasts, .cookie, .card-buy, .dots, .buy-row, .summary .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Статистика — вкладки «Диаграмма · График» (по образцу): месяц «‹ Сентябрь 2026 ›», период 7 дней · 30 дней · 12 месяцев
   ========================================================================== */
.st3 { --st-ord: #3b8cf5; --st-ord2: #1c5fd4; --st-paid: #62c53c; --st-paid2: #37981f; }
[data-theme="dark"] .st3 { --st-ord: #4a9bff; --st-ord2: #1f5fd2; --st-paid: #86e05a; --st-paid2: #3f9f26; }
.st3-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 2rem; }
.st3-tabs { min-height: 0; gap: 1.75rem; overflow: visible; }
.st3-tabs .tabx { font-size: 1.1875rem; font-weight: 600; }
.st3-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 3.5rem; margin-left: auto; }
.st3-month { display: inline-flex; align-items: center; gap: 1.25rem; }
.st3-month b { min-width: 9.5rem; text-align: center; font-size: 1rem; font-weight: 500; }
.st3-mb { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .5rem; color: var(--text-sub); transition: color .15s, background-color .15s; }
.st3-mb:hover { color: var(--text); background: var(--bg-soft); }
.st3-mb .i { width: 1.125rem; height: 1.125rem; stroke-width: 1.9; }
.st3-mb.is-off { opacity: .28; }
.st3-per { min-height: 0; gap: 2rem; overflow: visible; }
/* «Диаграмма»: кольцо и «Куплено / Оплачено» слева, доли справа */
.st3-dia { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); gap: 2rem 3rem; align-items: start; margin-top: 2.25rem; }
.st3-dn .donut-flip { width: min(100%, 17.25rem); margin: 0 auto; }
.st3 .st-sum { margin-top: 1.75rem; gap: 1.5rem; }
.st3 .st-sum button { justify-self: start; justify-items: start; height: auto; padding-bottom: .625rem; }
.st3 .st-sum span { font-size: .8125rem; font-weight: 400; color: var(--text-muted); }
.st3 .st-sum b { font-size: 1.0625rem; font-weight: 600; color: var(--text-sub); }
.st3 .st-sum button[aria-selected="true"] b { color: var(--text); }
.st3 .st-sum button::after { height: 2px; background: var(--st-paid); }
.sl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); column-gap: 3rem; align-content: start; }
.sl-i { display: grid; grid-template-columns: .625rem minmax(0, 12rem) 4ch; justify-content: end; align-items: center; column-gap: .625rem; padding: .625rem 0; }
.sl-i > i { width: .625rem; height: .625rem; border-radius: 50%; }
.sl-t { display: grid; gap: .0625rem; min-width: 0; font-size: .875rem; line-height: 1.35; }
.sl-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); transition: color .15s; }
.sl-n:hover { color: var(--link); }
.sl-t b { font-weight: 400; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.sl-i small { text-align: right; font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sl-list .empty { grid-column: 1 / -1; padding: 2rem .5rem; }
/* «График»: показатели, легенда, столбцы, «По дням» */
.st3-chart { margin-top: 2rem; }
.sm-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm { display: grid; align-content: start; gap: .4375rem; min-width: 0; padding: .125rem 1.75rem; box-shadow: inset 1px 0 0 var(--line-2); }
.sm:first-child { padding-left: 0; box-shadow: none; }
.sm-l { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--text-sub); }
.sm-l i, .bc-lg i { width: .625rem; height: .625rem; flex: none; border-radius: 50%; }
.sm-l i.is-ord, .bc-lg i.is-ord { background: var(--st-ord); }
.sm-l i.is-paid, .bc-lg i.is-paid { background: var(--st-paid); }
.sm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sm b.is-neg { color: var(--err); }
.sm b.is-pos { color: var(--st-paid); }
.sm-d { display: inline-flex; align-items: center; gap: .3125rem; font-size: .8125rem; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sm-d.is-good { color: var(--st-paid); }
.sm-d.is-bad { color: var(--err); }
.sm-a { width: .875rem; height: .875rem; flex: none; }
.bc-lg { display: flex; justify-content: flex-end; gap: 1.75rem; margin-top: 2rem; font-size: .8125rem; color: var(--text-sub); }
.bc-lg span { display: inline-flex; align-items: center; gap: .5rem; }
.bc { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: .75rem; margin-top: .875rem; }
.bc-y { position: relative; }
.bc-y span { position: absolute; right: 0; transform: translateY(50%); font-size: .75rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bc-plot { position: relative; height: 15.5rem; }
.bc-grid i { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-2); }
.bc-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.bc-g { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: max(2px, 7%); }
.bc-g.is-l::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: color-mix(in srgb, var(--line-2) 55%, transparent); }
.bc-b { position: relative; width: min(24%, .875rem); border-radius: 3px 3px 0 0; transform-origin: 50% 100%; transition: opacity .15s; animation: bcGrow .7s var(--ease-rv) both; animation-delay: calc(var(--d) * 14ms); }
.bc-b.is-ord { background: linear-gradient(180deg, var(--st-ord), var(--st-ord2)); }
.bc-b.is-paid { background: linear-gradient(180deg, var(--st-paid), var(--st-paid2)); }
@keyframes bcGrow { from { transform: scaleY(0); } }
.bc-plot.is-hover .bc-g:not(.is-hot) .bc-b { opacity: .42; }
.bc-tip { position: absolute; top: 0; z-index: 3; display: grid; gap: .1875rem; padding: .625rem .75rem; border-radius: .75rem; background: var(--bg-elev); box-shadow: var(--shadow-pop); font-size: .8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(1rem); pointer-events: none; }
.bc-tip.is-left { transform: translateX(calc(-100% - 1rem)); }
.bc-tip b { font-weight: 600; }
.bc-tip span { display: inline-flex; align-items: center; gap: .5rem; }
.bc-tip .is-ord::before, .bc-tip .is-paid::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--st-ord); }
.bc-tip .is-paid::before { background: var(--st-paid); }
.bc-x { grid-column: 2; display: flex; margin-top: .625rem; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bc-x span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.st3-days { margin-top: 2.5rem; }
.dt-table th.c, .dt-table td.c { text-align: center; }
@media (max-width: 1100px) {
  .st3-dia { grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem 2.5rem; }
  .sm { padding: .125rem 1rem; }
  .sm b { font-size: 1.1875rem; }
}
@media (max-width: 860px) {
  .st3-dia { grid-template-columns: minmax(0, 1fr); }
  .st3-dn { width: 100%; max-width: 21rem; margin: 0 auto; }
  .sm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .sm:nth-child(3) { padding-left: 0; box-shadow: none; }
  .st3-ctl { width: 100%; margin-left: 0; justify-content: space-between; gap: .75rem 1.5rem; }
}
@media (max-width: 560px) {
  .st3-tabs .tabx { font-size: 1.0625rem; }
  .bc { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .5rem; }
  .bc-plot { height: 12.5rem; }
  .bc-x span:nth-child(4n+3) { visibility: hidden; }
  .sm b { font-size: 1.0625rem; }
}

/* ==========================================================================
   Без фоновых блоков. Таблицы — в обеих темах (заказы, сервис, история, контакты, документы, статистика…):
   фон таблицы — фон страницы, линии остаются; в светлой теме зелёные надписи и значки в таблицах темнее
   (#3b8212 вместо #62b224 — читаются на белом). Большой блок «Сервиса» — без подложки в обеих темах (подложка у значка
   и у поля «Что случилось» остаётся); «События» и «Новости» в уведомлениях, «Правила» — без подложек в обеих темах.
   Вернуть подложки как было — удалить этот блок целиком (или только нужные строки).
   ========================================================================== */
:root { --tbl-bg: var(--bg); --tbl-card: var(--bg-soft); }
[data-theme="light"] .tbl-wrap { --link: #3b8212; }
/* «Сервис» в светлой теме: без большого блока; значок — на сером (бывший цвет блока), поле «Что случилось» — серое,
   «Аудио · Фото · Файл» — белые (инверсия) */
[data-theme="light"] .svc-card { background: none; padding-left: 0; padding-right: 0; }
[data-theme="light"] .svc-ic { background: var(--bg-soft); }
[data-theme="light"] .svc-form .cmt-card { --cmt-bg: var(--bg-soft); --att-bg: var(--bg); --att-hover: var(--bg-muted); }
/* Уведомления: «События» и «Новости» — без подложек в обеих темах (и у фото новостей) */
.ev-list { background: none; }
.news-grid { gap: 1.75rem 2.5rem; }
.news-card { padding: 0; background: none; }
.news-img { background: none; }
/* «Правила» — пункты без подложек, между ними тонкие линии; номер — в сером кружке */
.rules { gap: 0; }
.rules li { padding: 1rem 0 1rem 2.75rem; border-radius: 0; background: none; }
.rules li + li { box-shadow: inset 0 1px 0 var(--line-2); }
.rules li::before { left: 0; background: var(--bg-soft); }
[data-theme="dark"] .rules li::before { background: var(--bg-muted); }
/* «Что случилось» в сервисе — без зелёной обводки при вводе (красная при ошибке остаётся) */
.svc-form .field:not(.has-error) .cmt-card:focus-within { box-shadow: none; }
[data-theme="dark"] .svc-card { background: none; padding-left: 0; padding-right: 0; }

/* Контейнер страницы получает фокус после навигации, но не является контролом. */
#main:focus { outline: none; }

/* Фокус вкладок без обрезанной рамки по краям прокручиваемой ленты. */
.tab:focus-visible, .tabx:focus-visible, .ptab:focus-visible, .subtab:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

.lang-options { gap: .25rem; }
.selector-pop .lang-options .pop-item[aria-selected="true"] { background: color-mix(in srgb, var(--line-2) 29.155%, var(--bg-elev)); color: var(--text); font-weight: 600; }
.selector-pop .lang-options .pop-item[aria-selected="true"]:hover,
.selector-pop .lang-options .pop-item[aria-selected="true"]:focus-visible { background: color-mix(in srgb, var(--line-3) 29.155%, var(--bg-elev)); }
.lang-options .flag { width: 1.5rem; height: 1.5rem; }

.pdp-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; font-variant-numeric: tabular-nums; }
.pdp-total > span { color: var(--text-sub); font-size: .9375rem; }
.pdp-total > b { color: var(--text); font-size: 1.25rem; font-weight: 500; }

/* Отметка выбранного языка: залитый круг и чёрная галочка. */
.lang-options .pop-item .i-check {
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  padding: .1875rem;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  stroke-width: 2.5;
}

.empty .orders-empty-title { color: var(--err); }

/* Объёмные пустые состояния: единая композиция без фоновой панели. */
.dt-body > .empty-illustrated { align-content: center; gap: 1.25rem; padding: 2.5rem 1rem 3rem; }
.empty-illustrated .empty-art { width: clamp(10rem, 19vw, 15rem); height: auto; aspect-ratio: 1; object-fit: contain; }
.dt-body > .empty-illustrated .empty-title { color: var(--err); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; line-height: 1.3; }
@media (max-height: 650px) { .dt.is-full .empty-illustrated .empty-art { width: 8rem; } .dt.is-full .dt-body > .empty-illustrated { gap: .75rem; padding: 1rem; overflow-y: auto; } }

/* События в навигации: красные значок и подпись, простой счётчик справа. */
.pf-nav a.has-notices, .pm-list a.has-notices,
.pf-nav a.has-notices .i, .pm-list a.has-notices .i { color: var(--err); }
.pf-nav .pm-badge, .pm-list .pm-badge {
  margin-left: auto;
  min-width: 1.25rem;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* Общий сценарий вложений сервиса и обратной связи. */
.fb-form { flex-wrap: wrap; }
.fb-form > .fb-att { flex: 0 0 100%; }
.fb-form > .att-rec { flex: 0 0 100%; order: 2; background: var(--bg-soft); }
.fb-form.is-recording .fb-send { display: none; }
.fb-form.is-recording .fb-input { flex-basis: calc(100% - 4rem); }
.msg:has(.msg-files) { width: min(34rem, 100%); max-width: 100%; }
.msg-files { margin-top: .375rem; }
.msg .msg-files .att { height: auto; min-height: 3.5rem; }
.msg-files .att-player { width: 100%; }
.msg-files .vp-cv { min-width: 0; }
.contact-messengers { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.contact-messengers a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--text-sub); transition: background-color .15s, transform .15s; }
.contact-messengers a:hover { background: var(--bg-hover); }
.contact-messengers a:active { transform: scale(.94); }
.contact-messengers .i { width: 1.5rem; height: 1.5rem; }
.contact-messengers .contact-whatsapp { color: #25d366; }
.contact-telegram-mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #2aabee; color: #fff; }
.contact-telegram-mark .i { width: 1.125rem; height: 1.125rem; }
.contact-messengers .contact-call { color: var(--text-sub); }

/* Отправленное аудио: одна подложка сообщения, без вложенной карточки. */
.msg .msg-files .att-player { background: transparent; border: 0; box-shadow: none; padding: .25rem 0; border-radius: 0; --vp-on: #3b6640; --vp-off: #8a968a; }
.msg .att-player .vp-t { color: var(--text-sub); }
[data-theme="dark"] .msg .att-player { --vp-on: #d1e58e; --vp-off: #768264; }
[data-theme="dark"] .msg .att-player .vp-b.is-play { background: rgba(255, 255, 255, .12); color: var(--text); }
[data-theme="dark"] .msg .att-player .vp-b.is-play:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 480px) {
  .msg .att-player { gap: .375rem; }
  .msg .att-player .vp-b.is-play { width: 2.75rem; height: 2.75rem; }
  .msg .att-player .vp-b.is-stop { width: 2rem; height: 2rem; }
  .msg .att-player .vp-t { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .fb-form > .att-rec { animation: none; } }

/* Селекторы языка и периода: фон вместо рамок, включая фокус клавиатуры. */
.selector-pop { border: 0; box-shadow: 0 12px 36px rgba(0, 0, 0, .16); }
.selector-pop .pop-item { border: 0; box-shadow: none; }
.selector-pop .pop-item[aria-selected="true"] { background: var(--bg-muted); color: var(--text); font-weight: 600; }
.selector-pop .pop-item:hover, .selector-pop .pop-item:focus-visible { background: var(--bg-hover); outline: none; }
.lang-btn, .lang-btn:focus-visible, .dt-sel, .dt-sel:focus-visible { border: 0; outline: none; box-shadow: none; }
.lang-btn[aria-expanded="true"], .lang-btn:focus-visible, .dt-sel[aria-expanded="true"], .dt-sel:focus-visible { background-color: var(--bg-muted); }
.lang-tile, .lang-tile[aria-checked="true"], .lang-tile:focus-visible { border: 0; box-shadow: none; outline: none; }
.lang-tile[aria-checked="true"], .lang-tile:focus-visible { background: var(--bg-muted); }

/* Папка документов на 15% компактнее остальных иллюстраций. */
.dt[data-dt="docs"] .empty-illustrated .empty-art { width: clamp(8.5rem, 16.15vw, 12.75rem); }
@media (max-height: 650px) {
  .dt[data-dt="docs"].is-full .empty-illustrated .empty-art { width: 6.8rem; }
}

/* Минималистичный вход: телефон как в профиле, только необходимое. */
.auth-scrim { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(15, 18, 20, .24); animation-duration: .16s; }
[data-theme="dark"] .auth-scrim { background: rgba(0, 0, 0, .38); }
.auth-minimal { animation-duration: .16s; }
.auth-sr-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.auth-head { width: 100%; }
.auth-close { display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 3.5rem; padding: 0 1.25rem; color: #e68d9c; border-radius: 1.25rem 1.25rem 0 0; }
.auth-close .i { width: 1.375rem; height: 1.375rem; }
.auth-close:hover { color: #ef6e88; background: color-mix(in srgb, #e68d9c 6%, transparent); }
.auth-close:focus-visible { outline: none; background: color-mix(in srgb, #e68d9c 12%, transparent); }
.auth-minimal .auth-lead { text-align: center; margin-top: 0; text-wrap: balance; }
.auth-minimal .auth-step { animation-duration: .16s; }
.auth-minimal .auth-form { gap: 1.25rem; margin-top: 1.5rem; }
.auth-phone-field .pro-in { height: 3rem; font-size: 1.6335rem; font-variant-numeric: tabular-nums; }
.auth-phone-field .pro-tel-in > .pro-in { padding-left: calc(3.25rem + .25em); }
.auth-phone-field .pro-in, .auth-phone-field .pro-in:hover, .auth-phone-field .pro-in:focus, .auth-phone-field .pro-fld.has-err > .pro-line > .pro-in { border: 0; box-shadow: none; }
.auth-phone-field .pro-cc .cc-chev { display: none; }
.auth-phone-field .pro-cc { height: 3rem; width: 2.25rem; justify-content: center; padding: 0; }
.auth-phone-field .pro-cc .flag { width: 1.92599859375rem; height: 1.92599859375rem; }
.auth-minimal .auth-get-code { border: 1px solid var(--line-3); border-radius: .75rem; background: transparent; color: var(--link); box-shadow: none; opacity: 1; transition: background-color .16s, color .16s, border-radius .16s; }
.auth-minimal .auth-get-code:disabled { cursor: default; }
.auth-minimal .auth-get-code:not(:disabled) { border-color: var(--accent); background: var(--accent); color: var(--accent-on); border-radius: .75rem; }
.auth-minimal .auth-get-code:not(:disabled):hover { filter: brightness(.96); }
.auth-minimal .auth-agree { text-align: center; }
.auth-country-pop { z-index: 100; max-width: calc(100vw - 24px); }
@media (prefers-reduced-motion: reduce) {
  .auth-scrim, .auth-minimal, .auth-minimal .auth-step { animation: none; }
  .auth-minimal .auth-get-code { transition: none; }
}

/* Альтернативные способы входа — фирменный цвет и логотип сервиса. */
.auth-providers { display: grid; gap: .875rem; }
.auth-minimal .auth-provider { gap: .75rem; border: 0; border-radius: .75rem; color: #fff; font-weight: 500; box-shadow: none; transition: filter .15s, transform .15s; }
.auth-minimal .auth-provider.is-telegram { background: #229ed9; }
.auth-minimal .auth-provider.is-whatsapp { background: #128c4a; }
.auth-provider .i { width: 1.5rem; height: 1.5rem; flex: none; }
.auth-minimal .auth-provider:hover { filter: brightness(1.08); }
.auth-minimal .auth-provider:active { transform: scale(.985); }
.auth-minimal .auth-provider:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .auth-minimal .auth-provider { transition: none; } }

/* Шесть ячеек кода: тонкий контур без зелёной подсветки. */
.auth-minimal .otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.375rem, 1.8vw, .75rem); }
.auth-minimal .otp-cell { width: 100%; min-width: 0; height: auto; aspect-ratio: 1; padding: 0; border: .5px solid var(--line-3); border-radius: 28%; background: transparent; box-shadow: none; caret-color: var(--text); font-size: clamp(1.125rem, 4vw, 1.75rem); }
.auth-minimal .otp-cell:focus { border-color: var(--text-sub); box-shadow: none; outline: none; }
.auth-minimal .otp.is-bad .otp-cell { border-color: var(--err); box-shadow: none; }

/* Акценты входа: номер и ссылки ярче поясняющего текста. */
.auth-minimal .auth-agree { color: color-mix(in srgb, var(--text-muted) 65%, transparent); }
.auth-minimal .auth-agree a { color: var(--text-strong); font-size: 1.08em; font-weight: 600; }
.auth-minimal .auth-code-lead { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.auth-minimal .auth-code-lead b { color: var(--text-strong); font-size: 1.7015625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.auth-minimal .auth-alt { font-size: 1.125rem; }
.auth-countdown { display: block; margin-top: .75rem; text-align: center; font-size: 1.7054296875rem; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="dark"] .auth-minimal .auth-agree a { color: #fff; }

.auth-minimal .auth-code-lead .auth-sent-phone { display: block; margin-top: 1.4rem; margin-bottom: .5rem; }

/* Горизонтальный указатель после кода страны; без перерисовки JavaScript. */
.auth-phone-caret { position: absolute; left: calc(3.25rem + .25em); top: 0; height: 3rem; display: none; align-items: center; white-space: pre; pointer-events: none; color: transparent; font: inherit; font-size: 1.6335rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.auth-phone-caret::after { content: ""; width: .5em; height: 1px; background: var(--text); align-self: center; transform: translateY(.4em); animation: caretBlink 1.05s steps(1) infinite; }
.auth-phone-field .pro-in:focus ~ .auth-phone-caret:not(.has-selection) { display: inline-flex; }
.auth-phone-field .pro-in { caret-color: transparent; }
@media (prefers-reduced-motion: reduce) { .auth-phone-caret::after { animation: none; } }

.auth-phone-field .pro-tel-in { overflow: hidden; }
.auth-phone-caret::after { flex: none; }

.auth-back { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.auth-back .i { width: 1rem; height: 1rem; flex: none; }
.auth-minimal #otpResend { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }

/* Единая розовая зона закрытия по всей ширине шапки поверхностного окна. */
.modal-head, .drawer-head { position: relative; isolation: isolate; }
.modal-head > :not(button[data-action="close"]), .drawer-head > :not(button[data-action="close"]) { position: relative; z-index: 1; }
.modal-head > h2, .drawer-head > h2 { pointer-events: none; }
.modal-head button[data-action="close"], .drawer-head button[data-action="close"] { color: #e68d9c; background: transparent; }
.modal-head > button[data-action="close"], .drawer-head > button[data-action="close"] { position: static; }
.modal-head > button[data-action="close"]::before, .drawer-head > button[data-action="close"]::before { content: ""; position: absolute; inset: 0; z-index: 0; cursor: pointer; }
.modal-head button[data-action="close"]:hover, .drawer-head button[data-action="close"]:hover { color: #ef6e88; }
.modal-head button[data-action="close"] .i, .drawer-head button[data-action="close"] .i { position: relative; z-index: 2; }
.okv .okv-x { top: 0; left: 0; right: 0; width: 100%; height: 3.5rem; display: flex; justify-content: flex-end; padding: 0 1.25rem; color: #e68d9c; background: transparent; }
.okv .okv-x:hover { color: #ef6e88; background: color-mix(in srgb, #e68d9c 6%, transparent); }
.okv-actions .btn-primary, .okv-actions .btn-primary:focus-visible { border: 0; box-shadow: none; outline: none; background: var(--accent); }
.okv-actions .btn-primary:focus-visible { filter: brightness(.9); }

.cart-empty { gap: 1.25rem; }
.cart-empty .empty-title { color: var(--err); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; line-height: 1.3; }

.cart-empty > .btn { width: min(100%, 22rem); }

/* Временный вариант галереи без миниатюр.
   Для возврата прежнего вида удалить только эти два правила:
   исходная разметка миниатюр и обработчики сохранены. */
.pdp .gallery { grid-template-columns: minmax(0, 1fr); }
.pdp .gallery > .thumbs { display: none; }

/* Правая часть карточки: единая шкала цен и выровненные действия. */
.pdp-info .vchip { font-size: 1.32rem; }
.pdp-info a.vchip { font-size: 1.2375rem; }
.pdp-buy .buybox > .price, .pdp-buy .pdp-total > b { font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.pdp-buy .pdp-total { margin-top: 1.25rem; }
.pdp-buy .buy-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: center; width: min(100%, 22rem); margin-top: 3.75rem; }
.pdp-buy .buy-row > .stepper { justify-self: center; grid-column: 1; grid-row: 1; width: min(100%, 13.8375rem); height: 3.25rem; grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem; }
.pdp-buy .buy-row > [data-action="pdp-add"] { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; height: 3.25rem; padding-inline: .75rem; }
.pdp-buy-now { grid-column: 1; grid-row: 3; display: inline-flex; justify-content: center; align-items: center; gap: .5rem; width: 100%; min-height: 2.75rem; padding: .375rem 0; border: 0; background: transparent; color: var(--text-muted); font-size: .9375rem; font-weight: 500; text-align: center; }
.pdp-buy-now .i { width: 1.125rem; height: 1.125rem; flex: none; }
.pdp-buy-now { border-radius: .625rem; background: var(--bg-muted); color: var(--text-muted); transition: background-color .15s, color .15s; }
@media (hover: hover) {
  .pdp-buy-now:hover:not(:disabled) { color: var(--link); background: color-mix(in oklab, var(--bg-muted) 85%, var(--text)); }
}
.pdp-buy-now:disabled { opacity: .6; cursor: default; }

/* Единица продажи и итог: подписи слева, суммы в общей колонке. */
/* Поднимаем обе строки на 36px, сохраняя положение пикера и кнопок. */
.pdp-price-summary { position: relative; top: -2.25rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 1.25rem 1rem; }
.pdp-buy .pdp-price-summary > .price, .pdp-buy .pdp-price-summary > .pdp-total { display: contents; }
.pdp-price-summary .price > small, .pdp-price-summary .pdp-total > span { font-size: .9375rem; font-weight: 400; color: var(--text-sub); letter-spacing: 0; text-align: left; }
.pdp-price-summary .price > b, .pdp-price-summary .pdp-total > b { font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; text-align: left; }

/* Пробный минималистичный пикер в карточке товара.
   Для возврата прежнего вида удалить этот блок; исходные стили сохранены. */
.pdp-buy .stepper { border-color: transparent; background: transparent; box-shadow: none; }
.pdp-buy .stepper button,
.pdp-buy .stepper button:hover,
.pdp-buy .stepper button:disabled { color: var(--accent); background: transparent; border: 0; box-shadow: none; }
.pdp-buy .stepper button { border-radius: .625rem; }
@media (hover: hover) {
  .pdp-buy .stepper button:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 6%, transparent); }
}
.pdp-buy .stepper button:disabled { opacity: .45; }
.pdp-buy .stepper input,
.pdp-buy .stepper input:focus { background: transparent; box-shadow: none; }

/* Горизонтальный курсор количества; нативное выделение текста сохраняется. */
.pdp-buy .stepper { position: relative; }
.pdp-buy .stepper input { caret-color: transparent; }
.qty-caret-mirror { position: absolute; top: 0; height: 100%; display: none; align-content: center; text-align: center; white-space: pre; pointer-events: none; color: transparent; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pdp-buy .stepper input:focus ~ .qty-caret-mirror:not(.has-selection) { display: block; }
.qty-caret-mark { position: relative; }
.qty-caret-mark::after { content: ""; position: absolute; left: 0; bottom: 0; width: .45em; height: 1px; background: var(--text); animation: caretBlink 1.05s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .qty-caret-mark::after { animation: none; } }

/* Плюс и минус карточки: ещё +5% к размеру и толщине штриха. */
.pdp-buy .stepper button .i { width: 2.9106rem; height: 2.9106rem; stroke-width: 3.49272; }

/* Количество — тот же размер цифр, что у цены и итога. */
.pdp-buy .stepper input,
.pdp-buy .qty-caret-mirror { font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }

/* Исходящие сообщения: нейтральная палитра темы, зелёные отметки доставки. */
.msg.me { --msg-bg: var(--bg-muted); --msg-ink: var(--text); --msg-muted: var(--text-sub); --msg-play: var(--line-3); --msg-play-hover: var(--dot); background: var(--msg-bg); color: var(--msg-ink); }
[data-theme="dark"] .msg.me { --msg-bg: var(--bg-hover); }
.msg.me small, .msg.me .msg-who, .msg.me .att .ft, .msg.me .att-player .vp-t { color: var(--msg-muted); }
.msg.me .ticks { color: var(--link); }
.msg.me .att { color: var(--msg-ink); }
.msg.me .msg-files .att-player { --vp-on: var(--text); --vp-off: var(--text-muted); }
.msg.me .att-player .vp-b.is-play, .msg.me .voice-ic { background: var(--msg-play); color: var(--msg-ink); }
.msg.me .att-player .vp-b.is-play:hover, .msg.me .voice-ic:hover { background: var(--msg-play-hover); }
.msg.me .vp-b.is-stop .sq { background: var(--msg-muted); }
.msg.me .voice-wave { color: var(--msg-muted); }

/* Второстепенное действие корзины — как «Оформить сразу». */
.cart-continue { color: var(--text-muted); }
@media (hover: hover) {
  .cart-continue:hover { color: var(--link); }
}

/* Компактный выбор месяца статистики. */
.st-month-pick { color: var(--text); font-weight: 600; padding: .375rem .625rem; border: 0; border-radius: .625rem; background: transparent; }
.st-month-pick:hover, .st-month-pick[aria-expanded="true"] { background: var(--bg-muted); }
.st-calendar { width: min(19rem, calc(100vw - 3rem)); padding: .375rem; }
.st-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; }
.st-calendar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.st-calendar-grid .pop-item { justify-content: center; padding: .625rem .25rem; font-size: .8125rem; border: 0; border-radius: .625rem; }
.st-calendar-grid .pop-item[aria-pressed="true"] { background: var(--bg-muted); color: var(--text-strong); font-weight: 600; }
.st-calendar button:disabled { opacity: .3; cursor: default; }

/* Таблицы профиля: без линии между шапкой и данными. */
[data-dt="service"] .dt-table thead th,
[data-dt="history"] .dt-table thead th,
[data-dt="docs"] .dt-table thead th,
[data-dt="statdays"] .dt-table thead th { box-shadow: none; }
.contact-messengers .contact-brand-icon { display: block; width: 1.95rem; height: 1.95rem; object-fit: contain; }
.contact-messengers .contact-whatsapp .contact-brand-icon { width: 2.145rem; height: 2.145rem; }
.contact-messengers .contact-whatsapp { position: relative; left: 0; }

.ledger-doc { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-sub); background: transparent; border: 0; padding: .25rem 0; text-align: left; font: inherit; cursor: pointer; }
.ledger-doc:hover { color: var(--text); }
.ledger-doc > .i { width: 1.5rem; height: 1.5rem; flex: none; color: var(--link); }

/* Дата — основной акцент, время — второстепенная информация. */
.profile-datetime { white-space: nowrap; font-variant-numeric: tabular-nums; }
.profile-datetime .profile-date { font-weight: 600; color: var(--text-strong); }
.profile-datetime .profile-time { font-weight: 400; color: var(--text-muted); }

/* Документы: подпись без точки, дата и время на двух строках. */
[data-dt="docs"] .sgn::before { display: none; }
.doc-sign { display: inline-flex; align-items: baseline; white-space: pre; color: var(--text-sub); }
.doc-datetime .profile-datetime { display: inline-grid; grid-template-columns: max-content; row-gap: .1875rem; }
.doc-datetime .profile-date, .doc-datetime .profile-time { font-size: .9375rem; }
.doc-datetime .profile-time { display: block; }
.doc-download { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; margin: -.375rem 0; padding: 0; border: 0; border-radius: .625rem; background: transparent; color: var(--link); }
.doc-cell .doc-download .i { width: 1.75rem; height: 1.75rem; margin: 0; }
.doc-download:hover { background: var(--bg-muted); }

/* Shared product hierarchy in both statistics views. */
.st3-products { display: grid; gap: .125rem; margin-top: 1.25rem; min-width: 0; }

/* One product name per group, variants aligned within the same table cell. */
/* Shared track width keeps variants on one axis across all records, not per group.
   Table overflow handles narrow screens without changing this alignment. */
.ln-list > .ln-group { display: grid; grid-template-columns: 13.5rem max-content; column-gap: 2ch; align-items: start; }
.ln-group > .ln-title { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* One blank text line between products; variants retain their compact spacing. */
.ln-list > .ln-group + .ln-group { margin-top: calc(1lh - .1875rem); }
.ln-variants { display: grid; gap: .1875rem; }

/* Responsible person: same emphasis hierarchy as date and time. */
.responsible-person { display: grid; gap: .25rem; align-content: start; }
.responsible-person > b { color: var(--text-strong); font-weight: 600; }
.responsible-person > .responsible-phone { color: var(--text-muted); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.responsible-phone:hover { text-decoration: underline; }

.operation-system { display: inline-flex; align-items: flex-start; gap: .5rem; }
.operation-system > svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .125rem; color: var(--text-muted); }
.operation-system > span { display: grid; gap: .25rem; }
.operation-system b { font-weight: 600; color: var(--text-strong); }
.operation-system small { font-size: inherit; font-weight: 400; color: var(--text-muted); white-space: nowrap; }

.operation-source-button { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; border-radius: .375rem; }
.operation-source-button img { display: block; width: 1.75rem; height: 1.75rem; }
.operation-source-button:hover { background: var(--bg-muted); }
.operation-details { width: min(22rem, calc(100vw - 3rem)); padding: .75rem; }
.operation-details > b { color: var(--text-strong); font-weight: 600; }
.operation-details dl { display: grid; gap: .875rem; margin: 1rem 0 0; }
.operation-details dt { color: var(--text-muted); font-size: .8125rem; }
.operation-details dd { margin: .25rem 0 0; overflow-wrap: anywhere; color: var(--text); font-size: .875rem; }

/* Footer brand assets follow the Uzum reference; no extra button tiles. */
.footer-platforms { display: inline-grid; width: max-content; max-width: 100%; margin-top: 1.375rem; }
/* Five evenly spaced brand icons, aligned with the app links below. */
.ft-brand .footer-platforms .socials { justify-content: space-between; width: 100%; min-width: 0; max-width: 100%; gap: .6rem; flex-wrap: wrap; margin-top: 0; }
.ft-brand .socials a, .ft-brand .socials img { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.footer-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.footer-apps a { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; color: var(--text); font-size: 1.17rem; font-weight: 500; white-space: nowrap; }
.footer-apps img { width: 2.16rem; height: 2.16rem; display: block; }
.footer-apps a:hover { opacity: .8; }
.footer-app-apple { filter: brightness(0); }
[data-theme="dark"] .footer-app-apple { filter: none; }

/* Seven languages fit settings and mobile navigation without horizontal overflow. */
.language-seg { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.language-seg button { white-space: normal; min-height: 2.375rem; height: auto; padding-block: .5rem; }
.mlang .seg { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lang-options { max-height: min(28rem, 75vh); overflow-y: auto; }

/* Per-stage device and confirmation evidence shares the attachment row. */
.stg-device img { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.stage-auth-detail { display: flex; align-items: center; gap: .75rem; padding: .5rem; }
.stage-auth-detail > .i { width: 1.5rem; height: 1.5rem; flex: none; color: var(--link); }
.stage-auth-detail small { display: block; color: var(--text-muted); margin-top: .375rem; }

/* Shared table edge navigation. */
.dt .dt-x { padding: 0; }
.dt .table-edge { position: absolute; z-index: 4; top: var(--edge-top, 3rem); bottom: .625rem; width: 2.695rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; opacity: 0; color: var(--text-sub); cursor: pointer; transition: opacity .18s ease; background: linear-gradient(to right, color-mix(in srgb, var(--text) 12%, transparent), transparent); }
.dt .table-edge.is-left { left: 0; }
.dt .table-edge.is-right { right: calc(var(--stick, 0px) + .625rem); background: linear-gradient(to left, color-mix(in srgb, var(--text) 12%, transparent), transparent); }
.dt .table-edge:hover:not(:disabled), .dt .table-edge:focus-visible { opacity: 1; }
.dt .table-edge:focus-visible { outline: 1px solid var(--text-muted); outline-offset: -1px; }
.dt .table-edge:disabled { pointer-events: none; }
.dt .table-edge .i { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .dt .table-edge { transition: none; } }
@media (hover: none) { .dt .table-edge { display: none; } }

.stage-map-pop { width: min(24rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); border: 0; }
.stage-map-head, .stage-map-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stage-map-head { width: 100%; min-height: 2.75rem; justify-content: flex-end; padding: .5rem; border: 0; background: transparent; color: var(--err); border-radius: .5rem; cursor: pointer; }
.stage-map-head:hover { background: var(--bg-hover); }
.stage-map-head:focus-visible { outline: 1px solid var(--text-muted); }
.stage-map iframe { display: block; width: 100%; height: 14rem; border: 0; border-radius: .75rem; margin-block: .75rem; background: var(--bg-muted); }
.stage-map-foot { font-size: .75rem; color: var(--text-muted); flex-wrap: wrap; }
.stage-map-foot a { color: var(--text); }

/* Hairline row dividers stop at the rounded cutouts instead of crossing them. */
.dt-table { --row-separator-inset: .45rem; }
.dt-table.tbl-orders { --row-separator-inset: .75rem; }
.dt-table > tbody > tr > td { position: relative; border-top-color: transparent; }
.dt-table > tbody > tr > td::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .25px; background: color-mix(in srgb, var(--line-2) 50%, transparent); pointer-events: none; }
.dt-table > tbody > tr > td:first-child::before { left: var(--row-separator-inset); }
.dt-table > tbody > tr > td:last-child::before { right: var(--row-separator-inset); }
.dt-table > tbody > tr:first-child > td::before, .dt-table > tbody > tr.od-row > td::before { content: none; }


/* Measure column filters at their final width before anchoring them. */
.pop.dt-colpop.dt-anchored { position: fixed; width: min(22rem, calc(100vw - 1.5rem)); min-width: 0; max-height: calc(100dvh - 1.5rem); display: flex; flex-direction: column; overflow: hidden; }
.dt-anchored .pop-list { min-height: 0; flex: 1 1 auto; }
.dt-anchored .pop-title, .dt-anchored .hf-hint, .dt-anchored .pop-foot { flex: none; }
.dt-anchored .grow { min-width: 0; overflow-wrap: anywhere; }

.order-rating { display:flex; flex-wrap:wrap; gap:.5rem; }
.order-rating .rt-face { width:2rem; height:2rem; flex-shrink:0; }

.order-decision { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; width:100%; }
.order-decision-btn { min-height:3.25rem; width:100%; padding:.75rem; white-space:normal; border:0; background:var(--bg-muted); color:var(--text-muted); box-shadow:none; transition:background-color .15s,color .15s; }
.order-decision-btn:hover, .order-decision-btn:focus-visible { background:var(--accent); color:var(--on-accent, #151810); }
.order-decision-btn.is-reject:hover, .order-decision-btn.is-reject:focus-visible { background:color-mix(in srgb,var(--err) 12%,var(--bg)); color:var(--err); }
.order-action-form .order-rating { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.625rem; margin-bottom:.625rem; }
.order-action-form .order-rating .order-rating-btn { justify-content:center; padding:0; background:transparent; box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text) 22%,transparent); }
.order-action-form .order-rating .order-rating-btn[aria-pressed="true"] { background:transparent; box-shadow:inset 0 0 0 .5px var(--rating-color); }
.order-action-form h2 { margin:0 0 .5rem; text-align:center; color:var(--text-muted); font-size:1.125rem; font-weight:400; }
@media(max-width:480px) { .order-decision { grid-template-columns:1fr; } }


/* Selected rating follows the face; refusal stays a restrained secondary action. */
.order-rating-btn[data-v="bad"] { --rating-color: #ef6553; }
.order-rating-btn[data-v="ok"] { --rating-color: #fcd24f; }
.order-rating-btn[data-v="good"] { --rating-color: #67bd64; }
.order-action-form[data-mode="reject"].is-ready > .btn-primary:not(:disabled) {
  color: var(--err);
  background: color-mix(in srgb, var(--err) 8%, transparent);
  border: 0;
  box-shadow: none;
}
.order-action-form[data-mode="reject"].is-ready > .btn-primary:not(:disabled):hover,
.order-action-form[data-mode="reject"].is-ready > .btn-primary:not(:disabled):focus-visible {
  color: var(--err);
  background: color-mix(in srgb, var(--err) 14%, transparent);
  box-shadow: none;
}

/* One continuous rounded hairline around refused/cancelled orders. */
.dt-table.tbl-orders > tbody > tr.is-refused > td::before { display:none; }
.dt-table.tbl-orders > tbody > tr.is-refused > td::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  border-top:3px solid color-mix(in srgb,var(--err) 42%,transparent);
  border-bottom:3px solid color-mix(in srgb,var(--err) 42%,transparent);
}
.dt-table.tbl-orders > tbody > tr.is-refused > td:first-child::after {
  border-left:3px solid color-mix(in srgb,var(--err) 42%,transparent);
  border-radius:1.25rem 0 0 1.25rem;
}
.dt-table.tbl-orders > tbody > tr.is-refused > td:last-child::after {
  border-right:3px solid color-mix(in srgb,var(--err) 42%,transparent);
  border-radius:0 1.25rem 1.25rem 0;
}
.dt-table.tbl-orders > tbody > tr.is-refused > td:only-child::after { border-radius:1.25rem; }

.dt-btn[data-action="dt-period-reset"] .i { width:1.375rem; height:1.375rem; }

/* Expanded order summary: quiet dividers and full-width reorder action. */
.od-side .kvl > div:not(:last-child) {
  border-bottom: .25px solid color-mix(in srgb, var(--line-2) 35%, transparent);
}
.od-acts > [data-action="pf-reorder"] { width:100%; flex:0 0 100%; }

/* Cart-only quiet separators. */
.cart-page .lines, .cart-page .sum-total { border-top: .25px solid color-mix(in srgb, var(--line-2) 38%, transparent); }
.cart-page .line { border-bottom: .25px solid color-mix(in srgb, var(--line-2) 38%, transparent); }

/* Cart: full-width product grid, followed by a quiet full-width summary. */
.cart-layout { --cart-number-size:clamp(1.5rem, 2.5vw, 2rem); display:grid; grid-template-columns:minmax(0,1fr); gap:1.75rem; }
.cart-layout > section, .cart-layout > .summary { min-width:0; }
.cart-layout .cart-head { justify-content:flex-end; }
.cart-layout .lines { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 3rem; border-top:0; margin-top:1rem; }
.cart-layout .line { grid-template-columns:6rem minmax(0,1fr) auto; gap:1rem; border-bottom:0; padding:1rem 0; }
.cart-layout .line-img { width:6rem; height:7rem; }
.cart-layout .line-name { font-size:1.0625rem; }
.cart-layout .line-side { gap:.875rem; }
.cart-layout .summary { --cart-action-gap:.625rem; position:static; padding:1.75rem 0 0; background:transparent; border-radius:0; border-top:.25px solid color-mix(in srgb,var(--line-2) 38%,transparent); }
.cart-layout .sum-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cart-action-gap); }
.cart-layout .sum-actions .btn { width:100%; min-height:3.25rem; }
.cart-layout .stepper { border:0; background:transparent; width:9rem; height:3rem; grid-template-columns:2.5rem minmax(0,1fr) 2.5rem; }
.cart-layout .stepper button { color:var(--link); border:0; border-radius:.625rem; width:146.41%; height:146.41%; justify-self:center; align-self:center; }
.cart-layout .stepper button:disabled { opacity:.4; }
.cart-layout .stepper button .i { width:1.925rem; height:1.925rem; }
.cart-layout .stepper input { font-size:var(--cart-number-size); font-weight:600; background:transparent; }
@media(max-width:1100px) {
 .cart-layout .lines { grid-template-columns:minmax(0,1fr); gap:1rem; }
 .cart-layout .line { grid-template-columns:7rem minmax(0,1fr) auto; }
}
@media(max-width:560px) {
 .cart-layout .line { grid-template-columns:4.5rem minmax(0,1fr); gap:.75rem 1rem; }
 .cart-layout .line-img { width:4.5rem; height:5.5rem; }
 .cart-layout .line-side { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
 .cart-layout .sum-actions { grid-template-columns:minmax(0,1fr); }
}

/* Summary values share the checkout button's right edge. */
.cart-layout .sum-rows, .cart-layout .sum-total { width:calc((100% - var(--cart-action-gap)) / 2); }
.cart-layout #sumTotal { font-size:var(--cart-number-size); font-weight:600; line-height:1.25; text-align:right; overflow-wrap:anywhere; min-width:0; }
.cart-layout .sum-total { gap:1rem; }
@media(max-width:560px) {
 .cart-layout .sum-rows, .cart-layout .sum-total { width:100%; }
}

/* Compact cart groups while preserving the outer edges of the two columns. */
@media(min-width:1101px) {
 .cart-layout .line { grid-template-columns:6rem minmax(0,1fr) auto; width:calc(100% - clamp(3.1rem, 9.3vw, 9.3rem)); }
 .cart-layout .line:nth-child(odd) { justify-self:start; }
 .cart-layout .line:nth-child(even) { justify-self:end; }
}

.cart-layout .stepper button:active:not(:disabled) { background:color-mix(in srgb,var(--text) 12%,transparent); }

/* Product quantity: shared total typography, raised picker, larger hit targets. */
.pdp-buy { --pdp-number-size:1.875rem; }
.pdp-buy .pdp-price-summary .pdp-total > b,
.pdp-buy .stepper input,
.pdp-buy .qty-caret-mirror { font-size:var(--pdp-number-size); }
.pdp-buy .buy-row > .stepper { top:-.5rem; }
.pdp-buy .stepper button { width:110%; height:110%; justify-self:center; align-self:center; }
.pdp-buy .stepper button:active:not(:disabled) { background:color-mix(in srgb,var(--text) 12%,transparent); }

/* Center each variant label over its underline; keep the variant group on the shared left axis. */
.pdp-info .vchip { text-align:center; }
.pdp-info a.vchip { justify-content:center; }

/* Product back control, above the left edge of the photo. */
.page-back-row { margin-top:1rem; display:flex; }
.page-back { display:grid; place-items:center; width:2.75rem; height:2.75rem; margin-left:-.75rem; border:0; border-radius:.625rem; color:var(--text-muted); background:transparent; transition:background-color .15s,color .15s; }
.page-back .i { width:1.5rem; height:1.5rem; }
.page-back:hover, .page-back:focus-visible { color:var(--text); background:var(--bg-muted); }
.page-back-row + .pdp { margin-top:.5rem; }

.page-back-row { margin-bottom:1rem; }
.page-back-row + .pdp { margin-top:.5rem; }


/* One compact hover target for the photo and product description. */
.cart-layout .line-product { grid-column:1 / 3; display:grid; grid-template-columns:6rem minmax(0,1fr); gap:1rem; align-items:center; justify-self:start; width:fit-content; max-width:calc(100% + 1rem); min-width:0; padding:.5rem; margin:-.5rem; border-radius:.625rem; color:inherit; text-decoration:none; transition:background-color .12s; }
.cart-layout .line-product .line-info { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.cart-layout .line-product:hover, .cart-layout .line-product:focus-visible { background:var(--bg-hover); }
.cart-layout .line-product:focus-visible { outline:1px solid var(--text-muted); outline-offset:2px; }
@media(min-width:561px) and (max-width:1100px) {
 .cart-layout .line-product { grid-template-columns:7rem minmax(0,1fr); }
}
@media(max-width:560px) {
 .cart-layout .line-product { grid-template-columns:4.5rem minmax(0,1fr); }
}

/* Theme menu follows the language selector. */
.theme-menu { gap:.375rem; }
.theme-menu .chev { width:.875rem; height:.875rem; color:var(--text-muted); }

.hbtn.theme-menu > .i:not(.chev) { width:1.875rem; height:1.875rem; }
.pop .theme-options .pop-item .i:not(.i-check) { color:var(--text); }

/* Light theme: stronger existing accents without changing their colors. */
[data-theme="light"] .tab.is-active::after,
[data-theme="light"] .tabx::after,
[data-theme="light"] .subtab[aria-current="page"]::after,
[data-theme="light"] .ptab[aria-selected="true"]::after,
[data-theme="light"] .vchip::after,
[data-theme="light"] .hsearch-field::after,
[data-theme="light"] .dt-search-in::after,
[data-theme="light"] .dt-search:focus-within .dt-search-in::after,
[data-theme="light"] .st-sum button::after { height:2px; }
[data-theme="light"] .qb .i { stroke-width:2.4; }
[data-theme="light"] .stepper button .i { stroke-width:2; }
[data-theme="light"] .pdp-buy .stepper button .i { stroke-width:4.2; }
[data-theme="light"] .qcart {
  width:2.25rem; height:2.25rem; border-radius:.625rem;
  color:var(--accent-on); background:var(--accent);
  transition:background-color .15s;
}
[data-theme="light"] .qcart .i { stroke-width:2.2; }
[data-theme="light"] .qcart:hover,
[data-theme="light"] .qcart:focus-visible { background:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }

[data-theme="light"] .cart-layout .stepper button,
[data-theme="light"] .cart-layout .stepper button:hover { color:var(--accent); }
[data-theme="light"] .cart-layout .stepper button .i { stroke-width:3; }

/* Brand lime cart icon before adding a catalog product. */
[data-theme="light"] .qbar[data-action="card-add"] { padding-left:.125rem; gap:.5rem; }
[data-theme="light"] .qbar[data-action="card-add"] > .i {
  box-sizing:border-box; width:2.25rem; height:2.25rem; padding:.3125rem;
  color:#102006; background:var(--accent); border-radius:50%; stroke-width:2.2;
}
[data-theme="light"] .qcart { color:#102006; }


/* Empty picker is available on hover in both themes. */
.card-empty-picker { display:flex; align-items:center; gap:.625rem; opacity:0; visibility:hidden; transition:opacity .18s,visibility .18s; }
.card:hover .card-empty-picker,
.card:has(:focus-visible) .card-empty-picker { opacity:1; visibility:visible; }
[data-theme="light"] .card .qcart { border-radius:50%; }
[data-theme="dark"] .card .qcart { background:transparent; box-shadow:none; }
.card-empty-picker .qb:disabled { opacity:.35; cursor:default; }
@media(hover:none) {
 .card-empty-picker { opacity:1; visibility:visible; }
}

.operation-details { width: min(32rem, calc(100vw - 3rem)); max-height: min(70vh, 42rem); overflow-y: auto; }
.operation-details details { margin-top: 1.25rem; }
.operation-details summary { cursor: pointer; color: var(--text-strong); font-size: .875rem; }
.operation-details details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operation-details details dl > div:has(dd) { min-width: 0; }
[data-theme="light"] img[src="assets/img/devices/apple.svg"] { filter: brightness(0); }
@media(max-width:480px) { .operation-details details dl { grid-template-columns: 1fr; } }

/* Footer destination pages only: a quiet navigation rail and readable, cardless content. */
.info.info-minimal { grid-template-columns: minmax(12rem, 16rem) minmax(0, 46rem); gap: clamp(2rem, 6vw, 6rem); }
.info-minimal .info-main { padding: .25rem 0 2rem; }
.info-minimal .page-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; }
.info-minimal .page-lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.65; max-width: 42rem; }
.info-minimal .blocks { gap: 1.75rem; margin-top: 1.5rem; }
.info-minimal .blk p { color: var(--text-sub); font-size: 1rem; line-height: 1.7; max-width: 42rem; }
.info-minimal .blk :is(.note, .cardx, .job, .news article, .contacts > div, details, .steps li) { background: transparent; border: 0; box-shadow: none; padding: 0; }
.info-minimal .blk .contacts { gap: 1.5rem; }
.info-minimal .blk .contacts a { text-decoration: none; color: var(--text); display: inline-block; padding: .375rem 0; }
.info-minimal .blk .contacts a:hover { color: var(--link); }
.info-minimal .faq { grid-template-columns: 1fr; gap: .5rem; }
.info-minimal .faq summary { padding: .875rem 0; border-radius: .5rem; color: var(--text-sub); transition: color .15s; }
.info-minimal .faq summary:is(:hover, :focus-visible), .info-minimal .faq details[open] summary { color: var(--text-strong); }
.info-minimal .faq details > div { padding: 0 2rem 1rem 0; max-width: 42rem; }
.info-minimal .info-action .btn { min-height: 2.75rem; min-width: 13rem; padding: .625rem 1rem; text-decoration: none; color: var(--text-muted); background: var(--bg-muted); border: 0; box-shadow: none; transition: color .15s, background-color .15s; }
.info-minimal .info-action .btn:is(:hover, :focus-visible) { color: var(--link); background: color-mix(in oklab, var(--bg-muted) 85%, var(--text)); }
.info-minimal .info-nav { max-height: calc(100dvh - 3rem); overflow-y: auto; }
@media(max-width: 840px) {
 .info.info-minimal { grid-template-columns: 1fr; gap: 2rem; }
 .info-minimal .info-main { grid-row: 1; }
 .info-minimal .info-nav { position: static; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media(prefers-reduced-motion: reduce) { .info-minimal .info-action .btn, .info-minimal .faq summary { transition: none; } }
@media(max-width: 840px) {
 .info-minimal .info-nav { display: grid; overflow: visible; }
 .info-minimal .info-nav > div { display: block; }
 .info-minimal .info-nav h3 { display: block; }
 .info-minimal .info-nav ul { display: grid; gap: 2px; }
 .info-minimal .info-nav a { white-space: normal; border-radius: .5625rem; background: transparent; padding: .5rem .625rem; }
 .info-minimal .info-nav a:is(:hover, [aria-current="page"]) { background: var(--bg-muted); }
}
/* Content pages have no duplicate footer navigation. */
.info.info-minimal { display: block; max-width: 46rem; margin-inline: auto; }
/* Support: one quiet launcher and one borderless conversation surface. */
.support-widget { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 60; }
.support-launch { width: 3.9rem; height: 3.9rem; display: grid; place-items: center; border: 0; border-radius: 1rem; background: var(--bg-elev); color: var(--text-sub); box-shadow: var(--shadow-pop); cursor: pointer; transition: color .15s, transform .15s; }
.support-launch .i { width: 1.6rem; height: 1.6rem; }
.support-launch:hover, .support-launch[aria-expanded="true"] { color: var(--link); }
.support-launch:active { transform: scale(.94); }
.support-panel { position: absolute; right: 0; bottom: 4rem; width: min(23rem, calc(100vw - 2.5rem)); height: min(31rem, calc(100dvh - 7rem)); display: flex; flex-direction: column; padding: 0 1.25rem 1.125rem; border: 0; border-radius: 1rem; background: var(--bg-elev); box-shadow: var(--shadow-pop); animation: support-in .16s ease-out; }
.support-panel[hidden] { display: none; }
.support-close { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 2.5rem; width: calc(100% + 2.5rem); margin-inline: -1.25rem; padding: .625rem 1rem; background: transparent; border: 0; color: #e68d9c; cursor: pointer; }
.support-heading h2 { font-size: 1.125rem; font-weight: 500; }
.support-call { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .875rem; padding: .5rem 0; }
.support-call:hover { color: var(--link); }
.support-call .i { width: 1rem; height: 1rem; }
.support-thread { flex: 1; min-height: 0; overflow-y: auto; padding-block: 1rem; }
.support-intro { color: var(--text-sub); font-size: .9375rem; }
.support-messages { display: grid; justify-items: end; gap: .75rem; margin-top: 1rem; }
.support-message { max-width: 90%; border-radius: .875rem .875rem .25rem .875rem; padding: .625rem .875rem; overflow-wrap: anywhere; }
.support-message p { white-space: pre-wrap; font-size: .9375rem; color: inherit; }
.support-message small { display: block; color: var(--msg-muted); font-size: .6875rem; margin-top: .375rem; }
.support-disclosure { color: var(--text-muted); font-size: .75rem; line-height: 1.45; padding-block: .5rem; }
.support-widget :focus-visible { outline: 1px solid var(--link); outline-offset: 3px; }
body:has(.scrim) .support-widget, html.dt-lock .support-widget { visibility: hidden; }
@keyframes support-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: translateY(0); } }
@media(prefers-reduced-motion: reduce) { .support-panel { animation: none; } .support-launch { transition: none; } }
.support-widget { bottom: auto; }
.support-launch { position: relative; border-radius: 50%; background: var(--bg-elev); box-shadow: 0 3px 18px #00000018; }
.support-unread { position: absolute; top: -.125rem; right: -.125rem; min-width: 1rem; height: 1rem; padding: 0 .2rem; border-radius: 50%; background: var(--err); color: white; font-size: .625rem; display: grid; place-items: center; }
.support-unread[hidden] { display: none; }
.support-panel { position: fixed; right: 5.25rem; bottom: auto; height: min(36rem, calc(100dvh - 1.5rem)); width: min(26rem, calc(100vw - 7rem)); }
.support-incoming { display: flex; align-items: flex-start; gap: .75rem; }
.support-avatar { flex: 0 0 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: #0f1110; color: #fff; box-shadow: inset 0 0 0 .25px var(--accent); font-family: Georgia, serif; font-size: .75rem; }
.support-agent { display: block; font-size: .75rem; color: var(--link); font-weight: 500; margin-bottom: .375rem; }
.support-message.msg { width: auto; min-width: 0; margin: 0; }
.support-message:has(.att-list) { width: min(22rem, 84%); max-width: 84%; justify-self: end; }
@media(max-width: 600px) { .support-panel { right: .75rem; width: calc(100vw - 1.5rem); z-index: 1; } }

/* Support composer follows complaints/suggestions, without an input focus frame. */
.support-panel { width: min(30rem, calc(100vw - 7rem)); padding-inline: 1.5rem; }
.support-heading { text-align: center; padding: .25rem 0 1.125rem; border-bottom: .25px solid color-mix(in srgb, var(--text) 18%, transparent); }
.support-heading h2 { font-size: 1.1875rem; }
.support-call { justify-content: center; padding-top: .625rem; }
.support-thread { padding-block: 1.5rem; }
.support-close { width: calc(100% + 3rem); margin-inline: -1.5rem; }
.support-compose.fb-form { flex-shrink: 0; padding-top: 1rem; gap: .625rem; }
.support-compose .fb-input, .support-compose .fb-input:focus, .support-compose .fb-input:focus-visible { outline: none; border: 0; box-shadow: none; }
.support-compose .fb-att { max-height: 9rem; overflow-y: auto; }
@media(max-width:600px) { .support-panel { width: calc(100vw - 1.5rem); padding-inline: 1rem; } .support-close { width: calc(100% + 2rem); margin-inline: -1rem; } .support-compose.fb-form { gap: .375rem; } }

.support-incoming .support-reply { margin: 0; max-width: none; min-width: 0; flex: 1; }
.support-reply .support-intro { color: inherit; }

/* Keep the same composer-to-canvas contrast as the feedback page. */
.support-panel { background: var(--bg-elev); }
.support-incoming .support-reply { background: var(--bg-soft); }
.support-compose .fb-circle, .support-compose .fb-input { background: var(--bg-soft); }
.support-compose .fb-circle:hover, .support-compose .fb-circle[aria-expanded="true"] { background: var(--bg-muted); }
.support-message.msg.me { justify-self: end; }
.support-message .msg-files .att-player { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2rem; gap: .25rem .5rem; }
.support-message .att-player .vp-b.is-play { grid-column: 1; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; }
.support-message .att-player .vp-cv { grid-column: 2; grid-row: 1; width: 100%; height: 1.75rem; }
.support-message .att-player .vp-t { grid-column: 2; grid-row: 2; font-size: .6875rem; }
.support-message .att-player .vp-b.is-stop { grid-column: 3; grid-row: 1 / span 2; width: 2rem; height: 2rem; }

.support-widget { right: max(2.75rem, env(safe-area-inset-right)); }
.support-launch, .support-launch:hover, .support-launch[aria-expanded="true"] { color: var(--accent); }
.support-launch .i { width: 2.208rem; height: 2.208rem; }

.support-panel { transform-origin: right center; animation: support-reveal .18s cubic-bezier(.2,.8,.2,1) both; }
@keyframes support-reveal { from { opacity: 0; transform: translateX(14px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } }
@media(prefers-reduced-motion: reduce) { .support-panel { animation: none; } }

/* Gentle contrast for support surfaces in the dark theme only. */
[data-theme="dark"] .support-incoming .support-reply,
[data-theme="dark"] .support-compose .fb-input,
[data-theme="dark"] .support-compose .fb-circle { background: color-mix(in srgb, var(--bg-soft) 95%, white); }
[data-theme="dark"] .support-compose .fb-circle:hover,
[data-theme="dark"] .support-compose .fb-circle[aria-expanded="true"] { background: color-mix(in srgb, var(--bg-soft) 91%, white); }
.career-form { margin-top: 1.75rem; display: grid; gap: 1.25rem; }
.career-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem 1.75rem; }
.career-field { display: grid; gap: .5rem; min-width: 0; color: var(--text-sub); font-size: .875rem; }
.career-field > input:not([type="file"]) { width: 100%; min-height: 2.75rem; padding: .5rem 0; border: 0; border-bottom: .5px solid var(--line-2); background: transparent; color: var(--text); font: inherit; font-size: 1rem; border-radius: 0; }
.career-field > input:focus { outline: none; border-bottom-color: var(--link); }
.career-field small, .career-hint { color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }
.career-field .pro-tel-in { min-height: 2.75rem; border-bottom: .5px solid var(--line-2); }
.career-field .pro-in { min-width: 0; width: 100%; background: transparent; border: 0; color: var(--text); font-size: 1rem; }
.career-resume input[type="file"] { max-width: 100%; font: inherit; color: var(--text-sub); }
.career-resume input::file-selector-button { border: 0; border-radius: .625rem; background: var(--bg-muted); color: var(--text); padding: .75rem 1rem; margin-right: .75rem; cursor: pointer; }
.career-resume-picked { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.career-resume-picked:empty { display:none; }
.career-resume-picked > span { display:flex; align-items:center; gap:.5rem; overflow-wrap:anywhere; min-width:0; }
.career-resume-picked .ft { width:1.5rem; height:1.5rem; flex:none; }
.career-consent { display:flex; align-items:flex-start; gap:.75rem; color:var(--text-sub); font-size:.875rem; line-height:1.6; }
.career-consent input { flex:none; margin-top:.3rem; }
.career-consent a { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.career-submit { width:100%; min-height:3.25rem; }
.career-form:not(.is-ready) .career-submit { background:var(--bg-muted); color:var(--text-muted); border:0; box-shadow:none; }
@media(max-width:600px) { .career-grid { grid-template-columns:1fr; } }

/* Shared incoming tone ties the launcher to the conversation. */
.support-widget { --support-incoming: var(--bg-soft); }
[data-theme="dark"] .support-widget { --support-incoming: color-mix(in srgb, var(--bg-soft) 95%, white); }
.support-launch, .support-incoming .support-reply,
[data-theme="dark"] .support-incoming .support-reply { background: var(--support-incoming); }
.support-hours { display: block; margin-bottom: .375rem; color: var(--text-muted); font-size: .8125rem; line-height: 1.4; }
[data-theme="dark"] .support-message.msg.me { --msg-bg: color-mix(in srgb, var(--bg-soft) 87%, white); }
/* Chromium uses our global trackless thumb; Firefox gets the same transparent track. */
@supports selector(::-webkit-scrollbar) { .support-panel * { scrollbar-width: auto; scrollbar-color: auto; } }
.support-panel ::-webkit-scrollbar-track,
.support-panel ::-webkit-scrollbar-track-piece,
.support-panel ::-webkit-scrollbar-corner { background: transparent; border: 0; box-shadow: none; }

/* Keep the launcher centred and reserve most of the panel for messages. */
.support-launch-label { position: absolute; bottom: calc(100% + .375rem); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--text-sub); font-size: .825rem; font-weight: 500; line-height: 1.4; }
.support-close { flex-basis: 1.875rem; padding-block: .25rem; }
.support-heading { padding: 0 0 .625rem; margin-top: -.375rem; }
.support-hours { margin-bottom: .125rem; }
.support-heading h2 { line-height: 1.25; }
.support-call { padding-block: .25rem 0; }
.support-thread { padding-block: .875rem; }

/* A brief envelope nudge every two seconds, only while unread. */
.support-widget[hidden] { display: none; }
.support-launch:has(.support-unread:not([hidden])) > .i { animation: support-unread-nudge 2s ease-in-out infinite; transform-origin: center; }
@keyframes support-unread-nudge {
  0%, 36%, 100% { transform: translateX(0) rotate(0); }
  6% { transform: translateX(-6px) rotate(-32deg); }
  12% { transform: translateX(6px) rotate(30deg); }
  18% { transform: translateX(-4.5px) rotate(-24deg); }
  24% { transform: translateX(3px) rotate(17deg); }
  30% { transform: translateX(-1.5px) rotate(-9deg); }
}
@media(prefers-reduced-motion: reduce) { .support-launch:has(.support-unread:not([hidden])) > .i { animation: none; } }

.career-required { color: var(--err); font-size: 1.5em; line-height: 0; vertical-align: -.1em; }
.career-field .pro-in, .career-field .pro-in:hover, .career-field .pro-in:focus { box-shadow: none; }
.career-consent input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent-ink); cursor: pointer; }
.career-field.has-error > input:not([type="file"]), .career-field.has-error .pro-tel-in { border-bottom-color: var(--err); }
.career-resume.has-error input[type="file"], .career-consent.has-error input { outline: .5px solid var(--err); outline-offset: 3px; }

/* Candidate screening: open sections, quiet controls and progressive detail. */
.career-section { display: grid; gap: 1.125rem; margin-top: 1rem; min-width: 0; }
.info-minimal .career-section h2 { margin: 0; font-size: 1.1875rem; font-weight: 500; color: var(--text); }
.career-section .career-grid { align-items: start; }
.career-check { display: flex; align-items: center; gap: .625rem; color: var(--text-sub); font-size: .9375rem; cursor: pointer; min-height: 2.5rem; }
.career-check input, .career-options input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent-ink); flex: none; cursor: pointer; }
.career-check:has(input:checked) { color: var(--text); }
.career-language-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem 1.75rem; }
.career-language { min-width: 0; }
.career-language .flag { width: 1.5rem; height: 1.5rem; box-shadow: none; }
.career-language .career-conditional { padding-left: 1.875rem; }
.career-language .career-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.career-conditional[hidden] { display: none; }
.career-conditional:not([hidden]) { display: grid; gap: 1.125rem; }
.career-select { position: relative; min-width: 0; }
.career-select summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; list-style: none; min-height: 2.75rem; border-radius: .625rem; padding: .5rem .75rem; background: var(--bg-soft); color: var(--text-sub); }
.career-select summary::-webkit-details-marker { display: none; }
.career-select summary .i { width: 1rem; height: 1rem; flex: none; }
.career-select summary:hover, .career-select[open] summary { background: var(--bg-muted); color: var(--text); }
.career-options { position: absolute; z-index: 15; top: calc(100% + .375rem); inset-inline: 0; min-width: 0; padding: .375rem; max-height: 16rem; overflow-y: auto; background: var(--bg-elev); border-radius: .75rem; box-shadow: var(--shadow-pop); }
.career-options label { display: flex; align-items: center; gap: .625rem; padding: .625rem; border-radius: .5rem; cursor: pointer; overflow-wrap: anywhere; }
.career-options label:hover, .career-options label:has(input:checked) { background: var(--bg-muted); }
.career-field > textarea { width: 100%; min-height: 5rem; resize: vertical; border: 0; border-bottom: .5px solid var(--line-2); background: transparent; color: var(--text); padding: .5rem 0; font: inherit; line-height: 1.6; }
.career-field > textarea:focus { outline: none; border-bottom-color: var(--link); }
.career-computer > span { display: block; }
.career-computer output { color: var(--text); font-variant-numeric: tabular-nums; }
.career-computer > input[type="range"] { padding: 0; border: 0; min-height: 2rem; accent-color: var(--accent-ink); cursor: pointer; }
.career-tools { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .375rem 1rem; }
.career-tools legend { color: var(--text-sub); font-size: .875rem; margin-bottom: .5rem; }
.career-field.has-error > textarea { border-bottom-color: var(--err); }
.career-field.has-error > .career-select > summary { box-shadow: inset 0 0 0 .5px var(--err); }
.career-select summary:focus-visible { outline: 1px solid var(--link); outline-offset: 2px; }
@media(max-width:600px) { .career-language-list { grid-template-columns: 1fr; } }

/* Unified career selectors: lime discs with black ticks, no native radio rings. */
.career-form input:is([type="checkbox"],[type="radio"]):not([hidden]) { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%; background: var(--bg-muted); box-shadow: none; flex: none; cursor: pointer; }
.career-form input:is([type="checkbox"],[type="radio"]):checked { background: var(--accent); }
.career-form input:is([type="checkbox"],[type="radio"]):checked::after { content: ''; width: .55rem; height: .32rem; border-left: 2px solid #101310; border-bottom: 2px solid #101310; transform: translateY(-1px) rotate(-45deg); }
.career-form input:is([type="checkbox"],[type="radio"]):focus-visible { outline: 1px solid var(--link); outline-offset: 3px; }
.career-multi summary > span:first-child { flex: 1; }
.career-multi-count { color: var(--link); font-variant-numeric: tabular-nums; }
.career-multi .career-options .flag { width: 1.5rem; height: 1.5rem; box-shadow: none; }
.career-language-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .875rem 1.5rem; }
.career-language-levels:not(:has(.career-conditional:not([hidden]))) { display: none; }
.career-add-phone { display: inline-flex; align-items: center; justify-self: start; gap: .625rem; padding: .5rem 0; border: 0; background: transparent; color: var(--text-sub); cursor: pointer; font: inherit; }
.career-add-phone .i { width: 1.5rem; height: 1.5rem; color: var(--link); }
.career-add-phone:hover { color: var(--link); }
.career-add-phone[hidden] { display: none; }
.career-calendar { padding: .75rem; min-width: min(17rem,calc(100vw - 4rem)); max-height: none; }
.career-calendar-head { display: flex; align-items: center; gap: .375rem; margin-bottom: .75rem; }
.career-calendar-head > span { flex: 1; font-size: .875rem; }
.career-calendar button { border: 0; background: transparent; color: var(--text-sub); cursor: pointer; border-radius: .5rem; font: inherit; }
.career-calendar-head button { padding: .375rem; display: grid; place-items: center; }
.career-calendar-head .i { width: 1.125rem; height: 1.125rem; }
.career-calendar-year { width: 4.75rem; padding: .25rem; background: var(--bg-soft); color: var(--text); border: 0; border-radius: .375rem; font: inherit; font-size: .875rem; }
.career-calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .2rem; text-align: center; }
.career-calendar-days > span { color: var(--text-muted); font-size: .6875rem; padding-block: .25rem; }
.career-calendar-days button { min-height: 2rem; font-size: .875rem; }
.career-calendar button:hover { background: var(--bg-muted); color: var(--text); }
.career-calendar-days button[aria-pressed="true"] { background: var(--accent); color: #101310; }
.career-calendar-clear { margin-top: .5rem; padding: .375rem .625rem; font-size: .8125rem !important; }
@media(max-width:600px) { .career-language-levels { grid-template-columns: 1fr; } }

/* Each answer belongs directly beneath its numbered question. */
.career-form .career-grid { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
.career-question { gap: .75rem; }
.career-question-title { display: block; color: var(--text); font-size: .9375rem; line-height: 1.5; }
.career-question-title::before { content: attr(data-question-number) ". "; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.career-section { gap: 1.75rem; }
.career-selected-values { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; min-width: 0; }
.career-selected-item { display: inline-flex; align-items: center; gap: .4375rem; }
.career-selected-item .flag, .career-language-percent .flag { width: 1.25rem; height: 1.25rem; box-shadow: none; }
.career-selected-comma { margin-right: .5rem; }
.career-language-percent > span { display: flex; align-items: center; gap: .5rem; }
.career-language-percent input { font-variant-numeric: tabular-nums; }
.career-phone-extra { display: grid; gap: .75rem; }
.career-phone-extra .career-add-phone { font-size: .875rem; padding-block: .25rem; }

.career-phone-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; align-items: start; }
.career-phone-row > .pro-fld, .career-phone-extra { min-width: 0; }
.career-phone-row .career-add-phone { min-height: 2.75rem; }
.career-phone-row .career-phone-extra .career-field > label { order: 2; color: var(--text-muted); font-size: .8125rem; }
@media(max-width:600px) { .career-phone-row { grid-template-columns: minmax(0,1fr); gap: .5rem; } }

/* Both phone questions sit above their matching inputs. */
.career-phone-row:has([data-career-if="addPhone"]:not([hidden])) { margin-top: 0; }
.career-phone-row .career-phone-extra .career-field { position: relative; }
.career-phone-row .career-phone-extra .career-field > label { position: absolute; bottom: calc(100% + .75rem); order: initial; color: var(--text); font-size: .9375rem; line-height: 1.5; }
@media(max-width:600px) { .career-phone-row:has([data-career-if="addPhone"]:not([hidden])) { margin-top: 0; } .career-phone-row .career-phone-extra .career-field > label { position: static; } }

.career-form .career-address-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.125rem 1.5rem; }
.career-address-body .career-field > span { font-size: .875rem; color: var(--text-sub); }
.career-select[data-disabled="true"] summary { opacity: .45; cursor: default; }
@media(max-width:600px) { .career-form .career-address-body { grid-template-columns: minmax(0,1fr); } }

.career-title-continuation { color: var(--text-muted); }

.career-country-choice .career-options input[type="radio"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.career-country-choice .career-options label > span, .career-country-choice [data-choice-label] { display: inline-flex; align-items: center; gap: .625rem; }
.career-country-choice .flag { width: 1.5rem; height: 1.5rem; box-shadow: none; }
.career-country-choice .career-options label:has(input:focus-visible) { outline: 1px solid var(--link); outline-offset: -1px; }

.career-family-body { display: grid; gap: .75rem; }
.career-family-body > .career-field > span { display: none; }
.career-family-person { border: 0; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.5rem; min-width: 0; }
.career-family-person legend { padding: 0; margin-bottom: .875rem; color: var(--text-muted); font-size: .875rem; }
.career-family-person .career-field[hidden] { display: none; }
@media(max-width:600px) { .career-family-person { grid-template-columns: minmax(0,1fr); } }

/* Date of birth: three independent, snapping wheels. */
.birth-wheels { display:grid; grid-template-columns: .7fr 1.4fr 1fr; gap:.5rem; max-width:26rem; }
.birth-wheel-column { min-width:0; display:grid; justify-items:stretch; }
.birth-wheel-step { justify-self:center; display:grid; place-items:center; width:44px; height:32px; padding:0; border:0; border-radius:.6rem; background:transparent; color:var(--text-muted); cursor:pointer; transition:background .12s,color .12s,transform .12s; }
.birth-wheel-step .i { width:20px; height:20px; }
.birth-wheel-step:hover { background:var(--bg-muted); color:var(--accent); }
.birth-wheel-step:active { transform:scale(.9); }
.birth-wheel-step:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.birth-wheel { height:200px; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory; padding-block:80px; box-sizing:border-box; scrollbar-width:none; position:relative; background:linear-gradient(to bottom,transparent 80px,var(--bg-muted) 80px,var(--bg-muted) 120px,transparent 120px); border-radius:.75rem; mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent); }
.birth-wheel::-webkit-scrollbar { display:none; }
.birth-wheel [role=option] { height:40px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; color:var(--text-muted); cursor:pointer; font-size:1.0625rem; flex-shrink:0; }
.birth-wheel [aria-selected=true] { color:var(--text); font-weight:600; }
.birth-wheel:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.career-birth.has-error .birth-wheels { box-shadow:0 1px 0 .25px var(--err); }

.family-choice { display:flex; align-items:center; justify-content:flex-start; gap:.4rem; }
.family-choice > label { flex:0 0 auto; width:auto; min-width:0; padding-right:0; }
.family-quantity { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.family-quantity button { display:grid; place-items:center; width:30px; min-height:36px; padding:0; border:0; border-radius:.5rem; background:transparent; color:var(--text-muted); font:inherit; cursor:pointer; transition:background .12s,color .12s; }
.family-quantity button:hover { background:var(--bg-muted); color:var(--text); }
.family-quantity button { position:relative; }
.family-quantity button[aria-pressed="true"] { background:transparent; color:var(--text); }
.family-quantity button[aria-pressed="true"]::after { content:""; position:absolute; width:26px; height:26px; top:50%; left:50%; transform:translate(-50%,-50%); border:.5px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:50%; pointer-events:none; box-sizing:border-box; }
.family-quantity button:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
@media(max-width:420px) { .family-choice { gap:.35rem; } .family-quantity button { width:26px; } }


.family-self-count { display:grid; place-items:center; width:26px; height:26px; box-sizing:border-box; border:.5px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:50%; color:var(--text); }

.birth-picker-options { padding:.5rem; max-height:none; overflow:visible; }
.career-birth-picker { max-width:26rem; }
.career-birth-picker .birth-wheels { width:100%; }

.career-language-choice { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-block:.25rem; }
.career-language-choice > .career-check { flex:0 0 auto; width:max-content; min-width:min(14rem,100%); max-width:100%; box-sizing:border-box; }
.career-language-choice > .career-check > .flag { flex-shrink:0; }
.career-language-choice > .career-check > span { min-width:0; overflow-wrap:normal; word-break:normal; white-space:normal; }
.career-language-choice .language-percent-options { flex:0 1 auto; min-width:0; max-width:100%; }
.language-percent-options { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.language-percent-options button { position:relative; display:grid; place-items:center; width:32px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-muted); font:inherit; font-size:.8125rem; cursor:pointer; }
.language-percent-options button:hover { color:var(--text); }
.language-percent-options button[aria-pressed="true"] { color:var(--text); }
.language-percent-options button[aria-pressed="true"]::after { content:""; position:absolute; width:30px; height:30px; border:.5px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:50%; box-sizing:border-box; pointer-events:none; }
.language-percent-options button:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }
.language-percent-unit { color:var(--text-muted); font-size:.8125rem; }
@media(max-width:600px) { .career-language-choice > .career-check { flex-basis:100%; } .language-percent-options { max-width:100%; } }

.career-work-body { padding:1rem; max-height: min(60vh,36rem); }
.career-work-row { position:relative; display:grid; grid-template-columns:2fr 1fr; gap:1rem; padding: .5rem 2rem 1.5rem 0; }
.career-work-row > label { display:flex; flex-direction:column; align-items:stretch; gap:.5rem; padding:0; background:transparent !important; font-size:.875rem; color:var(--text-muted); }
.career-work-row input { width:100%; min-width:0; box-sizing:border-box; border:0; border-bottom:.5px solid var(--border); border-radius:0; background:transparent; padding:.6rem 0; font:inherit; color:var(--text); cursor:text; }
.career-work-role { grid-column:1/-1; }
.career-work-jobs { max-height:12rem; overflow:auto; }
.career-work-jobs[hidden], .career-work-jobs button[hidden] { display:none; }
.career-work-jobs button { display:block; width:100%; border:0; background:transparent; color:var(--text-sub); text-align:left; padding:.6rem; font:inherit; cursor:pointer; border-radius:.5rem; }
.career-work-jobs button:hover { background:var(--bg-muted); }
.career-work-add,.career-work-remove { display:flex; align-items:center; gap:.5rem; border:0; background:transparent; color:var(--text-muted); padding:.5rem; cursor:pointer; font:inherit; }
.career-work-add:hover { color:var(--accent); }
.career-work-remove { position:absolute; right:0; top:.5rem; color:var(--err); }
@media(max-width:500px) { .career-work-row { grid-template-columns:1fr; } }

.career-education-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.career-education-dates .birth-wheels { min-width:15rem; }
@media(max-width:600px) { .career-education-dates { grid-template-columns:1fr; } }

.career-work-row { grid-template-columns:minmax(0,1fr); gap:1rem; padding-bottom:1.75rem; }
.career-work-duration { grid-row:3; display:grid; gap:.5rem; color:var(--text-muted); font-size:.875rem; }
.work-duration-options { display:flex; flex-wrap:wrap; gap:.25rem .5rem; }
.work-duration-options button { padding:.45rem .6rem; border:0; border-radius:1.5rem; background:transparent; color:var(--text-muted); font:inherit; cursor:pointer; }
.work-duration-options button:hover { color:var(--text); background:var(--bg-muted); }
.work-duration-options button[aria-pressed="true"] { color:var(--text); background:transparent; box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--accent) 55%,transparent); }
.work-duration-options button:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }

/* Plain underlined inputs; suggestion list stays within the company editor. */
.career-work-body { padding:1rem 1.25rem; }
.career-work-row { gap:1.25rem; padding-top:.75rem; }
.career-work-row input:not([type="hidden"]) { height:2.75rem; min-height:2.75rem; line-height:1.4; outline:none; box-shadow:none; border-bottom:.5px solid color-mix(in srgb,var(--text-muted) 55%,transparent); }
.career-work-row input:not([type="hidden"]):focus { border-bottom-color:var(--accent); box-shadow:none; }
.career-work-row input::placeholder { color:var(--text-muted); opacity:.7; }
.career-work-role { display:grid; gap:.5rem; min-width:0; }
.career-work-role > label { padding:0; background:transparent !important; color:var(--text-muted); font-size:.875rem; cursor:text; }
.career-work-jobs { display:block; max-height:10.5rem; scrollbar-width:thin; scrollbar-color:var(--text-muted) transparent; }
.career-work-jobs button { padding:.65rem .5rem; font-size:.875rem; line-height:1.4; }
.career-work-jobs button:focus-visible { outline:none; background:var(--bg-muted); color:var(--text); }
.career-work-row + .career-work-row { margin-top:.5rem; }

.career-work-row { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.5rem; align-items:start; }
.career-work-role { grid-column:2; grid-row:1; }
.career-work-role > span { color:var(--text-muted); font-size:.875rem; }
.career-work-duration { grid-column:1/-1; grid-row:2; }
.career-work-row + .career-work-row { border-top:.5px solid color-mix(in srgb,var(--text-muted) 30%,transparent); padding-top:1.5rem; margin-top:.25rem; }
.career-work-row + .career-work-row .career-work-remove { top:1.25rem; }
.work-job-picker { min-width:0; }
.work-job-picker > summary { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:2.75rem; box-sizing:border-box; cursor:pointer; list-style:none; border-bottom:.5px solid color-mix(in srgb,var(--text-muted) 55%,transparent); color:var(--text); padding:.6rem 0; }
.work-job-picker > summary::-webkit-details-marker { display:none; }
.work-job-picker > summary > span { min-width:0; overflow-wrap:anywhere; }
.work-job-picker > summary > .i { flex-shrink:0; width:1rem; height:1rem; }
.work-job-picker[open] > summary { border-bottom-color:var(--accent); }
.work-job-menu { padding:.5rem 0; }
.career-work-jobs button { display:flex; align-items:center; gap:.6rem; }
.work-job-check { display:grid; place-items:center; width:1rem; height:1rem; border-radius:50%; flex:0 0 1rem; visibility:hidden; }
.work-job-check .i { width:.75rem; height:.75rem; }
.career-work-jobs button[aria-pressed="true"] .work-job-check { visibility:visible; background:var(--accent); color:#101310; }
@media(max-width:600px) { .career-work-row { grid-template-columns:1fr; } .career-work-role { grid-column:1; grid-row:2; } .career-work-duration { grid-row:3; } }

.career-work-role .work-job-picker > summary { border-radius:0; box-shadow:none; }

/* Shared question and control rows keep both underlines level. */
@media(min-width:601px) {
  .career-work-row > label:first-child,
  .career-work-row > .career-work-role { display:grid; grid-template-rows:subgrid; grid-row:1 / span 2; align-self:stretch; row-gap:.5rem; }
  .career-work-row > label:first-child { grid-column:1; }
  .career-work-row > .career-work-role { grid-column:2; }
  .career-work-row > label:first-child > input { align-self:start; }
  .career-work-row > .career-work-duration { grid-row:3; }
}

.career-work-row > .career-work-leaving { grid-column:1/-1; grid-row:4; }
.career-work-leaving textarea { width:100%; box-sizing:border-box; min-height:3.5rem; resize:vertical; border:0; border-bottom:.5px solid color-mix(in srgb,var(--text-muted) 55%,transparent); border-radius:0; background:transparent; color:var(--text); padding:.6rem 0; font:inherit; line-height:1.5; outline:none; box-shadow:none; }
.career-work-leaving textarea:focus { border-bottom-color:var(--accent); box-shadow:none; }

/* Footer information pages: directional cue is visible before hover. */
.info-minimal .info-action .btn > .i { color:var(--accent); opacity:1; visibility:visible; flex-shrink:0; }