/* ═══════════════════════════════════════════════════════════
   Конфигуратор сборки — оформление в фирменном стиле WolfTravel.
   Ванильный CSS, без фреймворков и CDN. Шрифты self-hosted.

   Стиль взят с wolftravel.ru: тёмный фон, тёплый белый текст,
   латунное золото акцентом, крупные прописные Unbounded,
   моно-надстрочники PT Mono через точку.
   Лаймовый #CCFF00 — из логотипа, используется только там, где
   нужен «живой» сигнал: подсветка узла на схеме и активные состояния.
   ═══════════════════════════════════════════════════════════ */

@import url('/assets/fonts/fonts.css');

:root {
  --bg:      #0E0E0E;
  --bg-2:    #151515;
  --bg-3:    #1B1B1B;
  --line:    rgba(255,255,255,.08);
  --line-2:  rgba(255,255,255,.14);
  --tx:      #E8E4DF;
  --tx-dim:  rgba(232,228,223,.5);
  --tx-mut:  rgba(232,228,223,.35);
  --acc:     #C4A060;         /* латунь — основной акцент бренда */
  --acc-dk:  #A5854B;
  --live:    #CCFF00;         /* лайм из логотипа — только «живые» состояния */
  --warn:    #E0B23C;
  --bad:     #E5484D;
  --ff:      'Unbounded', system-ui, sans-serif;
  --ff-m:    'PT Mono', ui-monospace, monospace;
  --r:       2px;             /* бренд почти без скруглений */

  /* Шкала размеров: нижняя граница — читаемость на телефоне,
     верхняя — чтобы на широком мониторе строка не превращалась в плакат. */
  --fs-hero: clamp(29px, 5vw, 54px);
  --fs-h1:   clamp(21px, 2.8vw, 33px);
  --fs-h2:   clamp(15px, 1.5vw, 18px);
  --fs-md:   clamp(13px, 1vw, 14px);
  --fs-sm:   12.5px;
  --fs-xs:   10px;            /* моно-надстрочники */

  --ease:    cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 400 15px/1.6 var(--ff);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--acc); color: #0E0E0E; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

/* ── Надстрочники и заголовки ── */
.eyebrow {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ТИПОГРАФСКАЯ ШКАЛА.
   Unbounded — широкая гарнитура: в прописных ей нужен отрицательный трекинг,
   иначе строка расползается, а межстрочный — плотнее обычного, иначе крупный
   заголовок выглядит рыхлым. Размеры заданы одной шкалой, а не подобраны
   поштучно на каждом экране. */
h1 {
  font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.022em;
  text-transform: uppercase; font-weight: 700; margin: 0 0 12px; text-wrap: balance;
}
.hero h1 { font-size: var(--fs-hero); line-height: 1.0; letter-spacing: -.028em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.015em; margin: 0 0 14px; font-weight: 600; }
.lead { color: var(--tx-dim); margin: 0 0 26px; max-width: 58ch;
        font-size: var(--fs-md); line-height: 1.62; text-wrap: pretty; }

/* Шапка четвёртого шага: заголовок и выход в одну строку, без потери высоты */
.s4-head { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.s4-head .eyebrow { margin-bottom: 10px; }
.s4-title { font-size: clamp(18px, 2vw, 24px); text-transform: uppercase; font-weight: 700;
            letter-spacing: -.01em; margin: 0; }

/* ── Шапка ── */
.top {
  position: sticky; top: 0; z-index: 30; background: rgba(14,14,14,.9);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 16px; height: 66px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo img { height: 24px; width: auto; display: block; }
.logo span {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-mut); padding-left: 11px; border-left: 1px solid var(--line-2);
}
.steps { display: flex; gap: 18px; margin-left: auto; font-family: var(--ff-m); font-size: 10px;
         letter-spacing: .16em; }
.steps i { font-style: normal; color: var(--tx-mut); transition: color .3s; position: relative; }
.steps i.on { color: var(--acc); }
.steps i.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--acc);
}
@media (max-width: 620px) { .steps { display: none; } }

/* ── Экран ── */
/* padding-block, а НЕ сокращение padding: секции имеют классы .screen и .wrap
   одновременно, и сокращение с нулём по горизонтали затирало отступы .wrap.
   На десктопе это пряталось за полями от max-width, а на телефоне текст ложился
   на самый край экрана. Та же ловушка была в подвале. */
.screen { display: none; padding-block: clamp(26px, 5vw, 64px) 80px; }
.screen.on { display: block; }
.screen.on > * { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
.screen.on > *:nth-child(2) { animation-delay: .05s; }
.screen.on > *:nth-child(3) { animation-delay: .1s; }
.screen.on > *:nth-child(4) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.on > * { animation: none; } }

