/* =====================================================================
   Три поршня — кабинет бонусной программы (design.md §11.3).
   Подключается поверх styles.css: палитра, шрифты, кнопки и фокус —
   сайта. Здесь только кабинет: одна колонка до 440 px, крупные QR и код,
   тона уровней. Правила сайта: высота не анимируется (раскрытие —
   атрибутом hidden), backdrop-filter не используется, заголовки в одну
   строку, у .wrap ничего не переопределяется (в кабинете его нет).
   ===================================================================== */

:root {
  /* ── Тона уровней: полоса карты, белый текст на ней (все пары ≥ 4,5:1,
     проверяет check-contrast.py). Привязаны к номеру уровня, не к названию. ── */
  --tier-0: #4b5563;
  --tier-1: #8a4b1f;
  --tier-2: #57606c;
  --tier-3: #7a5a00;
  --tier-4: #2f3b52;
  --on-tier: #ffffff;
  /* В светлой теме текст уровня — тот же тон, что полоса */
  --tier-ink-0: #4b5563;
  --tier-ink-1: #8a4b1f;
  --tier-ink-2: #57606c;
  --tier-ink-3: #7a5a00;
  --tier-ink-4: #2f3b52;
  /* Металл пластиковой карты: --tier-N (светлый край, по нему проверяется контраст)
     уходит в --tier-Nb; блик — свой оттенок у каждого металла */
  --tier-0b: #1f2733;
  --tier-1b: #4a240b;
  --tier-2b: #2a3038;
  --tier-3b: #3f2e00;
  --tier-4b: #0f1420;
  --on-tier-2: #e6e8ec;
  --danger: #c4231a;
  --cab-w: 440px;
}
html[data-theme="dark"] {
  /* В темноте полоса — поверхность карточки, а цвет уровня уходит в текст */
  --tier-ink-0: #9ca3af;
  --tier-ink-1: #e0a072;
  --tier-ink-2: #c3cad3;
  --tier-ink-3: #ffd426;
  --tier-ink-4: #a9c1e6;
  --danger: #ff6b6b;
}

.tier-0 { --tier-band: var(--tier-0); --tier-ink: var(--tier-ink-0); --tier-face: var(--tier-0); --tier-face-2: var(--tier-0b); --tier-glint: rgba(255, 255, 255, .1); }
.tier-1 { --tier-band: var(--tier-1); --tier-ink: var(--tier-ink-1); --tier-face: var(--tier-1); --tier-face-2: var(--tier-1b); --tier-glint: rgba(255, 196, 150, .16); }
.tier-2 { --tier-band: var(--tier-2); --tier-ink: var(--tier-ink-2); --tier-face: var(--tier-2); --tier-face-2: var(--tier-2b); --tier-glint: rgba(255, 255, 255, .14); }
.tier-3 { --tier-band: var(--tier-3); --tier-ink: var(--tier-ink-3); --tier-face: var(--tier-3); --tier-face-2: var(--tier-3b); --tier-glint: rgba(255, 220, 120, .16); }
.tier-4 { --tier-band: var(--tier-4); --tier-ink: var(--tier-ink-4); --tier-face: var(--tier-4); --tier-face-2: var(--tier-4b); --tier-glint: rgba(186, 208, 255, .16); }

body.cab { font-size: 16px; line-height: 1.5; min-height: 100vh; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cab-nowrap { white-space: nowrap; }
/* Скрытое атрибутом hidden скрыто всегда — даже если класс задаёт display (.btn и др.) */
.cab [hidden] { display: none !important; }
.cab-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ============================== ШАПКА ============================== */
.cab-top { padding-top: env(safe-area-inset-top); }
.cab-top__inner {
  max-width: var(--cab-w); margin: 0 auto; padding: 6px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cab-top__brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink);
}
.cab-top__brand img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .18); background: #fff; }
.cab-top__nav { display: flex; gap: 8px; }
.cab-top__nav[hidden] { display: none; }
.cab-top__link {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--sh-card); border: 1px solid var(--line);
}
.cab-top__link[aria-current="page"] { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }

