/* Come On Rent — прототип. proto.css: небольшие добавки поверх assets/page.css (новой визуальной системы нет).
   Подключение: шрифты как в rent.html → page.css → proto.css. Акцент — красный DO IT HARD (#E3262B, как do-it-hard.com и логотип B1; было Ride Blue #3F4FE4 до 12.10) — только там, где rent.html берёт --c:
   заливка .btn-acc, активная лента фильтра и срока, рамка карточки при наведении, цена, .accent, линия eyebrow, фокус.
   Статус, таймер, бирка и ячейка календаря — всегда текстом; цвет и форма значка только дублируют текст.

   Классы (кратко):
   раскладка   .stack .row .muted .small .num .sr-only .wrap-narrow .grid-2
   каталог     .bikes-grid .filter .ribbon .card .media(4:5) .tags .tag .ph(нет фото) .approx .price-note
   статусы     .st[data-tone=wait|ok|alert|done|off] · .timer(.late) · .tag-v1 · .v1-plate · .badge-demo
   формы       .field .lbl .hint .err .errsum .choice .choices .estimate · input/select/textarea внутри .field · [aria-invalid]
   кнопки      .btn-block .btn-warn .linkbtn · [aria-disabled="true"] · [aria-busy="true"]
   отказы      .reasons (заголовок «Нельзя …:» + список) · .notice[data-tone=ok|warn|err|info]
   листы       dialog.sheet .sheet-head .sheet-body .sheet-foot .sheet-close · .actbar (нижняя панель действий)
   панель      .rv-toggle .rv-panel .rv-group .rv-opts .rv-now .rv-out
   CRM         .tabs .rows .rowi dl.kv .tbl .tl(лента истории) .alerts
   календарь   .cal-wrap .cal .cal-h .cal-unit .cal-c[data-state=free|busy|buffer|blocked] .today
   акт         .act .act-step .photo-grid .photo-slot[data-state=empty|ok|failed] .compare .gallery
*/

/* ── Акцент модуля и токены прототипа ─────────────────────────────────────────── */
body{--c:#E3262B;--btn-ink:#fff;--c-ink:#F2484D;
  --t2:rgba(246,245,242,.72);--t3:rgba(246,245,242,.6);
  --tone-wait:#F2B84B;--tone-ok:#8E9BFF;--tone-alert:#FF6B6B;--tone-done:#2FBF9B;--tone-off:rgba(246,245,242,.55);
  --err:#FF8A8A;--field:rgba(246,245,242,.3);--r:12px}
.num,.price,.card .pr b,.cal,.tbl td,.kv dd{font-variant-numeric:tabular-nums}
main,section,article,aside,.sheet-body{overflow-wrap:anywhere}
/* Акцент как цвет текста — светлее заливки, чтобы держать 4.5:1 на карбоне; кнопки без цветного свечения (impeccable audit 12.10) */
.accent,.card .pr b,.ms-price b,.p-hero h1 mark{color:var(--c-ink,var(--c))}
.btn-acc{box-shadow:none}

/* ── Раскладка ──────────────────────────────────────────────────────────────── */
.stack{display:flex;flex-direction:column;gap:var(--gap,14px)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,10px)}
.muted{color:var(--t3)}
.small{font-size:13px;line-height:1.5}
.wrap-narrow{max-width:720px}
.grid-2{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr;align-items:start}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sec-tight{padding:56px 0}
@media (max-width:480px){.wrap{padding:0 16px}.sec-tight{padding:40px 0}}

