/* ========================================================================
   ===== СТИЛИ: ДИЗАЙН-ТОКЕНЫ =====
   Здесь собраны все цвета, отступы, радиусы, тени и размеры шрифтов.
   Шаг отступов кратен 4 px.
   ======================================================================== */
:root{
  /* --- палитра: тёмная тема (по умолчанию) --- */
  --c-bg:        #0d1117;   /* графит — основа */
  --c-bg-elev:   #121a24;   /* шапка и панели */
  --c-surface:   #18212c;   /* карточки */
  --c-surface-2: #1e2937;   /* вложенные блоки */
  --c-text:      #eef4fb;
  --c-text-dim:  #a7b7c9;
  --c-border:    #2b3847;
  --c-ice:       #5ec8f5;   /* ледяной голубой — основной цвет */
  --c-ice-ink:   #03202e;   /* текст на голубом */
  --c-ice-soft:  rgba(94,200,245,.14);
  --c-accent:    #ff8f2e;   /* сигнальный оранжевый — действия и предупреждения */
  --c-accent-ink:#2b1300;
  --c-accent-soft:rgba(255,143,46,.14);
  --c-ok:        #3ddc97;
  --c-warn:      #ffc53d;
  --c-crit:      #ff6f6f;
  --c-mine:      #c08cff;   /* фиолетовый — «подтверждено мной» */

  /* --- отступы (шаг 4 px) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* --- радиусы --- */
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* --- тени: в тёмной теме их нет, работают границы --- */
  --shadow:0 0 0 1px var(--c-border);
  --shadow-lift:0 0 0 1px var(--c-border);

  /* --- типографика --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:13px; --fs-sm:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:33px;
  --lh:1.5;

  /* --- прочее --- */
  --dur:200ms;
  --maxw:1180px;
  --tap:44px;              /* минимальная высота кнопки под палец */
}

/* --- светлая тема: мягкие тени вместо границ --- */
html[data-theme="light"]{
  --c-bg:        #f3f7fb;
  --c-bg-elev:   #ffffff;
  --c-surface:   #ffffff;
  --c-surface-2: #eef3f9;
  --c-text:      #0e1620;
  --c-text-dim:  #4a5a6b;
  --c-border:    #d2dde8;
  --c-ice:       #0a6ea8;
  --c-ice-ink:   #ffffff;
  --c-ice-soft:  rgba(10,110,168,.10);
  --c-accent:    #b85205;
  --c-accent-ink:#ffffff;
  --c-accent-soft:rgba(184,82,5,.10);
  --c-ok:        #10794c;
  --c-warn:      #8a5a00;
  --c-crit:      #b32018;
  --c-mine:      #6b35b8;
  --shadow:0 1px 2px rgba(16,26,38,.06), 0 2px 8px rgba(16,26,38,.06);
  --shadow-lift:0 2px 6px rgba(16,26,38,.08), 0 8px 24px rgba(16,26,38,.10);
}

/* --- пользователь просил меньше движения — выключаем анимации --- */
@media (prefers-reduced-motion: reduce){
  :root{--dur:0ms}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ========================================================================
   ===== СТИЛИ: БАЗА =====
   ======================================================================== */
*{box-sizing:border-box}
/* hidden должен перебивать display у классов вроде .btn */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:var(--lh);
  padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
h1,h2,h3,h4{line-height:1.25;margin:0 0 var(--s3);letter-spacing:-.01em}
h1{font-size:var(--fs-2xl);font-weight:800}
h2{font-size:var(--fs-xl);font-weight:800}
h3{font-size:var(--fs-lg);font-weight:700}
h4{font-size:var(--fs-md);font-weight:700}
p{margin:0 0 var(--s3)}
ul,ol{margin:0 0 var(--s3);padding-left:1.2em}
li{margin:var(--s1) 0}
a{color:var(--c-ice)}
b,strong{font-weight:700}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--c-text-dim)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px;border-radius:6px}
svg{flex:0 0 auto}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}

