/* АнтиСлив — интерфейс личного кабинета */

/* ─── Каркас ───────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--bg-base);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--topbar-h); padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-primary); letter-spacing: -.01em;
}
.sidebar__brand:hover { color: var(--text-primary); }
.sidebar__brand .logo { width: 22px; height: 22px; color: var(--brand-fuel); }

.nav { padding: var(--sp-3) var(--sp-2); display: grid; gap: 2px; }
.nav__group { padding: var(--sp-4) var(--sp-3) var(--sp-2); }
.nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  color: var(--text-secondary); font-size: var(--fs-ui); font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__item svg { width: 18px; height: 18px; flex: none; }
.nav__item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav__item--active {
  background: var(--accent-soft); color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav__item--active:hover { background: var(--accent-soft); }
.nav__item--soon { color: var(--text-disabled); cursor: not-allowed; }
.nav__item--soon:hover { background: transparent; color: var(--text-disabled); }
.nav__soon {
  margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-disabled); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs); padding: 1px 5px;
}
.nav__count {
  margin-left: auto; font-size: var(--fs-label); font-weight: 700;
  background: var(--risk-high-bg); color: var(--risk-high);
  border: 1px solid var(--risk-high-brd); border-radius: var(--r-full); padding: 1px 7px;
}
.sidebar__foot {
  margin-top: auto; padding: var(--sp-4);
  border-top: 1px solid var(--border-subtle); font-size: var(--fs-table); color: var(--text-muted);
}
.sidebar__plan { color: var(--text-secondary); font-weight: 600; }

/* ─── Верхняя панель ───────────────────────────────────── */
/* Якорь вроде dashboard.html#alerts не должен уезжать под панель */
html { scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }

.main { min-width: 0; background: var(--bg-app); }
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6); background: var(--bg-app);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar__title { font-size: 15px; font-weight: 600; }
.topbar__spacer { flex: 1; }
.field {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface-inset); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 6px 10px; color: var(--text-muted);
}
.field svg { width: 16px; height: 16px; }
.field input, .field select {
  background: transparent; border: 0; outline: none;
  font-size: var(--fs-ui); color: var(--text-primary); min-width: 0;
}
.field input::placeholder { color: var(--text-muted); }
.field--search { width: 260px; }
.field--search input { width: 100%; }
.user {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-left: var(--sp-3); border-left: 1px solid var(--border-subtle);
  font-size: var(--fs-ui);
}
.user__avatar {
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--accent-soft); border: 1px solid var(--border-default);
  display: grid; place-items: center; font-size: var(--fs-table); font-weight: 700; color: var(--accent);
}
.user__name { font-weight: 600; line-height: 1.2; }
.user__role { font-size: var(--fs-label); color: var(--text-muted); }

/* ─── Контент ──────────────────────────────────────────── */
.content { padding: var(--sp-6); max-width: var(--content-max); display: grid; gap: var(--grid-gap); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.page-head h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; }
.page-head p { color: var(--text-muted); font-size: var(--fs-ui); margin-top: 2px; }
.row-actions { display: flex; gap: var(--sp-2); }

/* ─── KPI ──────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--grid-gap); }
.kpi { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 12px 16px; }
.kpi__value { font-size: var(--fs-kpi); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.kpi__sub { font-size: var(--fs-table); color: var(--text-muted); margin-top: 2px; }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 6px; }
.kpi__delta--good { color: var(--risk-low); }
.kpi__delta--bad { color: var(--risk-high); }
.kpi__delta span { color: var(--text-muted); font-weight: 400; }
.kpi__spark { margin-top: 8px; height: 28px; }
.kpi__legend { display: flex; gap: var(--sp-3); margin-top: 8px; flex-wrap: wrap; font-size: 12px; }
.kpi__legend b { font-variant-numeric: tabular-nums; }

/* ─── Сетки панелей ────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--grid-gap); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: start; }
.stack { display: grid; gap: var(--grid-gap); }

/* ─── График ───────────────────────────────────────────── */
.chart { width: 100%; height: auto; }
.chart text { font-family: var(--font-sans); font-size: 11px; fill: var(--text-muted); }
.chart .grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart .bar { fill: var(--chart-line-1); }
.chart .bar--zero { fill: var(--border-default); }
.chart .line { fill: none; stroke: var(--chart-line-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line--norm { stroke: var(--chart-line-2); stroke-dasharray: 6 4; stroke-width: 1.5; }
.chart .area { fill: var(--chart-fill); }
.chart .band { fill: var(--chart-band); }
.chart .mark-drain { fill: var(--risk-high); }
.chart .mark-refuel { fill: var(--risk-low); }
.chart .mark-label { fill: var(--text-primary); font-weight: 600; font-size: 12px; }
.chart-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-table); color: var(--text-secondary); margin-top: var(--sp-2); }
.chart-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; margin-right: 6px; vertical-align: middle; }
.chart-legend .l-fuel { border-color: var(--chart-line-1); }
.chart-legend .l-norm { border-color: var(--chart-line-2); border-top-style: dashed; }