/* ── Каталог: сетка, ленты фильтра и срока (как в rent.html), карточка 4:5 ──────── */
.bikes-grid{grid-template-columns:1fr;margin-top:22px}
@media (min-width:560px){.bikes-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.filter,.ribbon{display:flex;gap:8px;margin-top:22px;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
@media (pointer:coarse){.filter,.ribbon,.tabs,.gallery{scrollbar-width:none}.filter::-webkit-scrollbar,.ribbon::-webkit-scrollbar,.tabs::-webkit-scrollbar,.gallery::-webkit-scrollbar{display:none}}
.logo{min-height:44px}
.filter button,.ribbon button,.ribbon a{flex:0 0 auto;min-height:44px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;background:var(--carbon-2);border:1px solid var(--line);color:var(--t2);padding:10px 16px;border-radius:30px;transition:.2s}
.filter button.on,.filter button[aria-pressed="true"],.ribbon .on,.ribbon [aria-pressed="true"],.ribbon [aria-current="true"]{background:var(--c);border-color:var(--c);color:var(--btn-ink)}
.seg button{min-height:44px;min-width:44px;font-size:11.5px}
.card .media{aspect-ratio:4/5;background:var(--carbon-3)}
.card .body .btn{min-height:44px}
.card .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.card .actions .btn{justify-content:center;padding:11px 12px}
.card .actions .btn:first-child{grid-column:1/-1}
.approx{margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--t3)}
.price-note{margin-top:6px;font-size:12.5px;color:var(--t3);line-height:1.45}
.price-note a{text-decoration:underline;text-underline-offset:3px}
.tags{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:26px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:20px;background:rgba(14,14,16,.82);color:var(--white);border:1px solid rgba(246,245,242,.3)}
.tag-lic{border-width:1.5px;border-color:var(--white)}
.tag-v1{border-style:dashed}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px;background:var(--carbon-3);color:var(--white)}
.ph b{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.15;text-transform:uppercase}
.ph p{font-size:13px;color:var(--t2)}
.ph a{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;pointer-events:auto}
.badge-demo{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border:1px dashed rgba(246,245,242,.45);border-radius:20px;color:var(--t2)}

/* ── Статус: текст + значок формы, не только цвет ─────────────────────────────── */
.st{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px 4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--white);background:rgba(246,245,242,.04);border:1.5px solid var(--tone-off);white-space:nowrap}
.st::before{content:"";flex:0 0 auto;width:9px;height:9px;box-sizing:border-box}
.st[data-tone="wait"]{border-style:dashed;border-color:var(--tone-wait)}
.st[data-tone="wait"]::before{border:2px solid var(--tone-wait);border-radius:50%}
.st[data-tone="ok"]{border-color:var(--tone-ok)}
.st[data-tone="ok"]::before{background:var(--tone-ok);border-radius:50%}
.st[data-tone="alert"]{border-width:2px;border-color:var(--tone-alert);background:rgba(255,107,107,.1)}
.st[data-tone="alert"]::before{background:var(--tone-alert);transform:rotate(45deg)}
.st[data-tone="done"]{border-color:var(--tone-done)}
.st[data-tone="done"]::before{width:6px;height:10px;border:solid var(--tone-done);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.st[data-tone="off"]{border-style:dotted;color:var(--t2)}
.st[data-tone="off"]::before{height:2.5px;background:var(--tone-off)}
.timer{font-family:var(--mono);font-size:12px;color:var(--t2)}
.timer.late{color:var(--white);font-weight:700}
.timer.late::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px;border-radius:3px;background:var(--tone-alert);color:var(--carbon);font-size:11px;font-weight:800}
.v1-plate{border:1.5px dashed rgba(246,245,242,.5);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--t2);background:rgba(63,79,228,.08)}
.v1-plate b{color:var(--white)}