/* ========================================================================
   ===== СТИЛИ: ШАПКА =====
   ======================================================================== */
.app-header{
  position:sticky;top:0;z-index:40;
  background:var(--c-bg-elev);
  border-bottom:1px solid var(--c-border);
  padding:var(--s3) 0;
}
.header-row{display:flex;align-items:center;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--fs-md);white-space:nowrap}
.brand .mark{
  width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--c-ice);color:var(--c-ice-ink);
  display:flex;align-items:center;justify-content:center;
}
.brand .brand-text{display:none}
.header-tools{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.search-box{position:relative;display:flex;align-items:center;flex:1 1 auto;max-width:420px}
.search-box svg{position:absolute;left:12px;color:var(--c-text-dim);pointer-events:none}
.search-box input{padding-left:42px}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-width:var(--tap);min-height:var(--tap);padding:0 var(--s3);
  background:var(--c-surface);color:var(--c-text);
  border:1px solid var(--c-border);border-radius:var(--r-md);
  cursor:pointer;transition:background var(--dur), border-color var(--dur);
}
.icon-btn:hover{border-color:var(--c-ice)}

/* навигация в шапке — только на широких экранах */
.top-nav{display:none}
.top-nav button{
  background:transparent;border:1px solid transparent;color:var(--c-text);
  border-radius:var(--r-pill);padding:var(--s2) var(--s4);min-height:var(--tap);
  cursor:pointer;font-weight:600;font-size:var(--fs-sm);
  display:inline-flex;align-items:center;gap:var(--s2);
  transition:background var(--dur), color var(--dur);
}
.top-nav button:hover{background:var(--c-surface)}
.top-nav button[aria-current="page"]{background:var(--c-ice);color:var(--c-ice-ink);font-weight:800}

/* ========================================================================
   ===== СТИЛИ: РАЗДЕЛЫ И ПОДВКЛАДКИ =====
   ======================================================================== */
main{padding:var(--s6) 0 var(--s10)}
.view{display:none;animation:fade var(--dur) ease-out}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.view-head{margin-bottom:var(--s5)}
.view-head p{color:var(--c-text-dim);margin:0}

.subtabs{
  display:flex;gap:var(--s2);overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:var(--s2);margin-bottom:var(--s5);border-bottom:1px solid var(--c-border);
}
.subtabs button{
  white-space:nowrap;background:var(--c-surface);color:var(--c-text);
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  padding:var(--s2) var(--s4);min-height:var(--tap);cursor:pointer;font-weight:600;font-size:var(--fs-sm);
  transition:background var(--dur), color var(--dur), border-color var(--dur);
}
.subtabs button[aria-selected="true"]{background:var(--c-ice);color:var(--c-ice-ink);border-color:var(--c-ice);font-weight:800}
.panel{display:none}
.panel.on{display:block}

.block{margin-bottom:var(--s8)}
.block > h3{margin-bottom:var(--s4)}

/* ========================================================================
   ===== СТИЛИ: КАРТОЧКИ =====
   ======================================================================== */
