/* Интерфейс рассчитан на работу на улице: крупные кнопки, высокий контраст, работа в перчатках. */
@font-face { font-family: "Onest"; src: url("../fonts/onest.woff") format("woff"); font-weight: 100 900; font-display: swap; }
/* Стиль «Кабина» (1.7.0): день — светлый, ночь — тёмный с бирюзой. Тема: как в телефоне / светлая / тёмная (Ещё → Тема). */
:root {
  --bg: #edf2f5; --card: #ffffff; --fg: #0b1823; --muted: #4c6070; --line: #d3dde4; --line-strong: #9eb0bd;
  --pri: #07788a; --pri-fg: #ffffff; --acc: #07788a;
  --bar: #0b1823; --bar-fg: #ffffff; --bar-acc: #36d1e3;
  --ok: #0d6a3f; --ok-bg: #d9f2e6; --warn: #7a5300; --warn-bg: #fff0c7; --bad: #b3121f; --bad-bg: #fde3e5;
  --z-ok: #bfe8d3; --z-new: #e5383b; --z-known: #f7b538; --z-fixed: #8ecae6; --z-none: #dbe3ea;
  --vs-dark: #33424f; --vs-glass: #bcd3e6; --inp-bg: #f6f9fb;
  --tab-bg: #ffffff; --tab-on: #07788a; --btn-fg: #0b1823; --btn-line: #9eb0bd; --div-bg: #0b1823; --div-fg: #8fdcef;
  --shadow: 0 1px 2px #0b18230f;
  --radius: 16px; --r-btn: 14px; --tap: 48px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09141d; --card: #112231; --fg: #e9f2f8; --muted: #92a9bb; --line: #203547; --line-strong: #3a5569;
    --pri: #22bfd2; --pri-fg: #03161b; --acc: #36d1e3;
    --bar: #09141d; --bar-fg: #e9f2f8; --bar-acc: #36d1e3;
    --ok: #4fd99a; --ok-bg: #0d2e21; --warn: #ffc94d; --warn-bg: #362a0b; --bad: #ff6f6f; --bad-bg: #3d1618;
    --z-ok: #1d5a44; --z-new: #ff5a5f; --z-known: #f0b43c; --z-fixed: #2f6f8f; --z-none: #22384a;
    --vs-dark: #03090e; --vs-glass: #2c4a63; --inp-bg: #09141d;
    --tab-bg: #0d1b27; --tab-on: #36d1e3; --btn-fg: #e9f2f8; --btn-line: #3a5569; --div-bg: #17304a; --div-fg: #8fdcef;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #09141d; --card: #112231; --fg: #e9f2f8; --muted: #92a9bb; --line: #203547; --line-strong: #3a5569;
    --pri: #22bfd2; --pri-fg: #03161b; --acc: #36d1e3;
    --bar: #09141d; --bar-fg: #e9f2f8; --bar-acc: #36d1e3;
    --ok: #4fd99a; --ok-bg: #0d2e21; --warn: #ffc94d; --warn-bg: #362a0b; --bad: #ff6f6f; --bad-bg: #3d1618;
    --z-ok: #1d5a44; --z-new: #ff5a5f; --z-known: #f0b43c; --z-fixed: #2f6f8f; --z-none: #22384a;
    --vs-dark: #03090e; --vs-glass: #2c4a63; --inp-bg: #09141d;
    --tab-bg: #0d1b27; --tab-on: #36d1e3; --btn-fg: #e9f2f8; --btn-line: #3a5569; --div-bg: #17304a; --div-fg: #8fdcef;
    --shadow: none;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 "Onest", system-ui, "Roboto", sans-serif; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; }
body.noscroll { overflow: hidden; }
a { color: var(--acc); }
h3 { margin: 22px 2px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
h4 { margin: 16px 0 6px; font-size: 15px; }
.muted { color: var(--muted); } .small { font-size: 13.5px; } .mono { font-family: ui-monospace, monospace; font-size: 13px; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.ok-text { color: var(--ok); }

/* каркас */
.topbar { position: sticky; top: 0; z-index: 10; padding: env(safe-area-inset-top) 8px 0 12px; background: var(--bar); color: var(--bar-fg); }
.topbar-row { display: flex; align-items: center; gap: 6px; min-height: 56px; }
.topbar h1 { flex: 1; margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .icon-btn { color: var(--bar-fg); }
.topbar-sub { padding: 0 6px 12px 4px; margin-top: -8px; font-size: 13px; color: color-mix(in srgb, var(--bar-fg) 75%, transparent); }
.topbar-sub:empty { display: none; }
.top-prog { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--bar-fg) 20%, transparent); margin-top: 8px; overflow: hidden; }
.top-prog i { display: block; height: 100%; background: var(--bar-acc); border-radius: 3px; transition: width .3s; }
.main { max-width: 760px; margin: 0 auto; padding: 12px 16px 120px; }
.main.with-bar { padding-bottom: 190px; }
.tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10; display: flex; max-width: 740px; margin: 0 auto;
  background: var(--tab-bg); border: 1px solid var(--line); border-radius: 22px; padding: 6px 4px; box-shadow: 0 6px 20px #00000026; }
.tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 0; font-size: 11px; color: var(--muted); text-decoration: none; }
.tabbar a.on { color: var(--tab-on); font-weight: 700; }
.tabbar .ti { display: grid; place-items: center; width: 48px; height: 28px; border-radius: 14px; }
.tabbar a.on .ti { background: color-mix(in srgb, var(--tab-on) 18%, transparent); }
.tabbar .ti svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tabbar .dot { position: absolute; top: -2px; left: calc(50% + 8px); background: var(--bad); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 6px; font-weight: 700; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 16px; border-radius: var(--r-btn);
  border: 1.5px solid var(--btn-line); background: var(--card); color: var(--btn-fg); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--pri); color: var(--pri-fg); border-color: var(--pri); }