/* ── Формы ──────────────────────────────────────────────────────────────────── */
.field{display:grid;gap:6px}
.field>label,.lbl,legend.lbl{font-size:14px;font-weight:700;color:var(--white)}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
.hint{font-size:12.5px;color:var(--t3);line-height:1.45}
.field input:not([type="radio"]):not([type="checkbox"]),.field select,.field textarea,.input{width:100%;min-height:48px;font:inherit;font-size:16px;color:var(--white);background:var(--carbon-2);border:1.5px solid var(--field);border-radius:var(--r);padding:12px 14px;color-scheme:dark}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,245,242,.45)}
.field [aria-invalid="true"],.choices[aria-invalid="true"]{border-color:var(--tone-alert);border-width:2px}
.err{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--err);font-weight:600}
.err::before{content:"!";flex:0 0 auto;display:inline-grid;place-items:center;width:17px;height:17px;margin-top:1px;border-radius:50%;background:var(--tone-alert);color:var(--carbon);font-size:11px;font-weight:800}
.err:empty{display:none}
.errsum{border:2px solid var(--tone-alert);border-radius:14px;padding:14px 16px;background:rgba(255,107,107,.08)}
.errsum b{display:block;font-size:14.5px}
.errsum ul{margin:6px 0 0 18px;display:grid;gap:0;font-size:14px}
.errsum a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.choices{display:grid;gap:8px;border:0;border-radius:var(--r)}
.choice{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--carbon-2);cursor:pointer;font-size:15px}
.choice input{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--c)}
.choice:has(input:checked){border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.choice:has(input:disabled),.choice[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.choice .why{display:block;font-size:12.5px;color:var(--t3);margin-top:2px}
.choices-inline{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.estimate{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--carbon-2);font-size:14px;line-height:1.55;color:var(--t2)}
.estimate b{color:var(--white);font-size:16px}
.check-row{display:flex;gap:12px;align-items:flex-start;min-height:44px;font-size:14.5px;line-height:1.45}
.check-row input{flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:var(--c)}

/* ── Кнопки ─────────────────────────────────────────────────────────────────── */
.btn{min-height:44px}
.btn-block{width:100%;justify-content:center}
.btn-warn{background:transparent;color:var(--white);border:1.5px solid rgba(255,107,107,.7)}
.btn[aria-disabled="true"]{opacity:.62;cursor:not-allowed;box-shadow:none}
.btn[aria-disabled="true"]:hover{transform:none}
.btn[aria-busy="true"]{cursor:progress}
.linkbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--white);font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ── Отказы guard и сообщения ─────────────────────────────────────────────────── */
.reasons{margin-top:8px;border-left:3px solid var(--tone-alert);padding:10px 12px;border-radius:0 12px 12px 0;background:rgba(255,107,107,.08);font-size:13.5px;line-height:1.5}
.reasons b{display:block;color:var(--white)}
.reasons ul{margin:6px 0 0 18px;display:grid;gap:4px;color:var(--t2)}
.notice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--carbon-2);font-size:14px;line-height:1.5}
.notice::before{content:"";flex:0 0 auto;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--tone-ok)}
.notice[data-tone="ok"]{border-color:var(--tone-done)}.notice[data-tone="ok"]::before{background:var(--tone-done)}
.notice[data-tone="warn"]{border-style:dashed;border-color:var(--tone-wait)}.notice[data-tone="warn"]::before{background:none;border:2px solid var(--tone-wait)}
.notice[data-tone="err"]{border-width:2px;border-color:var(--tone-alert)}.notice[data-tone="err"]::before{border-radius:2px;transform:rotate(45deg);background:var(--tone-alert)}
.notice:empty{display:none}
.copy-box{width:100%;min-height:96px;font-family:var(--mono);font-size:13px;color:var(--white);background:var(--carbon-2);border:1.5px solid var(--field);border-radius:var(--r);padding:12px}