.card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  padding:var(--s5);
  box-shadow:var(--shadow);
}
html[data-theme="light"] .card{border-color:transparent}
.grid{display:grid;gap:var(--s4)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* карточка категории техники с крупным числом */
.cat-card{display:flex;flex-direction:column;gap:var(--s2)}
.cat-card .cat-top{display:flex;align-items:center;gap:var(--s3)}
.cat-ico{
  width:46px;height:46px;border-radius:var(--r-md);flex:0 0 auto;
  background:var(--c-ice-soft);color:var(--c-ice);
  display:flex;align-items:center;justify-content:center;
}
.cat-card .big{
  font-size:var(--fs-xl);font-weight:800;color:var(--c-accent);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:var(--s2) 0 0;
}
.cat-card .sub{color:var(--c-text-dim);font-size:var(--fs-sm)}
.cat-card .examples{font-size:var(--fs-sm);color:var(--c-text-dim)}
.cat-meta{display:flex;gap:var(--s4);margin-top:var(--s2);font-size:var(--fs-sm);flex-wrap:wrap}
.cat-meta span{color:var(--c-text-dim)}
.cat-meta b{color:var(--c-text);font-variant-numeric:tabular-nums}

/* ========================================================================
   ===== СТИЛИ: ГЕРОЙ И БЫСТРЫЕ ДЕЙСТВИЯ =====
   ======================================================================== */
.hero{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--s6);margin-bottom:var(--s6);
  box-shadow:var(--shadow);
}
html[data-theme="light"] .hero{border-color:transparent}
.hero h1{margin-bottom:var(--s2)}
.hero p{color:var(--c-text-dim);margin-bottom:0;max-width:62ch}
.quick{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-top:var(--s5)}
.quick button{
  display:flex;align-items:center;gap:var(--s3);text-align:left;
  background:var(--c-surface-2);color:var(--c-text);
  border:1px solid var(--c-border);border-radius:var(--r-md);
  padding:var(--s4);min-height:var(--tap);cursor:pointer;
  transition:transform var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.quick button:hover{border-color:var(--c-ice);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.quick .q-ico{
  width:42px;height:42px;border-radius:var(--r-md);flex:0 0 auto;
  background:var(--c-accent-soft);color:var(--c-accent);
  display:flex;align-items:center;justify-content:center;
}
.quick .q-txt{display:flex;flex-direction:column;min-width:0}
.quick .q-txt b{font-size:var(--fs-md)}
.quick .q-txt span{font-size:var(--fs-sm);color:var(--c-text-dim)}

/* ========================================================================
   ===== СТИЛИ: CALLOUT (ВАЖНЫЕ ПЛАШКИ) =====
   ======================================================================== */
.callout{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--c-surface-2);
  border:1px solid var(--c-border);
  border-left:5px solid var(--c-accent);
  border-radius:var(--r-md);
  padding:var(--s4);margin:0 0 var(--s5);
}
.callout svg{color:var(--c-accent);margin-top:2px}
.callout .c-body{min-width:0}
.callout b{display:block;margin-bottom:2px}
.callout.ok{border-left-color:var(--c-ok)} .callout.ok svg{color:var(--c-ok)}
.callout.warn{border-left-color:var(--c-warn)} .callout.warn svg{color:var(--c-warn)}
.callout.crit{border-left-color:var(--c-crit)} .callout.crit svg{color:var(--c-crit)}
.callout.info{border-left-color:var(--c-ice)} .callout.info svg{color:var(--c-ice)}

/* ========================================================================
   ===== СТИЛИ: ТАБЛИЦА СРАВНЕНИЯ =====
   ======================================================================== */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--c-border)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);background:var(--c-surface)}
th,td{padding:var(--s3) var(--s4);text-align:left;border-bottom:1px solid var(--c-border);vertical-align:top}
th{background:var(--c-surface-2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-dim)}
tbody tr:last-child td{border-bottom:0}
td .num{font-weight:700}

