:root { --navy: #12284c; --red: #f42735; --bg: #f3f5f9; --line: #dbe1ea; --muted: #596882; --ok: #13803f; --bad: #c0212d; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: #1f2430; font-size: 16px; line-height: 1.45; }
[hidden] { display: none !important; }
header.top { background: var(--navy); color: #fff; padding: 12px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
header.top a, header.top button { color: #fff; }
header.top .brand { font-weight: 700; font-size: 18px; text-decoration: none; }
header.top button.ghost { background: transparent; border-color: rgba(255, 255, 255, 0.4); }
main { max-width: 1320px; margin: 0 auto; padding: 18px 16px 60px; }
h1 { font-size: 26px; margin: 0; color: var(--navy); }
h2 { font-size: 18px; margin: 0 0 12px; color: var(--navy); }
h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pagehead h1 { display: inline-block; margin-right: 10px; }
.card { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(18, 40, 76, 0.08); padding: 16px; margin-bottom: 14px; }
.narrow { max-width: 420px; margin: 60px auto; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cols1 { max-width: 900px; margin: 0 auto; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.f.big { font-size: 15px; }
label.f.big input { font-size: 18px; padding: 14px; }
input, select, textarea, button { font: inherit; }
input, select, textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: #fff; color: #1f2430; min-width: 0; width: 100%; }
input[type=checkbox] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9db5e0; border-color: #9db5e0; }
button, .btn { border: 0; border-radius: 10px; padding: 10px 18px; background: var(--red); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
button.big, .btn.big { font-size: 18px; padding: 14px 24px; font-weight: 600; }
button.ghost, .btn.ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); }
button.link, a.link { background: none; color: var(--navy); padding: 2px 6px; text-decoration: underline; min-height: 0; border: 0; }
button:disabled { opacity: 0.6; cursor: default; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); } small.muted, small.hint { font-size: 12px; } small.hint { color: var(--muted); font-weight: 400; }
.pad { padding: 14px; }
.error { color: var(--bad); margin: 8px 0 0; min-height: 1.2em; }
.ok { color: var(--ok); }
.warn { background: #fff4e0; border: 1px solid #f2c777; border-radius: 10px; padding: 8px 12px; margin: 8px 0; color: #6b4a00; }
.scroll { overflow-x: auto; }
.pos { color: var(--ok); font-weight: 600; } .neg { color: var(--bad); font-weight: 600; } .strong { font-weight: 700; }
/* the list */
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.stat { background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 1px 4px rgba(18, 40, 76, 0.08); display: flex; flex-direction: column; gap: 2px; }
.stat > span { font-size: 13px; color: var(--muted); } .stat b { font-size: 24px; color: var(--navy); } .stat small { color: var(--muted); }
.stat.total { background: var(--navy); } .stat.total > span, .stat.total small { color: #b9c6dc; } .stat.total b { color: #fff; }
.stat.total .pos { color: #6df0a0; } .stat.total .neg { color: #ff9aa2; }
.filters .row { margin-top: 10px; } .filters .row > * { flex: 1 1 180px; }
.monthnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .monthnav strong { min-width: 150px; text-align: center; font-size: 18px; text-transform: capitalize; }
.monthnav button.ghost { min-width: 44px; padding: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; min-height: 36px; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.archived td { color: #8a94a6; text-decoration: line-through; }
tr.clickable { cursor: pointer; } tr.clickable:hover { background: #f6f8fc; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; background: #e8edf7; color: var(--navy); font-size: 12px; margin-right: 4px; white-space: nowrap; }
.st-podbor { background: #e8edf7; color: #12284c; } .st-oplata { background: #fff1d6; color: #8a5a00; } .st-v_puti { background: #dbeafe; color: #1d4ed8; } .st-vydana { background: #dcf3e5; color: #13803f; } .st-zakryta { background: #eceff3; color: #596882; } .badge.plan { background: #fff1d6; color: #8a5a00; }
/* the deal card */
.dealgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* T-260: the actual calculation (totals) on the left, the preliminary one on the right; on a phone — one under the other, the actual first */
.calcgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-bottom: 16px; }
.calcgrid > div { min-width: 0; }
details.sec > summary { cursor: pointer; font-weight: 700; color: var(--navy); font-size: 17px; list-style: none; padding: 2px 0 10px; }
details.sec > summary::before { content: '▸ '; } details.sec[open] > summary::before { content: '▾ '; }
.savebar { position: sticky; top: 0; z-index: 15; background: #fff4e0; border: 1px solid #f2c777; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sticky-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.totals { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(18, 40, 76, 0.14); padding: 14px 16px; }
.totals-head { display: grid; grid-template-columns: 1fr; gap: 6px; }
.totals-head > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .totals-head small { color: var(--muted); font-size: 13px; } .totals-head b { font-size: 24px; color: var(--navy); }
.totals-head > div:last-child { border-top: 1px solid var(--line); padding-top: 6px; } .totals-head > div:last-child b { font-size: 28px; }
.totals-toggle { display: none; }
.totals dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; font-size: 14px; } .totals dt { color: var(--muted); } .totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lineform { background: #f6f8fc; border-radius: 12px; padding: 10px; margin-top: 10px; }
.lf-main { display: grid; grid-template-columns: 150px minmax(170px, 1.2fr) 110px minmax(170px, 1.4fr) 130px; gap: 8px; align-items: start; }
.amountbox { display: flex; flex-direction: column; gap: 2px; }
.lf-extra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; } .lf-extra input[type=text] { flex: 1 1 200px; width: auto; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #1f2430; }
td.actions { white-space: nowrap; text-align: right; }
@media (max-width: 760px) { .calcgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lf-main { grid-template-columns: 1fr 1fr; } .lf-main .amountbox { grid-column: 1 / -1; } }
/* a phone: one column, big buttons, the total pinned to the bottom */
@media (max-width: 760px) {
  main { padding: 12px 12px 24px; } h1 { font-size: 22px; }
  .pagehead .row { width: 100%; } .pagehead .row .btn { flex: 1; } .pagehead .row .btn.big { flex: 1 1 100%; }
  header.top { padding: 10px 14px; flex-wrap: nowrap; } header.top .brand { font-size: 16px; } header.top .username { display: none; } header.top button { min-height: 36px; padding: 4px 12px; }
  .stat b { font-size: 20px; } .stat.total b { font-size: 22px; }
  .monthnav strong { min-width: 0; flex: 1; }
  .dealtable thead, .linetable thead { display: none; }
  .dealtable tr, .linetable tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 10px; background: #fff; }
  .dealtable td, .linetable td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
  .dealtable td::before, .linetable td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; }
  .linetable td.actions::before { content: ''; }
  .dealtable td:empty, .linetable td:empty { display: none; }
  .dealtable td[colspan], .linetable td[colspan] { display: block; text-align: left; } .dealtable td[colspan]::before, .linetable td[colspan]::before { content: none; }
  .totals { padding: 10px 14px; }
  .totals-head { grid-template-columns: repeat(3, 1fr); gap: 4px; } .totals-head > div { flex-direction: column; border: 0 !important; padding: 0 !important; gap: 0; } .totals-head b, .totals-head > div:last-child b { font-size: 16px; }
  .totals-toggle { display: inline-flex; width: 100%; margin-top: 6px; min-height: 36px; padding: 4px; }
  .totals-body { display: none; } .totals.open .totals-body { display: block; }
  .lf-main { grid-template-columns: 1fr; } .lf-extra .check { width: 100%; } .lf-extra button { flex: 1; }
  .savebar { top: 0; }
}
/* CRM v3 (Т-258): the sums in all currencies, the preliminary calculation */
.multi { display: flex; flex-wrap: wrap; gap: 2px 12px; font-variant-numeric: tabular-nums; justify-content: flex-end; }
.cur { font-weight: 400; color: #3b4660; white-space: nowrap; } .cur.main { font-weight: 800; color: var(--navy); font-size: 1.06em; } .cur.pos { color: var(--ok); } .cur.neg { color: var(--bad); }
.trow { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-bottom: 1px solid #eef1f6; } .trow .tl { color: var(--muted); font-size: 13px; } .trow .multi { justify-content: flex-start; font-size: 14px; }
.quote .qlink { display: flex; gap: 8px; flex-wrap: wrap; } .quote .qlink input { flex: 1 1 200px; }
.qprice { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; } .qprice b { font-size: 24px; color: var(--navy); } .qprice button { align-self: flex-start; margin-top: 6px; }
.qtable td { font-size: 13px; padding: 4px 6px; }
.small { font-size: 13px; }
@media (max-width: 760px) { .quote { margin-bottom: 8px; } .totals .trow .multi { justify-content: flex-start; } }
/* CRM v3 part 2: the files */
.filelist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.filelist li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: #f6f8fc; border-radius: 10px; }
.filelist li.archived { opacity: 0.55; text-decoration: line-through; }
.filelist .actions { white-space: nowrap; }
.fileform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fileform select, .fileform input[type=text] { flex: 1 1 180px; width: auto; } .fileform input[type=file] { flex: 2 1 220px; }
.filesection { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .fileform > * { flex: 1 1 100%; } }
/* Т-259: the tabs of the header, the stages, the selections */
.topnav { display: flex; gap: 6px; flex: 1; margin-left: 12px; } .topnav a { color: #c8d3e6; padding: 7px 16px; border-radius: 20px; text-decoration: none; } .topnav a.on { background: #fff; color: var(--navy); font-weight: 600; }
.stages { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 8px; scrollbar-width: thin; }
.stage { flex: 0 0 auto; background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 22px; padding: 8px 14px; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.stage .n { width: 22px; height: 22px; border-radius: 50%; background: #e8edf7; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.stage.on { background: var(--navy); color: #fff; border-color: var(--navy); } .stage.on .n { background: var(--red); color: #fff; }
.chips.tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .chips.tabs .chip { flex: 0 0 auto; white-space: nowrap; }
.chips .cnt { margin-left: 6px; background: #e8edf7; color: var(--navy); border-radius: 10px; padding: 0 7px; font-size: 12px; } .chip.on .cnt { background: rgba(255, 255, 255, 0.25); color: #fff; }
.st-inspection { background: #e8edf7; color: #12284c; } .st-payment { background: #fff1d6; color: #8a5a00; } .st-purchase { background: #ffe3d6; color: #8a3a00; } .st-freight { background: #dbeafe; color: #1d4ed8; }
.st-paperwork { background: #ece3ff; color: #5b2bb5; } .st-logistics { background: #d8f0f5; color: #0b6b7d; } .st-handover { background: #dcf3e5; color: #13803f; } .st-closed { background: #eceff3; color: #596882; }
.sel-active { background: #fff1d6; color: #8a5a00; } .sel-moved { background: #dcf3e5; color: #13803f; } .sel-closed { background: #eceff3; color: #596882; }
.cand-new { background: #e8edf7; color: #12284c; } .cand-called { background: #dbeafe; color: #1d4ed8; } .cand-waiting { background: #fff1d6; color: #8a5a00; } .cand-data { background: #d8f0f5; color: #0b6b7d; } .cand-refused { background: #fde3e5; color: #a3202c; } .cand-chosen { background: #dcf3e5; color: #13803f; }
details.cand > summary { cursor: pointer; list-style: none; padding: 2px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } details.cand.archived { opacity: 0.6; } details.cand.add > summary { color: var(--red); }
.checks { margin: 10px 0; gap: 16px; }
@media (max-width: 760px) { header.top { flex-wrap: wrap; } .topnav { order: 3; width: 100%; margin: 4px 0 0; } .topnav a { flex: 1; text-align: center; background: rgba(255, 255, 255, 0.08); } .topnav a.on { background: #fff; } }
/* Т-262: the security page */
.qr { display: block; width: 240px; height: 240px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; background: #fff; }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: 0.06em; word-break: break-all; background: #f6f8fc; border-radius: 8px; padding: 8px 10px; margin: 4px 0 12px; user-select: all; }
.steps { padding-left: 20px; margin: 8px 0; } .steps li { margin: 4px 0; }
.codes { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.codes li { font-family: ui-monospace, Consolas, monospace; font-size: 18px; background: #f6f8fc; border-radius: 8px; padding: 8px 12px; text-align: center; user-select: all; }
table.plain tr.bad td { color: var(--bad); }
@media (max-width: 760px) { table.plain { font-size: 14px; } .qr { width: 100%; height: auto; } }
/* Т-264 (CRM v6): the head of the card, the paid buttons, the tabs of the card, the articles page */
.paystrip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.pay { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(18, 40, 76, 0.08); padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.pay small { color: var(--muted); font-size: 13px; } .pay b { font-size: 22px; color: var(--navy); } .pay .muted { font-size: 13px; }
.badge.ok { background: #dcf3e5; color: #13803f; }
button.paidmark { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 18px; padding: 4px 12px; min-height: 34px; white-space: nowrap; }
button.paidmark.on { background: #dcf3e5; color: #13803f; border-color: #b6e3c6; font-weight: 600; }
.dealtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.dtab { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 20px; padding: 8px 18px; min-height: 40px; }
.dtab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.catform { display: grid; grid-template-columns: 130px minmax(200px, 2fr) 1fr 1fr auto; gap: 8px; align-items: center; }
table.cats td input[type=text] { min-width: 200px; margin-right: 6px; }
@media (max-width: 760px) { .paystrip { grid-template-columns: 1fr; } .catform { grid-template-columns: 1fr; } .dtab { flex: 1 1 auto; text-align: center; } table.cats td input[type=text] { min-width: 0; width: 100%; } }
/* Т-265 / Т-266: previews of photos, the large view */
.fileinfo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--line); background: #eef1f6; }
.ficon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; background: #e8edf7; color: var(--navy); font-size: 12px; font-weight: 700; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10, 18, 32, 0.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: zoom-out; padding: 12px; }
.lightbox img { max-width: 96vw; max-height: 84vh; object-fit: contain; border-radius: 8px; background: #fff; }
/* Т-268: the tab «Подбор» apart from the stages, the hint «такая машина уже была» */
.chipsep { display: inline-block; width: 2px; height: 28px; background: var(--line); margin: 0 6px; align-self: center; }
.chip.podbor { border-style: dashed; }
.chip.podbor.on { border-style: solid; }
.podbor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .podbor-head select { width: auto; margin-left: auto; }
.carform { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.warn.same ul { margin: 6px 0 0; padding-left: 20px; } .warn.same a { color: var(--navy); font-weight: 600; }
@media (max-width: 760px) { .carform { grid-template-columns: 1fr; } .chipsep { display: none; } .podbor-head select { margin-left: 0; width: 100%; } }
/* the stage tabs scroll sideways only on a phone; on a wide screen they wrap, so that «Подбор» (the last one) is always seen */
@media (min-width: 761px) { .chips.tabs { flex-wrap: wrap; overflow-x: visible; } }
/* a release happened while the page was open */
.newversion { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; background: var(--navy); color: #fff; border-radius: 12px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; box-shadow: 0 4px 18px rgba(18, 40, 76, 0.4); }
/* Т-272 / Т-273 / Т-275: the window, unsaved changes, the unambiguous payment button, «Прозвонил», the money tiles */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(10, 18, 32, 0.6); display: flex; align-items: center; justify-content: center; padding: 12px; }
.sheet { background: #fff; border-radius: 16px; max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 16px; box-shadow: 0 8px 30px rgba(10, 18, 32, 0.4); }
.sheethead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .sheethead h2 { margin: 0; } .sheethead button { min-width: 44px; }
.sheetbuttons { margin-top: 14px; } .sheetbuttons button { min-height: 44px; }
.plannedside { margin-bottom: 14px; } .plannedside h3 { text-transform: none; font-size: 15px; color: var(--navy); }
label.f.changed input, label.f.changed select, label.f.changed textarea { border-color: #e0a100; background: #fffbea; } label.f.changed { color: #8a5a00; }
button.paidmark.off { background: #fff1d6; color: #8a5a00; border-color: #f2c777; } .notin { margin-left: 6px; color: #8a5a00; }
button.calledmark { border-radius: 18px; padding: 4px 12px; min-height: 34px; white-space: nowrap; border: 1px solid #f2c777; background: #fff1d6; color: #8a5a00; } button.calledmark.on { background: #dcf3e5; color: #13803f; border-color: #b6e3c6; font-weight: 600; }
button.uncalledcount { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 18px; padding: 4px 12px; min-height: 34px; } button.uncalledcount.on { background: #fff1d6; color: #8a5a00; border-color: #f2c777; font-weight: 600; }
.stats5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } button.tile { text-align: left; background: #fff; color: inherit; border: 0; cursor: pointer; font: inherit; } button.tile:hover { box-shadow: 0 2px 10px rgba(18, 40, 76, 0.2); }
.paystrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } button.pay.tile { text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; }
@media (max-width: 1000px) { .paystrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .paystrip { grid-template-columns: 1fr; } .stats5 { grid-template-columns: 1fr; } .modal { align-items: flex-end; padding: 0; } .sheet { border-radius: 18px 18px 0 0; max-height: 92vh; } }
/* the tiles that open a list are buttons: they look like the other tiles (the global button style centres and paints them red) */
button.pay.tile, button.stat.tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; min-height: 0; padding: 10px 16px; text-align: left; background: #fff; color: inherit; border-radius: 14px; box-shadow: 0 1px 4px rgba(18, 40, 76, 0.08); }
button.pay.tile:hover, button.stat.tile:hover { box-shadow: 0 2px 10px rgba(18, 40, 76, 0.2); }

/* Т-272 point 2 and Т-276: the top bar and the tabs stay at the top; the phone (360, 390, 430 px): compact bar, swipeable tabs, big buttons, 16 px fields, windows from the bottom */
:root { --headh: 60px; }
header.top { position: sticky; top: 0; z-index: 40; }
.dealtabs { position: sticky; top: var(--headh); z-index: 30; background: var(--bg); padding: 6px 0; margin: 0 0 8px; }
.stickychips { position: sticky; top: var(--headh); z-index: 30; background: var(--bg); padding: 6px 0 2px; margin-top: 4px; }
.savebar { top: calc(var(--headh) + 54px); z-index: 28; }
.movers { display: inline-flex; gap: 4px; margin-right: 6px; } button.mover { background: #fff; color: var(--navy); border: 1px solid var(--line); min-width: 36px; min-height: 36px; padding: 0 8px; border-radius: 10px; font-size: 18px; line-height: 1; } button.mover:disabled { opacity: 0.35; cursor: default; }
.camerabtn { display: none; }
@media (max-width: 760px) {
  header.top { flex-wrap: wrap; padding: 8px 12px; gap: 4px 10px; }
  .topnav { order: 3; flex: 0 0 100%; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding: 2px 0 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topnav a { flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 6px 16px; scroll-snap-align: start; text-align: center; }
  .dealtabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dtab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; scroll-snap-align: start; }
  .savebar { top: calc(var(--headh) + 62px); }
  /* touch: every button and field is at least 44 px high, the fields are 16 px (a smaller field makes an iPhone zoom in) */
  button, .btn, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  button.link, a.link { min-height: 44px; padding: 10px 8px; display: inline-flex; align-items: center; }
  .chip, .stage, button.paidmark, button.calledmark, button.uncalledcount { min-height: 44px; }
  button.mover { min-width: 44px; min-height: 44px; }
  input[type=checkbox] { width: 24px; height: 24px; } label.check { min-height: 44px; gap: 10px; }
  header.top button { min-height: 44px; }
  /* long links, VIN and names wrap instead of widening the page */
  td, th, a, .muted, small, b, p, h1, h2, h3, label.f, .fileinfo, .filelist li, .warn { overflow-wrap: anywhere; word-break: break-word; }
  .linetable td.actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; white-space: normal; } .linetable td.actions::before { content: none; }
  .linetable td[data-label='Отметки'] { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  .fileform > * { flex: 1 1 100%; } .camerabtn { display: inline-flex; }
  /* windows come from the bottom and fill the width (the unsaved-changes question, the lists of the tiles) */
  .modal { align-items: flex-end; padding: 0; } .sheet { max-width: none; width: 100%; border-radius: 18px 18px 0 0; max-height: 100dvh; min-height: 50dvh; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }
  .sheetbuttons { flex-direction: column; align-items: stretch; } .sheetbuttons button { width: 100%; }
}
/* phone, second pass: one compact row for the top bar (the menu swipes, «Выйти» stays at the right), section headings and «Подробнее» are touch size */
@media (max-width: 760px) {
  header.top { flex-wrap: nowrap; padding: 6px 10px; gap: 8px; align-items: center; }
  header.top .brand { display: none; }
  header.top .row { flex: 0 0 auto; }
  .topnav { order: 0; flex: 1 1 auto; width: auto; min-width: 0; padding: 0; }
  details.sec > summary, details.cand > summary { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 0; }
  .totals-toggle { min-height: 44px; }
}