/* ── Листы и диалоги (<dialog> с showModal) и нижняя панель действий ───────────── */
dialog.sheet{width:100%;max-width:100%;max-height:92svh;margin:auto auto 0;padding:0;border:1px solid var(--line);border-radius:20px 20px 0 0;background:var(--carbon);color:var(--white);overflow:auto;overscroll-behavior:contain}
dialog.sheet::backdrop{background:rgba(0,0,0,.66)}
@media (min-width:761px){dialog.sheet{max-width:680px;margin:auto;border-radius:20px;max-height:88vh}dialog.sheet.wide{max-width:960px}}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px;background:rgba(14,14,16,.96);border-bottom:1px solid var(--line-2)}
.sheet-head h2,.sheet-head h3{font-size:17px;font-weight:800;line-height:1.25}
.sheet-close{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--white)}
.sheet-close svg{width:18px;height:18px}
.sheet-body{padding:16px 18px 20px;display:grid;gap:16px}
.sheet-foot,.actbar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(14,14,16,.95);border-top:1px solid var(--line)}
.sheet-foot .btn,.actbar .btn{flex:1 1 135px;justify-content:center;padding-left:14px;padding-right:14px;text-align:center}
.actbar .reasons{flex-basis:100%}

/* ── Панель «Состояния» (?review=1) ─────────────────────────────────────────── */
.rv-toggle{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:900;min-height:44px;padding:10px 16px;border-radius:30px;border:1.5px dashed rgba(246,245,242,.6);background:var(--carbon-3);color:var(--white);font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.rv-toggle[aria-expanded="true"]{background:var(--c);border-style:solid;border-color:var(--c)}
body:has(.actbar) .rv-toggle{bottom:calc(var(--actbar-h,104px) + 8px + env(safe-area-inset-bottom,0px))}
.rv-panel{position:fixed;z-index:950;left:0;right:0;bottom:0;max-height:78svh;overflow:auto;overscroll-behavior:contain;background:var(--carbon-2);border-top:1.5px dashed rgba(246,245,242,.5);border-radius:18px 18px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;box-shadow:0 -20px 50px rgba(0,0,0,.5)}
.rv-panel[hidden]{display:none}
@media (min-width:761px){.rv-panel{top:0;left:auto;right:0;bottom:0;width:400px;max-height:none;border-top:0;border-left:1.5px dashed rgba(246,245,242,.5);border-radius:0}}
.rv-panel h3{font-size:15px;font-weight:800}
.rv-now{font-family:var(--mono);font-size:12.5px;color:var(--white);padding:8px 10px;border-radius:10px;background:var(--carbon-3)}
.rv-group{display:grid;gap:8px}
.rv-group h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.rv-opts{display:flex;flex-wrap:wrap;gap:6px}
.rv-opts button{min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--carbon);color:var(--t2);font-size:12.5px}
.rv-opts button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--btn-ink)}
@media (pointer:coarse){.rv-opts button{min-height:44px}}
.rv-out{max-height:280px;overflow:auto;font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:pre-wrap;background:var(--carbon);border:1px solid var(--line);border-radius:10px;padding:10px}
.rv-out .bad{color:var(--err)}