/* ── Герой первого шага ── */
.hero { position: relative; padding-bottom: 46px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.hero::before {   /* тёплое свечение, как подсветка фары */
  content: ''; position: absolute; left: -10%; top: -60%; width: 70%; height: 190%;
  background: radial-gradient(closest-side, rgba(196,160,96,.13), transparent 70%);
  pointer-events: none;
}
.hero h1 { position: relative; max-width: 15ch; }
.hero .mark { color: var(--acc); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px;
  font-family: var(--ff-m); font-size: 11px; letter-spacing: .1em; color: var(--tx-mut);
  text-transform: uppercase;
}
.hero-meta b { display: block; font-family: var(--ff); font-size: 22px; letter-spacing: -.02em;
               color: var(--tx); text-transform: none; font-weight: 600; margin-bottom: 2px; }

/* ── Карточки дисциплин ── */
.discs { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 1px;
         background: var(--line); border: 1px solid var(--line); }
.disc {
  position: relative; text-align: left; cursor: pointer; padding: 26px 24px 24px;
  background: var(--bg); border: 0; transition: background .25s, color .25s;
  font-family: var(--ff); overflow: hidden;
}
.disc::after {  /* линия-подчерк, выезжает при наведении */
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.disc:hover:not([disabled]) { background: var(--bg-2); }
.disc:hover:not([disabled])::after { transform: scaleX(1); }
.disc[disabled] { opacity: .34; cursor: not-allowed; }
.disc .no { font-family: var(--ff-m); font-size: var(--fs-xs); letter-spacing: .2em; color: var(--tx-mut); }
.disc-ic {
  display: block; width: 100%; max-width: 128px; height: auto; margin: 16px 0 14px;
  color: var(--tx-dim); fill: none; overflow: visible;
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.disc:hover:not([disabled]) .disc-ic { color: var(--acc); transform: translateX(4px); }
.disc[disabled] .disc-ic { color: var(--tx-mut); }
.disc .nm { display: block; font-weight: 600; font-size: 16px; text-transform: uppercase;
            letter-spacing: -.015em; margin: 0 0 6px; }
.disc .sub { display: block; color: var(--tx-dim); font-size: var(--fs-sm); line-height: 1.5; }
.disc .cnt { display: block; font-family: var(--ff-m); font-size: var(--fs-xs); letter-spacing: .12em;
             color: var(--acc); margin-top: 14px; text-transform: uppercase; }
.disc[disabled] .cnt { color: var(--tx-mut); }
/* Появление лесенкой: карточки въезжают по очереди, а не все разом */
@media (prefers-reduced-motion: no-preference) {
  .screen.on .disc { animation: rise .5s var(--ease) both; animation-delay: calc(.06s * var(--i, 0) + .1s); }
}

/* ── Форма параметров ── */
.form { display: grid; grid-template-columns: 1fr 330px; gap: 46px; align-items: start; }
@media (max-width: 900px) { .form { grid-template-columns: 1fr; gap: 30px; } }

.field { margin-bottom: 30px; }
.field > label { display: flex; align-items: baseline; justify-content: space-between;
                 font-family: var(--ff-m); font-size: 11px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--tx-dim); margin-bottom: 12px; }
.field .val { font-family: var(--ff); font-size: 24px; font-weight: 600; color: var(--tx);
              letter-spacing: -.03em; text-transform: none; }
.field .val em { font-style: normal; font-size: 12px; color: var(--tx-mut); font-weight: 400; }

/* Высота самого input — 30 px, а не 1 px: линия рисуется дорожкой внутри.
   Раньше элемент был высотой в пиксель, и попасть по нему пальцем на телефоне
   было почти невозможно — тянуть удавалось только за саму точку бегунка. */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px;
  background: transparent; outline: none; margin: 6px 0; display: block; cursor: pointer;
  touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line-2); }
input[type=range]::-moz-range-track { height: 1px; background: var(--line-2); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; margin-top: -7px;
  background: var(--acc); cursor: grab; box-shadow: 0 0 0 5px rgba(196,160,96,.16);
  transition: box-shadow .2s, transform .12s;
}
input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(196,160,96,.24);
                                                 cursor: grabbing; transform: scale(1.12); }
input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--acc); cursor: grab;
  box-shadow: 0 0 0 5px rgba(196,160,96,.16);
}
input[type=range]:active::-moz-range-thumb { box-shadow: 0 0 0 10px rgba(196,160,96,.24); }
/* На тач-экранах бегунок крупнее: палец точнее пикселя не бывает */
@media (hover: none) {
  input[type=range] { height: 36px; }
  input[type=range]::-webkit-slider-thumb { width: 19px; height: 19px; margin-top: -9px; }
  input[type=range]::-moz-range-thumb { width: 19px; height: 19px; }
}
.scale { display: flex; justify-content: space-between; font-family: var(--ff-m);
         font-size: 10px; letter-spacing: .1em; color: var(--tx-mut); }

.seg { display: flex; border: 1px solid var(--line); }
.seg button {
  flex: 1; padding: 13px 8px; border: 0; background: transparent; color: var(--tx-dim);
  cursor: pointer; font-family: var(--ff-m); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; transition: all .22s; border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--tx); }
.seg button.on { background: var(--acc); color: #0E0E0E; }

/* Правая колонка второго шага: фигура райдера, расчёт и кнопка.
   Кнопка стоит здесь, а не под ползунками, — она завершает то, что человек
   видит справа, а не то, что крутит слева. */
.side { border: 1px solid var(--line); padding: 0; position: sticky; top: 82px;
        background: linear-gradient(180deg, var(--bg-2), var(--bg)); overflow: hidden; }
.side-rows { padding: 4px 20px 8px; }
.side .row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0;
             font-size: 13px; border-bottom: 1px solid var(--line); }
.side .row:last-child { border-bottom: 0; }
.side .row span { color: var(--tx-mut); font-family: var(--ff-m); font-size: 10.5px;
                  letter-spacing: .09em; text-transform: uppercase; }