.btn.ghost { border-color: var(--line); color: var(--fg); }
.btn.danger, .btn.ghost.danger { color: var(--bad); border-color: var(--bad); background: var(--card); }
.btn.big { width: 100%; min-height: 56px; font-size: 17px; font-weight: 700; margin: 6px 0; }
.btn.add-btn { width: 100%; border-style: dashed; margin: 8px 0; }
.btn:disabled { opacity: .6; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .btn-row .btn { flex: 1 1 140px; }
.icon-btn { min-width: var(--tap); min-height: var(--tap); border: 0; background: transparent; font-size: 22px; color: inherit; cursor: pointer; border-radius: 50%; }
.link { border: 0; background: none; color: var(--acc); font: inherit; font-size: 14px; padding: 6px; cursor: pointer; text-decoration: underline; }
.link.danger { color: var(--bad); }

/* поля */
.fld { display: block; margin: 10px 0; font-size: 14px; color: var(--muted); }
.fld > .input, .fld > select, .fld > .seg { margin-top: 4px; }
.input { width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--inp-bg); color: var(--fg); font: inherit; font-size: 16px; }
textarea.input { min-height: 64px; resize: vertical; margin-top: 8px; }
.input:focus { outline: 3px solid color-mix(in srgb, var(--acc) 35%, transparent); border-color: var(--acc); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .row2 { grid-template-columns: 1fr; gap: 0; } }
fieldset.person { border: 1.5px solid var(--line); border-radius: var(--radius); margin: 12px 0; padding: 6px 12px 4px; }
fieldset.person legend { font-weight: 700; padding: 0 6px; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; flex-wrap: wrap; }
.check input { width: 26px; height: 26px; accent-color: var(--bad); flex: none; }
.check.inline { min-height: 0; gap: 6px; font-size: 14px; }
.check.inline input { width: 20px; height: 20px; accent-color: var(--ok); }

.seg { display: flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); flex: none; }
.seg button { flex: 1; min-height: 44px; min-width: 60px; padding: 0 10px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--pri); color: var(--pri-fg); }
.seg button.on.yes { background: var(--ok); color: var(--card); } .seg button.on.no { background: var(--bad); color: #fff; }
.seg.yn button { min-width: 64px; }

/* секции формы */
.form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.act-no { font-weight: 700; font-size: 17px; }
.sec { background: var(--card); border-radius: var(--radius); margin: 10px 0; border: 1px solid var(--line); box-shadow: var(--shadow); scroll-margin-top: 64px; }
.sec-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px;
  border: 0; background: none; color: var(--fg); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.sec-body { display: none; padding: 0 14px 14px; }
.sec.open .sec-body { display: block; }
.sec.open .sec-head { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sec-status { flex: none; min-width: 30px; height: 28px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 0 8px; }
.sec-status.done { background: var(--ok-bg); color: var(--ok); }
.sec-status.todo { background: var(--warn-bg); color: var(--warn); }
.sec-status.block { background: var(--bad-bg); color: var(--bad); }

.item { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 8px 0; background: var(--card); }
.item.alert { border-color: var(--bad); background: var(--bad-bg); }
.item.known { border-color: var(--z-known); }
.item.closed { opacity: .75; }
.item.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 4px var(--acc); } 100% { box-shadow: none; } }
.item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-name { font-weight: 600; }
.item.dmg.s-new { border-color: var(--bad); background: var(--bad-bg); }
.item.dmg.s-known { border-color: var(--z-known); }
.prev { color: var(--muted); margin-top: 4px; border-left: 3px solid var(--line); padding-left: 8px; }
.note { border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: color-mix(in srgb, var(--acc) 10%, var(--card)); }
.note.warn { background: var(--warn-bg); color: var(--warn); } .note.bad { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--z-none); color: var(--fg); white-space: nowrap; }
.tag.new { background: var(--bad-bg); color: var(--bad); } .tag.known { background: var(--warn-bg); color: var(--warn); } .tag.ok { background: var(--ok-bg); color: var(--ok); } .tag.fixed { background: color-mix(in srgb, var(--z-fixed) 35%, var(--card)); color: var(--fg); }
.badge { background: var(--bad); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; margin-left: 6px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; box-shadow: var(--shadow); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; word-break: break-word; }

/* фото */
.photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thumb { position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--line); background: var(--bg); padding: 0; }
.thumb-img { width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-del { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; }
.thumb.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; border-style: dashed; border-color: var(--pri); color: var(--pri); font: inherit; font-size: 12px; font-weight: 600; }
.thumb.add .cam { font-size: 26px; }
.thumb.add.need { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .photo-grid { grid-template-columns: 1fr; } }
.photo-slot { border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.photo-full { width: 100%; height: auto; border-radius: 8px; }

/* схема */
.schema-wrap { display: flex; justify-content: center; background: var(--bg); border-radius: var(--radius); padding: 8px; margin: 8px 0; }
.schema-wrap.placing { outline: 3px dashed var(--bad); cursor: crosshair; }
.schema { width: 100%; max-width: 330px; height: auto; touch-action: manipulation; }
.schema .schema-base rect, .schema .schema-base circle { fill: var(--card); stroke: var(--muted); stroke-width: .8; }
.schema .schema-base .wheel { fill: var(--vs-dark); }
.schema .zone { stroke: var(--fg); stroke-opacity: .55; stroke-width: .7; cursor: pointer; }
.schema .zone:focus { outline: none; stroke: var(--acc); stroke-width: 2; }
.schema .schema-lbl { font-size: 10px; fill: var(--muted); font-weight: 700; letter-spacing: .5px; }
.schema .marker circle { fill: var(--z-new); stroke: #fff; stroke-width: 1.5; }
.schema .marker.known circle { fill: var(--z-known); }
.schema .marker text { fill: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.lg::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--line); }
.lg.ok::before { background: var(--z-ok); } .lg.known::before { background: var(--z-known); } .lg.new::before { background: var(--z-new); }
.lg.none::before { background: var(--z-none); } .lg.warn::before { background: var(--z-known); }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 12px 0 4px; padding-bottom: 4px; }
.tabs button { flex: none; min-height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.tabs button.on { background: var(--pri); color: var(--pri-fg); border-color: var(--pri); }

/* колёса */
.wheels { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 16px 8px; background: var(--bg); border-radius: var(--radius); margin: 8px 0; }
.axle { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 360px; }
.axle.front { margin-bottom: 18px; }
.axle-side { display: flex; gap: 4px; flex: none; }
.axle-beam { flex: 1; height: 8px; background: var(--muted); border-radius: 4px; position: relative; }
.axle-beam span { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
.wheel-btn { width: 52px; height: 84px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--fg) 60%, transparent); background: var(--z-none); color: var(--fg); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.wheel-btn.w-ok { background: var(--z-ok); color: var(--fg); } .wheel-btn.w-warn { background: var(--z-known); color: #3a2600; } .wheel-btn.w-bad { background: var(--z-new); color: #fff; }

.tire-row { display: grid; grid-template-columns: 52px 1fr 1fr; gap: 6px; align-items: center; margin: 6px 0; }

/* подписи */
.sign { margin: 10px 0; }
.sign-canvas { width: 100%; height: auto; aspect-ratio: 600 / 220; border: 1.5px dashed var(--muted); border-radius: 10px; background: #fff; touch-action: none; margin-top: 6px; }

/* нижняя панель формы */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 9; background: color-mix(in srgb, var(--bg) 92%, transparent); padding: 8px 16px; backdrop-filter: blur(6px); }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 760px; margin: 0 auto; }
.bar-row .btn { min-width: 170px; min-height: 52px; font-weight: 700; }
.progress { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; max-width: 760px; margin: 0 auto 8px; }
.progress-fill { height: 100%; background: var(--ok); transition: width .3s; }

/* списки */
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin: 8px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--fg); text-decoration: none; }
.row.inactive { opacity: .55; }
.row-title { font-weight: 700; font-size: 16.5px; letter-spacing: .02em; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.row-main { min-width: 0; }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.kpi-n { font-size: 28px; font-weight: 800; } .kpi-l { font-size: 13px; color: var(--muted); }
.bar-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; margin: 6px 0; cursor: pointer; }
.hbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg); margin-top: 6px; }
.hbar-d { background: var(--z-new); } .hbar-k { background: var(--z-known); }
.table-wrap { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--card); }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.tbl td.c-bad { background: var(--bad-bg); color: var(--bad); font-weight: 700; } .tbl td.c-warn { background: var(--warn-bg); color: var(--warn); font-weight: 700; }