/* ── CRM: вкладки, строки-карточки, пары «ключ — значение», таблица, лента ────── */
.tabs{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:thin}
.tabs a,.tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:30px;border:1px solid var(--line);background:var(--carbon-2);color:var(--t2);font-size:13.5px;font-weight:700}
.tabs [aria-current="page"],.tabs [aria-selected="true"]{background:var(--c);border-color:var(--c);color:var(--btn-ink)}
.tabs .tag-v1{min-height:22px;font-size:10px;padding:2px 7px;background:transparent;color:inherit}
.rows{display:grid;gap:10px;list-style:none}
.rowi{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--carbon-2)}
.rowi.is-late{border-color:var(--tone-alert);border-width:2px}
.rowi .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.rowi .id{font-family:var(--mono);font-weight:700;font-size:14px}
.rowi a.open{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:1000px){.rowi{grid-template-columns:110px 1.4fr 1fr 1fr auto;align-items:center}.rowi .top{display:contents}}
dl.kv{display:grid;grid-template-columns:1fr;gap:2px 16px;font-size:14px}
dl.kv dt{color:var(--t3);font-size:12.5px;margin-top:8px}
dl.kv dd{margin:0}
@media (min-width:600px){dl.kv{grid-template-columns:max-content 1fr;gap:8px 16px}dl.kv dt{margin-top:0}}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:700;color:var(--t3);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl td.amount{text-align:right;white-space:nowrap}
@media (max-width:640px){.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}.tbl thead{display:none}.tbl tr{padding:10px 0;border-bottom:1px solid var(--line)}.tbl td{border:0;padding:3px 0}.tbl td.amount{text-align:left}.tbl td[data-label]::before{content:attr(data-label) " · ";color:var(--t3);font-size:12px}}
.tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line);display:grid;gap:14px}
.tl li{position:relative;font-size:14px;line-height:1.5}
.tl li::before{content:"";position:absolute;left:-25px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--carbon);border:2px solid var(--tone-ok)}
.tl li[data-type="refused"]::before{border-radius:2px;transform:rotate(45deg);border-color:var(--tone-alert)}
.tl li[data-type="correction"]::before{background:var(--tone-done);border-color:var(--tone-done)}
.tl li[data-type="timer"]::before,.tl li[data-type="note"]::before{border-style:dashed;border-color:var(--tone-wait)}
.tl time{display:block;font-family:var(--mono);font-size:11.5px;color:var(--t3)}
.tl .who{font-size:12px;color:var(--t3)}
.alerts{display:grid;gap:8px;list-style:none}
.alerts li{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--carbon-2);font-size:14px;line-height:1.5}
.alerts li.unread{border-left:4px solid var(--c)}
.alerts time{font-family:var(--mono);font-size:11.5px;color:var(--t3)}

/* ── Календарь 14 суток: прокрутка только внутри, первая колонка закреплена ───── */
.cal-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:14px;background:var(--carbon)}
.cal{display:grid;grid-template-columns:minmax(118px,150px) repeat(var(--days,14),minmax(82px,1fr));min-width:max-content;font-size:12px}
.cal-h,.cal-unit,.cal-c{min-height:54px;padding:8px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.cal-h{position:sticky;top:0;z-index:2;background:var(--carbon-3);font-family:var(--mono);font-size:11px;color:var(--t2);min-height:44px;display:flex;flex-direction:column;justify-content:center}
.cal-h.today{color:var(--white);font-weight:700;box-shadow:inset 0 -3px 0 var(--c)}
.cal-unit{position:sticky;left:0;z-index:1;background:var(--carbon-2);display:flex;flex-direction:column;justify-content:center;gap:2px;font-weight:700}
.cal-unit small{font-weight:400;color:var(--t3);font-size:11px}
.cal-corner{z-index:3;left:0}
.cal-c{display:flex;flex-direction:column;gap:4px;color:var(--t2);text-align:left;background:transparent;border-top:0;border-left:0;font:inherit;font-size:11.5px;line-height:1.3}
button.cal-c{cursor:pointer;min-width:44px}
.cal-c.today{box-shadow:inset 0 0 0 1.5px rgba(63,79,228,.6)}
.cal-c[data-state="free"]{color:var(--t3)}
.cal-c[data-state="busy"]{color:var(--white);font-weight:700;background:rgba(63,79,228,.14);box-shadow:inset 3px 0 0 var(--tone-ok)}
.cal-c[data-state="busy"][data-tone="alert"]{background:rgba(255,107,107,.12);box-shadow:inset 3px 0 0 var(--tone-alert)}
.cal-c[data-state="busy"][data-tone="wait"]{box-shadow:inset 3px 0 0 var(--tone-wait)}
.cal-c[data-state="buffer"]{background:repeating-linear-gradient(45deg,rgba(246,245,242,.07) 0 6px,transparent 6px 12px);color:var(--t2)}
.cal-c[data-state="blocked"]{background:repeating-linear-gradient(-45deg,rgba(246,245,242,.14) 0 3px,transparent 3px 8px);color:var(--white);font-weight:700}

/* ── Акт выдачи и возврата: один столбец, шаги сверху вниз, крупные переключатели ── */
.act{display:grid;gap:14px;max-width:680px}
.act-step{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--carbon-2);display:grid;gap:12px}
.act-step h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800}
.act-step h3 .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--c);font-family:var(--mono);font-size:13px}
.act-step[data-done="true"] h3 .n{background:var(--c);color:var(--btn-ink)}
.req-cat{font-family:var(--display);font-weight:800;font-size:26px;line-height:1}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.photo-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
.photo-slot{position:relative;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:10px;border:1.5px dashed var(--field);border-radius:12px;background:var(--carbon-3);overflow:hidden;font-size:12.5px;text-align:left;color:var(--white)}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.photo-slot>span,.photo-slot>b{position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.photo-slot[data-state="ok"]{border-style:solid;border-color:var(--tone-done)}
.photo-slot[data-state="failed"]{border:2px dashed var(--tone-alert);background:rgba(255,107,107,.08)}
button.photo-slot{cursor:pointer;font:inherit;font-size:12.5px}
.compare{display:grid;grid-template-columns:1fr;gap:10px}
.compare figure{margin:0;display:grid;gap:6px}
.compare figcaption{font-size:12.5px;color:var(--t3)}
.compare img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--carbon-3)}
@media (min-width:700px){.compare{grid-template-columns:1fr 1fr}}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:10px;overflow-x:auto;max-width:100%;scroll-snap-type:x mandatory;padding-bottom:4px}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;scroll-snap-align:start;background:var(--carbon-3)}
@media (min-width:700px){.gallery{grid-auto-columns:minmax(220px,1fr)}}