/* ============================== ЭКРАН ============================== */
.cab-main {
  max-width: var(--cab-w); margin: 0 auto;
  padding: 4px 16px calc(40px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.cab-main:focus { outline: none; }
/* Переход между экранами: новый экран проявляется (класс ставит mountScreen) */
.cab-main.is-enter { animation: cab-in .28s var(--ease) backwards; }
@keyframes cab-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes cab-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes cab-fade { from { opacity: 0; } }
.cab-loading, .cab-note { color: var(--muted); margin: 24px 0; }

.cab-h1 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; min-width: 0;
}
.cab-h1:focus { outline: none; }
.cab-h2 {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; min-width: 0;
}
.cab-h3 { margin: 16px 0 4px; font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.cab-lead { margin: 0; color: var(--ink-2); }
.cab-muted { margin: 0; color: var(--muted); font-size: .9rem; }
.cab-fine { margin: 0; color: var(--muted); font-size: .85rem; }
.cab-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.cab-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.cab-subhead { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cab-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin-left: -6px; padding: 0 8px 0 4px;
  color: var(--accent); font-weight: 600; border-radius: var(--r-btn);
}
.cab-back .cab-ico { width: 20px; height: 20px; stroke-width: 2.2; }

.cab-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-card); padding: 16px;
}
.cab-panel--list { padding-bottom: 8px; }
.cab-panel > p + .btn { margin-top: 12px; }

.cab-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--r-lg); background: var(--tint); color: var(--ink); font-size: .92rem;
  border: 1px solid var(--line-2);
}
.cab-banner p { margin: 0; }
.cab-banner .cab-ico { color: var(--signal); margin-top: 1px; }

.cab-alert {
  margin: 0; padding: 10px 12px; border-radius: var(--r-btn);
  background: rgba(217, 45, 32, .08); color: var(--ink); border-left: 3px solid var(--danger); font-size: .92rem;
}
html[data-theme="dark"] .cab-alert { background: rgba(255, 107, 107, .12); }

/* ============================== ФОРМЫ ============================== */
.cab-form { display: flex; flex-direction: column; gap: 14px; }
.cab-form[hidden] { display: none; }
.cab-field { display: flex; flex-direction: column; gap: 6px; }
.cab-field__label { font-weight: 600; font-size: .95rem; }
.cab-field__hint { margin: 0; color: var(--muted); font-size: .85rem; }
.cab-field__error { margin: 0; color: var(--danger); font-size: .88rem; font-weight: 500; }
.cab-input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1.05rem;
  transition: border-color .18s, box-shadow .18s;
}
.cab-input::placeholder { color: var(--muted); }
.cab-input:focus { outline: none; border-color: var(--ios-blue); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.cab-input[aria-invalid="true"] { border-color: var(--danger); }
.cab-input--code { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.cab-check { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: start; }
.cab-check__box { width: 24px; height: 24px; margin: 12px 0 0 2px; accent-color: var(--brass); cursor: pointer; }
.cab-check__label { min-height: 48px; padding: 10px 0; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.cab-check .cab-field__error { grid-column: 2; }

.cab-switch { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; }
.cab-switch__label { font-weight: 500; flex: 1; min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.cab-switch__box {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0;
  width: 52px; height: 32px; border-radius: 16px; background: var(--line-2); position: relative; cursor: pointer;
  transition: background .2s;
}
.cab-switch__box::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--ease);
}
.cab-switch__box:checked { background: var(--brass); }
.cab-switch__box:checked::after { transform: translateX(20px); }
.cab-switch__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============================== КНОПКИ ============================== */
.cab .btn { min-height: 52px; white-space: normal; text-align: center; line-height: 1.25; }
.cab .btn:disabled { opacity: .55; cursor: default; transform: none; }
.cab .btn.is-busy { cursor: progress; }
.cab-btn--plain { background: var(--tint); color: var(--ink); border-color: var(--line); }
.cab-btn--plain:hover { border-color: var(--line-2); }
.cab-btn--danger { background: var(--danger); color: #fff; }
html[data-theme="dark"] .cab-btn--danger { background: #c4231a; }
.cab-btn--danger-outline { background: transparent; color: var(--danger); border-color: rgba(217, 45, 32, .35); }
.cab-textbtn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; margin: 0 -6px;
  border: 0; background: none; color: var(--accent); font-weight: 600; cursor: pointer; border-radius: var(--r-icon);
}
.cab-textbtn--danger { color: var(--danger); }
.cab-stack { display: flex; flex-direction: column; gap: 10px; }

/* ============================== КАРТА ============================== */
.seg { display: inline-flex; background: var(--tint); border-radius: 14px; border: 1px solid var(--line); }
.seg__btn {
  min-height: 48px; padding: 0 14px; border: 3px solid transparent; border-radius: 14px;
  background: none; color: var(--ink-2); font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: transform .12s var(--ease);
}
.seg__btn:active { transform: scale(.96); }
.seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--tint); box-shadow: var(--sh-card); }

/* Пластиковая карта: металл уровня, тонкие кольца токарной обработки из угла,
   блик и наклон за курсором/пальцем (переменные --rx, --ry, --sx ставит view-card.js).
   Карта одна и та же в обеих темах — как настоящая. */
.bcard, .csum {
  --rx: 0deg; --ry: 0deg; --sx: 0%;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 20px;
  color: var(--on-tier);
  background: linear-gradient(140deg, var(--tier-face) 0%, var(--tier-face) 34%, var(--tier-face-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(16, 24, 40, .14), 0 14px 30px -10px rgba(16, 24, 40, .45);
}
html[data-theme="dark"] .bcard, html[data-theme="dark"] .csum {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(255, 255, 255, .09), 0 16px 34px -12px rgba(0, 0, 0, .9);
}
.bcard::before, .csum::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 0, rgba(255, 255, 255, .075) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 64%);
  mask-image: radial-gradient(circle at 100% 0, #000 0, transparent 64%);
}
.bcard {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease);
  touch-action: manipulation;
}
.bcard.is-tilting { transition: transform .12s linear; }
/* Блик: полоса света (псевдоэлемент — не содержимое). В покое — за левым краем;
   при открытии один раз проходит по карте; при наклоне идёт за курсором. Только transform. */
.bcard::after, .csum::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, var(--tier-glint) 50%, transparent 62%);
  transform: translateX(-80%); transition: transform .5s var(--ease);
  animation: bcard-glint 1.5s var(--ease) .35s backwards;
}
.bcard.is-tilting::after { transform: translateX(var(--sx)); transition: transform .12s linear; }
@keyframes bcard-glint { from { transform: translateX(-80%); } to { transform: translateX(80%); } }