.side .row b { font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.side-cta { padding: 4px 20px 20px; }
.side-cta .btn { width: 100%; }
.side-note { font-size: 11px; color: var(--tx-mut); line-height: 1.55; margin: 14px 0 0; }

/* ── Кнопки ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px; border: 0; background: var(--acc); color: #0E0E0E;
  font-family: var(--ff-m); font-weight: 400; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; cursor: pointer; text-decoration: none; position: relative;
  transition: background .22s, color .22s, transform .22s;
}
.btn:hover { background: #D8B679; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--tx-dim); border: 1px solid var(--line-2); }
.btn.ghost:hover { background: transparent; color: var(--tx); border-color: var(--acc); }
.btn.sm { padding: 10px 16px; font-size: 10px; letter-spacing: .14em; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ── Варианты сборки ── */
.variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px;
            background: var(--line); border: 1px solid var(--line); }
.vr { background: var(--bg); padding: 30px 26px; display: flex; flex-direction: column;
      transition: background .25s; position: relative; }
.vr:hover { background: var(--bg-2); }
.vr.pick { background: var(--bg-2); }
.vr.pick::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--acc); }
.vr .tag { font-family: var(--ff-m); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
           color: var(--tx-mut); }
.vr.pick .tag { color: var(--acc); }
.vr .price { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.035em; margin: 14px 0 4px; }
.vr .meta { color: var(--tx-mut); font-family: var(--ff-m); font-size: 10.5px; letter-spacing: .08em;
            margin-bottom: 22px; text-transform: uppercase; }
.vr ul { list-style: none; margin: 0 0 24px; padding: 0; font-size: 12.5px; }
.vr ul li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
            color: var(--tx-mut); border-bottom: 1px solid var(--line); }
.vr ul li span { font-family: var(--ff-m); font-size: 10px; letter-spacing: .1em;
                 text-transform: uppercase; white-space: nowrap; }
.vr ul li b { color: var(--tx); font-weight: 400; text-align: right; font-size: 12.5px; }
.vr .btn { margin-top: auto; }

/* ── Итоговая сборка ── */
/* Правая колонка шире обычного: в ней живёт схема, и велосипед должен
   читаться, оставаясь на виду при прокрутке спецификации. */
.build { display: grid; grid-template-columns: 1fr 400px; gap: 34px; align-items: start; }
@media (max-width: 1080px) { .build { grid-template-columns: 1fr 340px; gap: 24px; } }
@media (max-width: 900px) {
  .build { grid-template-columns: 1fr; gap: 20px; }
  /* На узком экране схема с ценой уходит наверх — иначе до неё нужно листать всё */
  .build .sum { order: -1; position: static; }
}

/* Группа узлов — отдельная карточка с иконкой и своей суммой.
   Раньше блоки различались только подписью и сливались в одну простыню. */