/* шторка */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; background: var(--card); border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px #00000040; }
.sheet::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); align-self: center; margin-top: 8px; flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.sheet-title { font-weight: 700; font-size: 17px; }
.sheet-body { overflow-y: auto; padding: 12px 16px; }
.sheet-actions { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.sheet-actions .btn { flex: 1; }
.issue { display: block; width: 100%; text-align: left; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--warn-bg); color: var(--fg); font: inherit; cursor: pointer; }

.toast { position: fixed; left: 50%; bottom: 170px; transform: translate(-50%, 20px); opacity: 0; z-index: 100; background: #222; color: #fff; padding: 12px 18px; border-radius: 12px; max-width: 90vw; transition: .25s; font-weight: 600; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok); color: var(--card); } .toast.bad { background: var(--bad); color: #fff; }
.check > span:first-of-type { flex: 1 1 200px; min-width: 0; }
.pdf-page { display: block; width: 100%; margin: 10px 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; }

/* справочники и выбор людей */
.dir-tabs button .cnt { margin-left: 6px; font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
button.row { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.warn-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dir-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow: visible; }
.dir-tabs button { padding: 0 8px; }
@media (max-width: 560px) { .dir-tabs { grid-template-columns: 1fr 1fr; } }
.input-row { display: flex; gap: 8px; margin-top: 4px; }
.input-row .input { flex: 1; min-width: 0; }
.pick-btn { flex: none; padding: 0 12px; }
.suggest { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.suggest:empty { display: none; }
.person-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: 48px; padding: 8px 12px; margin: 4px 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.person-row .pr-name { font-weight: 600; flex: 1 1 60%; }
.person-row .pr-phone { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.file-input { display: none; }
.kv-list { display: grid; gap: 4px; margin: 6px 0; }
details summary { cursor: pointer; margin: 6px 0; }
.tabbar a span:nth-child(2) { font-size: 11px; white-space: nowrap; }

/* выбор ТС */
.plate { font-weight: 800; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.plate.big { font-size: 20px; }
.plate-input { text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.veh-chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 8px 12px;
  border: 1.5px solid var(--ok); border-radius: 12px; background: var(--ok-bg); color: var(--fg); }
.veh-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.place-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* шины: подсветка полей и причины */
.wheel-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; }
.wheel-btn .wc { font-weight: 800; }
.wheel-btn .wv { font-size: 10.5px; font-weight: 600; opacity: .9; }
.input.in-bad { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); font-weight: 700; }
.input.in-warn { border-color: var(--z-known); background: var(--warn-bg); }
.input.in-ok { border-color: var(--ok); }
.field-msg { font-size: 13px; margin-top: 4px; min-height: 0; }
.field-msg:empty { display: none; }
.field-msg.bad { color: var(--bad); font-weight: 600; }
.field-msg.warn { color: var(--warn); font-weight: 600; }
.tire-problems { display: grid; gap: 6px; margin-top: 10px; }
.tire-problem { display: grid; grid-template-columns: 48px 1fr; gap: 2px 8px; align-items: start; text-align: left; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); font: inherit; cursor: pointer; }
.tire-problem b { grid-row: span 3; font-size: 15px; }
.tire-problem .iss { font-size: 13.5px; grid-column: 2; }
.iss.bad { color: var(--bad); font-weight: 600; } .iss.warn { color: var(--warn); }
.plate-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* тягач: 4 вида */
.schema.vs { max-width: 440px; }
.schema.vs .vs-base { fill: var(--card); stroke: var(--muted); stroke-width: 1.3; }
.schema.vs .vs-dark { fill: var(--vs-dark); stroke: var(--muted); stroke-width: 1; }
.schema.vs .vs-decor { fill: none; stroke: var(--muted); stroke-width: 1.1; opacity: .7; pointer-events: none; }
.schema.vs .vs-label { font: 700 11px "Onest", system-ui, sans-serif; letter-spacing: .06em; fill: var(--muted); pointer-events: none; }
.schema.vs .vs-plate { font: 700 8px system-ui, sans-serif; fill: #111; pointer-events: none; }
.schema.vs .zone { stroke: var(--fg); stroke-opacity: .55; stroke-width: 1; }
.view-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.view-tabs button { padding: 0 4px; }
.view-hint { margin: 2px 0 4px; }

/* шина: окно не закрывается, пока показания не в норме */
.block-alert { border: 2px solid var(--bad); background: var(--bad-bg); color: var(--fg); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 4px; }
.block-alert b { color: var(--bad); }
.block-alert .link { justify-self: start; padding-left: 0; }
.block-alert.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .block-alert.shake { animation: none; } }

/* полуприцеп: разделитель и отметки на тенте */
.part-divider { margin: 22px 0 6px; padding: 9px 14px; border-radius: 999px; background: var(--div-bg); color: var(--div-fg); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; }
.tent-box { margin: 8px 0; display: grid; gap: 6px; }
.tent-marker { width: 100%; height: auto; touch-action: manipulation; cursor: crosshair; }
.tent-marker .tm-bg { fill: var(--z-ok); stroke: var(--fg); stroke-width: 1; }
.tent-marker .tm-mark circle { fill: var(--z-new); stroke: #fff; stroke-width: 2; }
.tent-marker .tm-mark text { fill: #fff; font: 800 14px system-ui, sans-serif; pointer-events: none; }
.tent-marker .vs-label { font: 700 11px system-ui, sans-serif; fill: var(--muted); }
.schema.vs .tent-mark path { stroke: var(--bad); stroke-width: 3.5; stroke-linecap: round; fill: none; pointer-events: none; }
.schema.vs .tent-mark circle { fill: none; stroke: var(--bad); stroke-width: 2; pointer-events: none; }
.schema.vs .tent-mark .tm-num { fill: var(--bad); font: 800 12px system-ui, sans-serif; }
.schema.vs text { pointer-events: none; }

/* Общая база */
.sync-line { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; padding: 2px 2px 8px; cursor: pointer; }
.sync-line.bad { color: var(--bad); }
.block-alert.soft { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.big-code { font: 700 40px/1.2 ui-monospace, monospace; letter-spacing: 4px; text-align: center; padding: 14px; margin: 10px 0; border-radius: var(--radius); background: var(--bg); }
.row-side.col { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.row.closed { opacity: .6; }

/* 1.7.0 */
.tread-chart { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 10px; box-shadow: var(--shadow); }
.tread-chart .tc-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px; }
.tread-chart .tc-head span { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.tc-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 22px; border-bottom: 1px solid var(--line); }
.tc-bar { flex: 1; min-width: 0; position: relative; border-radius: 7px 7px 2px 2px; background: color-mix(in srgb, var(--tab-on) 55%, transparent); }
.tc-bar.warn { background: var(--z-known); } .tc-bar.bad { background: var(--z-new); } .tc-bar.none { background: var(--line); }
.tc-bar b { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-size: 12px; padding-bottom: 2px; }
.tc-labels { display: flex; gap: 6px; margin-top: 4px; }
.tc-labels span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--muted); overflow: hidden; }
.theme-seg { margin-top: 4px; }

/* 1.8.0 — плановые ремонты */
.subtabs { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 4px 0 10px; }
.subtabs button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.subtabs button.on { background: var(--pri); color: var(--pri-fg); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin: 4px 0 10px; }
.chips button { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.chips button.on { border-color: var(--tab-on); color: var(--tab-on); background: color-mix(in srgb, var(--tab-on) 14%, var(--card)); }
.skpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.skpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 4px; text-align: center; box-shadow: var(--shadow); }
.skpi b { display: block; font-size: 24px; line-height: 1.1; }
.skpi span { font-size: 11.5px; color: var(--muted); }
.skpi.g b { color: var(--ok); } .skpi.y b { color: var(--warn); } .skpi.r b { color: var(--bad); } .skpi.n b { color: var(--muted); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 8px 0; box-shadow: var(--shadow); display: grid; gap: 7px; }
.panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14.5px; }
.panel-h span { font-weight: 500; font-size: 12px; color: var(--muted); text-align: right; }
.hb { display: grid; grid-template-columns: 92px 1fr 88px; align-items: center; gap: 8px; font-size: 12.5px; width: 100%; border: 0; background: none; color: var(--fg); padding: 2px 0; font-family: inherit; text-align: left; cursor: pointer; }
.hb .pl { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb .tr, .pbar { position: relative; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 16%, transparent); overflow: hidden; }
.hb .win, .pbar .win { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--z-known) 32%, transparent); }
.hb .mk, .pbar .mk { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fg); opacity: .55; }
.fl { position: absolute; top: 2px; bottom: 2px; left: 0; border-radius: 4px; background: var(--ok); }
.fl.window, .fl.soon { background: var(--z-known); } .fl.over { background: var(--z-new); }
.fl.stale, .fl.unset { background: repeating-linear-gradient(45deg, var(--muted) 0 3px, transparent 3px 6px); opacity: .55; }
.hb .rv { text-align: right; font-weight: 600; white-space: nowrap; }
.rv.window, .rv.soon { color: var(--warn); } .rv.over { color: var(--bad); } .rv.stale, .rv.unset { color: var(--muted); font-weight: 500; }
.hb-axis { display: grid; grid-template-columns: 92px 1fr 88px; gap: 8px; font-size: 10.5px; color: var(--muted); }
.hb-axis div { position: relative; height: 13px; }
.hb-axis i { position: absolute; transform: translateX(-50%); font-style: normal; white-space: nowrap; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dn { font-size: 11px; color: var(--muted); text-align: center; }
.cal .d { height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--muted) 10%, transparent); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.cal .d.today { outline: 1.5px solid var(--tab-on); color: var(--fg); }
.cal .d.l1 { background: color-mix(in srgb, var(--pri) 32%, transparent); color: var(--fg); font-weight: 700; }
.cal .d.l2 { background: color-mix(in srgb, var(--pri) 62%, transparent); color: var(--fg); font-weight: 800; }
.cal .d.l3 { background: var(--pri); color: var(--pri-fg); font-weight: 800; }
.cal .d.over { background: var(--bad-bg); color: var(--bad); font-weight: 800; }
.cal .d.blank { background: none; }
.hist { position: relative; height: 110px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 4px 18px; }
.hist .band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ok) 16%, transparent); }
.hist .c { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fg); opacity: .35; }
.hist .dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, 50%); background: var(--ok); border: 1.5px solid var(--card); }
.hist .dot.late { background: var(--z-new); } .hist .dot.early { background: var(--z-known); }
.hist .xl { position: absolute; bottom: -17px; font-size: 10.5px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.unit { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; display: grid; gap: 8px; box-shadow: var(--shadow); }
.unit-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.unit-i { font-size: 13.5px; color: var(--muted); }
.unit-i b { color: var(--fg); }
.unit .btn-row { margin: 0; }
.tag.window, .tag.soon { background: var(--warn-bg); color: var(--warn); } .tag.over { background: var(--bad-bg); color: var(--bad); }
.tag.stale, .tag.unset { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.stale-note { font-size: 13px; color: var(--warn); background: var(--warn-bg); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.ag-status { display: grid; gap: 3px; font-size: 13.5px; }
.tag.who { background: color-mix(in srgb, var(--tab-on) 16%, transparent); color: var(--tab-on); }

/* 1.9.0 — раздел «Ремонты» */
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.pill { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.pill.y { background: var(--warn-bg); color: var(--warn); } .pill.r { background: var(--bad-bg); color: var(--bad); }
.pill.n { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); font-weight: 600; }
.warnbox { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--warn-bg); color: var(--warn); border-radius: 14px; padding: 8px 8px 8px 14px; font-size: 13.5px; font-weight: 600; margin: 8px 0; }
.wb-btn { flex: none; border: 0; border-radius: 999px; background: var(--warn); color: var(--card); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; cursor: pointer; }
.base-form { display: grid; gap: 8px; }
.base-form .seg button { font-size: 13.5px; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 999px; }

/* 1.9.0 — карта */
.main.fullmap { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; padding: 0; overflow: hidden; }
.lmap { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: var(--bg);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; user-select: none; }
.lmap-tiles, .lmap-over { position: absolute; inset: 0; }
.lmap-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; pointer-events: none; }
.lmap-tile.err { visibility: hidden; }
:root[data-theme="dark"] .lmap-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lmap-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); } }
.lmap-item { position: absolute; left: 0; top: 0; }
.lmap-attr { position: absolute; right: 4px; bottom: 150px; font-size: 10px; color: var(--muted); background: color-mix(in srgb, var(--card) 70%, transparent); padding: 1px 4px; border-radius: 4px; }
.lmap-zoom { position: absolute; right: 10px; top: 150px; display: grid; gap: 6px; z-index: 2; }
.lmap-zoom button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 22px; font-weight: 700; box-shadow: 0 2px 8px #0003; cursor: pointer; }
.map-box { position: absolute; inset: 0; }
.map-site { margin: 0; border-radius: 50%; border: 2px dashed var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); transform-origin: 0 0; translate: -50% -50%; pointer-events: none; }
.map-site span { position: absolute; left: 50%; top: -18px; translate: -50% 0; font-size: 11px; font-weight: 800; color: var(--acc); white-space: nowrap; text-transform: uppercase; }
.map-mk { translate: -50% -50%; display: flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.map-mk .mk-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; border: 2px solid var(--card); background: var(--muted); color: var(--card); box-shadow: 0 1px 4px #0005; }
.map-mk.move .mk-dot { background: var(--pri); color: var(--pri-fg); }
.map-mk.off .mk-dot { background: var(--bad); color: #fff; }
.map-mk.to .mk-dot { outline: 3px solid var(--z-known); outline-offset: 1px; }
.map-mk.sel .mk-dot { width: 30px; height: 30px; border-color: var(--fg); }
.map-mk .mk-lbl { font-size: 11px; font-weight: 800; color: var(--fg); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 3px var(--bg); white-space: nowrap; }
.map-top { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: grid; gap: 6px; }
.map-row { display: flex; gap: 6px; }
.map-q { box-shadow: 0 4px 14px #0003; }
.map-sw { flex: none; display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 3px; box-shadow: 0 4px 14px #0003; }
.map-sw button { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 13px; padding: 0 10px; border-radius: 9px; cursor: pointer; }
.map-sw button.on { background: var(--pri); color: var(--pri-fg); }
.map-sugg { display: grid; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px #0004; }
.map-sugg:empty { display: none; }
.map-sugg button { display: flex; justify-content: space-between; gap: 8px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.map-sugg button span { color: var(--muted); font-size: 13px; }
.map-chips { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
.map-chips button { flex: none; min-height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-weight: 600; font-size: 12.5px; box-shadow: 0 2px 6px #0002; cursor: pointer; }
.map-chips button.on { background: var(--pri); color: var(--pri-fg); border-color: transparent; }
.map-strip { position: absolute; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 7px 4px; box-shadow: 0 4px 14px #0003; max-width: 740px; margin: 0 auto; }
.map-strip div { text-align: center; font-size: 11.5px; color: var(--muted); } .map-strip b { display: block; font-size: 18px; color: var(--fg); }
.map-strip .mv b { color: var(--pri); } .map-strip .off b { color: var(--bad); }
.map-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; background: var(--card); border-radius: 24px 24px 0 0; padding: 6px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px #0005; display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.map-card .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); justify-self: center; }
.map-card .card-row { flex-wrap: nowrap; }
.map-card .card-row .plate { flex: 1; }
.map-drv { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-list { position: absolute; inset: 0; overflow-y: auto; padding: 136px 12px 160px; display: none; background: var(--bg); }
.main.fullmap.list-mode .map-list { display: block; }
.main.fullmap.list-mode .map-box, .main.fullmap.list-mode .map-strip { display: none; }
.map-lrow { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.map-ldot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--muted); }
.map-ldot.move { background: var(--pri); } .map-ldot.off { background: var(--bad); }
[hidden] { display: none !important; }
.btn.sm { white-space: nowrap; flex: none; }

/* 1.9.1 — удаление и архив в справочниках */
.dir-toolbar { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0 -2px; }
.link.on { font-weight: 700; }
.row[role="button"] { cursor: pointer; }
.row.picked { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 10%, var(--card)); }
.sel-box { width: 24px; height: 24px; flex: none; accent-color: var(--pri); }
.sel-bar { position: fixed; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 11; max-width: 740px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 10px; box-shadow: 0 6px 18px #0004; }
.sel-bar > span { flex: 1; font-weight: 700; }
.btn.sm.danger, .btn.danger-fill { background: var(--bad); color: #fff; border-color: var(--bad); }
/* 1.9.2 — виды ремонтов */
.rule-row { display: grid; grid-template-columns: 1.6fr 1fr 0.9fr auto; gap: 6px; align-items: center; margin: 6px 0; }
.rule-row .input { min-height: 42px; padding: 8px 10px; }
.model-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.chip-btn { border: 1px dashed var(--pri); background: none; color: var(--pri); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
/* 1.9.3 — ✎ и 🗑 в строке справочника */
.row-acts { display: flex; gap: 6px; flex: none; }
.row-ib { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 0; }
.row-ib svg { width: 19px; height: 19px; stroke: var(--fg); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-ib.del svg { stroke: var(--bad); } .row-ib.rst svg { stroke: var(--ok); }
.row-ib:focus-visible { outline: 3px solid var(--acc); }
.row .row-side:empty { display: none; }
.rule-head { margin-bottom: -2px; } .rule-head span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---------- напоминания и уведомления (1.10) ---------- */
.row-ib.alarm { position: relative; }
.row-ib.alarm.on { border-color: var(--pri); color: var(--pri); background: color-mix(in srgb, var(--pri) 12%, var(--card)); }
.ib-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pri); color: var(--pri-fg); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.rem { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--pri); border-radius: 14px; padding: 10px 12px; margin: 8px 0; display: grid; gap: 4px; }
.rem.fired { border-left-color: var(--bad); background: var(--bad-bg); }
.rem-k { font-size: 12px; font-weight: 700; color: var(--pri); letter-spacing: .02em; }
.rem.fired .rem-k { color: var(--bad); }
.rem .btn-row { margin-top: 4px; }
.ta-mic { position: relative; }
.ta-mic textarea { padding-right: 64px; min-height: 110px; }
.mic-btn { position: absolute; right: 8px; bottom: 8px; min-width: 50px; height: 50px; border-radius: 25px; border: 0; background: var(--pri); color: var(--pri-fg); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; cursor: pointer; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.mic-btn.rec { animation: micpulse 1.4s ease-out infinite; }
.mic-btn:disabled { opacity: .6; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pri-fg); animation: blink 1s steps(2) infinite; }
@keyframes micpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pri) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes blink { 50% { opacity: .25; } }
.tx-btn { border-color: var(--pri); color: var(--pri); } .tx-btn.done { opacity: .6; }
.mic-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.voice-chip { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.checks { display: grid; gap: 10px; margin: 6px 0 14px; }
.sw-row { align-items: flex-start; padding: 6px 0; }
.sub-opts { margin-left: 32px; display: grid; gap: 2px; }
.seg button.alarm-on:not(.on) { color: var(--bad); }
.row-ib.alarm.on svg { stroke: var(--pri); }
.update-banner { display: block; text-decoration: none; color: var(--fg); border: 2px solid var(--pri); background: color-mix(in srgb, var(--pri) 12%, var(--card)); margin: 8px 0; }
.update-banner b { color: var(--pri); }

/* ---------- 1.11: меню, ＋ и ⚙ в шапке, задача вручную ---------- */
.top-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn.plus { background: var(--bar-acc); color: var(--bar); border-color: transparent; font-weight: 700; font-size: 22px; }
.icon-btn.gear { font-size: 20px; }
body.no-tabs .main { padding-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.chip { min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--pri); border-color: var(--pri); color: var(--pri-fg); }
.opt-list { display: grid; gap: 10px; }
.opt-big { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; text-align: left; }
.opt-big span { font-size: 24px; }
.chips .chip { background: var(--card); color: var(--fg); border: 1.5px solid var(--line-strong); }
.chips .chip.on { background: var(--pri); border-color: var(--pri); color: var(--pri-fg); }

/* ---- удалённый акт (заполняет водитель) ---- */
.tag.r-wait { background: var(--warn-bg); color: var(--warn); }
.tag.r-chk { background: color-mix(in srgb, var(--acc) 18%, var(--card)); color: var(--acc); }
.tag.r-ok { background: var(--ok-bg); color: var(--ok); }
.opts { display: grid; gap: 10px; }
.opts .opt-big { display: grid; gap: 2px; text-align: left; padding: 12px 16px; align-content: center; }
.opts .opt-big small { color: var(--muted); font-weight: 500; font-size: 13px; }
.share { display: flex; gap: 8px; margin: 6px 0 10px; }
.share-btn { flex: 1; min-height: 46px; border: 0; border-radius: 12px; color: #fff; font: 700 14px/1 inherit; font-family: inherit; cursor: pointer; }
.share-btn.wa { background: #1f9e45; } .share-btn.tg { background: #2a8fd0; } .share-btn.mx { background: #5b3df5; }
.msg-preview { margin-top: 10px; padding: 10px 12px; border-radius: 12px 12px 3px 12px; background: color-mix(in srgb, var(--ok-bg) 70%, var(--card)); font-size: 13.5px; word-break: break-word; }
.link-err { max-width: 520px; margin: 18vh auto 0; padding: 0 20px; text-align: center; }
.link-err h1 { font-size: 20px; }
a.btn.big { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-bottom: 8px; }

/* ---- гос. номер по ГОСТ Р 50577 ---- */
.gp { display: inline-flex; align-items: stretch; background: #fff; color: #111; border: 2px solid #111; border-radius: 6px; font: 700 20px/1 'Onest', sans-serif;
  box-shadow: inset 0 0 0 1px #fff, 0 1px 2px #0003; vertical-align: middle; white-space: nowrap; letter-spacing: -.01em; }
.gp-main { display: flex; align-items: flex-end; gap: .12em; padding: .14em .32em .1em; }
.gp-main .d { font-style: normal; font-size: 1em; }
.gp-main .l { font-style: normal; font-size: .78em; padding-bottom: .02em; }
.gp-reg { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px solid #111; padding: .06em .26em .04em; min-width: 2.1em; }
.gp-reg b { font-size: .72em; line-height: 1; }
.gp-reg small { display: flex; align-items: center; gap: .18em; font-size: .3em; font-weight: 700; letter-spacing: .06em; margin-top: .12em; }
.gp-flag { display: inline-block; width: 1.6em; height: 1.05em; border: 1px solid #0004; background: linear-gradient(#fff 0 33.3%, #0039a6 33.3% 66.6%, #d52b1e 66.6%); }
.gp.sm { font-size: 15px; border-width: 1.5px; border-radius: 5px; }
.gp.sm .gp-reg { border-left-width: 1.5px; }
.gp.lg { font-size: 26px; }
.gp-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gp-plus { color: var(--muted); font-weight: 700; }
.row-title .gp { margin: 2px 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== 1.16: картинки справочников ===== */
:root { --tire: #26343d; --ill-hub: #ffffff; --ava-drv: #c77a14; --ava-mech: #6a4fc4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tire: #04090d; --ill-hub: #cfe3ec; } }
:root[data-theme="dark"] { --tire: #04090d; --ill-hub: #cfe3ec; }
svg.ill { display: block; color: var(--pri); }
svg.ill .ill-tire { fill: var(--tire); } svg.ill .ill-hub { fill: var(--ill-hub); }
svg.ill .ill-fill { fill: color-mix(in srgb, currentColor 14%, transparent); }
svg.ill .ill-fill2 { fill: color-mix(in srgb, currentColor 34%, transparent); }
svg.ill .ill-glass { fill: var(--card); }
.dir-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 8px; }
@media (min-width: 620px) { .dir-tiles { grid-template-columns: repeat(4, 1fr); } }
.dir-tile { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 9px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.dir-tile svg.ill { width: 100%; height: 44px; }
.dir-tile.on { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 11%, var(--card)); }
.dt-t { display: flex; justify-content: space-between; gap: 6px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.dt-t span { overflow: hidden; text-overflow: ellipsis; } .dt-t em { font-style: normal; color: var(--pri); }
.dir-thumb { width: 58px; height: 38px; flex: none; border-radius: 11px; background: color-mix(in srgb, var(--pri) 9%, var(--bg)); display: grid; place-items: center; padding: 4px 5px; }
.dir-thumb svg.ill { width: 100%; height: 100%; }
.dir-thumb.grey { background: color-mix(in srgb, var(--muted) 12%, var(--bg)); } .dir-thumb.grey svg.ill { color: var(--muted); }
.row .row-main { flex: 1; }
.fchip { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0; vertical-align: 2px;
  background: color-mix(in srgb, var(--pri) 12%, var(--card)); color: var(--pri); border: 1px solid color-mix(in srgb, var(--pri) 35%, transparent); }
.ava { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; background: var(--ava-drv); }
.ava.mechanic { background: var(--ava-mech); }
.row.inactive .ava { background: var(--muted); }

/* ===== 1.16: штамп «ВЫПОЛНЕНО» ===== */
.item.stamping { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 9%, var(--card)); transition: background .3s, border-color .3s; }
.done-stamp { position: absolute; right: 14px; top: calc(50% - 18px); z-index: 2; pointer-events: none; border: 3px solid var(--ok); color: var(--ok); border-radius: 9px; padding: 3px 10px;
  font-weight: 800; font-size: 15px; letter-spacing: .09em; background: color-mix(in srgb, var(--card) 80%, transparent); opacity: 0; transform: rotate(-12deg) scale(2.2);
  animation: akt-stamp .42s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes akt-stamp { to { opacity: 1; transform: rotate(-12deg) scale(1); } }
.item.stamp-out { animation: akt-fadeup .4s .75s ease forwards; }
@keyframes akt-fadeup { to { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* ===== 1.16: сдвиг страниц, как в iOS / Android ===== */
.pg-ghost { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 4; overflow: hidden; pointer-events: none; background: var(--bg); }
.pg-ghost > .topbar { position: relative; }
.pg-in-fwd { animation: pg-in-fwd .3s cubic-bezier(.2,.8,.2,1) both; }
.pg-in-back { animation: pg-in-back .3s cubic-bezier(.2,.8,.2,1) both; }
.pg-out-fwd { animation: pg-out-fwd .3s cubic-bezier(.2,.8,.2,1) both; }
.pg-out-back { animation: pg-out-back .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pg-in-fwd { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pg-out-fwd { to { transform: translateX(-28%); opacity: .55; } }
@keyframes pg-in-back { from { transform: translateX(-28%); opacity: .55; } to { transform: none; opacity: 1; } }
@keyframes pg-out-back { to { transform: translateX(100%); } }
.pg-stage { position: relative; z-index: 5; background: var(--bg); min-height: 100vh; box-shadow: -8px 0 24px -12px #0005; }
@media (prefers-reduced-motion: reduce) { .pg-in-fwd, .pg-in-back, .pg-out-fwd, .pg-out-back, .done-stamp, .item.stamp-out { animation-duration: .01s !important; animation-delay: 0s !important; } }
.unit.stamping { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ok) 9%, var(--card)); transition: background .3s; }

/* ===== 1.16.1: «Новый акт», выбор «Кто заполняет», значки ремонтов ===== */
:root { --na-bg1: #d8f1f4; --na-bg2: #eef8f9; --na-bd: #a9dbe2; --na-ink: #0b1823; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --na-bg1: #0f2a36; --na-bg2: #0d202b; --na-bd: #1f4b5a; --na-ink: #cfe3ec; } }
:root[data-theme="dark"] { --na-bg1: #0f2a36; --na-bg2: #0d202b; --na-bd: #1f4b5a; --na-ink: #cfe3ec; }
.new-act-card { background: linear-gradient(180deg, var(--na-bg1), var(--na-bg2)); border: 1.5px solid var(--na-bd); border-radius: 20px; padding: 12px; margin: 4px 0 10px; cursor: pointer; }
.new-act-card .btn { width: 100%; margin: 10px 0 0; }
svg.na-art { display: block; width: 100%; height: auto; max-height: 120px; color: var(--pri); }
svg.na-art .na-paper0 { fill: var(--card); }
svg .na-glass { fill: color-mix(in srgb, var(--pri) 22%, var(--card)); }
svg .na-paper { fill: var(--card); stroke: var(--na-ink); }
svg .na-clip { fill: #36d1e3; stroke: var(--na-ink); }
svg .na-ok { stroke: var(--ok); } svg .na-line { stroke: var(--muted); } svg .na-link { stroke: var(--pri); }
svg .na-pin { fill: var(--bad); stroke: var(--bad); }
svg .ill-tire, svg.na-art .ill-tire circle { fill: var(--tire); } svg.na-art .ill-hub circle { fill: var(--ill-hub); }
.opts .opt-big { display: flex; align-items: center; gap: 12px; }
.opts .opt-big > span:last-child { display: grid; gap: 2px; font-size: 16px; line-height: 1.25; }
.opts .opt-big > span.kind-box { font-size: 0; }
.kind-box { width: 70px; height: 56px; flex: none; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--pri) 12%, var(--card)); }
.kind-box.drv { background: color-mix(in srgb, #c77a14 14%, var(--card)); }
svg.kind-pic { width: 62px; height: 50px; } svg.kind-pic.mech { color: var(--pri); } svg.kind-pic.drv { color: #c77a14; }
svg.kind-pic .ill-fill { fill: color-mix(in srgb, currentColor 16%, transparent); }
svg.uico { width: 16px; height: 16px; flex: none; }
svg.uico .ill-fill { fill: color-mix(in srgb, currentColor 15%, transparent); } svg.uico .ill-badge { fill: var(--card); }
.pill { display: inline-flex; align-items: center; gap: 3px; } .pill svg.uico { margin-left: -3px; }
.unit-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.uico-tile { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--pri) 12%, var(--card)); color: var(--pri); }
.uico-tile svg.uico { width: 26px; height: 26px; }
.uico-tile svg.uico .ill-badge { fill: color-mix(in srgb, var(--pri) 12%, var(--card)); }

/* ===== 1.16.2: нижнее меню как в эскизе — плоская полоса у края, цветные значки ===== */
.tabbar { left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
  background: var(--card); padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); }
.tabbar > * { max-width: 152px; }
.tabbar { justify-content: center; }
.tabbar a { gap: 1px; padding: 2px 0; }
.tabbar .ti.emo { width: auto; height: 26px; border-radius: 0; background: none !important; font-size: 21px; line-height: 26px; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.tabbar a.on .ti.emo { background: none; }
.tabbar a.on span:nth-child(2) { color: var(--tab-on); font-weight: 700; }
.tabbar .dot { top: -1px; left: calc(50% + 6px); }
.bottom-bar { bottom: calc(58px + env(safe-area-inset-bottom)); }
.tabbar .ti.emo.txt { font-family: 'DejaVu Sans', 'Segoe UI Symbol', sans-serif; font-size: 20px; color: var(--muted); }
.tabbar a.on .ti.emo.txt { color: var(--tab-on); }

/* ===== 1.17: задачи по Автографу ===== */
.nd-box { display: grid; gap: 4px; margin-top: 4px; }
.nd-kind { font-size: 13px; font-weight: 800; }
.nd-kind.debt { color: var(--warn); } .nd-kind.sale { color: var(--ok); }
.nd-cm { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nd-msg { font-size: 13px; border-radius: 10px; padding: 6px 10px; }
.nd-msg.ok { color: var(--ok); font-weight: 700; padding: 0; } .nd-msg.warn { background: var(--warn-bg); color: var(--warn); }
.nd-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.nd-reasons .btn { min-height: 52px; white-space: normal; line-height: 1.2; }
.btn.nd-sale { border-color: var(--ok); color: var(--ok); } .btn.nd-debt { border-color: var(--warn); color: var(--warn); }
.tag.nav-sale { background: var(--ok-bg); color: var(--ok); } .tag.nav-debt { background: var(--warn-bg); color: var(--warn); }
.btn.ag-req:disabled { opacity: .75; }
.bad-text { color: var(--bad); } .bad-text .tag { margin-right: 4px; }
/* ===== 1.18: архив актов ===== */
.h3-row { display: flex; justify-content: space-between; align-items: baseline; }
.h3-row .link { font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.arch-act { margin: 8px 0; } .arch-act .row { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.arch-why { background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 6px 14px 10px; }
.arch-why .btn-row { margin: 6px 0 0; }
/* ===== 1.18: вкладки задач — плитки ===== */
:root { --tt-red: #b3121f; --tt-amb: #a56d00; --tt-grn: #0d6a3f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tt-red: #ff6b74; --tt-amb: #f2b640; --tt-grn: #4cc98a; } }
:root[data-theme="dark"] { --tt-red: #ff6b74; --tt-amb: #f2b640; --tt-grn: #4cc98a; }
.tt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.tt-tile { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 10px 8px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.tt-tile .tt-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.tt-tile b { font-size: 13px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tt-tile em { font-style: normal; font-weight: 900; font-size: 22px; line-height: 1.05; }
.tt-tile.red { color: var(--tt-red); } .tt-tile.amb { color: var(--tt-amb); } .tt-tile.grn { color: var(--tt-grn); }
.tt-tile.on.red { background: color-mix(in srgb, var(--tt-red) 13%, var(--card)); border-color: var(--tt-red); }
.tt-tile.on.amb { background: color-mix(in srgb, var(--tt-amb) 15%, var(--card)); border-color: var(--tt-amb); }
.tt-tile.on.grn { background: color-mix(in srgb, var(--tt-grn) 13%, var(--card)); border-color: var(--tt-grn); }
.tt-tile.alarm-on .tt-ic { animation: micpulse 1.4s ease-out infinite; border-radius: 50%; }
/* ===== 1.18.1: шины в карточке ТС — схема, как в акте ===== */
:root { --tw-ok: #d9f2e6; --tw-warn: #f6b93b; --tw-bad: #e5484d; --tw-bd: #3d4f5a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tw-ok: #15392a; --tw-bd: #7d93a3; } }
:root[data-theme="dark"] { --tw-ok: #15392a; --tw-bd: #7d93a3; }
.tire-card .tc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tire-sch { background: var(--bg); border-radius: 14px; padding: 10px 8px; margin: 8px 0 4px; display: grid; gap: 10px; }
.tax { display: flex; align-items: center; gap: 4px; }
.tw { flex: 0 0 29%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px; border-radius: 11px; border: 2px solid var(--tw-bd);
  background: var(--tw-ok); color: var(--fg); font: inherit; line-height: 1.2; cursor: pointer; }
.tax.dual .tw { flex: 1 1 0; padding: 5px 1px; }
.tw b { font-size: 14px; } .tw-sn { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tax.dual .tw-sn { font-size: 9.5px; letter-spacing: -.2px; }
.tw-mm { font-size: 14px; font-weight: 800; } .tw-rs { font-size: 12px; font-weight: 700; color: var(--pri); }
.tw.warn { background: var(--tw-warn); color: #1d1500; } .tw.warn .tw-rs { color: #3b2a00; }
.tw.bad { background: var(--tw-bad); color: #fff; } .tw.bad .tw-rs { color: #fff; }
.tw.none { background: var(--card); border-style: dashed; color: var(--muted); }
.tax-bar { flex: 1; min-width: 10px; text-align: center; } .tax-bar i { display: block; height: 6px; border-radius: 4px; background: var(--muted); }
.tax.dual .tax-bar { flex: 0 0 10px; } .tax-bar small { font-size: 10px; color: var(--muted); }
.tax.spare .tax-bar i { display: none; }
.tire-card .legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; border: 1px solid var(--tw-bd); }
.lg.ok { background: var(--tw-ok); } .lg.warn { background: var(--tw-warn); } .lg.bad { background: var(--tw-bad); } .lg.none { background: var(--card); border-style: dashed !important; }
.th-row { display: grid; grid-template-columns: 44px 1fr 26px; gap: 8px; align-items: center; margin: 4px 0; font-size: 14px; }
.th-row i { display: block; height: 12px; border-radius: 6px; background: #9fd8b8; } .th-row i.warn { background: var(--tw-warn); } .th-row i.bad { background: var(--tw-bad); } .th-row i.none { background: var(--line); }
.c-warn { color: var(--warn); font-weight: 700; } .c-bad { color: var(--bad); font-weight: 700; }