details.data-table { margin-top: var(--sp-3); }
details.data-table summary {
  cursor: pointer; font-size: var(--fs-table); color: var(--text-secondary);
  padding: 6px 0; user-select: none;
}
details.data-table summary:hover { color: var(--text-primary); }
details.data-table table { margin-top: var(--sp-2); }

/* ─── Таблицы ──────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
table.tbl th {
  position: sticky; top: 0; z-index: 2; text-align: left;
  background: var(--surface-2); color: var(--text-secondary);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 12px; border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
table.tbl td {
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary); vertical-align: middle; height: var(--row-h);
}
table.tbl td.strong { color: var(--text-primary); font-weight: 600; }
table.tbl th.num, table.tbl td.num { text-align: right; }
table.tbl tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
table.tbl tbody tr:hover { background: var(--surface-3); }
table.tbl tbody tr.is-clickable { cursor: pointer; }
table.tbl tbody tr.lvl-high td:first-child { box-shadow: inset 3px 0 0 var(--risk-high); }
table.tbl tbody tr.lvl-med td:first-child { box-shadow: inset 3px 0 0 var(--risk-med); }
table.tbl tbody tr.lvl-low td:first-child { box-shadow: inset 3px 0 0 var(--border-default); }
.cell-empty { color: var(--text-muted); }
.plate { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); letter-spacing: .02em; }
.status { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.status--new { color: var(--accent-hover); font-weight: 600; }
.status--confirmed { color: var(--risk-high); }
.status--rejected { color: var(--text-muted); }

/* ─── Фильтры ──────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.chip {
  padding: 5px 12px; border-radius: var(--r-full);
  border: 1px solid var(--border-default); background: var(--surface-2);
  color: var(--text-secondary); font-size: var(--fs-table); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--surface-3); color: var(--text-primary); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary); }

/* ─── Список «топ по риску» ────────────────────────────── */
.toplist { display: grid; gap: 2px; }
.toplist li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3);
  padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-table);
}
.toplist li:hover { background: var(--surface-2); }
.toplist .t-main { color: var(--text-primary); font-weight: 600; }
.toplist .t-sub { color: var(--text-muted); font-size: 12px; }
.toplist .t-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }

/* ─── Карточка события ─────────────────────────────────── */
.incident-head {
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-left: 3px solid var(--risk-high); border-radius: var(--r-md); padding: var(--sp-5);
}
.incident-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.incident-head h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.015em; }
.incident-head .lead { color: var(--text-secondary); margin-top: 6px; font-size: var(--fs-ui); }
.score-box { text-align: right; }
.score-box__value { font-size: var(--fs-kpi-lg); font-weight: 700; line-height: 1; color: var(--risk-high); font-variant-numeric: tabular-nums; }
.score-box__label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-top: 4px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.facts dt { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.facts dd { font-size: var(--fs-ui); color: var(--text-primary); margin-top: 3px; }

.timeline { display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 52px 16px 1fr; gap: var(--sp-3); align-items: start; padding: 7px 0; font-size: var(--fs-table); }
.timeline time { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding-top: 1px; }
.timeline .tl-dot { position: relative; height: 100%; }
.timeline .tl-dot::before {
  content: ''; position: absolute; left: 4px; top: 5px; width: 8px; height: 8px;
  border-radius: var(--r-full); background: var(--border-strong);
}
.timeline .tl-dot::after { content: ''; position: absolute; left: 7.5px; top: 14px; bottom: -8px; width: 1px; background: var(--border-subtle); }
.timeline li:last-child .tl-dot::after { display: none; }
.timeline li.kind-alert .tl-dot::before { background: var(--risk-high); }
.timeline li.kind-warn .tl-dot::before { background: var(--risk-med); }
.timeline li.kind-ok .tl-dot::before { background: var(--risk-low); }
.timeline li.kind-alert span { color: var(--text-primary); font-weight: 600; }

.rules { display: grid; gap: var(--sp-2); }
.rules li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3);
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.rules .r-name { font-size: var(--fs-table); color: var(--text-primary); font-weight: 600; }
.rules .r-why { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rules .r-score { font-size: var(--fs-h3); font-weight: 700; color: var(--risk-med); font-variant-numeric: tabular-nums; }
.rules-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-default);
  font-size: var(--fs-ui); font-weight: 600;
}
.rules-total b { font-size: var(--fs-h3); color: var(--risk-high); font-variant-numeric: tabular-nums; }

