/* Бортжурнал — стиль «приложение автопроизводителя»: мягкие карточки, скругления, приборы. */
/* Тема «Гараж»: светлая, тёмная шапка, зелёный «сервисный» акцент; и её ночной вариант */
:root, :root[data-theme="light"] {
  --bg: #F1F2EE;
  --bg2: #E8EAE5;
  --card: #FFFFFF;
  --card2: #F3F4F0;
  --line: rgba(20, 32, 26, 0.11);
  --line-soft: rgba(20, 32, 26, 0.07);
  --ink: #1A1F1C;
  --muted: #646C67;
  --accent: #0E7A68;
  --pal: #2C68DC;
  --gaz: #D9690F;
  --alert: #D03C2F;
  --ok: #158552;
  --sel: rgba(14, 122, 104, 0.10);
  --shadow: 0 1px 2px rgba(20, 32, 26, .06), 0 4px 14px rgba(20, 32, 26, .05);
  --glow: radial-gradient(60% 55% at 50% 62%, rgba(14, 122, 104, .10), transparent 72%);
  --bar: #18201C; --bar-ink: #F1F4F2; --bar-muted: rgba(241, 244, 242, .62); --bar-chip: rgba(255, 255, 255, .09);
  --c-to: #158552; --c-repair: #D03C2F; --c-tyres: #7A55D6; --c-insurance: #2C68DC; --c-tax: #858C88;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0E1211;
  --bg2: #141917;
  --card: #171C1A;
  --card2: #1F2522;
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);
  --ink: #ECF1EE;
  --muted: #929B96;
  --accent: #3CC4A2;
  --pal: #6EA9FF;
  --gaz: #FFAA4A;
  --alert: #FF6A5C;
  --ok: #4FD49A;
  --sel: rgba(60, 196, 162, 0.13);
  --shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 6px 20px rgba(0,0,0,.3);
  --glow: radial-gradient(60% 55% at 50% 62%, rgba(60, 196, 162, .13), transparent 72%);
  --bar: #090C0B; --bar-ink: #ECF1EE; --bar-muted: rgba(236, 241, 238, .6); --bar-chip: rgba(255, 255, 255, .08);
  --c-to: #4FD49A; --c-repair: #FF6A5C; --c-tyres: #B6A4FF; --c-insurance: #6EA9FF; --c-tax: #7D8682;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.c-pal { color: var(--pal); }
.c-gaz { color: var(--gaz); }
.c-alert { color: var(--alert); }
.c-ok { color: var(--ok); }

/* ---------- Каркас ---------- */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side {
  flex: 0 0 248px;
  display: flex; flex-direction: column; gap: 22px;
  padding: 24px 16px;
  position: sticky; top: 0; height: 100vh;
}
.main { flex: 999 1 600px; min-width: 0; padding: 28px 32px 64px 12px; }

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: .01em; }
.brand-sub { font-size: 12px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; min-height: 44px; border-radius: 12px;
  color: var(--muted); font-weight: 600; font-size: 14px;
}
.nav a:hover { color: var(--ink); background: var(--card); text-decoration: none; }
.nav a.on { color: var(--ink); background: var(--card); box-shadow: var(--shadow); }
.nav a .n { display: none; }
.nav a svg { width: 18px; height: 18px; flex: none; }
.nav a.on svg { color: var(--accent); }

