/* Space Mono (logo "Car") + Pixelify Sans (logo "LAB") — loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: "Almoni Tzar";
  src: url("fonts/almoni-tzar-bold-aaa.woff2") format("woff2"),
       url("fonts/almoni-tzar-bold-aaa.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Surfaces ── */
  --bg:          #ffffff;
  --surface:     #f8f9fa;
  --surface-2:   #f1f3f5;
  --border:      #e8eaed;
  --border-dark: #d1d5db;

  /* ── Text ── */
  --text:       #111827;
  --text-soft:  #1f2937;
  --text-muted: #6b7280;
  --text-dim:   #9ca3af;

  /* ── Accent (interactive: links, active tabs, CTAs) ── */
  --accent:     #2563eb;
  --accent-dim: rgba(37, 99, 235, 0.08);
  --accent-mid: rgba(37, 99, 235, 0.15);

  /* ── Semantic status ── */
  --green:      #16a34a;
  --green-bg:   rgba(22, 163, 74, 0.08);
  --amber:      #d97706;
  --amber-bg:   rgba(217, 119, 6, 0.09);
  --red:        #dc2626;
  --red-bg:     rgba(220, 38, 38, 0.08);

  /* ── Chart palette ── */
  --chart-1: #2563eb;
  --chart-2: #94a3b8;
  --chart-3: #16a34a;
  --chart-4: #d97706;

  /* ── Typography ── */
  --mono:         "Assistant", Arial, "Helvetica Neue", sans-serif;
  --sans:         "Assistant", "Heebo", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --serif:        "Noto Serif Hebrew", "Frank Ruhl Libre", Georgia, serif;
  --data-font:    "Assistant", "Plus Jakarta Sans", "Heebo", ui-sans-serif, sans-serif;
  --display-font: "Assistant", "Almoni Tzar", "Noto Serif Hebrew", "Frank Ruhl Libre", Georgia, serif;
  --logo-font:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --lab-font:     "Pixelify Sans", system-ui, sans-serif;
  --lh-body: 1.6;
  --shell-shadow: none;

  /* ── Status bar segments ── */
  --status-active:   #22c55e;
  --status-inactive: #f59e0b;
  --status-final:    #f87171;
  --status-track:    #e9ecef;

  /* Compatibility aliases used by older page-local styles. */
  --bg-soft:      var(--surface);
  --panel:        #fff;
  --panel-strong: var(--surface);
  --panel-soft:   var(--surface);
  --muted:        var(--text-muted);
  --line:         var(--border);
  --line-soft:    var(--border);
  --accent-soft:  var(--accent-dim);
  --success:      var(--green);
  --success-soft: var(--green-bg);
  --warn:         var(--amber);
  --warn-soft:    var(--amber-bg);
  --shadow:       none;
  --heading-font: var(--display-font);
  --body-font:    var(--sans);

  /* ── Public-site spacing scale (4px rhythm; mirrors the legacy per-page --ms-* numbers) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  /* ── Card primitives (the dominant resting-card values across public blocks) ── */
  --radius-card: 12px;
  --shadow-card: 0 1px 2px rgba(17,24,39,.04);
  --border-card: 1px solid var(--border);
  --content-max: 1400px;   /* single fixed content-column width for non-fluid pages */
}

* {
  box-sizing: border-box;
}

html,
body {
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: var(--lh-body);
}

body {
  margin: 0;
  background: var(--bg);
}

button,
input,
select {
  font-family: var(--sans);
}

/* (dead) .shell width/margin/padding here were fully overridden by the canonical
   !important .shell reset later in this file — removed to avoid a misleading max-width:1680px. */

.topbar {
  background: #fff;
  color: var(--text-dim);
  padding: 0 20px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
}

.global-header {
  position: relative;            /* scrolls normally (not sticky); still the containing block for the matrix/veil */
  z-index: 100;
  background: #fff;
  padding: 0;
  display: block;
  min-height: 124px;              /* +15% over 108 — more vertical space for the stream */
  isolation: isolate;            /* local stacking context: matrix(0) · veil(1) · content(2) */
}

/* ── Global-header data-stream: subtle brand-accent pixel shimmer behind the header ──
   The .header-matrix is injected by assets/carlab-header-stream.js; cells animate opacity
   only. Kept CONTAINED (inset:0, no header overflow:hidden) so the year-slider dropdown that
   drops below the header is never clipped. */
