/* Личный кабинет клиента — блок 05 концепции 1.1. Палитра существующих Mini Apps. */
:root {
  color-scheme: light;
  --navy: #192f40;
  --navy-soft: #2b4a63;
  --yellow: #fff25c;
  --bg: #f3f5f7;
  --card: #ffffff;
  --line: #e1e7ec;
  --text: #192f40;
  --muted: #52636d;
  --ok: #1f7a4d;
  --ok-bg: #e6f4ec;
  --warn-bg: #fff8c2;
  --radius: 16px;
  --gutter: 16px;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
a { color: inherit; }
h1, h2, h3, p, dl, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--yellow); padding: 8px 12px; border-radius: 8px;
}
.skip:focus { left: 8px; z-index: 10; }

.wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Шапка */
.top {
  background: var(--navy);
  color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
}
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { display: block; width: 112px; height: auto; flex: none; background: #fff; padding: 5px 8px; border-radius: 6px; margin: 6px 0; }
.brand-sub { color: #c9d4dd; font-size: 13px; white-space: normal; }
.top-links { display: none; gap: 8px; }

.preview-note {
  margin: 10px auto 0; padding: 8px 12px; border-radius: 10px;
  background: var(--warn-bg); font-size: 13px; font-weight: 600;
}
.demo-note {
  margin: 10px auto 0;
  font-size: 12px;
  color: var(--muted);
}

/* Карточки */
main { padding-top: 12px; display: grid; gap: 12px; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--line);
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
h1.deal-title { font-size: clamp(24px, 6vw, 32px); line-height: 1.15; }
.deal-meta { color: var(--muted); margin-top: 4px; }
h2 { font-size: 20px; line-height: 1.25; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.grid { display: grid; gap: 12px; }
.col-main, .col-side { display: grid; gap: 12px; align-content: start; }

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-accent { background: var(--yellow); color: var(--navy); }
.btn-ghost { background: transparent; border-color: currentColor; }
.top .btn-ghost { color: #fff; border-color: #6d8396; }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actions .btn-ghost { color: var(--navy); }
.saved-lot { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: 14px; font-weight: 600; }

/* Автомобиль */
.vehicle-row { display: grid; gap: 12px; }
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(160px, 60vw, 240px);
  max-height: 240px;
  align-self: start;
  gap: 6px;
  border-radius: 12px;
  overflow: hidden;
}
.gallery img {
  min-width: 0;
  min-height: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--line);
  aspect-ratio: 4 / 3;
}
.gallery img:first-child { grid-row: span 2; aspect-ratio: auto; }
.gallery.single { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
.gallery.single img:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
.gallery.pair { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
.gallery.pair img:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
.vehicle-info { display: grid; gap: 6px; align-content: start; }
.vehicle-specs { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; font-size:14px; }
.vehicle-specs dt { color:var(--muted); }
.vehicle-specs dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.status-chip {
  display: inline-block;
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warn-bg);
  font-size: 13px;
  font-weight: 600;
}
.status-chip.ok { background: var(--ok-bg); color: var(--ok); }
.vehicle-info a { color: var(--navy-soft); }

/* Этапы */
.progress-track { position: relative; padding-top: 27px; }
.progress-car { position: absolute; top: 0; left: calc(18px + (100% - 36px) * var(--progress, 0)); width: 36px; height: 24px; color: var(--navy); transform: translateX(-50%); transition: left .4s ease; }
.progress-car svg { display: block; }
.progress .stepper { margin: 0; }
@media (prefers-reduced-motion: reduce) { .progress-car { transition: none; } }
.stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0;
}
.step {
  position: relative;
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
}
.step::before {
  content: "";
  display: block;
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}
.step.done::before { background: var(--navy); }
.step.current::before { background: var(--yellow); box-shadow: inset 0 0 0 1px var(--navy); }
.step.current { color: var(--text); font-weight: 700; }
.step-num { display: block; font-variant-numeric: tabular-nums; }
.next-action {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 14px;
}
.next-action .eyebrow { margin-bottom: 2px; }
#inspections-counter { margin-top: 10px; }

/* Вход, выбор сделки, предоплата */
.login .fields { display: grid; gap: 10px; margin-top: 8px; }
.login .field { display: grid; gap: 4px; }
.login input { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.error.inner { margin-top: 0; }
.deal-switch { margin-bottom: 10px; }
.deal-switch select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; width: 100%; }
.prepay .qr { display: block; margin: 12px auto; border-radius: 12px; border: 1px solid var(--line); max-width: 100%; height: auto; }
.report-text { white-space: pre-wrap; font-size: 14px; margin: 6px 0 10px; }

/* Решение клиента (блоки 10–11) */
.decision { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.decision .check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; }
.decision .check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--navy); }
.decision .panel { background: var(--bg); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.decision .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.decision .kv dt { color: var(--muted); } .decision .kv dd { margin: 0; font-weight: 600; }
.decision .terms { display: grid; gap: 6px; font-size: 14px; padding-left: 18px; list-style: disc; }
.decision .reasons { display: grid; gap: 6px; }
.decision .reasons label { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.decision .reasons input { width: 18px; height: 18px; accent-color: var(--navy); }
.decision textarea { font: inherit; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; }
.decision .field { display: grid; gap: 4px; }
.decision .actions { margin-top: 0; }
.decision-result { padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 14px; }
.decision-result.declined { background: var(--warn-bg); color: var(--text); }

/* Стоимость */
.total { font-size: clamp(26px, 7vw, 34px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-details { margin-top: 12px; }
.price-details summary { cursor: pointer; font-weight: 600; color: var(--navy-soft); }
.price-lines { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-top: 10px; font-size: 15px; }
.price-lines dt { color: var(--muted); }
.price-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-lines .sum dt, .price-lines .sum dd { font-weight: 700; color: var(--text); border-top: 1px solid var(--line); padding-top: 6px; }
.price-lines .hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: -4px; }
#price-rate { margin-top: 10px; }
#price-note { margin-top: 10px; }

/* Компактные разделы */
.card.compact { padding: 0; }
.card.compact > summary, .card.compact.contact { padding: 14px 16px; }
.card.compact > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  list-style: none; cursor: pointer; font-weight: 700;
}
.card.compact > summary::-webkit-details-marker { display: none; }
.card.compact > summary::after {
  content: "›"; font-size: 22px; line-height: 1; color: var(--muted);
  transform: rotate(90deg); transition: transform .15s;
}
.card.compact[open] > summary::after { transform: rotate(-90deg); }
.card.compact > summary .count { font-weight: 500; color: var(--muted); font-size: 13px; margin-right: 8px; }
.card.compact > :not(summary) { padding: 0 16px 14px; }
.list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.list li:first-child { border-top: 0; padding-top: 0; }
.list .meta { color: var(--muted); font-size: 13px; display: block; }
.list .amount { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.list .state { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.list .state.ok { color: var(--ok); }
.list a { color: var(--navy-soft); }
.timeline li { flex-direction: column; gap: 2px; }
.previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 10px; }
.previews img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--line); }
.photo-block + .photo-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.contact .btn { margin: 10px 0; }
.chips-label { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.chip[aria-checked="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.pending { color: var(--muted); border-style: dashed; }
.chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.error { color: #8a1f1f; background: #fdecec; border-color: #f3c5c5; }

/* Нижняя панель на телефоне */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.bottom-bar .btn-ghost { color: var(--navy); }

/* Компьютер */
@media (min-width: 900px) {
  :root { --gutter: 24px; }
  body { padding-bottom: 32px; }
  .top-links { display: flex; }
  .bottom-bar { display: none; }
  main { padding-top: 20px; gap: 16px; }
  .grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
  .col-main, .col-side { gap: 16px; }
  .card { padding: 20px; }
  .vehicle-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .step { font-size: 13px; }
  .preview-note {
  margin: 10px auto 0; padding: 8px 12px; border-radius: 10px;
  background: var(--warn-bg); font-size: 13px; font-weight: 600;
}
.demo-note { margin-top: 14px; }
}
.decision [hidden], .decision .panel[hidden] { display: none !important; }

/* LK-26/2: preserve semantic visibility against component display rules. */
[hidden] { display: none !important; }





.inspection-flow{margin-top:16px;scroll-margin-top:16px}
.inspection-card{border:1px solid var(--line,#dfe3e8);border-radius:14px;padding:16px;margin-top:14px;scroll-margin-top:24px;background:#fff}
.inspection-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inspection-title h3{margin:0}
.new-badge{display:inline-flex;padding:4px 9px;border-radius:999px;background:#fff0bd;color:#6c4b00;font-size:12px;font-weight:700}
.inspection-new{outline:3px solid rgba(246,190,58,.35);outline-offset:2px}
.inspection-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:14px 0}
.inspection-timeline li{border-top:3px solid #d7dce2;padding-top:7px;color:#747b84;font-size:13px}
.inspection-timeline li.done{border-color:#2f8d62;color:#24312b}
.inspection-timeline .meta{display:block;margin-top:3px}
.inspection-comment{padding:12px;border-radius:10px;background:#f4f7f9;margin-top:12px;scroll-margin-top:24px}
.inspection-comment h4{margin:0 0 6px}
.inspection-actions{margin-top:14px;scroll-margin-top:24px}
.request-state{padding:10px 12px;border-radius:10px;background:#f4f7f9;scroll-margin-top:24px}
.compact-media{margin-top:12px}
.compact-media .previews{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:10px 0}
.compact-media .previews img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
@media(max-width:720px){.inspection-timeline{grid-template-columns:1fr 1fr}.compact-media .previews{grid-template-columns:repeat(3,minmax(0,1fr))}.inspection-actions .btn{width:100%}}
/* Банк: два фиксированных платежа */
.bank .bank-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; display: grid; gap: 8px; }
.bank .bank-row .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bank .bank-row .amount { font-size: 20px; font-weight: 700; }
.bank .bank-row .state { font-size: 13px; color: var(--muted); font-weight: 500; }
.bank .bank-row .state.ok { color: var(--ok); }
.bank .bank-row .qr { display: block; margin: 8px auto; border-radius: 12px; border: 1px solid var(--line); width: 240px; max-width: 100%; height: auto; background: #fff; }
.bank .bank-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Keep long action labels inside the narrow client layout. */
.grid,.col-main,.col-side,.card,.inspection-card{min-width:0}
@media(max-width:720px){.actions .btn{white-space:normal;max-width:100%;overflow-wrap:anywhere}.price-lines{grid-template-columns:minmax(0,1fr) auto}}

/* Account orders: styles confined to the cabinet orders block. */
#my-orders .orders-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#my-orders .orders-heading h2 {margin:0}
#my-orders .order-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #e5e7eb}
#my-orders #orders-list {margin-top:16px}
#my-orders .order-row p {margin:4px 0;overflow-wrap:anywhere}
#my-orders .order-row[aria-current="true"] strong {text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){#my-orders .order-row {grid-template-columns:minmax(0,1fr) auto}#my-orders .order-status {grid-column:1;grid-row:2}#my-orders .order-row>a {grid-column:2;grid-row:1 / span 2}}

.manager-direct {overflow-wrap:anywhere}
.manager-phone {display:block;margin:10px 0;font-weight:600;color:var(--navy)}
.manager-messengers {display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.manager-messenger {display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:#eef4f8;border:1px solid var(--line)}
.manager-messenger img {display:block;width:28px;height:28px}
.manager-messenger.telegram {background:#e5f5ff}
.manager-messenger.whatsapp {background:#e5f9eb}
.manager-messenger.kakaotalk {background:#fee500}
.manager-messenger:hover,.manager-messenger:focus-visible {outline:2px solid var(--navy);outline-offset:2px}
#manager-contacts .fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
#manager-contacts input {width:100%;min-width:0;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px}
#manager-contacts summary {cursor:pointer;font-weight:700}
@media(max-width:640px){#manager-contacts .fields{grid-template-columns:1fr}}

/* Cabinet hierarchy: shared light surfaces, visible action and quiet history. */
:root{--bg:#f7f9fb;--line:#e5ebf0;--gutter:20px}
.card{box-shadow:0 3px 18px #192f4005}
.deal-head{margin-bottom:12px}
.deal-title{letter-spacing:-.025em}
#next-action-card{border:1px solid #eee3a1;border-left:5px solid var(--yellow);background:#fffdf0;padding:22px 24px}
#next-action-card .eyebrow{color:var(--navy);margin-bottom:8px}
#next-action{font-size:19px;line-height:1.5;font-weight:600}
#stage{border-top:3px solid var(--navy)}
#stage>.eyebrow:not(:first-child){margin-top:20px}
#stage-events li::before,.detail .timeline li::before{background:var(--ok);border-color:var(--ok)}
#stage-events li{border-left-color:#c7e5d4}
#stage-events .meta{color:var(--ok)}
#my-orders{margin-top:24px}
#contact>.eyebrow{font-size:16px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--navy)}
#manager-name{font-size:17px;font-weight:600;margin:14px 0}
.manager-messengers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.manager-messenger{width:auto;min-height:64px;height:auto;padding:12px 8px;gap:8px;text-decoration:none;font-size:13px;font-weight:600;background:#fff!important;border:1px solid var(--line)}
.manager-messenger img{width:30px;height:30px;flex-shrink:0}
.contact-method{display:block;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:14px;text-decoration:none;font-weight:600;margin:10px 0}
.official-email{border-top:1px solid var(--line);margin-top:24px;padding-top:22px;display:grid;gap:14px;font-size:14px;line-height:1.6;color:var(--muted)}
.official-email-heading{display:flex;gap:12px;align-items:center;color:var(--navy)}
.official-email-heading img{flex-shrink:0}
.official-email h3{font-size:16px;line-height:1.4}
.official-address{font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.official-email .btn{white-space:normal;line-height:1.4;text-align:center}
@media(min-width:900px){.grid{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:24px}.col-main,.col-side{display:flex;flex-direction:column;gap:20px}.col-main>.card,.col-side>.card{margin:0}}
@media(max-width:600px){#next-action-card{padding:18px}#next-action{font-size:17px}.card{padding:18px}.official-email .btn{font-size:14px}.manager-messenger{font-size:12px}}

/* Dates use the existing stepper; no additional progress bar or timer. */
.step-date{display:block;font-size:12px;font-weight:400;line-height:1.35;color:var(--muted);margin-top:7px;overflow-wrap:anywhere}
#deal-duration{font-weight:600;color:var(--navy);margin:10px 0}
.previous-stage{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.previous-stage h3{font-size:16px;margin-bottom:8px}
.previous-stage>.small{margin-top:4px}
.previous-stage .timeline{margin-top:12px}
#stage>.inspection-flow{margin:20px 0 0;box-shadow:none;padding:16px}
#photos>.yard-media{margin:16px 0 0;padding:0;box-shadow:none;border:0}
@media(max-width:600px){.step-date{font-size:11px}#stage>.inspection-flow{padding:12px}}

/* 057: review set — up to three vehicles per deal */
.review-set-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.review-set-counter { margin: 0; font-weight: 600; color: var(--navy); }
.review-set-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 8px; }
.review-card { border: 1px solid var(--line, #d9e1e8); border-radius: 12px; padding: 10px; display: grid; gap: 8px; background: #fff; }
.review-card.focused { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(23, 45, 71, 0.08); }
.review-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #eef2f6; }
.review-card .no-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: #eef2f6; color: var(--muted, #6b7a89); font-size: 13px; }
.review-card h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.review-card .meta { margin: 0; font-size: 13px; color: var(--muted, #6b7a89); }
.review-card .status-chip { justify-self: start; }
.review-card .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.review-card .btn { padding: 6px 10px; font-size: 13px; }
.review-card .btn-danger { background: transparent; border-color: #b4463c; color: #b4463c; }
.review-set .error { color: #b4463c; }