/* ========================================================================
   ===== СТИЛИ: КНОПКИ И ФОРМЫ =====
   ======================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:var(--s3) var(--s5);
  background:var(--c-accent);color:var(--c-accent-ink);
  border:1px solid var(--c-accent);border-radius:var(--r-md);
  font-weight:700;font-size:var(--fs-sm);cursor:pointer;
  transition:filter var(--dur), transform var(--dur);
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.ice{background:var(--c-ice);border-color:var(--c-ice);color:var(--c-ice-ink)}
.btn.ghost{background:transparent;color:var(--c-text);border-color:var(--c-border)}
.btn.ghost:hover{border-color:var(--c-ice)}
.btn.crit{background:transparent;color:var(--c-crit);border-color:var(--c-crit)}
.btn.sm{min-height:38px;padding:var(--s2) var(--s3);font-size:var(--fs-xs)}
.btn.block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

label.field{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--fs-sm);color:var(--c-text-dim);font-weight:600}
input,select,textarea{
  font:inherit;color:var(--c-text);
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);
  width:100%;min-height:var(--tap);font-size:var(--fs-sm);
  transition:border-color var(--dur);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{background:var(--c-bg)}
input:hover,select:hover,textarea:hover{border-color:var(--c-ice)}
textarea{min-height:84px;resize:vertical}
textarea.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-xs);min-height:160px}
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}

/* ========================================================================
   ===== СТИЛИ: ЧИПЫ-ФИЛЬТРЫ =====
   ======================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4)}
.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--c-surface);color:var(--c-text);
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  padding:var(--s2) var(--s4);min-height:var(--tap);cursor:pointer;
  font-size:var(--fs-sm);font-weight:600;
  transition:background var(--dur), border-color var(--dur), color var(--dur);
}
.chip[aria-pressed="true"]{background:var(--c-ice);color:var(--c-ice-ink);border-color:var(--c-ice);font-weight:800}
.chip.src-owner[aria-pressed="true"]{background:var(--c-ok);border-color:var(--c-ok);color:#04231a}
.chip.src-reviews[aria-pressed="true"]{background:var(--c-ice);border-color:var(--c-ice);color:var(--c-ice-ink)}
.chip.src-general[aria-pressed="true"]{background:var(--c-warn);border-color:var(--c-warn);color:#2b1f00}
.chip.src-mine[aria-pressed="true"]{background:var(--c-mine);border-color:var(--c-mine);color:#1b0b33}

/* ========================================================================
   ===== СТИЛИ: ТАЙМЛАЙН ЗАМЕНЫ МАСЛА =====
   ======================================================================== */