.side-block { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.side-label { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--card2); }
.seg button { flex: 1; min-height: 34px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 0 10px; white-space: nowrap; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.side-foot { margin-top: auto; font-size: 12px; color: var(--muted); line-height: 1.7; padding: 0 8px; }

/* ---------- Заголовок страницы ---------- */
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 4px 0 20px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); }
h1 { margin: 2px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Карточки ---------- */
.panel { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; min-width: 0; box-shadow: var(--shadow); }
.ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.ph > span:last-child { font-size: 12px; font-weight: 600; color: var(--muted); }

.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.row > .grow { flex: 999 1 520px; min-width: 0; }
.row > .side-col { flex: 1 1 320px; min-width: 0; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; margin-bottom: 16px; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.kpi .k { font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kpi .s { font-size: 12px; color: var(--muted); }

/* ---------- Карточка машины ---------- */
.car { --car: var(--pal); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.car.gaz { --car: var(--gaz); }
.car-hero { display: grid; grid-template-columns: minmax(170px, 270px) minmax(0, 1fr); gap: 14px; align-items: center; }
.car-pic { position: relative; border-radius: 16px; background: var(--glow), var(--card2); padding: 6px 8px 0; }
.car-art { display: block; width: 100%; height: auto; }
.car-title { display: flex; flex-direction: column; gap: 4px; }
.car-title .chip-car { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--car); background: color-mix(in srgb, var(--car) 14%, transparent); padding: 3px 9px; border-radius: 999px; }
.odo { display: flex; gap: 3px; margin-top: 6px; }
.odo span { width: 21px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: var(--card2); font-weight: 700; font-size: 16px; }
.odo span:nth-last-child(-n+3) { color: var(--car); }
.odo-cap { font-size: 11px; color: var(--muted); margin-top: 3px; }

.car-photo { position: relative; padding: 10px 6px 14px; }
.car-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 10px rgba(0,0,0,.45)); }
[data-theme="light"] .car-photo img { filter: drop-shadow(0 12px 10px rgba(15,25,45,.22)); }
.spot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--alert); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: help; color: var(--alert); }
.spot-warn { background: #FFB547; color: #FFB547; }
.spot i { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid currentColor; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spot i { animation: none; } }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { padding: 10px 12px; border-radius: 12px; background: var(--card2); }
.stat .k { font-size: 11px; font-weight: 600; color: var(--muted); }
.stat .v { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }

.next { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--card2); }
.next .nn { font-weight: 700; font-size: 15px; }
.next .nl { font-size: 13px; }
.next .ns { margin-top: 10px; }

/* Стрелочный прибор */
.dial { width: 104px; flex: none; }
.dial .ticks line { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.dial .ticks line.major { stroke: var(--ink); stroke-width: 1.4; opacity: 1; }
.dial .needle { stroke: var(--car, var(--accent)); stroke-width: 2.4; stroke-linecap: round; }
.dial text { font-weight: 800; font-size: 15px; fill: var(--ink); }

/* Полосы и легенда */
.stack { display: flex; height: 8px; gap: 3px; }
.stack i { display: block; height: 100%; border-radius: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend i.line { height: 3px; width: 14px; border-radius: 2px; }

/* ---------- Флаги ---------- */
.flag { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.flag:first-of-type { border-top: none; padding-top: 0; }
.flag .ic { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: var(--alert); background: color-mix(in srgb, var(--alert) 14%, transparent); }
.flag .t { font-weight: 700; }
.flag .d { font-size: 13px; color: var(--muted); }

.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--card2); color: var(--muted); white-space: nowrap; }
.tag.pal { color: var(--pal); background: color-mix(in srgb, var(--pal) 14%, transparent); }
.tag.gaz { color: var(--gaz); background: color-mix(in srgb, var(--gaz) 14%, transparent); }
.tag.alert { color: var(--alert); background: color-mix(in srgb, var(--alert) 14%, transparent); }
.tag.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.tag.watch { color: var(--accent); background: var(--sel); }

/* ---------- Таблицы ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -6px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--sel); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .note { display: block; font-size: 12px; color: var(--alert); margin-top: 2px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* ---------- Фильтры ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chip { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--ink); background: var(--sel); border-color: transparent; }
.input { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); color: var(--ink); font: 14px 'Manrope', sans-serif; flex: 1 1 220px; }
.input:focus, .chip:focus-visible, .seg button:focus-visible, .nav a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn { min-height: 40px; padding: 0 18px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; }
.btn.ghost { background: var(--card2); color: var(--ink); }

/* ---------- Хронология ---------- */
.month { font-size: 13px; font-weight: 700; color: var(--muted); margin: 22px 4px 10px; text-transform: capitalize; }
.ev { --car: var(--pal); margin-bottom: 10px; padding: 0; overflow: hidden; }
.ev.gaz { --car: var(--gaz); }
.ev-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px 18px; width: 100%; background: transparent; border: none; text-align: left; }
.ev-head::before { content: ''; align-self: stretch; width: 4px; border-radius: 4px; background: var(--car); }
.ev-head .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.ev-head .title { font-weight: 700; font-size: 15px; margin-top: 4px; }
.ev-head .sum { margin-left: auto; font-weight: 800; font-size: 18px; }
.ev-body { border-top: 1px solid var(--line-soft); padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 20px; }
.doc-thumb { flex: 0 0 116px; height: 150px; border-radius: 12px; background: #F3F1EA repeating-linear-gradient(#F3F1EA 0 13px, #DED9CC 13px 14px); background-clip: content-box; padding: 26px 12px 12px; position: relative; display: flex; align-items: flex-end; font-size: 11px; font-weight: 700; color: #4A4A40; box-shadow: 0 6px 16px rgba(0,0,0,.25); text-decoration: none; transform: rotate(-2deg); }
.doc-thumb::before { content: 'ЗАКАЗ-НАРЯД'; position: absolute; top: 9px; left: 12px; font-size: 9px; letter-spacing: .08em; color: #4A4A40; }
.recs { margin-top: 12px; border-radius: 12px; background: color-mix(in srgb, var(--alert) 10%, transparent); padding: 10px 14px; font-size: 13px; }

/* ---------- Узлы ---------- */
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.unit { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; }
.unit.on { outline: 2px solid var(--accent); }
.unit .name { font-weight: 700; }
.unit .sub { font-size: 12px; color: var(--muted); }
.unit .left { font-weight: 700; font-size: 13px; }
.ring circle { fill: none; }
.ring .bg { stroke: var(--card2); }
.ring .tk { stroke: var(--muted); opacity: .5; }
.ring text { font-weight: 800; font-size: 13px; fill: var(--ink); }

.tl { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; }
.tl-item .m { display: flex; flex-direction: column; align-items: center; }
.tl-item .m i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent); margin-top: 5px; }
.tl-item .m b { width: 2px; flex: 1; background: var(--line); }
.tl-item .c { padding-bottom: 14px; font-size: 13px; }