.bcard__top, .csum__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0;
}
.bcard__brand {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap;
}
.bcard__logo { width: 26px; height: 26px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.bcard__chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24);
  font-family: var(--font-display); font-weight: 800; font-size: .92rem; white-space: nowrap;
}
.bcard__pct, .csum__pct { font-variant-numeric: tabular-nums; }
.bcard__body { padding: 8px 16px 14px; display: flex; flex-direction: column; }
.bcard__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; overflow-wrap: anywhere; }
.bcard__sub { margin: 0; color: var(--on-tier-2); font-size: .9rem; }
.bcard__discount { margin: 0; color: var(--on-tier-2); font-size: .92rem; }
.bcard__qr {
  width: min(100%, 212px); aspect-ratio: 1; margin: 10px auto 8px;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 8px 18px -6px rgba(0, 0, 0, .45);
}
.qr__svg { width: 100%; height: 100%; display: block; }
.qr__svg.is-new { animation: cab-fade .35s ease backwards; }
.bcard__coderow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bcard__label { margin: 0; color: var(--on-tier-2); font-size: .85rem; }
.bcard__timer { color: var(--on-tier-2); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcard__code {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1.1;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--on-tier); white-space: nowrap;
}
.bcard__code.is-new { animation: bcard-code .35s var(--ease) backwards; }
@keyframes bcard-code { from { opacity: 0; transform: translateY(6px); } }
/* Отсчёт 30 секунд: полоса под кодом догорает слева направо (scaleX) */
.bcard__fuse { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.bcard__fusebar { display: block; height: 100%; border-radius: inherit; background: var(--on-tier); transform-origin: left center; }
.bcard__fusebar.is-run { animation: bcard-fuse 30s linear both; }
@keyframes bcard-fuse { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* «Произнести код» — для экранного диктора: видна, когда на неё попал фокус */
.bcard__speak {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; padding: 0; background: none; color: var(--on-tier); font-weight: 600; text-decoration: underline;
}
.bcard__speak:focus-visible { position: static; width: auto; height: auto; clip: auto; min-height: 48px; align-self: flex-start; outline-color: #fff; }
.bcard__number { margin: 10px 0 0; color: var(--on-tier-2); font-size: .9rem; }
.bcard__digits { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--on-tier); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* Подсказка про ярлык: заметная, но тише карты */
.a2hs {
  background: var(--surface); border: 1.5px solid rgba(var(--accent-rgb), .38); border-radius: var(--r-lg);
  padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sh-card);
}
.a2hs .btn { min-height: 48px; }
.a2hs__actions { display: flex; gap: 8px; }
.a2hs__actions > .btn { flex: 1 1 0; min-width: 0; }
.a2hs--inline .a2hs__act { margin-top: 4px; }
.a2hs[hidden] { display: none; }
.a2hs--inline { border: 0; box-shadow: none; padding: 4px 0 12px; }
.a2hs__head { display: flex; gap: 12px; align-items: flex-start; }
.a2hs__head > div { min-width: 0; flex: 1; }
.a2hs__ico {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(var(--accent-rgb), .1); color: var(--accent);
}
.a2hs__title { margin: 0 0 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; white-space: nowrap; }
.a2hs__text, .a2hs__how { margin: 0; color: var(--ink-2); font-size: .92rem; }
.a2hs__more { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: .88rem; }
.a2hs__more[hidden] { display: none; }
.a2hs__more p { margin: 0; }

/* Дорога до следующего уровня с той же машинкой, что на лендинге */
.progress { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 16px; }
.progress__title { margin: 0; font-size: 1rem; }
.progress__title b { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.progress__note { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }
.lvlroad { position: relative; height: 64px; margin-top: 8px; }
.lvlroad__line {
  position: absolute; left: 6px; right: 6px; bottom: 9px; height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 18px, transparent 18px 30px);
}
.lvlroad__flag {
  position: absolute; bottom: 11px; width: 16px; height: 22px;
  fill: rgba(var(--accent-rgb), .14); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round;
}
.lvlroad__flag--start { left: 0; }
.lvlroad__flag--end { right: 0; }
.lvlroad__mover { position: absolute; left: 22px; right: 106px; bottom: 11px; height: 36px; transform: translateX(0); }
.lvlroad__mover.is-moving { transition: transform .6s var(--ease); }
.lvltruck { position: absolute; left: 0; bottom: 0; width: 84px; height: 36px; display: block; }
.lvltruck__svg { width: 100%; height: 100%; }
.lvltruck__logo {
  position: absolute; left: 21%; top: 21%; width: 17%; height: auto; aspect-ratio: 1;
  border-radius: 50%; border: 1px solid #c3c8d0; background: #fff;
}
.lvlroad__labels { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .82rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .lvlroad__mover.is-moving { transition: none; }
}

.progress__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.progress__sub { margin: 2px 0 0; color: var(--ink-2); font-size: .92rem; }
.progress__company {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px;
  border-radius: var(--r-btn); background: var(--bg); color: var(--ink); font-size: .9rem;
}
.progress__company .cab-ico { width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }

/* Лестница уровней: ступени растут, текущая — цветом своего металла, пройденные —
   обводкой своего тона, будущие — пунктиром. Ступень — кнопка: условия в подписи. */
.ladder { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ladder__title { margin: 0 0 10px; font-size: .95rem; font-weight: 600; }
.ladder__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ladder__item { min-width: 0; }
.ladder__step {
  width: 100%; height: 126px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.ladder__bar {
  display: flex; justify-content: center; padding-top: 6px; border-radius: 10px 10px 6px 6px;
  border: 1.5px solid var(--line-2); background: var(--surface); color: var(--muted);
  font-family: var(--font-display); font-weight: 800; font-size: .86rem; white-space: nowrap; font-variant-numeric: tabular-nums;
  transform-origin: bottom center; transition: transform .15s var(--ease);
}
.ladder__step--0 .ladder__bar { height: 34px; }
.ladder__step--1 .ladder__bar { height: 50px; }
.ladder__step--2 .ladder__bar { height: 66px; }
.ladder__step--3 .ladder__bar { height: 82px; }
.ladder__step--4 .ladder__bar { height: 98px; }
.ladder__step.is-past .ladder__bar { border-color: var(--tier-ink); color: var(--tier-ink); }
.ladder__step.is-next .ladder__bar { border-style: dashed; }
.ladder__step.is-here .ladder__bar {
  border-color: transparent; color: var(--on-tier);
  background: linear-gradient(160deg, var(--tier-face), var(--tier-face-2));
  box-shadow: 0 8px 16px -8px rgba(16, 24, 40, .55);
}
.ladder__step[aria-pressed="true"] .ladder__bar { outline: 2px solid var(--accent); outline-offset: 2px; }
.ladder__step:active .ladder__bar { transform: scaleY(.95); }
.ladder__min { color: var(--muted); font-size: .78rem; font-weight: 600; text-align: center; white-space: nowrap; }
.ladder__cap { margin: 10px 0 0; color: var(--ink-2); font-size: .92rem; min-height: 2.9em; }

/* История заказов: каждый заказ — своя карточка */
.history { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.history .cab-h2 { margin-bottom: 0; }
.scans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.scans:empty { display: none; }
.scan {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-height: 48px;
}
.scan__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.scan__ico .cab-ico { width: 20px; height: 20px; }
.scan--cancelled .scan__ico { background: var(--surface); color: var(--muted); }
.scan__main { min-width: 0; }
.scan__work { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.scan__meta { margin: 0; color: var(--muted); font-size: .85rem; }
.scan__side { display: flex; flex-direction: column; align-items: flex-end; }
.scan__sum { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scan__hint { color: var(--muted); font-size: .8rem; }
.scan__chip { padding: 1px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.scan--cancelled .scan__work { color: var(--ink-2); }

/* Пустое состояние: значок, что будет и что сделать */
.cab-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 8px 6px; }
.cab-empty__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 18px; background: rgba(var(--accent-rgb), .1); color: var(--accent); }
.cab-empty__ico .cab-ico { width: 28px; height: 28px; }
.cab-empty__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cab-empty__text { margin: 0; color: var(--ink-2); font-size: .92rem; max-width: 32ch; }

/* Приглашение в компанию — крупно, сразу под заголовком */
.invite {
  background: var(--surface); border: 1.5px solid rgba(var(--accent-rgb), .45); border-radius: 20px;
  box-shadow: var(--sh-card-2); padding: 16px; display: flex; flex-direction: column; gap: 10px;
  animation: cab-rise .4s var(--ease) backwards;
}
.invite__head { display: flex; gap: 12px; align-items: center; }
.invite__head > div { min-width: 0; flex: 1; }
.invite__ico {
  display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--act), var(--act-2)); color: var(--act-ink);
}
.invite__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1.25; white-space: nowrap; }
.invite__company { margin: 0; color: var(--accent); font-weight: 700; overflow-wrap: anywhere; }
.invite__text { margin: 0; }
.invite__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Тихая ссылка: «Перейти в кабинет мастера» (только мастеру), «Открыть бонусную карту клиента» */
.cab-quiet {
  align-self: center; display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  color: var(--muted); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-btn);
}
.cab-quiet:hover { color: var(--ink-2); }
/* Строки-ссылки: «Карта компании», «Настройки», документы */
.cab-links ul, .cab-list { list-style: none; margin: 0; padding: 0; }
.cab-links ul { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; }
.cab-links li + li { border-top: 1px solid var(--line); }
.cab-list li + li { border-top: 1px solid var(--line); }
.cab-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px;
  border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.cab-list .cab-row { padding-inline: 0; }
.cab-row__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-rgb), .1); color: var(--accent); flex: 0 0 auto; }
.cab-row__ico .cab-ico { width: 20px; height: 20px; }
.cab-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cab-row__title { font-weight: 600; }
.cab-row__sub { color: var(--muted); font-size: .85rem; }
.cab-row__chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s var(--ease); }
.cab-row:active { background: var(--tint); }
.cab-row[aria-expanded="true"] .cab-row__chev { transform: rotate(90deg); }
.cab-kv { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; }

