/* Revalio component system for the working app (/app and the Telegram Mini App). Loaded after ui.css by seller.html ONLY: the Control Center keeps its own look. */
/* ===== One component system (tokens.css): the same sizes, radii, type and states on every /app screen and in /demo ===================
   Heights: field / button / tab 44 · chip 40 · small button 36. Radii: control 12 · chip pill · card 16. Type: label 11 · small 12 · body 14 · title 16.
   Everything below overrides the older per-screen rules (app.css, mobile.css) on purpose, so no screen keeps its own sizes. */
h2 { font-size: var(--fs-title); line-height: 1.3; margin: 0 0 var(--sp-2); }
h3 { font-size: var(--fs-body); line-height: 1.3; }
.card { border-radius: var(--r-card); padding: 14px; margin-bottom: var(--sp-3); }
.card > :first-child { margin-top: 0; }
.muted { font-size: var(--fs-small); line-height: 1.4; }
p { line-height: 1.45; }

/* fields: one height, one radius, one font size */
input[type=text], input[type=search], input[type=number], input[type=password], input[type=email], select, textarea,
.picker input[type=search] { min-height: var(--ctl); padding: 0 12px; border-width: 1px; border-radius: var(--r-ctl); font-size: var(--fs-body); line-height: 1.3; }
textarea { padding: 10px 12px; }
@media (max-width: 640px) {
  input[type=text], input[type=search], input[type=number], input[type=password], input[type=email], select, textarea,
  .picker input[type=search] { font-size: var(--fs-input); }
}
label { display: block; font-size: var(--fs-label); font-weight: 700; color: #5c6882; text-transform: uppercase; letter-spacing: .4px; margin: var(--sp-3) 0 var(--sp-1); }
.card > label:first-child, .picker > div > label:first-child { margin-top: 0; }

/* buttons: one height; small ones for inline actions */
button, .btn { min-height: var(--ctl); padding: 0 var(--sp-4); font-size: var(--fs-body); font-weight: 700; line-height: 1.2; border-radius: var(--r-ctl); }
button.primary { box-shadow: 0 3px 10px rgba(22,91,247,.2); }
.draft-new button, .picker-change, .picker-add, .picker-chip, .fold .row button, button.link-btn { min-height: var(--ctl-sm); padding: 0 var(--sp-3); font-size: var(--fs-small); }
.row { gap: var(--sp-2); }
.row.mt12 { margin-top: var(--sp-3); }
.mt8 { margin-top: var(--sp-2); }

/* tabs: equal tiles, no clipped words */
.tabs { gap: 6px; margin-bottom: var(--sp-3); grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { min-height: 40px; padding: 0 8px; font-size: var(--fs-small); font-weight: 700; border-radius: var(--r-ctl); letter-spacing: -.1px; }
@media (max-width: 420px) { .tab { font-size: 11.5px; letter-spacing: -.2px; } }
@media (max-width: 360px) { .tab { font-size: var(--fs-label); } }
.seg-btn { min-height: var(--ctl-sm); font-size: var(--fs-small); }

/* chips: pills of one height; rows are equal-width grids so neighbours never differ in size */
.choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.choice-row:has(> :nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
.choice { min-height: var(--chip-h); min-width: 0; padding: 4px 6px; font-size: var(--fs-body); font-weight: 650; line-height: 1.15; border-radius: var(--r-pill); box-shadow: none; }
.choice[aria-pressed="true"] { box-shadow: 0 3px 10px rgba(22,91,247,.22); }
.picker-opt-btn { min-height: var(--chip-h); padding: 4px 14px; font-size: var(--fs-body); font-weight: 650; border-radius: var(--r-pill); }
.picker-opt-btn.picker-mem, .picker-mem { min-width: 0; min-height: var(--chip-h); padding: 4px 14px; font-size: var(--fs-body); border-radius: var(--r-pill); }
.picker-row-buttons, .picker-models, .picker-steps { gap: 6px; }
.picker-row { gap: 6px; }
.picker-row-label, .assess h3 { flex: 1 0 100%; margin: 0 0 var(--sp-1); font-size: var(--fs-label); font-weight: 700; color: #5c6882; text-transform: uppercase; letter-spacing: .4px; }
.assess { gap: var(--sp-3); margin: var(--sp-3) 0; }
.assess > div > .muted { margin-top: 6px; }
.assess-summary { font-size: 13px; font-weight: 600; color: var(--soft); }
.battery-exact { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.battery-exact label { margin: 0; flex: none; }
.battery-exact input { width: 96px; flex: none; }
.picker-chosen { padding: 10px var(--sp-3); border-radius: var(--r-ctl); }
.picker-name { font-size: var(--fs-title); }
.picker-opt { min-height: var(--ctl); padding: 6px var(--sp-3); font-size: var(--fs-body); }
.picker-price .amount { font-size: 2rem; line-height: 1.15; }

/* tick-boxes: sentence case, one height per grid row, one box size; long text wraps inside the same-height tile */
.bigchecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; }
.bigcheck { display: flex; align-items: center; gap: 10px; min-height: var(--ctl); margin: 0; padding: 6px var(--sp-3); border-radius: var(--r-ctl);
  font-size: var(--fs-body); font-weight: 600; line-height: 1.25; color: var(--ink); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.bigcheck input { width: 20px; height: 20px; flex: none; margin: 0; }
.bigcheck .muted { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--soft); }
@media (max-width: 380px) { .bigchecks { grid-template-columns: minmax(0, 1fr); } }

/* suppliers in Settings: a list of equal cards (name, then the facts on their own lines) */
.supplier-list { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
@media (min-width: 640px) { .supplier-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
.supplier-check { align-items: flex-start; min-height: 64px; padding: 10px var(--sp-3); }
.supplier-check input { margin-top: 2px; }
.supplier-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.supplier-text strong { font-size: var(--fs-body); line-height: 1.25; overflow-wrap: anywhere; }
.supplier-text .muted { display: block; }

/* settings forms: two columns where there is room, one tidy column on a phone */
.grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.grid > div { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }   /* captions of 1 or 2 lines: the fields still sit on one line */
.grid label { margin-top: 0; }

/* banners and notes */
.msg { border-radius: var(--r-ctl); padding: 10px var(--sp-3); margin: var(--sp-3) 0; font-size: 13px; line-height: 1.4; }
.internal { border-radius: var(--r-card); }
.internal h3, .internal h2 { font-size: var(--fs-label); margin: 0 0 var(--sp-2); }
.draft-head { margin: 0 0 var(--sp-2); }
.draft-tools { gap: var(--sp-2); font-size: var(--fs-small); }
.fold > summary { min-height: var(--ctl-sm); display: flex; align-items: center; }

/* bottom navigation: one fixed height, the page always ends above it */
.hb-nav { min-height: var(--nav-h); box-sizing: border-box; }
.hb-nav-item { min-height: 48px; font-size: var(--fs-label); }
body.has-nav .wrap { padding-bottom: calc(var(--nav-h) + var(--sp-5) + env(safe-area-inset-bottom, 0px) + var(--tg-bottom, 0px) + var(--kb, 0px)); }
@media (max-width: 640px) { .wrap { padding: var(--sp-2) var(--sp-3) var(--sp-5); } .card { padding: var(--sp-3); } }

/* brand: the same logo + wordmark in the app header and in /demo */
.brand-logo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.brand-logo img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.brand-logo, .brand-logo span { color: var(--ink) !important; }

/* sale search rows: name and facts first, the price block under them on a phone, so no word is squeezed into its own line */
@container (max-width: 600px) {
  .sale-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px var(--sp-3); }
  .sale-what { grid-column: 1; }
  .sale-cell { grid-column: 1; grid-row: 2; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .sale-cell .amount { font-size: 1.3rem; }
}
.sale-what strong { overflow-wrap: anywhere; }

/* ===== The blue price card: the reference look from /demo, used for every FINAL price shown to the seller or the customer ======================
   .price-hero is the component; the older class names (.result-card, .ti-customer, .picker-price) get the same look so no markup had to move. */
.price-hero, .result-card, .ti-customer, #preview-result:not(:empty) { position: relative; overflow: hidden; color: #fff; border: 0; border-radius: var(--r-card); padding: var(--sp-4);
  background: linear-gradient(132deg, #0d2451 0%, #123d91 55%, #126cfb 100%); box-shadow: 0 8px 24px rgba(18, 61, 145, .22); }
.price-hero::after, .result-card::after, .ti-customer::after, #preview-result:not(:empty)::after { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%; right: -70px; top: -70px; pointer-events: none; }
.price-hero > *, .result-card > *, .ti-customer > *, #preview-result > * { position: relative; z-index: 1; }
#preview-result:not(:empty) { margin: var(--sp-3) 0; }
.price-hero:empty { display: none; }
.price-hero h2, .price-hero h3, .result-card h3 { margin: 0 0 var(--sp-1); color: #a9c6f5; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.price-hero .amount, .result-card .amount, #preview-result .amount { color: #fff; font-size: 2.25rem; line-height: 1.1; font-weight: 850; letter-spacing: -1px; }
.price-hero .muted, .result-card .muted, .ti-customer .muted, #preview-result .muted { color: #cfe0fb; }
.price-hero .badge, .result-card .badge, #preview-result .badge { background: rgba(255,255,255,.16); color: #fff; }
.price-hero b, .price-hero strong { color: #fff; }

/* Trade-In: the three customer figures on the blue card */
.ti-line { padding: var(--sp-1) 0; }
.ti-label { color: #a9c6f5; font-size: var(--fs-body); font-weight: 650; }
.ti-num { color: #fff; font-weight: 700; }
.ti-est { color: #7ae9fd; }
.ti-hero { color: #fff; font-size: clamp(2.2rem, 10vw, 3rem); letter-spacing: -1px; }
.ti-main { border-top: 1px solid rgba(255,255,255,.2); margin-top: var(--sp-2); padding-top: var(--sp-3); }
.ti-main .ti-label { color: #fff; font-size: var(--fs-title); }
button.ti-step { min-height: var(--ctl); min-width: 56px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; box-shadow: none; }
button.ti-step:hover:not(:disabled) { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.4); }
.ti-slider::-webkit-slider-runnable-track { background: linear-gradient(90deg, #7ae9fd var(--fill), rgba(255,255,255,.28) var(--fill)); }
.ti-slider::-moz-range-track { background: rgba(255,255,255,.28); } .ti-slider::-moz-range-progress { background: #7ae9fd; }
.ti-slider:focus-visible::-webkit-slider-thumb { outline-color: #fff; }

/* the price of the chosen model in the sale search */
.picker-price:has(.amount) { margin-top: var(--sp-2); border-radius: var(--r-ctl); position: relative; overflow: hidden; }
.picker-price .amount { color: #fff; font-size: 2rem; letter-spacing: -1px; }
.picker-price .muted { color: var(--soft); }
.picker-price:has(.amount) .muted { color: #cfe0fb; }
.picker-price .msg { margin: 0; }

/* key / value lists: never squeeze the value into a one-letter column */
dl.kv, .kv { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: 6px var(--sp-3); font-size: 13px; }
.kv dt { color: var(--soft); font-weight: 500; overflow-wrap: anywhere; } .kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 480px) { dl.kv, .kv { grid-template-columns: minmax(6.2rem, 34%) minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; } .kv dt { font-size: var(--fs-small); overflow-wrap: normal; } }

/* the blue result screen (the /demo customer view) */
.cm-body, .cm { background: linear-gradient(160deg, #0a1a3d 0%, #123d91 60%, #1a6bf0 100%); }
.cm-label { color: #a9c6f5; font-weight: 650; }
.cm-specs, .cm-updated { color: #dbe9ff; }
.cm-num { color: #fff; }
.cm-hero { color: #fff; letter-spacing: -1.5px; }
.cm-main { border-top: 1px solid rgba(255,255,255,.2); }
.cm-link { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: var(--r-ctl); min-height: var(--ctl); }
.cm-link:focus-visible { outline-color: #fff; }

/* selected / primary controls keep their white text on hover (the global hover rule turns text blue, which vanished on the blue fill) */
.choice[aria-pressed="true"]:hover:not(:disabled), .picker-opt-btn[aria-pressed="true"]:hover:not(:disabled), .picker-opt-btn.sel:hover:not(:disabled),
.picker-mem[aria-pressed="true"]:hover:not(:disabled), button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ===== Mobile-first compact layer: the same look as /demo (pills, one short card per choice), far less height ====================================== */
/* the chosen model: a short card, «Изменить» is a small inline action, never a stretched bar */
.picker-chosen { padding: 10px var(--sp-3); }
.picker-chosen > .muted { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; color: #5c6882; }
.picker-chosen .row { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.picker-chosen .row > .picker-name { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.picker-chosen .row > .picker-change { flex: 0 0 auto; min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-small); }
.picker-steps { margin-top: var(--sp-2); gap: var(--sp-2); }

/* what is still open lives in ONE folded line; variants are compact pills inside it */
.picker-config { border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; }
.picker-config > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--ctl-sm); padding: 0 var(--sp-3); font-size: var(--fs-small); font-weight: 700; color: var(--blue-d); }
.picker-config > summary::-webkit-details-marker { display: none; }
.picker-config > summary::after { content: "▾"; color: var(--soft); transition: transform .12s; }
.picker-config[open] > summary::after { transform: rotate(180deg); }
.picker-config-body { padding: 0 var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-2); }
.picker-config .picker-row { display: grid; gap: 4px; align-items: start; }
.picker-config .picker-row-label { margin: 0; font-size: var(--fs-label); }
.picker-config .picker-row-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-config .picker-opt-btn, .picker-config .picker-mem { min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 650; gap: 6px; flex: 0 0 auto; width: auto; }
.picker-config .picker-opt-btn .swatch { width: 12px; height: 12px; }
.picker-config .picker-note { margin: 0; font-size: var(--fs-small); }
.picker-add { align-self: stretch; }
.picker-steps > .picker-add { width: 100%; min-height: var(--ctl-sm); }

/* the top of the screen: compact, one rhythm */
.tabs { margin-bottom: var(--sp-2); }
.tab { min-height: 36px; }
.seg-btn { min-height: 32px; }
.draft-head { margin: 0; }
.draft-tools { justify-content: flex-end; }
.draft-state { font-size: var(--fs-label); color: #5c6882; }
.draft-new button { min-height: 32px; }
.sale-top { margin-bottom: var(--sp-2); }

/* sale search rows: tighter */
@container (max-width: 600px) { .sale-row { padding: 8px var(--sp-3); } .sale-cell .amount { font-size: 1.15rem; } }

/* settings: suppliers as a compact list, the checkbox, the name and ONE short line of facts */
.supplier-check { min-height: 48px; padding: 8px var(--sp-3); align-items: center; }
.supplier-check input { margin-top: 0; }
.supplier-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); flex: 1; }
.supplier-text strong { flex: 1 1 auto; font-size: 14px; }
.supplier-text .muted { flex: 0 0 auto; font-size: var(--fs-small); white-space: nowrap; }
@media (max-width: 380px) { .supplier-text .muted { flex-basis: 100%; white-space: normal; } }
.supplier-list { gap: 4px; }

/* the price card and the offers fold under it: no extra height */
.picker-price:not(:empty) { margin-top: 0; padding: 0; background: none; color: inherit; }
.picker-price:has(.amount) { padding: var(--sp-3); color: #fff; background: linear-gradient(132deg, #0d2451 0%, #123d91 55%, #126cfb 100%); }   /* the blue card only when there is a price in it */
.picker-steps > .picker-add:disabled { display: none; }
.fold > summary { font-size: var(--fs-small); }

/* defects / accessories: compact tick-pills in a flowing row, not a wall of tiles */
.assess .bigchecks { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
.assess .bigcheck { min-height: var(--chip-h); padding: 4px 12px 4px 10px; gap: 8px; width: auto; border-radius: var(--r-pill); font-size: 13px; font-weight: 650; flex: 0 0 auto; }
.assess .bigcheck input { width: 16px; height: 16px; }
.assess .choice-row { gap: 6px; }

/* offer tables: one line per row (they scroll sideways inside their frame instead of wrapping every cell into a tall block) */
.table-wrap table td, .table-wrap table th { white-space: nowrap; padding: 6px 10px; font-size: var(--fs-small); }