/* ---------- Поиск ---------- */
.search-box { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 8px 8px 8px 18px; min-height: 60px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.search-box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font: 600 17px 'Manrope', sans-serif; }
.answer { background: linear-gradient(160deg, var(--sel), transparent 60%), var(--card); }
.hit { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.hit:first-of-type { border-top: none; }
.hit .doc-thumb { flex-basis: 44px; height: 56px; padding: 8px 6px; transform: none; box-shadow: none; border-radius: 6px; }
.hit .doc-thumb::before { content: ''; }
.hit mark { background: var(--sel); color: inherit; padding: 0 1px; border-radius: 3px; }

.note-demo { font-size: 12px; color: var(--muted); }

/* ================= Тема «Черновик»: карандаш на тетрадном листе ================= */
:root[data-theme="sketch"] {
  --bg: #FBFAF4;
  --card: rgba(255, 254, 249, 0.82);
  --card2: rgba(60, 60, 50, 0.045);
  --line: rgba(42, 42, 42, 0.55);
  --line-soft: rgba(42, 42, 42, 0.18);
  --ink: #2A2A28;
  --muted: #6B6A63;
  --accent: #2B5DAA;
  --pal: #2B5DAA;
  --gaz: #D9661F;
  --alert: #C0392B;
  --ok: #3A7D44;
  --sel: rgba(255, 214, 0, 0.35);
  --shadow: none;
  --glow: none;
  --bar-pal: url(#hatch-pal);
  --bar-gaz: url(#hatch-gaz);
  --c-to: #3A7D44; --c-repair: #C0392B; --c-tyres: #7B5EA7; --c-insurance: #2B5DAA; --c-tax: #6B6A63;
  --hand: 'Caveat', 'Neucha', cursive;
  --marker: linear-gradient(transparent 52%, rgba(255, 214, 0, .55) 52%, rgba(255, 214, 0, .55) 88%, transparent 88%);
  --wobble: 16px 5px 14px 6px / 6px 14px 5px 16px;
  color-scheme: light;
}
/* Тетрадь в клетку + поля */
[data-theme="sketch"] body {
  font-family: 'Neucha', 'Manrope', cursive;
  font-size: 16px;
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, transparent 247px, rgba(214, 72, 72, .35) 247px, rgba(214, 72, 72, .35) 249px, transparent 249px),
    linear-gradient(rgba(80, 140, 200, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 140, 200, .16) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px, 22px 22px;
}
@media (max-width: 900px) { [data-theme="sketch"] body { background-image: linear-gradient(rgba(80,140,200,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(80,140,200,.16) 1px, transparent 1px); background-size: 22px 22px; } }

[data-theme="sketch"] :is(h1, h2, .brand-name, .kpi .v, .stat .v, .ev-head .sum, .month, .odo span, .ph, .dial text, .ring text) { font-family: var(--hand); letter-spacing: 0; }
[data-theme="sketch"] h1 { font-size: 46px; font-weight: 700; line-height: 1; }
[data-theme="sketch"] h2 { font-size: 28px; font-weight: 700; }
[data-theme="sketch"] .ph { font-size: 26px; font-weight: 700; }
[data-theme="sketch"] .ph > span:last-child { font-family: 'Neucha', cursive; font-size: 14px; }
[data-theme="sketch"] .kpi .v { font-size: 38px; font-weight: 700; line-height: 1.05; }
[data-theme="sketch"] .stat .v { font-size: 23px; font-weight: 700; white-space: nowrap; }
[data-theme="sketch"] .ev-head .sum { font-size: 28px; font-weight: 700; }
[data-theme="sketch"] .month { font-size: 26px; text-transform: none; color: var(--ink); }
[data-theme="sketch"] .dial text, [data-theme="sketch"] .ring text { font-size: 18px; font-weight: 700; }
[data-theme="sketch"] .eyebrow, [data-theme="sketch"] .side-label { font-family: 'Neucha', cursive; font-weight: 400; }

/* Неровные рамки «от руки»: основная линия + вторая, чуть сдвинутая, как при наброске */
[data-theme="sketch"] :is(.panel, .kpi, .search-box) { background: var(--card); border: none; box-shadow: none; border-radius: var(--wobble); }
[data-theme="sketch"] :is(.panel, .kpi, .search-box, .chip, .btn, .seg, .stat, .next, .car-pic, .tag, .odo span, .brand-mark) { position: relative; }
[data-theme="sketch"] :is(.panel, .kpi, .search-box, .chip, .btn, .seg, .stat, .next, .car-pic, .tag, .odo span, .brand-mark)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1.7px solid var(--ink); border-radius: var(--wobble); filter: url(#rough);
}
[data-theme="sketch"] :is(.panel, .kpi, .search-box)::before {
  content: ''; position: absolute; inset: 3px -3px -2px 2px; pointer-events: none;
  border: 1.2px solid var(--ink); opacity: .3; border-radius: 6px 18px 5px 15px / 15px 5px 18px 6px; filter: url(#rough); transform: rotate(-.35deg);
}
[data-theme="sketch"] :is(.stat, .next, .car-pic, .chip, .tag, .odo span)::after { border-width: 1.2px; opacity: .7; }
[data-theme="sketch"] :is(.stat, .next, .car-pic) { background: transparent; border-radius: var(--wobble); }
[data-theme="sketch"] .seg { background: transparent; }
[data-theme="sketch"] .seg button + button { border-left: 1px dashed var(--line); border-radius: 0; }

/* Маркер вместо заливки: активное меню, выбранные кнопки */
[data-theme="sketch"] .nav a { font-size: 17px; font-weight: 400; color: var(--ink); }
[data-theme="sketch"] .nav a:hover { background: none; text-decoration: underline wavy rgba(42,42,42,.4); }
[data-theme="sketch"] .nav a.on, [data-theme="sketch"] .seg button.on, [data-theme="sketch"] .chip.on { background: var(--marker); box-shadow: none; color: var(--ink); }
[data-theme="sketch"] .nav a.on svg { color: var(--ink); }
[data-theme="sketch"] .seg button { font-weight: 400; font-size: 15px; color: var(--ink); }
[data-theme="sketch"] .chip { border: none; border-radius: var(--wobble); color: var(--ink); font-weight: 400; font-size: 15px; }
[data-theme="sketch"] .btn { background: var(--marker); color: var(--ink); border-radius: var(--wobble); font-size: 15px; }
[data-theme="sketch"] .btn.ghost { background: transparent; }
[data-theme="sketch"] .input { background: transparent; border: none; border-bottom: 1.7px solid var(--ink); border-radius: 0; font-family: 'Neucha', cursive; font-size: 16px; }
[data-theme="sketch"] .search-box input { font-family: 'Neucha', cursive; font-size: 20px; }
[data-theme="sketch"] .brand-mark { background: transparent; color: var(--ink); box-shadow: none; font-family: var(--hand); font-size: 20px; border-radius: 50%; }
[data-theme="sketch"] .brand-mark::after { border-radius: 50% 45% 52% 48%; }
[data-theme="sketch"] a { color: var(--accent); text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 1px; text-underline-offset: 3px; }
[data-theme="sketch"] .nav a { text-decoration: none; }

/* Теги, таблицы, флаги */
[data-theme="sketch"] .tag { background: transparent !important; font-weight: 400; font-size: 13px; }
[data-theme="sketch"] .tag::after { border-color: currentColor; }
[data-theme="sketch"] .tbl th { font-weight: 400; border-bottom: 1.5px solid var(--ink); }
[data-theme="sketch"] .tbl td { border-bottom: 1px dashed var(--line-soft); }
[data-theme="sketch"] .tbl tbody tr:hover td { background: rgba(255, 214, 0, .14); }
[data-theme="sketch"] .flag .ic { background: transparent; border-radius: 50%; outline: 1.5px solid var(--alert); outline-offset: -2px; filter: url(#rough-soft); }
[data-theme="sketch"] .recs { background: transparent; border: 1.5px dashed var(--alert); border-radius: var(--wobble); }
[data-theme="sketch"] .unit.on { outline: none; background: var(--marker); }

/* Штриховка цветными карандашами вместо заливки */
[data-theme="sketch"] :is(.stack i, .legend i, .dot) {
  -webkit-mask-image: repeating-linear-gradient(45deg, #000 0 2px, rgba(0,0,0,.25) 2px 4px);
  mask-image: repeating-linear-gradient(45deg, #000 0 2px, rgba(0,0,0,.25) 2px 4px);
  border-radius: 2px;
}
[data-theme="sketch"] .stack { gap: 4px; }
[data-theme="sketch"] :is(.dial, .ring, .panel svg[role="img"]) { filter: url(#rough-soft); }
[data-theme="sketch"] .dial .needle { stroke: var(--alert); }
[data-theme="sketch"] .ring .bg { stroke: rgba(42,42,42,.08); }

/* Машины-наброски сливаются с бумагой */
[data-theme="sketch"] .car-photo img { filter: none; mix-blend-mode: multiply; }
[data-theme="sketch"] .spot { border-color: var(--bg); }
[data-theme="sketch"] .doc-thumb { box-shadow: 2px 3px 0 rgba(42,42,42,.25); }

/* ---------- Добавление машин ---------- */
#carSeg { flex-wrap: wrap; }
#carSeg button { flex: 1 1 auto; }
.add-car { font-size: 13px; color: var(--muted); padding: 2px 4px; }
.add-car:hover { color: var(--ink); }
.car-edit { position: absolute; top: 14px; right: 16px; z-index: 2; font-size: 12px; color: var(--muted); }
.car-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; text-align: center; border-style: dashed; background: transparent; box-shadow: none; color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.car-add:hover { text-decoration: none; background: var(--card); }
.car-add .plus { font-size: 46px; line-height: 1; font-weight: 400; color: var(--muted); }
.car-add .muted { font-weight: 400; font-size: 13px; max-width: 260px; }
.car-generic svg { display: block; width: 100%; height: auto; }
.car-generic .body { fill: color-mix(in srgb, var(--car, var(--accent)) 9%, var(--card)); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.car-generic .glass { fill: color-mix(in srgb, var(--ink) 14%, transparent); stroke: var(--ink); stroke-width: 1.4; }
.car-generic .ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.car-generic .ground { stroke: var(--line); stroke-dasharray: 6 5; }
.car-generic .tyre { fill: var(--ink); }
.car-generic .rim { fill: var(--card2); stroke: var(--bg); stroke-width: 2; }
.car-photo img.user { border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; filter: none; }

.car-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .car-form { grid-template-columns: minmax(0, 1fr); } }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 18px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fld .input { flex: none; width: 100%; }
.fld.req > span::after { content: ' *'; color: var(--alert); }
#f-vin { text-transform: uppercase; }
.fs { border: none; padding: 0; margin: 18px 0 0; min-width: 0; }
.fs legend { padding: 0 0 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { position: relative; cursor: pointer; }
.swatch input, .chip.radio input, .file-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.swatch span:first-of-type { display: block; width: 30px; height: 30px; border-radius: 50%; }
.swatch input:checked + span { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.swatch input:focus-visible + span, .chip.radio:has(input:focus-visible), .file-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chip.radio, .file-btn { display: inline-flex; align-items: center; cursor: pointer; }
.head .btn { display: inline-flex; align-items: center; text-decoration: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.form-actions .btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn.danger { margin-left: auto; background: transparent; color: var(--alert); border: 1px solid var(--alert); }
.form-err { margin-top: 14px; color: var(--alert); font-size: 14px; }

[data-theme="sketch"] .fld { font-weight: 400; font-size: 15px; }
[data-theme="sketch"] .car-add { background: transparent; font-family: var(--hand); font-size: 28px; }
[data-theme="sketch"] .car-add::after { border-style: dashed; }
[data-theme="sketch"] .car-add .plus { font-family: var(--hand); font-size: 60px; }
[data-theme="sketch"] .car-add .muted { font-family: 'Neucha', cursive; font-size: 15px; }
[data-theme="sketch"] .car-generic .body { fill: rgba(255, 255, 255, .55); }
[data-theme="sketch"] .car-generic .tyre { fill: rgba(42, 42, 40, .82); }
[data-theme="sketch"] .car-photo img.user { mix-blend-mode: multiply; border-radius: var(--wobble); }
[data-theme="sketch"] .btn.danger { border: none; background: transparent; }
[data-theme="sketch"] .btn.danger::after { border-color: var(--alert); }
@media (max-width: 900px) { .fs legend.side-label { display: block; } }

/* ---------- ТО и регламент ---------- */
.unit-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.reg-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; font-size: 12px; }
.reg-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; }
.reg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; width: 100%; padding: 9px 0 8px; border: none; border-top: 1px solid var(--line-soft); background: none; text-align: left; color: inherit; }
.reg-list > .reg-row:first-child { border-top: none; padding-top: 0; }
.reg-n { font-weight: 600; min-width: 0; }
.reg-n small, .reg-l small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.reg-l { text-align: right; font-weight: 700; font-size: 13px; white-space: nowrap; color: var(--ok); }
.reg-bar { grid-column: 1 / -1; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--card2); overflow: hidden; }
.reg-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ok); }
.lvl-warn .reg-l { color: var(--gaz); } .lvl-warn .reg-bar i { background: var(--gaz); }
.lvl-over .reg-l { color: var(--alert); } .lvl-over .reg-bar i { background: var(--alert); }
.lvl-none .reg-l { color: var(--muted); font-weight: 600; } .lvl-none .reg-bar { visibility: hidden; height: 0; margin: 0; }
.reg-row[aria-expanded="true"] .reg-n { color: var(--accent); }
.reg-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reg-hist { margin: 0 0 10px 2px; padding: 2px 0 2px 10px; border-left: 2px solid var(--accent); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.reg-hist .h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; }
.reg-hist .h > span:last-child { margin-left: auto; white-space: nowrap; }
.to-step { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.to-step:first-of-type { border-top: none; padding-top: 0; }
.to-step > .tag { flex: none; width: 74px; justify-content: center; }
.to-visit { padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.to-visit:first-of-type { border-top: none; padding-top: 0; }
.tv-h { display: flex; justify-content: space-between; gap: 10px; }
.tv-u { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
@media (max-width: 700px) {
  .unit-bar { gap: 6px; margin-bottom: 8px; }
  .unit-bar .seg { flex: 1 1 100%; }
  .unit-bar .seg button { flex: 1 1 0; }
  .reg-sum { margin-bottom: 8px; }
  .reg-groups { gap: 8px; }
  .reg-row { padding: 7px 0 6px; }
  .reg-n { font-size: 13.5px; }
  .reg-n small, .reg-l small { font-size: 11.5px; }
}

/* ================= Телефон: основной сценарий ================= */
.theme-btn { display: none; }
.nav a .ts { display: none; }
.urow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 6px 0; }
.urow .n { font-size: 13px; }
.urow .v { text-align: right; }

/* Шапка с выбором машины сверху, разделы — панелью внизу под большим пальцем */
@media (max-width: 900px) {
  .shell { display: block; }
  .side {
    position: sticky; top: 0; z-index: 20; height: auto;
    flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;
    padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
    background: var(--bar); color: var(--bar-ink); /* без backdrop-filter: он ломает position: fixed у нижнего меню */
  }
  .brand { flex: none; padding: 0; }
  .brand > div:last-child { display: none; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
  .car-block { flex: 1 1 auto; min-width: 0; padding: 0; }
  #carSeg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: var(--bar-chip); border-radius: 10px; }
  #carSeg::-webkit-scrollbar { display: none; }
  #carSeg button { flex: 0 0 auto; min-height: 32px; border-radius: 8px; color: var(--bar-muted); }
  #carSeg button.on { background: var(--bar-ink); color: var(--bar); box-shadow: none; }
  .add-car, .theme-block, .side-label, .side-foot { display: none; }
  .theme-btn { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: none; border-radius: 10px; background: var(--bar-chip); color: var(--bar-ink); }
  .theme-btn svg { width: 19px; height: 19px; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    flex-direction: row; gap: 0;
    padding: 2px 2px calc(2px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line);
  }
  .nav a { position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 50px; padding: 5px 0 3px; border-radius: 10px; font-size: 10.5px; }
  .nav a .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav a .ts { display: block; }
  .nav a svg { width: 21px; height: 21px; }
  .nav a.on { background: transparent; box-shadow: none; color: var(--accent); }
  .nav a.on::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .main { padding: 10px 10px calc(70px + env(safe-area-inset-bottom)); }
}

/* Телефон: плотная раскладка, чтобы листать поменьше */
@media (max-width: 700px) {
  body { font-size: 13.5px; line-height: 1.4; }
  .head { flex-wrap: nowrap; align-items: baseline; gap: 8px; margin: 2px 2px 10px; }
  .head > div:first-child { min-width: 0; }
  .head .eyebrow { display: none; }
  h1 { font-size: 19px; letter-spacing: -.01em; }
  h2 { font-size: 16px; }
  .head .note-demo { flex: none; }
  .note-demo { font-size: 10.5px; }
  .panel { padding: 12px; border-radius: 14px; }
  .ph { margin-bottom: 8px; font-size: 14px; }
  .ph > span:last-child { font-size: 11px; }
  .row { gap: 8px; margin-bottom: 8px; }
  .row > .grow, .row > .side-col { flex-basis: 100%; }
  .cols-2 { gap: 8px; margin-bottom: 8px; }

  /* KPI — плиткой 2×2, подписи в одну строку */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .kpi { padding: 8px 10px; border-radius: 12px; gap: 0; }
  .kpi .k, .kpi .s { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi .v { font-size: 17px; line-height: 1.3; }

  /* Карточка машины: небольшая картинка слева, имя и пробег справа, цифры в одну строку */
  .car { gap: 8px; }
  .car-hero { grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: center; }
  .car-pic { border-radius: 12px; padding: 2px 4px 0; }
  .car-photo { padding: 4px 2px 6px; }
  .car-title { gap: 2px; padding-top: 14px; }
  .car-title h2 { font-size: 16px; line-height: 1.2; }
  .car-title .chip-car { font-size: 10.5px; padding: 2px 8px; }
  .odo { margin-top: 4px; gap: 2px; }
  .odo span { width: 16px; height: 22px; font-size: 12.5px; border-radius: 4px; }
  .odo-cap { display: none; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .stat { padding: 6px 7px; border-radius: 9px; min-width: 0; }
  .stat .k { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat .v { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .next { gap: 10px; padding: 8px 10px; border-radius: 10px; }
  .next .side-label { display: block; font-size: 10.5px; padding: 0; }
  .dial { width: 62px; }
  .next .nn { font-size: 14px; line-height: 1.25; }
  .next .nl { font-size: 12px; }
  .next .ns { margin-top: 6px; }
  .car-edit { font-size: 12px; }
  .car-add { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 2px 10px; font-size: 14px; }
  .car-add .plus { font-size: 24px; line-height: 1; }
  .car-add .muted { flex-basis: 100%; max-width: none; font-size: 12px; }
  .legend { gap: 4px 10px; font-size: 11px; }
  .flag { gap: 10px; padding: 8px 0; }
  .flag .ic { width: 26px; height: 26px; padding: 5px; }
  .flag .d { font-size: 12px; }

  /* Палец попадает, а iOS не увеличивает страницу на полях ввода */
  .chip, .btn { min-height: 36px; padding: 0 12px; }
  .seg button { min-height: 34px; }
  .input { font-size: 16px; min-height: 38px; }
  .filters { gap: 6px; margin-bottom: 8px; }
  .filters:not(:has(.input)) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -10px; margin-right: -10px; padding: 1px 10px; }
  .filters:not(:has(.input))::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }
  .head:has(> .seg) { flex-wrap: wrap; }
  .head > .seg { width: 100%; }
  .head > .seg button { flex: 1 1 0; padding: 0 6px; }

  /* Хронология */
  .month { font-size: 12px; margin: 12px 4px 6px; }
  .ev { margin-bottom: 6px; }
  .ev-head { padding: 9px 12px 9px 10px; gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
  .ev-head::before { width: 3px; }
  .ev-head > div:first-of-type { flex: 1 1 0 !important; }
  .ev-head > div:last-child { flex: none; }
  .ev-head .meta { gap: 3px 6px; font-size: 11.5px; }
  .ev-head .meta .tag { font-size: 10.5px; padding: 1px 7px; }
  .ev-head .title { font-size: 14px; margin-top: 2px; line-height: 1.3; }
  .ev-head .sum { font-size: 15px; white-space: nowrap; }
  .ev-body { padding: 10px 12px; gap: 10px; }
  .ev-head .split { display: none; }
  .ev-body { display: block; }
  .ev-body > .doc-thumb { float: right; width: 50px; height: 64px; margin: 2px 0 6px 10px; padding: 14px 4px 4px; font-size: 8px; transform: none; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
  .ev-body > .doc-thumb::before { font-size: 5.5px; left: 5px; top: 6px; }
  .recs { padding: 8px 10px; font-size: 12.5px; }

  /* Узлы — по два в ряд */
  .units { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .unit { flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 10px; border-radius: 12px; }
  .unit .ring { width: 40px; height: 40px; }
  .unit .name { font-size: 13px; line-height: 1.25; }
  .unit .sub { font-size: 11px; }
  .unit .left { font-size: 12px; }
  .tl-item .c { padding-bottom: 8px; font-size: 12.5px; }
  .urow { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 4px 0; }
  .urow .stack { grid-column: 1 / -1; grid-row: 2; }

  /* Поиск */
  .search-box { padding: 5px 5px 5px 12px; gap: 8px; min-height: 48px; border-radius: 14px; }
  .search-box > svg { display: none; }
  .search-box input { font-size: 16px; }
  .hit { gap: 10px; padding: 8px 0; }
  .hit .doc-thumb { display: none; }

  /* Таблицы → карточки: название и сумма в первой строке, подробности мелко ниже */
  .tbl { font-size: 12.5px; }
  .tbl td { padding: 7px 8px; }
  .tbl-wrap:has(.tbl.m) { overflow: visible; margin: 0; }
  .tbl.m thead { display: none; }
  .tbl.m, .tbl.m tbody { display: block; }
  .tbl.m tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
  .tbl.m tr:last-child { border-bottom: none; }
  .tbl.m tr::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .tbl.m td { display: block; padding: 0; border: none; text-align: left; white-space: normal; }
  .tbl.m td.p { order: 1; flex: 1 1 55%; min-width: 0; font-weight: 600; font-size: 13.5px; }
  .tbl.m td.s { order: 2; margin-left: auto; text-align: right; font-weight: 700; white-space: nowrap; }
  .tbl.m td.x { order: 4; font-size: 11.5px; color: var(--muted); }
  .tbl.m td.a { order: 5; flex-basis: 100%; margin-top: 4px; }
  .tbl.m td.a .chip { min-height: 30px; font-size: 12px; }
  .tbl.m td.h, .tbl.m td.bar, .tbl.m td:empty { display: none; }
  .tbl.m td.q::before { content: '× '; }
  .tbl.m td.k::after { content: ' км'; }
  .tbl.m td[data-l]::before { content: attr(data-l) ' '; }
  .tbl.m .note { font-weight: 400; font-size: 11.5px; }
  .tbl.m tbody tr:hover td { background: none; }
}

.reg-src{margin-top:10px;font-size:11.5px;line-height:1.45}

/* Вход и выход */
.locked .side { display: none; }
.locked .main { display: grid; place-items: center; min-height: 100vh; }
.login-card { max-width: 420px; margin: 24px 16px; text-align: center; }
.login-card .brand-mark { margin: 0 auto 12px; }
.login-card h1 { margin: 0 0 12px; }
.login-card p { color: var(--muted); line-height: 1.5; margin: 12px 0 0; }
.logout-row { font-size: 13px; text-align: center; margin: 8px 0 24px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, inherit); text-decoration: underline; cursor: pointer; }
.login-form { display: flex; gap: 8px; margin-top: 16px; }
.login-form .input { flex: 1; min-width: 0; }
.login-card .form-err { margin-top: 12px; }