/* ============================== КОМПАНИЯ ============================== */
.cab-facts { margin: 0; padding-left: 20px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.cab-panel .cab-facts { color: var(--ink); }

/* Без компании: два пути, каждый раскрывается своей панелью */
.cpath { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; }
.cpath__btn { min-height: 76px; }
.cpath__btn:not(:first-child) { border-top: 1px solid var(--line); }
.cpath__btn[aria-expanded="true"] { background: rgba(var(--accent-rgb), .06); }
.cpath__ico { width: 44px; height: 44px; border-radius: 12px; }
.cpath__ico .cab-ico { width: 22px; height: 22px; }
.cpath__panel { padding: 6px 16px 18px; display: flex; flex-direction: column; gap: 14px; animation: cab-rise .28s var(--ease) backwards; }
.cpath__panel[hidden] { display: none; }

/* Сводка компании — та же пластиковая карта уровня */
.csum__kind { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--on-tier-2); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.csum__kind .cab-ico { width: 20px; height: 20px; }
.csum__body { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.csum__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; overflow-wrap: anywhere; }
.csum__line { margin: 6px 0 0; font-weight: 700; }
.csum__muted { margin: 0; color: var(--on-tier-2); font-size: .9rem; }
.cab .csum__btn { margin-top: 12px; background: rgba(255, 255, 255, .1); color: var(--on-tier); border: 1px solid rgba(255, 255, 255, .3); }
.cab .csum__btn:hover { background: rgba(255, 255, 255, .16); }

/* Водители: аватар, имя со статусом, действия */
.people { list-style: none; margin: 0; padding: 0; }
.person {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  min-height: 64px; padding: 8px 0; border-top: 1px solid var(--line);
}
.person:first-child { border-top: 0; }
.person__ava {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .12); color: var(--accent); font-family: var(--font-display); font-weight: 800;
}
.person__ava .cab-ico { width: 20px; height: 20px; }
.person--invited .person__ava { background: none; color: var(--ink-2); border: 1.5px dashed var(--line-2); }
.person__main { min-width: 0; }
.person__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 600; overflow-wrap: anywhere; }
.person__chip { padding: 0 8px; border-radius: var(--r-pill); border: 1px solid currentColor; font-size: .76rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.person__chip--owner { color: var(--accent); }
.person__chip--in { color: var(--green); }
.person__chip--invited { color: var(--signal); }
.person__actions { display: flex; flex-wrap: wrap; gap: 0 16px; justify-content: flex-end; }
.person--invited .person__actions { grid-column: 2 / -1; justify-content: flex-start; }
.person__actions .cab-textbtn { gap: 6px; }
.person__actions .cab-ico { width: 18px; height: 18px; }
.cpeople__empty { margin-bottom: 4px; }

/* Готовое сообщение водителю после «Пригласить» */
.cshare {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; padding: 14px; border-radius: 14px;
  background: var(--bg); border: 1px solid rgba(var(--accent-rgb), .35);
  animation: cab-rise .3s var(--ease) backwards;
}
.cshare__title { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 700; }
.cshare__title .cab-ico { color: var(--green); stroke-width: 2.4; }
.cshare__msg {
  margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
/* ============================== МАСТЕР ============================== */
/* Тихо и крупно: мастер работает на обочине одной рукой — главные кнопки
   во всю ширину, суммы цифрами Manrope, полоса уровня клиента — та же,
   что на его карте. */
.cab-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cab-fieldset > legend { padding: 0; margin-bottom: 2px; }
.mspecs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.cab-textarea { min-height: 76px; resize: vertical; line-height: 1.4; }
.cab-input--digits, .cab-input--sum { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.cab .btn .cab-ico { width: 22px; height: 22px; }

.mstart { display: flex; flex-direction: column; gap: 10px; }
.mstart__scan { min-height: 64px; font-size: 1.05rem; }
.mtoday, .msum, .mfacts { margin: 0; display: flex; flex-direction: column; }
.mtoday > div, .msum > div, .mfacts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line);
}
.mtoday > div:first-child, .msum > div:first-child, .mfacts > div:first-child { border-top: 0; }
.mtoday dt, .msum dt, .mfacts dt { color: var(--ink-2); }
.mtoday dd, .msum dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mfacts dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.msum__total dt { color: var(--ink); font-weight: 600; }
.msum__total dd { font-size: 1.35rem; }
.mstatus .cab-lead + .cab-lead { margin-top: 8px; }
.mstatus .mfacts { margin-top: 12px; }

/* Непроверенный скан: заметнее остального, но без тревожного красного */
.mpending, .munknown {
  background: var(--surface); border: 1.5px solid rgba(194, 65, 12, .45); border-radius: var(--r-lg);
  box-shadow: var(--sh-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
html[data-theme="dark"] .mpending, html[data-theme="dark"] .munknown { border-color: rgba(255, 183, 77, .5); }
.mpending__head, .munknown__head { display: flex; gap: 12px; align-items: flex-start; }
.mpending__head > div, .munknown__head > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mpending__head .cab-ico, .munknown__head .cab-ico { color: var(--signal); margin-top: 2px; }
.mpending__title, .munknown__title { margin: 0; font-weight: 700; }
.mpending .btn { align-self: flex-start; min-width: 160px; }

/* Клиент перед мастером: полоса уровня, как на карте клиента */
.mholder { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-card-2); overflow: hidden; }
.mholder__band {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px;
  background: var(--tier-band); color: var(--on-tier); font-family: var(--font-display); font-weight: 800;
}
.mholder__pct { font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-theme="dark"] .mholder__band {
  background: var(--surface); color: var(--tier-ink);
  box-shadow: inset 0 4px 0 var(--tier-ink); border-bottom: 1px solid var(--line); padding-top: 14px;
}
.mholder__body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 2px; }
.mholder__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; overflow-wrap: anywhere; }