.header-matrix {               /* a single <canvas>, injected by assets/carlab-header-stream.js */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}
.global-header::after {            /* readability veil so brand / search / nav stay crisp */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 36%) 0%,
    rgb(255 255 255 / 70%) 89%,
    rgb(255 255 255 / 50%) 94%,
    rgba(255, 255, 255, 1) 100%
  );
}
/* (Header year-range slider removed — styles deleted; component no longer rendered.) */

.header-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 20, 15, 0.12);
  z-index: 300;
  overflow: hidden;
  max-height: min(62vh, 420px);
  overflow-y: auto;
}

.header-search-item {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;          /* dense data-tool rows (~30px, was ~46px) */
  cursor: pointer;
  text-align: right;
}

.header-search-item + .header-search-item {
  border-top: 1px solid var(--surface-2);   /* lighter divider for a denser list */
}

.header-search-item:hover,
.header-search-item.active {
  background: var(--accent-dim);
}

.header-search-empty {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}

.header-search-empty {
  padding: 10px 12px;
  text-align: center;
}

.main-content {
  max-width: 80%;
  margin: 0 auto;
  padding: 24px;
  width: 100%;
}

.main-content-full {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: calc(100vh - 84px);
  overflow-y: auto;
}

.shell {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  font-family: var(--display-font);
  line-height: 1.12;
  color: var(--text);
}