.oil-line{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}
.oil-step{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:var(--s4);position:relative;
}
.oil-step .mark{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:var(--c-surface-2);color:var(--c-text-dim);
  border:2px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-sm);
}
.oil-step.done .mark{background:var(--c-ok);border-color:var(--c-ok);color:#04231a}
.oil-step.now{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.oil-step.now .mark{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
.oil-step .km{font-weight:800;font-size:var(--fs-lg);color:var(--c-ice);font-variant-numeric:tabular-nums}
.oil-step.now .km{color:var(--c-accent)}
.oil-step .st-title{font-weight:700}
.oil-step .st-text{font-size:var(--fs-sm);color:var(--c-text-dim)}
.oil-step .left{
  margin-top:var(--s2);display:inline-block;font-size:var(--fs-xs);font-weight:800;
  background:var(--c-accent-soft);color:var(--c-accent);border-radius:var(--r-pill);padding:3px var(--s3);
}

/* ========================================================================
   ===== СТИЛИ: ГАРАЖ =====
   ======================================================================== */
.unit-card{display:grid;gap:var(--s4);margin-bottom:var(--s4)}
.unit-top{display:flex;gap:var(--s4);align-items:center}
.ring{flex:0 0 auto;width:92px;height:92px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .ring-bg{stroke:var(--c-surface-2)}
.ring .ring-fg{stroke:var(--c-accent);transition:stroke-dasharray var(--dur) ease-out}
.ring.done .ring-fg{stroke:var(--c-ok)}
.ring .ring-txt{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.1;
}
.ring .ring-txt b{font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.ring .ring-txt span{font-size:11px;color:var(--c-text-dim)}
.unit-info{min-width:0;flex:1 1 auto}
.unit-info h4{margin:0 0 2px;overflow-wrap:anywhere}
.unit-info .type{font-size:var(--fs-sm);color:var(--c-text-dim)}
.unit-odo{font-size:var(--fs-lg);font-weight:800;color:var(--c-ice);font-variant-numeric:tabular-nums;margin-top:var(--s1)}

.status{
  display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:4px var(--s3);font-size:var(--fs-xs);font-weight:800;
  border:1px solid currentColor;
}
.status.s-run{color:var(--c-ice)}
.status.s-oil{color:var(--c-crit)}
.status.s-ok{color:var(--c-ok)}
.status.s-idle{color:var(--c-warn)}

.kv{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px dashed var(--c-border);font-size:var(--fs-sm)}
.kv:last-child{border-bottom:0}
.kv > span:first-child{color:var(--c-text-dim)}
.kv > span:last-child{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

.steps-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.step-pill{
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  padding:3px var(--s3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;
}
.step-pill.passed{opacity:.5;text-decoration:line-through}
.step-pill.next{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink);font-weight:800}

/* журнал обслуживания */
.log{list-style:none;margin:var(--s3) 0 0;padding:0}
.log li{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px dashed var(--c-border)}
.log li:last-child{border-bottom:0}
.log .l-ico{
  width:34px;height:34px;border-radius:var(--r-sm);flex:0 0 auto;
  background:var(--c-surface-2);color:var(--c-ice);
  display:flex;align-items:center;justify-content:center;
}
.log .l-body{min-width:0;flex:1 1 auto}
.log .l-date{font-size:var(--fs-xs);color:var(--c-text-dim);font-variant-numeric:tabular-nums}
.log .l-what{font-size:var(--fs-sm);overflow-wrap:anywhere}
.log .l-odo{font-weight:700;font-size:var(--fs-sm);color:var(--c-ice);font-variant-numeric:tabular-nums;white-space:nowrap}
.log .l-del{background:none;border:0;color:var(--c-crit);cursor:pointer;min-width:34px;min-height:34px;border-radius:var(--r-sm)}

/* ========================================================================
   ===== СТИЛИ: БОЛЯЧКИ =====
   ======================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid currentColor;border-radius:var(--r-pill);
  padding:3px var(--s3);font-size:var(--fs-xs);font-weight:800;white-space:nowrap;
}
.badge.b-owner{color:var(--c-ok)}
.badge.b-reviews{color:var(--c-ice)}
.badge.b-general{color:var(--c-warn)}
.badge.b-mine{color:var(--c-mine)}

.legend{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

.brand-card{margin-bottom:var(--s4)}
.brand-head{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap}
.brand-head h3{margin:0}
.brand-models{font-size:var(--fs-sm);color:var(--c-text-dim);margin-top:2px}
.type-tag{
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  padding:3px var(--s3);font-size:var(--fs-xs);font-weight:700;color:var(--c-text-dim);white-space:nowrap;
}

.problem{
  background:var(--c-surface-2);border:1px solid var(--c-border);
  border-left:5px solid var(--c-border);border-radius:var(--r-md);
  padding:var(--s4);margin-top:var(--s3);
}
.problem.p-owner{border-left-color:var(--c-ok)}
.problem.p-reviews{border-left-color:var(--c-ice)}
.problem.p-general{border-left-color:var(--c-warn)}
.problem.p-mine{border-left-color:var(--c-mine)}
.problem .sym{font-weight:700;margin:var(--s2) 0 var(--s1)}
.problem .pr-row{font-size:var(--fs-sm);margin:var(--s1) 0}
.problem .pr-row b{color:var(--c-text-dim)}
.mark-hit{background:var(--c-accent);color:var(--c-accent-ink);border-radius:4px;padding:0 2px}

.empty{
  border:1px dashed var(--c-border);border-radius:var(--r-lg);
  padding:var(--s8) var(--s4);text-align:center;color:var(--c-text-dim);
}

/* ========================================================================
   ===== СТИЛИ: ЧЕК-ЛИСТЫ =====
   ======================================================================== */
.bar{background:var(--c-surface-2);border-radius:var(--r-pill);height:10px;overflow:hidden;margin:var(--s2) 0}
.bar > i{display:block;height:100%;background:var(--c-ice);border-radius:var(--r-pill);transition:width var(--dur)}
.bar > i.full{background:var(--c-ok)}
.checks{list-style:none;margin:var(--s3) 0 0;padding:0}
.checks li{border-bottom:1px solid var(--c-border)}
.checks li:last-child{border-bottom:0}
.checks label{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;cursor:pointer;min-height:var(--tap)}
.checks input{width:24px;height:24px;min-height:24px;flex:0 0 auto;margin-top:2px;accent-color:var(--c-ice)}
.checks input:checked + span{color:var(--c-text-dim);text-decoration:line-through}

/* ========================================================================
   ===== СТИЛИ: ДИАЛОГИ И ТОСТЫ =====
   ======================================================================== */
dialog{
  border:1px solid var(--c-border);border-radius:var(--r-lg);
  background:var(--c-surface);color:var(--c-text);
  padding:var(--s6);max-width:min(520px,92vw);width:100%;
  box-shadow:var(--shadow-lift);
}
dialog::backdrop{background:rgba(5,9,14,.65)}
dialog h3{margin-top:0}
.toast-wrap{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--s6) + env(safe-area-inset-bottom));
  z-index:60;display:flex;flex-direction:column;gap:var(--s2);
  width:max-content;max-width:92vw;pointer-events:none;
}
.toast{
  background:var(--c-ice);color:var(--c-ice-ink);
  border-radius:var(--r-pill);padding:var(--s3) var(--s5);
  font-weight:700;font-size:var(--fs-sm);box-shadow:var(--shadow-lift);
  animation:toast-in var(--dur) ease-out;
}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* результаты поиска */
.search-results{margin-bottom:var(--s5)}
.result{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s2);color:var(--c-text);
}
.result:hover{border-color:var(--c-ice)}
.result .r-where{font-size:var(--fs-xs);color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.04em}
.result .r-title{font-weight:700;margin:2px 0}
.result .r-text{font-size:var(--fs-sm);color:var(--c-text-dim)}

/* ---------- карточки запчастей ---------- */
.part-card{margin-bottom:var(--s4)}
.part-head{display:flex;align-items:flex-start;gap:var(--s3)}
.part-head .p-ico{
  flex:none;width:40px;height:40px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--c-ice-soft);color:var(--c-ice);
}
.part-head h3{margin:0;font-size:var(--fs-lg)}
.part-how{
  margin:var(--s4) 0 0;padding:var(--s3) var(--s4);
  border:1px dashed var(--c-border);border-radius:var(--r-md);
}
.part-how b{display:block;margin-bottom:var(--s2)}
.part-how ul{margin:0;padding-left:var(--s5)}
.part-how li{margin:var(--s1) 0}
.fit{
  margin-top:var(--s4);padding:var(--s4);
  border-radius:var(--r-md);background:var(--c-surface-2);
  border-left:4px solid var(--c-border);
}
.fit.f-exact{border-left-color:var(--c-ok)}
.fit.f-family{border-left-color:var(--c-ice)}
.fit.f-check{border-left-color:var(--c-warn)}
.fit.f-mine{border-left-color:var(--c-mine)}
.fit .f-what{font-weight:700;margin:var(--s2) 0 var(--s1)}
.fit .f-row{margin:var(--s2) 0;font-size:var(--fs-sm)}
.badge.b-exact{color:var(--c-ok);border-color:var(--c-ok)}
.badge.b-family{color:var(--c-ice);border-color:var(--c-ice)}
.badge.b-check{color:var(--c-warn);border-color:var(--c-warn)}

/* ---------- выезжающее меню ---------- */
.scrim{
  position:fixed;inset:0;z-index:60;
  background:rgba(4,8,14,.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--dur) ease;
}
.scrim.on{opacity:1}
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:61;
  width:min(320px,86vw);
  display:flex;flex-direction:column;
  background:var(--c-bg-elev);border-right:1px solid var(--c-border);
  box-shadow:var(--shadow-lift);
  transform:translateX(-102%);
  transition:transform var(--dur) cubic-bezier(.22,.61,.36,1);
  overscroll-behavior:contain;
}
.drawer.on{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--c-border);
}
.drawer-title{font-weight:700;font-size:var(--fs-lg)}
.drawer-nav{flex:1 1 auto;overflow-y:auto;padding:var(--s3) var(--s3) var(--s6)}
.drawer-nav .d-item{
  width:100%;min-height:var(--tap);
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);margin-bottom:var(--s1);
  background:none;border:0;border-radius:var(--r-md);
  color:var(--c-text);font:inherit;font-weight:600;text-align:left;cursor:pointer;
  transition:background var(--dur),color var(--dur);
}
.drawer-nav .d-item:hover{background:var(--c-surface)}
.drawer-nav .d-item[aria-current="page"]{background:var(--c-ice-soft);color:var(--c-ice)}
.drawer-nav .d-sub{
  width:100%;min-height:40px;
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3) var(--s2) var(--s10);
  background:none;border:0;border-radius:var(--r-sm);
  color:var(--c-text-dim);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;
  transition:background var(--dur),color var(--dur);
}
.drawer-nav .d-sub:hover{background:var(--c-surface);color:var(--c-text)}
.drawer-nav .d-group{margin-bottom:var(--s3)}
.drawer-foot{
  padding:var(--s4);border-top:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
footer.app-footer{
  border-top:1px solid var(--c-border);background:var(--c-bg-elev);
  padding:var(--s6) 0;color:var(--c-text-dim);font-size:var(--fs-sm);text-align:center;
}
.footer-pro{
  display:inline-flex;align-items:center;gap:var(--s2);
  margin-bottom:var(--s3);padding:var(--s2) var(--s4);
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  background:var(--c-ice-soft);color:var(--c-text);font-weight:600;
}
.footer-pro svg{color:var(--c-ice);flex:none}
.footer-year{margin-top:var(--s2);font-size:var(--fs-xs);color:var(--c-text-dim)}

/* ========================================================================
   ===== СТИЛИ: ПЛАНШЕТ И ПК =====
   ======================================================================== */
@media (min-width:600px){
  .form-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .quick{grid-template-columns:repeat(3,1fr)}
  .brand .brand-text{display:inline}
}
@media (min-width:900px){
  :root{--fs-2xl:38px}
  body{padding-bottom:var(--s6)}
  .drawer{width:340px}
  .top-nav{display:flex;gap:var(--s1)}
  .toast-wrap{bottom:var(--s6)}
  /* горизонтальный таймлайн замены масла */
  .oil-line{grid-template-columns:repeat(7,1fr);gap:var(--s2)}
  .oil-step{flex-direction:column;text-align:center;align-items:center;gap:var(--s2)}
  .oil-step::after{
    content:"";position:absolute;top:34px;right:-6px;width:12px;height:2px;background:var(--c-border);
  }
  .oil-step:last-child::after{display:none}
  .unit-card{grid-template-columns:1fr}
}

/* ========================================================================
   ===== СТИЛИ: ПЕЧАТЬ =====
   ======================================================================== */
@media print{
  :root{--c-bg:#fff;--c-surface:#fff;--c-surface-2:#fff;--c-text:#000;--c-text-dim:#333;--c-border:#999}
  .app-header,.subtabs,.btn,.chips,.toast-wrap,.quick,.icon-btn,dialog,
  .drawer,.scrim{display:none!important}
  body{padding:0;font-size:12pt}
  .view{display:block!important}
  .panel{display:block!important}
  .card,.oil-step,.problem{break-inside:avoid;box-shadow:none;border:1px solid #999}
  a{color:#000;text-decoration:none}
}