.grp { margin-bottom: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.grp h3 {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-dim); margin: 0; font-weight: 400; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02);
}
.grp h3 .t { flex: 1; }
.grp h3 .grp-sum { font-family: var(--ff); font-size: 12px; letter-spacing: -.01em;
                   color: var(--tx-dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.grp .ic { width: 17px; height: 17px; color: var(--acc); flex-shrink: 0; }
.grp-body { padding: 0; }
/* Внутри карточки строки уже разделены её рамкой — свои границы им не нужны */
.grp-body .slot { border-left: 0; border-right: 0; }
.grp-body .slot:first-child { border-top: 0; }
.grp-body .slot:last-child { border-bottom: 0; margin-bottom: 0; }

/* Строки спецификации плотные: их два десятка, и лишние пиксели высоты
   выталкивают половину списка за экран. Кнопка «заменить» проявляется
   при наведении — в покое ряд из 20 одинаковых кнопок только шумит. */
.slot {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border: 1px solid var(--line); margin-bottom: -1px; transition: background .16s, border-color .16s;
  position: relative;
}
.slot:hover { background: var(--bg-2); border-color: var(--line-2); z-index: 2; }
.slot .nm { color: var(--tx-mut); font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .08em;
            text-transform: uppercase; width: 116px; flex-shrink: 0; line-height: 1.35; }
.slot .pt { flex: 1; min-width: 0; }
.slot .pt b { font-weight: 500; font-size: 13px; display: block; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.slot .pt small { color: var(--tx-mut); font-family: var(--ff-m); font-size: 10px; }
.slot .pr { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }
.slot .pr small { display: block; color: var(--tx-mut); font-family: var(--ff-m); font-size: 9.5px; }
.slot { cursor: pointer; }
.slot:focus-visible { outline: none; border-color: var(--acc); z-index: 2; }
.slot .go { color: var(--tx-mut); font-size: 13px; width: 14px; text-align: right;
            opacity: 0; transform: translateX(-3px); transition: opacity .16s, transform .16s; }
.slot:hover .go, .slot.act .go, .slot:focus-visible .go { opacity: 1; transform: none; color: var(--acc); }
@media (hover: none) { .slot .go { opacity: 1; transform: none; } }
.slot.empty { border-style: dashed; border-color: rgba(229,72,77,.35); }
.slot.empty .pt b { color: var(--bad); font-weight: 400; }
.slot.opt { border-style: dashed; }
.slot.opt .nm, .slot.opt .pt b { color: var(--tx-mut); font-weight: 400; }
.slot.chk { border-color: rgba(224,178,60,.4); }
.slot .chk-t { display: block; color: var(--warn); font-family: var(--ff-m); font-size: 10px;
               margin-top: 3px; letter-spacing: .04em; }
.slot.act { border-color: var(--acc); background: var(--bg-2); z-index: 2; }

/* Липкая панель: схема + цена + вес всегда перед глазами при прокрутке списка */
.sum { border: 1px solid var(--line); padding: 0 0 18px; position: sticky; top: 82px;
       background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.sum .cap { font-family: var(--ff-m); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
            color: var(--tx-mut); display: block; margin-bottom: 4px; }
.sum-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
           padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.sum .big { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.035em; margin: 0; }
.sum-w { text-align: right; }
.sum-w b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.sum .row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 20px;
            border-bottom: 1px solid var(--line); }
.sum .row:last-of-type { border-bottom: 0; }
.sum .row span { color: var(--tx-mut); font-family: var(--ff-m); font-size: 10px;
                 letter-spacing: .1em; text-transform: uppercase; }
.sum .row b { font-weight: 600; font-size: 14px; }

/* ── Смета: чего не хватает в комплекте ──
   Живёт под ценой, а не над списком: «нужен адаптер» — это позиция заказа. */
.sum-block { border-top: 1px solid var(--line); padding: 14px 20px 4px; }
.sum-block .cap { color: var(--acc); margin-bottom: 8px; }
.sum-block.bad  .cap { color: var(--bad); }
.sum-block.warn .cap { color: var(--warn); }
.sum-block.ok   .cap { color: var(--acc); }
.buy { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
       font-size: 12.5px; padding: 2px 0; }
.buy b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.why { color: var(--tx-mut); font-size: 11px; line-height: 1.5; padding: 2px 0 8px; }
.why b { color: var(--tx-dim); font-weight: 500; }
.sum-block.bad  .why b { color: #F09499; }
.sum-block.warn .why b { color: #EBC97A; }
/* Что делать вместо — отдельной строкой: объяснение без выхода бесполезно. */
.sum-block .why .fix {
  display: block; margin-top: 4px; color: var(--live);
  border-left: 2px solid var(--live); padding-left: 8px;
}
.sum .row.tot { padding: 9px 0 4px; margin-top: 4px; border-top: 1px solid var(--line);
                border-bottom: 0; }
.sum .row.tot b { font-size: 15px; color: var(--acc); }

/* ── Панель замены ── */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(0,0,0,.72); }
.drawer.on { display: block; animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer .panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(580px, 100%);
  background: var(--bg); border-left: 1px solid var(--line-2); overflow-y: auto;
  padding: 34px clamp(20px, 3vw, 32px); animation: slide .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer h2 { text-transform: uppercase; font-size: 20px; letter-spacing: -.01em; margin-bottom: 6px; }
.drawer .sub { color: var(--tx-mut); font-size: 12.5px; margin-bottom: 26px; line-height: 1.6; }
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  padding: 15px 17px; background: transparent; border: 1px solid var(--line); margin-bottom: -1px;
  transition: background .16s, border-color .16s; font-family: var(--ff); position: relative;
}
.opt:hover { background: var(--bg-2); border-color: var(--acc); z-index: 2; }
.opt.cur { border-color: var(--acc); background: var(--bg-2); z-index: 2; }
.opt.cur::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--acc); }
.opt .t { flex: 1; min-width: 0; }
.opt .t b { font-weight: 500; font-size: 13.5px; display: block; }
.opt .t small { color: var(--tx-mut); font-family: var(--ff-m); font-size: 10.5px; }
.opt .p { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13.5px; }

.spin { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--line-2);
        border-top-color: var(--acc); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

.foot { border-top: 1px solid var(--line); color: var(--tx-mut); font-family: var(--ff-m);
        font-size: 10.5px; letter-spacing: .06em; padding-block: 24px 44px; line-height: 1.7; }

/* ═══════════════ СХЕМА СБОРКИ ═══════════════
   Штриховая графика: линии прочерчиваются при появлении, узел под курсором
   загорается лаймом из логотипа — единственное место, где он появляется. */

/* Схема живёт внутри липкой панели — без своей рамки, чтобы читалась одним блоком */
.scheme {
  position: relative; overflow: hidden; padding: 6px 6px 0;
  background: radial-gradient(120% 80% at 50% 10%, rgba(196,160,96,.10), transparent 66%);
  border-bottom: 1px solid var(--line);
}
/* Подпись узла под схемой: место зарезервировано, поэтому панель не дёргается
   по высоте, когда ведёшь курсором по узлам. */
.scheme .cur {
  display: block; min-height: 30px; padding: 0 16px 10px; font-family: var(--ff-m);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-mut);
  text-align: center; transition: color .2s; line-height: 1.4;
}
.scheme .cur.on { color: var(--live); }

svg.bike { display: block; width: 100%; height: auto; }
/* В разметке лежат обе схемы — хардтейл и двухподвес; лишнюю прячем. */
svg.bike.is-off { display: none; }
/* Раскладки задней подвески лежат все три, показываем раскладку выбранной рамы. */
svg.bike .lay { display: none; }
svg.bike .lay.on { display: inline; }
svg.bike .ground { stroke: rgba(255,255,255,.07); stroke-width: 1; stroke-dasharray: 2 12; }

svg.bike g.hit { cursor: pointer; }
/* Штрихи масштабируются вместе с рисунком (без non-scaling-stroke): схема теперь
   всегда компактная, и постоянная толщина линии выглядела бы грубо. */
svg.bike g.hit * {
  fill: none; stroke: #6E6A64; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s, opacity .2s;
}
svg.bike .tire   { stroke: #4A4742; stroke-width: 20; }
svg.bike .rim    { stroke-width: 7; }
svg.bike .spokes line { stroke: rgba(110,106,100,.4); stroke-width: 2; }
svg.bike .hub    { stroke-width: 6; }
svg.bike .rotor  { stroke: #423F3A; stroke-width: 3; stroke-dasharray: 7 7; }
svg.bike .tube   { stroke-width: 11; stroke: #8A857D; }
svg.bike .head   { stroke-width: 14; }
svg.bike .fork   { stroke-width: 9; }
svg.bike .stanchion { stroke: #B0AAA1; stroke-width: 6; }
svg.bike .ring   { stroke-width: 4; stroke-dasharray: 6 6; }
svg.bike .cass   { stroke-width: 3.5; }
svg.bike .chain  { stroke-width: 3.5; stroke-dasharray: 7 6; }
svg.bike .saddle { fill: #6E6A64; stroke: #6E6A64; stroke-width: 3; }
svg.bike .caliper{ fill: #262421; stroke-width: 4; }
svg.bike .bb     { stroke-width: 6; }
svg.bike .rd-pulley { stroke-width: 3.5; }
/* Задняя подвеска */
svg.bike .stay   { stroke-width: 9; }
svg.bike .link   { stroke-width: 10; stroke: #8A857D; }
svg.bike .pivot  { stroke-width: 3.5; stroke: #B0AAA1; }
svg.bike .shock-body  { stroke-width: 15; stroke: #8A857D; }
svg.bike .shock-shaft { stroke-width: 6;  stroke: #B0AAA1; }
svg.bike .shock-eye   { stroke-width: 4; }

svg.bike g.hit:hover *, svg.bike g.hit.act * { stroke: var(--live); }
svg.bike g.hit:hover .saddle, svg.bike g.hit.act .saddle { fill: var(--live); }
svg.bike g.hit:hover .spokes line, svg.bike g.hit.act .spokes line { stroke: rgba(204,255,0,.45); }
svg.bike g.hit.act { filter: url(#glow); }
svg.bike g.hit.off * { stroke: #35332F; opacity: .6; }
svg.bike g.hit.off .saddle { fill: #35332F; }
svg.bike g.hit.chk * { stroke: var(--warn); }

@media (prefers-reduced-motion: no-preference) {
  .scheme.draw svg.bike g.hit * {
    stroke-dasharray: 1200; stroke-dashoffset: 1200;
    animation: draw 1.2s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .scheme.draw svg.bike .spokes line { animation-duration: .8s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* ═══════════════ АДАПТИВ ═══════════════
   Точки перелома выбраны по содержимому, а не по «размерам устройств»:
   каждая — там, где конкретный блок начинает ломаться. */

/* Шапка: на узком логотип мельче, номера шагов уже скрыты */
@media (max-width: 620px) {
  .top .wrap { height: 56px; }
  .logo img { height: 19px; }
  .logo span { font-size: 9px; padding-left: 9px; }
}

/* Первый экран */
@media (max-width: 860px) {
  .discs { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-bottom: 32px; margin-bottom: 30px; }
  .hero-meta { gap: 20px; margin-top: 22px; }
  .hero-meta b { font-size: 19px; }
}
@media (max-width: 520px) {
  .discs { grid-template-columns: 1fr; }
  .disc { padding: 18px 18px 20px; display: grid; grid-template-columns: 84px 1fr;
          column-gap: 16px; align-items: center; }
  /* На телефоне карточка ложится в строку: иконка слева, текст справа */
  .disc .no { grid-column: 2; }
  .disc-ic { grid-row: 1 / span 4; grid-column: 1; margin: 0; max-width: 84px; }
  .disc .nm, .disc .sub, .disc .cnt { grid-column: 2; }
  .disc .cnt { margin-top: 8px; }
  .hero-meta { gap: 14px 24px; }
}

/* Второй шаг */
@media (max-width: 900px) {
  .side { position: static; }
  /* Кнопка на телефоне липнет к низу экрана — до неё не нужно долистывать */
  .side-cta { position: sticky; bottom: 0; background: var(--bg-2);
              border-top: 1px solid var(--line); padding: 14px 16px; }
  .side-note { display: none; }
}
@media (max-width: 560px) {
  .field { margin-bottom: 22px; }
  .field .val { font-size: 20px; }
  .seg button { padding: 11px 4px; font-size: 10px; letter-spacing: .1em; }
}

/* Третий шаг */
@media (max-width: 760px) {
  .variants { grid-template-columns: 1fr; }
  .vr { padding: 22px 20px; }
  .vr .price { margin: 10px 0 2px; }
}

/* Четвёртый шаг */
@media (max-width: 720px) {
  .s4-head { align-items: flex-start; }
  .grp h3 { padding: 8px 12px; font-size: 9px; letter-spacing: .16em; }
  .grp h3 .grp-sum { font-size: 11px; }
  /* Строка ломается в две: подпись узла уходит над названием детали */
  .slot { flex-wrap: wrap; padding: 10px 12px; gap: 4px 10px; }
  .slot .nm { width: 100%; order: -1; font-size: 9px; }
  .slot .pt { flex: 1 1 60%; }
  .slot .pr { flex: 0 0 auto; }
  .slot .go { display: none; }
  .drawer .panel { padding: 24px 18px; }
}

/* ═══════════════ АНИМАЦИЯ ═══════════════
   Только там, где движение что-то объясняет: появление порциями показывает
   структуру, смена числа — что пересчёт уже произошёл. */
@media (prefers-reduced-motion: no-preference) {
  .screen.on .vr { animation: rise .45s var(--ease) both; animation-delay: calc(.07s * var(--i, 0)); }
  .screen.on .grp { animation: rise .4s var(--ease) both; animation-delay: calc(.05s * var(--i, 0)); }
  /* Цена и вес мигают при пересчёте — иначе замена узла проходит незаметно */
  .flash-num { animation: numpulse .5s var(--ease); }
  @keyframes numpulse {
    0%   { color: var(--acc); transform: translateY(-2px); }
    100% { color: inherit;    transform: none; }
  }
}
.btn:active { transform: translateY(0) scale(.985); }
.disc:active:not([disabled]) { transform: scale(.995); }

/* Клавиатурная навигация видна везде, а не только на строках спецификации */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}

/* ═══════════ ПАРАМЕТРЫ СБОРКИ НА ЧЕТВЁРТОМ ШАГЕ ═══════════
   Показываем, из чего собирали. Правятся не здесь — клик возвращает на нужный
   шаг: смена роста или бюджета пересобирает велосипед целиком, и делать вид,
   что это мелкая правка на месте, было бы враньём. */
.params { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line); background: transparent; color: var(--tx);
  font-family: var(--ff); font-size: 12.5px; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.chip em { font-style: normal; font-family: var(--ff-m); font-size: 9px; letter-spacing: .12em;
           text-transform: uppercase; color: var(--tx-mut); }
.chip:hover { border-color: var(--acc); background: var(--bg-2); }
.chip:hover em { color: var(--acc); }
.chip.ro { cursor: default; border-style: dashed; }
.chip.ro:hover { border-color: var(--line); background: transparent; }
.chip.ro em { color: var(--acc); }

/* ═══════════ СВЕДЕНИЯ О ЗАМЕНАХ В СТРОКЕ ═══════════ */
.slot .sub-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.alt { font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .06em; color: var(--acc);
       opacity: .85; min-height: 12px; }
.alt.none { color: var(--tx-mut); opacity: .7; }

/* ═══════════ ХАРАКТЕРИСТИКИ В ПАНЕЛИ ЗАМЕНЫ ═══════════ */
.opt-row { margin-bottom: -1px; }
.opt-row .opt { margin-bottom: 0; }
.spec-t {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 17px;
  background: transparent; border: 1px solid var(--line); border-top: 0; cursor: pointer;
  font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-mut); transition: color .16s, border-color .16s;
}
.spec-t:hover { color: var(--acc); }
.spec-t i { width: 7px; height: 7px; border-right: 1.4px solid currentColor;
            border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translate(-1px,-1px);
            transition: transform .22s var(--ease); }
.spec-t[aria-expanded="true"] i { transform: rotate(-135deg) translate(-1px,-1px); }
.spec-t[aria-expanded="true"] { color: var(--acc); }

.spec { border: 1px solid var(--line); border-top: 0; padding: 4px 17px 12px;
        background: rgba(255,255,255,.015); }
.spec[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .spec:not([hidden]) { animation: specin .26s var(--ease) both; }
  @keyframes specin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.spec-head { font-family: var(--ff-m); font-size: 10px; letter-spacing: .1em; color: var(--tx-mut);
             text-transform: uppercase; padding: 10px 0 6px; }
.spec-sec { padding-top: 10px; }
.spec-sec .cap { font-family: var(--ff-m); font-size: 9px; letter-spacing: .18em;
                 text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.sr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
      padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 12px; }
.sr:last-child { border-bottom: 0; }
.sr span { color: var(--tx-mut); }
.sr b { font-weight: 500; text-align: right; }
.spec-link { font-family: var(--ff-m); font-size: 10px; letter-spacing: .1em; color: var(--acc);
             text-transform: uppercase; text-decoration: none; }
.spec-link:hover { text-decoration: underline; }

/* Гео-таблица прокручивается внутри себя, а не растягивает панель */
.geo-wrap { overflow-x: auto; margin: 0 -2px; }
.geo { border-collapse: collapse; width: 100%; font-size: 11px; font-variant-numeric: tabular-nums; }
.geo th { font-family: var(--ff-m); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
          color: var(--tx-mut); font-weight: 400; text-align: left; padding: 4px 8px 4px 0; white-space: nowrap; }
.geo td { padding: 4px 8px 4px 0; border-top: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
.geo tr td:first-child { color: var(--acc); }

/* ═══════════ ДОВОДКА ПОД ТЕЛЕФОН ═══════════
   Всё ниже — про вертикальный бюджет: на 390 px экран короткий, и каждый
   блок должен отдавать место следующему, а не занимать пол-экрана собой. */
@media (max-width: 700px) {
  .wrap { padding-inline: 18px; }

  /* Заголовок шага и кнопка возврата — в одну строку, кнопка прижата вправо */
  .s4-head { align-items: center; gap: 12px; margin-bottom: 14px; }
  .s4-head > div { flex: 1 1 auto; min-width: 0; }
  .s4-head .btn { flex: 0 0 auto; padding: 9px 12px; }
  .s4-head .eyebrow { margin-bottom: 6px; }

  /* Параметры лентой в один ряд с прокруткой: три ряда чипов съедали
     треть экрана ещё до того, как человек увидел сборку */
  .params { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
            margin-inline: -18px; padding-inline: 18px; scroll-snap-type: x proximity; }
  .params::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; padding: 6px 10px; font-size: 12px; }
  .chip em { font-size: 8.5px; }

  /* Схема и фигура не должны занимать больше трети экрана */
  .scheme svg.bike { max-height: 26vh; }

  .sum-top { padding: 14px 16px 12px; }
  .sum .row { padding: 9px 16px; }
  .sum-block { padding: 12px 16px 4px; }
  .side-rows { padding: 2px 16px 6px; }

  .lead { margin-bottom: 22px; }
  .field { margin-bottom: 20px; }
  .field > label { margin-bottom: 8px; }
  .scale { font-size: 9.5px; }

  .grp { margin-bottom: 10px; }
  .params + .build { margin-top: 2px; }
}

/* Совсем узкие экраны */
@media (max-width: 400px) {
  .wrap { padding-inline: 14px; }
  .params { margin-inline: -14px; padding-inline: 14px; }
  .slot { padding: 9px 11px; }
  .slot .pt b { font-size: 12.5px; }
  .slot .pr { font-size: 12.5px; }
  .seg button { padding: 10px 2px; font-size: 9.5px; letter-spacing: .06em; }
  .field .val { font-size: 19px; }
  .drawer .panel { padding: 20px 14px; }
  .sr { font-size: 11.5px; }
}


/* ═══════════ ВОЗВРАТ К АВТО-ЗНАЧЕНИЮ ═══════════
   Длина ноги считается от роста, пока её не трогали. После ручной правки
   связь рвётся — и без этой кнопки восстановить её было бы нечем. */
.field > label .lbl { display: inline-flex; align-items: center; gap: 8px; }
/* Метка тихая: это состояние поля, а не кнопка, на которую нужно смотреть.
   Плашка с рамкой перетягивала внимание с самих цифр. */
.auto-tag {
  font-family: var(--ff-m); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 0; border: 0; background: transparent; color: var(--tx-mut);
  cursor: default; opacity: .55; transition: color .18s, opacity .18s;
}
.auto-tag.is-auto { opacity: .45; }
.auto-tag:not(.is-auto) { cursor: pointer; color: var(--acc); opacity: .8;
                          text-decoration: underline; text-underline-offset: 3px; }
.auto-tag:not(.is-auto):hover { opacity: 1; }
.hint-row { font-family: var(--ff-m); font-size: 9px; letter-spacing: .08em;
            color: var(--tx-mut); opacity: .5; margin-top: 6px; }

/* ═══════════ КНОПКА ЗАМЕНЫ В СТРОКЕ ═══════════
   Раньше это была строчка текста, и было неочевидно, что по ней можно кликать.
   Теперь видно и сколько вариантов, и от какой цены они начинаются. */
.alt.has {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px;
  border: 1px solid rgba(196,160,96,.3); color: var(--acc); opacity: 1;
  font-family: var(--ff-m); font-size: 9px; letter-spacing: .06em;
  transition: border-color .16s, background .16s;
}
.slot:hover .alt.has { border-color: var(--acc); background: rgba(196,160,96,.08); }
/* Замен нет — но карточка детали всё равно открывается, поэтому подпись
   тише и без рамки: действие есть, просто другое. */
.alt.spec-only { display: inline-flex; align-items: center; padding: 2px 0;
                 color: var(--tx-mut); opacity: .75; border: 0;
                 font-family: var(--ff-m); font-size: 9px; letter-spacing: .06em; }
.slot:hover .alt.spec-only { color: var(--tx-dim); }

/* ── Блок «Искать в магазине» в панели замен ──
   Запрос показываем моноширинным и целиком: человек должен видеть, что именно
   уйдёт в поиск, а не доверять кнопке вслепую. */
.findbox {
  margin-top: 22px; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px 14px; background: rgba(255,255,255,.02);
}
.findbox > .cap { color: var(--acc); margin-bottom: 12px; }

.q-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.q-cap { color: var(--tx-mut); font-size: 12px; min-width: 96px; }
.q-txt {
  flex: 1 1 220px; font-family: 'PT Mono', ui-monospace, monospace; font-size: 13px;
  color: var(--tx); background: rgba(0,0,0,.35); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; overflow-wrap: anywhere;
}
.q-copy {
  border: 1px solid var(--line); background: none; color: var(--live);
  border-radius: 6px; padding: 7px 12px; font-size: 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.q-copy:hover { border-color: var(--live); background: rgba(204,255,0,.08); }

.q-need { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.q-need .cap { color: var(--tx-mut); font-size: 12px; margin-bottom: 8px; }
.q-need ul { list-style: none; margin: 0; padding: 0; }
.q-need li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 5px 0; font-size: 13px; border-bottom: 1px dashed rgba(255,255,255,.06);
}
.q-need li:last-child { border-bottom: 0; }
.q-need li span { color: var(--tx-mut); }
.q-need li b { color: var(--tx); text-align: right; }

@media (max-width: 620px) {
  .q-cap { min-width: 100%; }
  .q-copy { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   ВХОД
   Схема велосипеда рисуется штрихом на глазах — то же движение,
   что потом живёт на четвёртом шаге, только медленнее и крупнее.
   Всё анимируемое спрятано за prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

.auth-body { min-height: 100svh; overflow-x: hidden; }
.auth { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 100svh; }

/* ── Левая половина ── */
.auth-art {
  position: relative; overflow: hidden; background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 4vw, 60px);
}
.auth-art::before {          /* тёплое свечение, как подсветка фары */
  content: ''; position: absolute; left: -15%; top: -25%; width: 80%; height: 150%;
  background: radial-gradient(closest-side, rgba(196,160,96,.16), transparent 70%);
  pointer-events: none;
}
.auth-art::after {           /* второй, холодный — чтобы кадр не был плоским */
  content: ''; position: absolute; right: -20%; bottom: -30%; width: 70%; height: 120%;
  background: radial-gradient(closest-side, rgba(204,255,0,.06), transparent 70%);
  pointer-events: none;
}

.auth-brand { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: auto; }
.auth-brand img { height: 26px; width: auto; display: block; }
.auth-brand span {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-mut); padding-left: 12px; border-left: 1px solid var(--line-2);
}

.auth-bike { position: relative; margin: 32px 0; transition: transform .5s var(--ease); }
.auth-bike svg.bike { max-height: 46vh; }

/* Просадка подвески при отправке — вес «сел» на велосипед */
.auth-art.sag .auth-bike { transform: translateY(9px) scaleY(.985); }

/* Гребень гор внизу: медленный дрейф, почти незаметный */
.auth-ridge {
  position: absolute; left: -5%; right: -5%; bottom: 0; width: 110%; height: clamp(70px, 12vh, 130px);
  pointer-events: none;
}
.auth-ridge path { fill: rgba(255,255,255,.028); }

.auth-tag { position: relative; margin-top: auto; }
.auth-tag b {
  display: block; font-size: clamp(15px, 1.6vw, 19px); font-weight: 600;
  letter-spacing: -.015em; margin-bottom: 6px;
}
.auth-tag span { color: var(--tx-mut); font-size: 12.5px; line-height: 1.55; }

/* ── Правая половина ── */
.auth-panel { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: clamp(20px, 2.4vw, 27px); }
.auth-card .lead { margin-bottom: 26px; font-size: 13.5px; }

.auth-field { display: block; margin-bottom: 16px; }
.auth-field span {
  display: block; font-family: var(--ff-m); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx-mut); margin-bottom: 7px;
}
.auth-field input {
  width: 100%; background: var(--bg-2); color: var(--tx);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 13px 14px; font: 400 15px/1.2 var(--ff); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-field input:hover { border-color: rgba(255,255,255,.22); }
.auth-field input:focus {
  border-color: var(--acc); background: var(--bg-3);
  box-shadow: 0 0 0 3px rgba(196,160,96,.14);
}

.auth-err {
  border: 1px solid rgba(229,72,77,.4); background: rgba(229,72,77,.08);
  color: #F09499; border-radius: var(--r); padding: 11px 13px;
  font-size: 13px; margin-bottom: 18px;
}

.auth-go {
  width: 100%; margin-top: 8px; display: inline-flex; align-items: center;
  justify-content: center; gap: 10px;
}
.auth-arrow { width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6;
              stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.auth-go:hover .auth-arrow { transform: translateX(4px); }
.auth-card.busy .auth-go { opacity: .6; pointer-events: none; }
.auth-card.busy .auth-arrow { animation: authGo .7s var(--ease) infinite; }
@keyframes authGo { 0% { transform: translateX(0); } 60% { transform: translateX(7px); } 100% { transform: translateX(0); } }

.auth-note { margin-top: 18px; color: var(--tx-mut); font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  /* Рисуем схему по группам, а не всю разом: так читается сборка, а не мельтешение */
  .auth-bike svg.bike g.hit * {
    stroke-dasharray: 1600; stroke-dashoffset: 1600;
    animation: draw 1.5s var(--ease) forwards;
  }
  .auth-bike svg.bike g.hit:nth-of-type(1) * { animation-delay: .05s; }
  .auth-bike svg.bike g.hit:nth-of-type(2) * { animation-delay: .18s; }
  .auth-bike svg.bike g.hit:nth-of-type(3) * { animation-delay: .3s; }
  .auth-bike svg.bike g.hit:nth-of-type(n+4) * { animation-delay: .42s; }
  .auth-bike svg.bike .spokes line { animation-duration: .9s; }

  .auth-ridge { animation: ridge 26s ease-in-out infinite alternate; }
  @keyframes ridge { from { transform: translateX(0); } to { transform: translateX(-3%); } }

  .auth-card.shake { animation: shake .42s var(--ease); }
  @keyframes shake {
    0%,100% { transform: translateX(0); }
    18% { transform: translateX(-7px); }
    38% { transform: translateX(6px); }
    62% { transform: translateX(-4px); }
    82% { transform: translateX(2px); }
  }
}

/* На узком экране схема уезжает наверх узкой полосой: она украшение,
   а не содержание — форма должна быть в первом экране целиком. */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 20px 0; }
  .auth-bike { margin: 10px 0 0; }
  .auth-bike svg.bike { max-height: 26vh; }
  .auth-tag { display: none; }
  .auth-ridge { height: 56px; }
  .auth-panel { padding: 28px 20px 48px; }
}

/* Выход из конфигуратора — рядом с номерами шагов, тихо */
.signout {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-mut); text-decoration: none; margin-left: 20px;
  padding-left: 20px; border-left: 1px solid var(--line-2); transition: color .2s;
}
.signout:hover { color: var(--acc); }
@media (max-width: 620px) { .signout { margin-left: auto; padding-left: 0; border-left: 0; } }

/* Пояснение на третьем шаге: бюджет ниже минимума каталога */
.v-notice {
  border-left: 2px solid var(--warn); background: rgba(224,178,60,.07);
  color: #EBC97A; padding: 12px 16px; margin: 0 0 22px;
  font-size: 13.5px; line-height: 1.55; max-width: 70ch;
}