/* «К оплате» под полями — главный ответ экрана */
.mpay { padding: 12px 14px; border-radius: var(--r-btn); background: var(--tint); display: flex; flex-direction: column; gap: 2px; }
.mpay__line { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mpay__total { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.mdone { display: flex; flex-direction: column; gap: 10px; }
.mdone__head { display: flex; gap: 12px; align-items: center; }
.mdone__head > div { min-width: 0; }
.mdone__ico { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.mdone__ico .cab-ico { stroke-width: 2.4; }
.mdone__work { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Камера: квадрат с рамкой-прицелом */
.mscan { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #0d0f12; }
.mscan__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mscan__aim {
  position: absolute; inset: 18%; border-radius: 18px;
  border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 999px rgba(0, 0, 0, .28);
}
.mscan.is-off .mscan__aim { border-color: rgba(255, 255, 255, .35); }
.mscan__status { margin: 0; color: var(--ink-2); min-height: 1.5em; }
.mscan__status:empty { display: none; }

.scan .cab-textbtn { margin-top: 2px; }

/* ============================== ДИАЛОГ ============================== */
.cab-dialog {
  width: min(400px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.cab-dialog::backdrop { background: rgba(10, 12, 16, .55); }
.cab-dialog__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; white-space: nowrap; }
.cab-dialog__text { margin: 0 0 10px; color: var(--ink-2); }
.cab-dialog .cab-field__error { margin-bottom: 10px; }
.cab-dialog__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ============================== ТОСТЫ ============================== */
.cab-toasts {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.cab-toast {
  padding: 12px 16px; border-radius: var(--r-btn); background: rgba(26, 26, 26, .95); color: #fff;
  font-size: .92rem; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); transition: opacity .3s;
}
.cab-toast--error { background: #8f1d16; }
.cab-toast.is-out { opacity: 0; }
html[data-theme="dark"] .cab-toast { background: rgba(237, 239, 242, .96); color: #14181d; }
html[data-theme="dark"] .cab-toast--error { background: #ffd7d4; color: #3d0b07; }

@media (max-width: 360px) {
  .cab-main { padding-inline: 12px; gap: 12px; }
  .cab-top__inner { padding-inline: 12px; }
  .bcard__code { font-size: 2rem; }
  .bcard__body, .bcard__top, .csum__top, .csum__body { padding-inline: 14px; }
  .ladder__steps { gap: 4px; }
  .ladder__bar { font-size: .8rem; }
  /* Узкий экран: значок ярлыка уступает место заголовку в одну строку */
  .a2hs__ico { display: none; }
  /* Специализации заявки мастера: «Шиномонтаж» в две колонки на 320 не помещается */
  .mspecs { grid-template-columns: 1fr; }
}

/* Нажатие — короткий отклик (у .btn он из styles.css) */
.cab-textbtn:active, .cab-quiet:active { opacity: .6; }

/* Без движения, если так просит система: ни наклона, ни блика, ни проявлений */
@media (prefers-reduced-motion: reduce) {
  .cab-main.is-enter, .invite, .cpath__panel, .cshare, .bcard__code.is-new, .qr__svg.is-new, .bcard::after, .csum::after { animation: none; }
  .bcard { transform: none; transition: none; }
  .seg__btn, .ladder__bar, .cab-row__chev, .bcard::after { transition: none; }
}