.tel { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--sp-3); font-size: var(--fs-table); }
.tel dt { color: var(--text-muted); }
.tel dd { color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }

.exceptions li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-table); }
.exceptions li:last-child { border-bottom: 0; }
.exceptions .e-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.exceptions .e-name { color: var(--text-primary); font-weight: 600; }
.exceptions .e-note { color: var(--text-muted); font-size: 12px; }
.verdict { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; white-space: nowrap; }
.verdict--out { color: var(--risk-low); }
.verdict--check { color: var(--risk-med); }

.map-svg { width: 100%; height: auto; border-radius: var(--r-sm); background: var(--surface-inset); }
.map-svg text { font-family: var(--font-sans); font-size: 11px; fill: var(--text-secondary); }
.map-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: var(--sp-3); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ─── Источники данных ─────────────────────────────────── */
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--grid-gap); }
.src { display: grid; gap: var(--sp-2); }
.src__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.src__name { font-size: var(--fs-ui); font-weight: 600; color: var(--text-primary); }
.src__kind { font-size: 12px; color: var(--text-muted); }
.src__meta { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--sp-3); font-size: 12px; color: var(--text-muted); }
.src__meta b { color: var(--text-secondary); font-weight: 600; text-align: right; }
.src__gives { font-size: 12px; color: var(--text-secondary); padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle); }

.methods { display: grid; gap: var(--sp-2); }
.methods li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); align-items: baseline;
  padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-2);
}
.methods .m-name { font-size: var(--fs-ui); font-weight: 600; color: var(--text-primary); }
.methods .m-tag { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.methods .m-text { font-size: var(--fs-table); color: var(--text-secondary); grid-column: 1 / -1; }
.methods li.is-main { border-color: var(--accent); background: var(--accent-soft); }
.methods li.is-main .m-tag { color: var(--accent); }

.readonly-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-sm);
  background: var(--risk-low-bg); border: 1px solid var(--risk-low-brd);
  font-size: var(--fs-table); color: var(--text-secondary);
}
.readonly-note svg { width: 20px; height: 20px; color: var(--risk-low); flex: none; }
.readonly-note b { color: var(--text-primary); }

.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.state--ok { color: var(--risk-low); }
.state--part { color: var(--risk-med); }
.state--off { color: var(--neutral); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.form-row { display: grid; gap: 6px; }
.form-row label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }

/* ─── Вердикт по событию ───────────────────────────────── */
.verdict-box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm); border: 1px solid var(--border-default); background: var(--surface-2);
  font-size: var(--fs-ui);
}
.verdict-box--confirmed { border-color: var(--risk-high-brd); background: var(--risk-high-bg); }
.verdict-box--rejected { border-color: var(--risk-low-brd); background: var(--risk-low-bg); }
.verdict-box__note { font-size: var(--fs-table); color: var(--text-muted); margin-top: 2px; }

.reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.reason {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2);
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-default);
  font-size: var(--fs-table); color: var(--text-secondary); cursor: pointer;
}
.reason:hover { background: var(--surface-3); }
.reason:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
.reason input { accent-color: var(--accent); width: 15px; height: 15px; }
.reason-hint { font-size: var(--fs-table); color: var(--risk-med); }

/* ─── Модальное окно ───────────────────────────────────── */
.modal {
  border: 0; padding: 0; background: transparent;
  max-width: 560px; width: calc(100% - 32px); color: var(--text-primary);
}
.modal::backdrop { background: rgba(3, 7, 15, .7); }
.modal__box {
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--elev-modal);
  display: grid; gap: var(--sp-4);
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.modal__title { font-size: var(--fs-h3); font-weight: 700; }
.modal__sub { font-size: var(--fs-table); color: var(--text-muted); margin-top: 2px; }
.modal__note { font-size: var(--fs-table); color: var(--text-muted); }
.modal__done {
  font-size: var(--fs-ui); color: var(--success);
  background: var(--risk-low-bg); border: 1px solid var(--risk-low-brd);
  border-radius: var(--r-sm); padding: var(--sp-3);
}
.modal__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.plan-opts { display: grid; gap: var(--sp-2); }
.plan-opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-default); cursor: pointer;
}
.plan-opt:hover { background: var(--surface-3); }
.plan-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.plan-opt input { accent-color: var(--accent); width: 16px; height: 16px; }
.plan-opt__body { display: grid; gap: 2px; }
.plan-opt__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-ui); }
.plan-opt__sub { font-size: var(--fs-table); color: var(--text-muted); }
.plan-opt__sum {
  text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plan-opt__sum .unit { display: block; font-weight: 400; font-size: 11px; margin: 0; }

.linkbtn {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font-size: inherit; text-align: left;
}
.linkbtn:hover { color: var(--accent-hover); }

/* ─── Адаптив ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .sidebar__brand { border-bottom: 0; border-right: 1px solid var(--border-subtle); }
  .nav { display: flex; padding: var(--sp-2); }
  .nav__group, .sidebar__foot, .nav__soon { display: none; }
  .content { padding: var(--sp-4); }
  .field--search { display: none; }
  .topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; row-gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); position: static; }
  .page-head { flex-direction: column; align-items: stretch; }
  .row-actions { flex-wrap: wrap; }
  .incident-head { padding: var(--sp-4); }
  .facts { gap: var(--sp-3); }

  /* Таблица тревог превращается в карточки */
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards thead { display: none; }
  table.cards tr {
    border: 1px solid var(--border-default); border-radius: var(--r-md);
    background: var(--surface-1); margin-bottom: var(--sp-3); padding: var(--sp-3);
  }
  table.cards td { border: 0; padding: 3px 0; height: auto; }
  table.cards td::before {
    content: attr(data-th) ': '; color: var(--text-muted);
    font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em;
  }
  table.cards td:first-child::before, table.cards td.no-th::before { content: ''; }
  table.cards tbody tr.lvl-high td:first-child, table.cards tbody tr.lvl-med td:first-child,
  table.cards tbody tr.lvl-low td:first-child { box-shadow: none; }
}