.hero-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.panel {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.metric {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.metric:last-child {
  border-right: none !important;
}

.metrics {
  gap: 0 !important;
  margin-bottom: 0;
}

/* (dead) .metric padding 20px 24px !important here was overridden by the later equal-specificity
   .metric padding 14px 16px !important — removed; effective metric padding is 14px 16px. */

.table-panel {
  background: transparent !important;
  border: none !important;
}

.table-panel .panel-head {
  padding: 24px 0 16px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

.insight-grid {
  gap: 0 !important;
}

.insight-grid > article {
  border-left: 1px solid var(--border);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 32px 0;
}

.panel-head {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 20px 24px !important;
}

.table-summary,
.controls {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.hero,
.chart-grid,
.insight-grid,
.layout {
  gap: 16px !important;
}

.metric {
  padding: 14px 16px !important;
}

.metric-label {
  font-size: 10px !important;
  font-family: var(--mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-dim) !important;
}

.metric-value {
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  font-family: var(--data-font) !important;
  letter-spacing: -0.3px;
}

@font-face {
  font-family: "Secular One Local";
  src:
    url("fonts/Secular_One/SecularOne-Regular.woff2") format("woff2"),
    url("fonts/Secular_One/SecularOne-Regular.woff") format("woff"),
    url("fonts/Secular_One/SecularOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.metric-note {
  color: var(--text-muted) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
}

.panel-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    font-family: var(--display-font) !important;
    color: var(--text) !important;
    line-height: 18px;
}

.panel-subtitle {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  font-family: var(--sans) !important;
  margin-top: 4px;
}

.ml-chart .panel-title {
  font-family: "Secular One Local", var(--display-font) !important;
}

input,
select,
.btn-ghost,
.filter-select {
  border-radius: 4px !important;
}

.btn-ghost {
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
  cursor: pointer;
}

.btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--bg) !important;
}

.table-wrap {
  overflow: auto;
  border-top: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
}

table thead th {
  padding: 8px 12px;
  text-align: right;
  font-size: 10px;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.08s;
}

table tbody tr:hover {
  background: var(--surface);
}

table tbody td {
  padding: 12px 14px;
  font-size: 13px;
  vertical-align: middle;
}

.badge {
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  font-family: var(--mono) !important;
}

.empty {
  color: var(--text-dim);
  font-family: var(--mono);
  padding: 24px;
  text-align: center;
}

.pill {
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-family: var(--mono) !important;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.panel-body {
  padding: 18px 20px 20px;
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  margin-bottom: 10px;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.seg-active { background: var(--status-active); }
.seg-inactive { background: var(--status-inactive); }
.seg-final { background: var(--status-final); }

.chart-frame { position: relative; min-height: var(--chart-frame-height, 260px); }
.chart-canvas { width: 100%; height: var(--chart-frame-height, 260px); }

.table-summary { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:13px; }
.seg-toggle { display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;font-size:12px;font-family:var(--mono); }
.seg-toggle button { padding:5px 12px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-inline-end:1px solid var(--border);transition:background .12s,color .12s; }
.seg-toggle button:last-child { border-inline-end: none; }
.seg-toggle button:hover { color: var(--text); }
.seg-toggle button.seg-on,.seg-toggle button.active { background:var(--accent-dim);color:var(--accent);font-weight:700; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.model-link { color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s; }
.model-link:hover { color: var(--accent); border-bottom-color: currentColor; }
.numeric { direction:ltr;text-align:left;font-variant-numeric:tabular-nums; }
.row-num { color:var(--text-muted);font-size:12px;text-align:center;width:32px; }
.status-mix { display: grid; gap: 4px; min-width: var(--status-mix-min, 160px); }
.status-bar,.ownership-bar { display:flex;direction:ltr;width:100%;height:6px;overflow:hidden;border-radius:999px;background:var(--status-track); }
.ownership-bar { position:relative;overflow:visible;cursor:default; }
.ownership-bar::after{
  content:attr(data-tooltip);
  position:absolute;
  inset-inline-end:0;
  bottom:calc(100% + 8px);
  min-width:140px;
  max-width:min(260px,70vw);
  padding:7px 10px;
  border-radius:8px;
  background:rgba(17,24,39,.94);
  color:#fff;
  font-size:11px;
  line-height:1.45;
  font-family:var(--sans);
  text-align:right;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  transform:translateY(2px);
  transition:opacity .08s ease,transform .08s ease;
  z-index:50;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.ownership-bar:hover::after{opacity:1;transform:translateY(0)}
.ownership-bar > span,.status-seg { height:100%;min-width:0; }
.status-seg.inactive { background: var(--status-inactive); }
.status-seg.final { background: var(--status-final); }
.status-seg.active { background: var(--status-active); }
.spark-card { display:flex;align-items:end;gap:2px;direction:ltr;overflow:hidden; }
.spark-bar { flex:1 1 0;min-width:3px;background:var(--status-active); }
.spark-card.down .spark-bar { background: var(--status-final); }
.mkt-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mkt-head-title { font-size:10.5px;font-family:var(--mono);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0; }
.mkt-head-sub,.mkt-loading { font-size:10px;font-family:var(--mono);color:var(--text-dim); }
.mkt-loading { font-size: 11px; }
.mkt-body { display:flex;gap:var(--mkt-gap,18px);align-items:var(--mkt-align,center);padding-top:4px; }
.mkt-donut-wrap { width:var(--mkt-donut-size,140px);flex-shrink:0;position:relative; }
.mkt-donut { display:block;width:var(--mkt-donut-size,140px);height:var(--mkt-donut-size,140px); }
.mkt-donut-center { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;pointer-events:none; }
.mkt-donut-val { font-size:var(--mkt-donut-value-size,22px);font-weight:800;font-family:var(--data-font);color:var(--text);letter-spacing:-0.5px;line-height:1; }
.mkt-donut-sub { font-size:9px;font-family:var(--mono);color:var(--text-dim);max-width:var(--mkt-donut-sub-width,64px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mkt-legend { flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--mkt-legend-gap,5px);max-height:var(--mkt-legend-max-height,none);overflow-y:var(--mkt-legend-overflow-y,visible); }
.mkt-legend-row { display:grid;grid-template-columns:var(--mkt-legend-cols,14px 8px 1fr 46px 30px);align-items:center;gap:var(--mkt-legend-row-gap,5px);direction:rtl; }
.mkt-legend-rank { font-size:9px;font-family:var(--mono);color:var(--text-dim);text-align:center;direction:ltr; }
.mkt-legend-dot { width:var(--mkt-legend-dot-size,8px);height:var(--mkt-legend-dot-size,8px);border-radius:50%;justify-self:center; }
.mkt-legend-name { font-size:var(--mkt-legend-name-size,10.5px);font-family:var(--sans);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mkt-legend-bar { height:var(--mkt-legend-bar-height,4px);border-radius:2px;background:rgba(0,0,0,.07);overflow:hidden; }
.mkt-legend-fill { height: 100%; border-radius: 2px; transition: width .55s ease; }
.mkt-legend-pct { font-size:var(--mkt-legend-pct-size,9.5px);font-family:var(--mono);color:var(--text-dim);text-align:left;direction:ltr;white-space:nowrap; }
@media (max-width: 1180px) {
  .main-content {
    padding: 16px;
  }

  .topbar {
    padding: 0 16px;
  }
}

/* ── Shared pixel / datastream cards (assets/carlab-pixel-cards.js) ──────────
   Reusable hooks for the site-wide pixel-data card language. A `.pixel-card`
   gets a `<canvas class="pixel-matrix">` injected behind its content; set
   data-pixel-theme (green/amber/red/blue/purple/gray …) to colour the shimmer.
   Scoped to these two classes only, so existing layouts are unaffected. */
.pixel-card { position: relative; overflow: hidden; isolation: isolate; }
.pixel-matrix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pixel-card > :not(.pixel-matrix) { position: relative; z-index: 1; }

/* ── Shared directory pages (model.php + maker.php list modes) ───────────────
   The chrome (.dir-header/controls/search/sort/count/more) + the spaced rounded
   pixel-card grid + status bar, extracted from the two pages so both consume one
   component. Each page only sets tile-content typography + its --dir-card-min.
   The cards animate via the shared renderer (.pixel-card[data-pixel-theme]). */
.dir-header{padding:40px 40px 28px;border-bottom:1px solid var(--border)}
.dir-title{margin:0 0 6px;font-size:36px;font-weight:700;font-family:var(--display-font);color:var(--text);line-height:1.05}
.dir-controls{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.dir-search-wrap{position:relative;flex:0 0 260px}
.dir-search{width:100%;box-sizing:border-box;padding:8px 32px 8px 12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--sans);font-size:13px;border-radius:0;outline:none}
.dir-search:focus{border-color:var(--text-muted)}
.dir-search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}
.dir-more-wrap{padding:32px;display:flex;flex-direction:column;align-items:center;gap:10px;border-top:1px solid var(--border)}
.dir-more-note{font-size:11px;color:var(--text-dim);font-family:var(--mono)}
.dir-more-wrap[hidden]{display:none}
.dir-header--model {
  padding: 0;
  border-bottom: none;
}
.dir-hero {
  display: grid;
  grid-template-columns: var(--dir-hero-columns, 920px 1fr);
  align-items: stretch;
}
.dir-hero-copy {
  padding: 36px 40px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dir-hero-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--text-muted);
  font-family: var(--sans);
}
.dir-hero-meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.dir-hero-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dir-hero-kpi-val {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--data-font);
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1;
}
.dir-hero-kpi-lbl {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-top: 3px;
}
.dir-controls--model {
  padding: 11px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
@media(max-width:900px){
  .dir-hero{grid-template-columns:1fr}
  .dir-hero-copy{border-inline-end:none;border-bottom:1px solid var(--border);padding:28px 24px 22px}
}
@media(max-width:560px){
  .dir-hero-copy{padding:22px 20px 18px}
  .dir-controls--model{padding:10px 16px}
}

/* Category directory hero aliases. Categories use cat-* names, but the visual
   language matches the maker/model directory hero and should be tuned here. */
.cat-dir-hero { display:grid;grid-template-columns:var(--cat-dir-hero-columns,1fr 360px);align-items:stretch; }
.cat-hero-copy { padding:36px 40px 30px;display:flex;flex-direction:column;gap:10px;border-inline-end:1px solid var(--border);border-bottom:1px solid var(--border); }
.cat-hero-title { margin:0;font-size:34px;font-weight:700;font-family:var(--display-font);color:var(--text);line-height:1.05; }
.cat-hero-desc { margin:0;font-size:12.5px;line-height:1.72;color:var(--text-muted);font-family:var(--sans); }
.cat-hero-meta { display:flex;gap:28px;flex-wrap:wrap;padding-top:2px; }
.cat-hero-kpi { display:flex;flex-direction:column;gap:3px; }
.cat-hero-kpi-val { font-size:26px;font-weight:800;font-family:var(--data-font);color:var(--text);letter-spacing:-0.5px;line-height:1; }
.cat-hero-kpi-lbl { font-size:10px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:0;margin-top:3px; }
.cat-hero-chart-col { padding:22px 28px 22px 20px;display:flex;flex-direction:column;gap:13px;border-bottom:1px solid var(--border); }
.cat-dir-controls { padding:11px 24px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px; }
.cat-dir-count { font-size:11px;font-family:var(--mono);color:var(--text-muted); }
@media(max-width:900px){
  .cat-dir-hero{grid-template-columns:1fr}
  .cat-hero-copy{border-inline-end:none;border-bottom:1px solid var(--border);padding:28px 24px 22px}
  .cat-hero-chart-col{padding:22px 24px 20px}
}
@media(max-width:560px){
  .cat-hero-chart-col{display:none}
  .cat-hero-copy{padding:22px 20px 18px}
  .cat-dir-controls{padding:10px 16px}
}
.cat-grid{display:grid;grid-template-columns:repeat(var(--catalog-grid-cols,4),minmax(0,1fr));gap:var(--catalog-grid-gap,14px);padding:var(--catalog-grid-padding,20px 24px);box-sizing:border-box;width:100%}
.cat-grid{--catalog-grid-cols:4}  /* gap falls back to the shared catalog default (14px) */
.cat-slot{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;transition:transform .15s}
.cat-above{width:var(--catalog-above-width,90%);height:var(--catalog-above-height,80px);display:flex;align-items:center;justify-content:center;color:var(--catalog-accent,var(--cat-accent,var(--dir-accent,#94a3b8)));flex-shrink:0;pointer-events:none;transition:transform .15s}
.mdc-silhouette,.cat-silhouette{width:100%;height:100%}
.mdc-silhouette{padding:6px 12px}
.cat-silhouette{padding:6px 14px}
.cat-slot:hover .cat-above{transform:translateY(-3px)}
.cat-card{position:relative;display:flex;flex-direction:column;width:100%;background:#fff;border:var(--border-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;isolation:isolate;transition:border-color .15s,box-shadow .15s,transform .15s}
.cat-card{flex:1}
.cat-card{--catalog-veil-soft-stop:70%;--catalog-veil-final-alpha:.95}
.cat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--catalog-accent,var(--cat-accent,var(--dir-accent,#dde1e7)));z-index:3;border-radius:12px 12px 0 0}
.cat-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:12px;background:linear-gradient(to bottom,rgba(255,255,255,0) var(--catalog-veil-clear,30%),rgba(255,255,255,var(--catalog-veil-soft-alpha,.55)) var(--catalog-veil-soft-stop,74%),rgba(255,255,255,var(--catalog-veil-final-alpha,.92)) 100%)}
.cat-card .pixel-matrix{border-radius:12px}
.cat-slot:hover .cat-card{border-color:var(--catalog-accent,var(--cat-accent,var(--dir-accent,#cbd1d8)));box-shadow:0 6px 18px rgba(17,24,39,.10);transform:translateY(var(--catalog-hover-y,-3px))}
@media(max-width:1200px){.cat-grid{--catalog-grid-cols:3}}
@media(max-width:780px){.cat-grid{--catalog-grid-cols:2}}
@media(max-width:480px){.cat-grid{--catalog-grid-cols:1}}
@media(max-width:560px){.dir-header{padding:24px 20px 18px}.dir-title{font-size:26px}}

/* ── Status-bar rich tooltip (shared: index, model, maker) ─────────────────── */
.sb-tip{position:absolute;z-index:9999;pointer-events:none;background:rgba(17,24,39,.9);color:#fff;border-radius:7px;padding:7px 10px;font-size:11px;font-family:var(--mono,monospace);line-height:1;direction:rtl;text-align:right;box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap}
.sb-tip[hidden]{display:none}
.sb-tip-row{display:flex;align-items:center;gap:8px;padding:3px 0}
.sb-tip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sb-tip-dot--active{background:var(--status-active,#22c55e)}
.sb-tip-dot--inactive{background:var(--status-inactive,#f59e0b)}
.sb-tip-dot--final{background:var(--status-final,#f87171)}
.sb-tip-lbl{flex:1;color:rgba(255,255,255,.75);min-width:52px}
.sb-tip-num{font-weight:700;direction:ltr;unicode-bidi:isolate;min-width:52px;text-align:right}
.sb-tip-pct{color:rgba(255,255,255,.5);direction:ltr;unicode-bidi:isolate;min-width:28px;text-align:left}

/* ── model.php page-specific: fuel-type icon chips (.fuel-*) — used in both
   directory and detail mode, so this lives in the always-loaded shell file
   rather than the mode-conditional assets/ui-v2/model.css / models.css.
   Moved verbatim out of model.php's own inline <style> block. ── */
    .fuel-stack{display:inline-flex;align-items:center;gap:3px}
    .fuel-card{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-muted);background:#fff}
    .fuel-card.fuel-electric{background:#ecfdf5;color:#059669}
    .fuel-card.fuel-hybrid{background:#f0fdf4;color:#16a34a}
    .fuel-card.fuel-plugin{background:#eff6ff;color:#2563eb}
    .fuel-card.fuel-diesel{background:#fefce8;color:#a16207}
    .fuel-card.fuel-gasoline{background:#fff7ed;color:#c2410c}
    .fuel-card.fuel-lpg{background:#faf5ff;color:#7c3aed}
    .fuel-card.fuel-default{background:var(--surface);color:var(--text-muted)}
    .fuel-card svg{width:13px;height:13px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}