/* ── Скелеты загрузки (без анимации) ─────────────────────────────────────────── */
.skel{background:var(--carbon-3);border-radius:12px;color:transparent!important;min-height:16px}
.card.skel-card .media{background:var(--carbon-3)}
.card.skel-card .body>*{background:var(--carbon-3);border-radius:8px;color:transparent;min-height:14px}

/* ── Живые карточки (серия 11, 12.10): студийное фото, свет за курсором, «вжух» по касанию ── */
.card.live{perspective:900px;--mx:50%;--my:60%;--rx:0deg;--ry:0deg;--px:0}
.card.live .media{background:radial-gradient(120% 60% at 30% 85%,rgba(227,38,43,.18),transparent 60%),#111317;isolation:isolate;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card.live.on .media{transition:transform .08s linear}
.card.live .media img{object-position:50% 72%;transform:translateX(calc(var(--px)*-8px)) scale(1.06);filter:brightness(.97);transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s}
.card.live.on .media img,.card.live:hover .media img{transform:translateX(calc(var(--px)*-8px)) scale(1.06);filter:brightness(1.08) contrast(1.04)}
.card.live.on{border-color:var(--c);box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}
.fx{position:absolute;inset:0;pointer-events:none;opacity:0}
.fx-spot{mix-blend-mode:overlay;transition:opacity .35s;background:radial-gradient(38% 30% at var(--mx) var(--my),rgba(255,255,255,.55),transparent 70%)}
.card.live.on .fx-spot{opacity:1}
.fx-streaks{inset:38% -20% 14%;filter:blur(1px);background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(246,245,242,.45) 9px 11px,transparent 11px 23px,rgba(227,38,43,.7) 23px 25px)}
.fx-flash{mix-blend-mode:screen;background:radial-gradient(22% 14% at 82% 58%,rgba(255,255,250,.95),rgba(255,255,250,.25) 45%,transparent 70%)}
.card.live.go .media img{animation:cor-go .5s cubic-bezier(.3,.7,.2,1)}
.card.live.go .fx-streaks{animation:cor-streak .5s ease-out}
.card.live.go .fx-flash{animation:cor-flash .5s ease-out}
@keyframes cor-go{0%{transform:translateX(0) scale(1.06)}20%{transform:translateX(-2.5%) scale(1.06)}60%{transform:translateX(7%) scale(1.09);filter:brightness(1.15) blur(1.2px)}100%{transform:translateX(9%) scale(1.09)}}
@keyframes cor-streak{0%,15%{opacity:0;transform:translateX(30%)}45%{opacity:1}100%{opacity:0;transform:translateX(-40%)}}
@keyframes cor-flash{0%,20%{opacity:0}40%{opacity:1}100%{opacity:.2}}