/* ─── Автопарк ─────────────────────────────────────────── */
.levelbar {
  display: inline-grid; grid-template-columns: 64px auto; align-items: center; gap: 8px;
}
.levelbar__track {
  height: 8px; border-radius: var(--r-full);
  background: var(--surface-inset); border: 1px solid var(--border-subtle); overflow: hidden;
}
.levelbar__fill { height: 100%; background: var(--brand-fuel); }
.levelbar__fill.is-low { background: var(--risk-med); }
.levelbar span { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.delta-ok   { color: var(--risk-low); }
.delta-warn { color: var(--risk-med); }
.delta-bad  { color: var(--risk-high); font-weight: 700; }

/* ─── Карточка машины ──────────────────────────────────── */
.vhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.vhead__plate { font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: .02em; }
.vhead__model { color: var(--text-secondary); font-size: var(--fs-ui); margin-top: 2px; }
.spec { display: grid; grid-template-columns: 1fr auto; gap: 7px var(--sp-4); font-size: var(--fs-table); }
.spec dt { color: var(--text-muted); }
.spec dd { color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Отчёты ───────────────────────────────────────────── */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--grid-gap); }
.report { display: grid; gap: var(--sp-3); }
.report__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.report__icon {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm);
  background: var(--surface-3); display: grid; place-items: center; color: var(--brand-fuel);
}
.report__icon svg { width: 20px; height: 20px; }
.report__name { font-size: var(--fs-ui); font-weight: 700; }
.report__period { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.report__desc { font-size: var(--fs-table); color: var(--text-secondary); line-height: 1.55; }
.report__range { display: grid; gap: var(--sp-2); }
.report__range .form-row { gap: 4px; }
.report__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.report__actions { display: flex; gap: var(--sp-2); }

/* ─── Правила ──────────────────────────────────────────── */
.rule-group { margin-bottom: var(--sp-5); }
.rule-group__name {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding: 0 0 var(--sp-2);
}
.rule {
  display: grid; grid-template-columns: 62px 1fr 150px 44px; align-items: center; gap: var(--sp-3);
  padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  background: var(--surface-2); margin-bottom: 6px;
}
.rule.is-off { opacity: .55; }
.rule__id { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.rule__name { font-size: var(--fs-table); color: var(--text-primary); font-weight: 600; }
.rule__note { font-size: 11px; color: var(--risk-med); margin-top: 2px; }
.rule__weight { display: flex; align-items: center; gap: var(--sp-2); }
.rule__weight input { width: 100%; accent-color: var(--accent); }
.rule__w { font-size: var(--fs-table); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }

.switch {
  width: 38px; height: 22px; border-radius: var(--r-full); border: 1px solid var(--border-strong);
  background: var(--surface-inset); position: relative; cursor: pointer; padding: 0; justify-self: end;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: var(--r-full); background: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--accent); }

/* ─── Настройки и роли ─────────────────────────────────── */
.setting-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-4);
  padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row__name { font-size: var(--fs-ui); font-weight: 600; }
.setting-row__hint { font-size: var(--fs-table); color: var(--text-muted); margin-top: 2px; }
.role-list li { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-table); }
.role-list li:last-child { border-bottom: 0; }
.role-list b { color: var(--text-primary); display: block; margin-bottom: 2px; }
.role-list span { color: var(--text-secondary); }

@media (max-width: 900px) {
  .rule { grid-template-columns: 1fr auto; }
  .rule__id, .rule__weight { grid-column: 1 / -1; }
}