/* ── Карточки-сцены (серия 14, 12.10): байк без фона, студию рисует сайт; нажатие — уезжает ── */
.card.ride .media{aspect-ratio:1/1;background:radial-gradient(80% 55% at 50% 92%,rgba(227,38,43,.16),transparent 70%),linear-gradient(180deg,#15171c,#0d0e11);overflow:hidden;isolation:isolate}
.card.ride .media .media-link{display:block;position:absolute;inset:0}
.bs-horizon{position:absolute;left:0;right:0;bottom:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(227,38,43,.85) 25%,rgba(227,38,43,.85) 75%,transparent);box-shadow:0 8px 22px -4px rgba(227,38,43,.5)}
.card.ride .media img.bs-bike{position:absolute;left:3%;bottom:20%;width:94%;height:auto;object-fit:contain;transform:none;filter:drop-shadow(-14px 6px 18px rgba(227,38,43,.25)) drop-shadow(0 12px 10px rgba(0,0,0,.6));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card.ride .media img.bs-refl{position:absolute;left:3%;top:80%;width:94%;height:auto;object-fit:contain;transform:scaleY(-1);opacity:.18;filter:blur(1.2px);-webkit-mask-image:linear-gradient(to top,#000,transparent 40%);mask-image:linear-gradient(to top,#000,transparent 40%)}
@media (hover:hover){.card.ride:hover .media img.bs-bike{transform:translateX(3%)}.card.ride:hover{border-color:var(--c)}}
.card.ride.go .media img.bs-bike,.card.ride.go .media img.bs-refl{animation:cor-ride .6s cubic-bezier(.55,0,.75,.2) forwards}
.card.ride.go .media img.bs-refl{animation-name:cor-ride-refl}
.card.ride.go .fx-streaks{animation:cor-streak .6s ease-out}
@keyframes cor-ride{0%{transform:none}18%{transform:translateX(-4%) rotate(-1deg)}100%{transform:translateX(130%) skewX(-10deg);filter:blur(6px)}}
@keyframes cor-ride-refl{0%{transform:scaleY(-1)}18%{transform:scaleY(-1) translateX(-4%)}100%{transform:scaleY(-1) translateX(130%) skewX(10deg);filter:blur(6px)}}
dialog.sheet .gallery img.gal-cut{object-fit:contain;background:radial-gradient(80% 55% at 50% 90%,rgba(227,38,43,.18),transparent 70%),#111317}

/* ── Движение: без подъёмов и масштабов, если пользователь просил меньше движения ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.card .media img,.btn{transition:none}
  .card:hover,.btn-acc:hover,.btn-ghost:hover{transform:none}
  .card:hover .media img{transform:none}
  .card.live .media{transform:none!important;transition:none}
  .card.live .media img,.card.live.on .media img,.card.live:hover .media img{transform:scale(1.06);transition:none}
  .card.live.go .media img,.card.live.go .fx-streaks,.card.ride.go .media img,.card.ride.go .fx-streaks{animation:none}
  .card.ride:hover .media img.bs-bike{transform:none}
}

/* ── Шапка на телефоне: page.css прячет .hbar .btn на ≤ 760 px — CTA дублируется в hero ── */
@media (max-width:760px){
  .hbar{padding:10px 16px}
  .hactions{gap:8px}
  .hactions .tabs a,.hactions .tabs button{padding:8px 12px;font-size:12.5px}
}