@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  --bg: #09111b;
  --bg-soft: #101b28;
  --surface: rgba(13, 23, 34, 0.74);
  --surface-strong: rgba(18, 31, 46, 0.92);
  --surface-accent: rgba(0, 209, 255, 0.08);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #edf4ff;
  --muted: #99a9bc;
  --accent: #00d1ff;
  --accent-2: #4ef58d;
  --danger: #ff6d7a;
  --warning: #ffbe5c;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --radius: 28px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Outfit", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 209, 255, 0.12), transparent 28%),
    radial-gradient(circle at 85% 80%, rgba(78, 245, 141, 0.11), transparent 24%),
    linear-gradient(180deg, #08111a 0%, #0c1622 100%);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select {
  font: inherit;
}

.bg-orb,
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-grid {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent);
}

.bg-orb-a {
  background: radial-gradient(circle at 20% 20%, rgba(0, 209, 255, 0.18), transparent 28%);
}

.bg-orb-b {
  background: radial-gradient(circle at 80% 75%, rgba(78, 245, 141, 0.12), transparent 24%);
}

.app-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 520px);
  gap: 24px;
  align-content: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.shell-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.sidebar {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px);
}

.content {
  display: grid;
  gap: 24px;
}

.auth-content {
  display: grid;
  gap: 16px;
}

.sidebar-title,
.hero h2,
.form-card h2,
.auth-card h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.muted {
  color: var(--muted);
  line-height: 1.6;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}

.focus-card,
.hero,
.panel-card,
.form-card,
.photo-panel,
.auth-card,
.stat-card,
.auth-hero {
  padding: 28px;
}

.focus-card {
  background: linear-gradient(135deg, rgba(0, 209, 255, 0.1), rgba(78, 245, 141, 0.06));
  border: 1px solid rgba(0, 209, 255, 0.24);
}

.focus-value,
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.chip-row,
.car-meta,
.tile-meta,
.hero-actions,
.actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.chip-accent {
  color: var(--accent-2);
  border-color: rgba(78, 245, 141, 0.3);
  background: rgba(78, 245, 141, 0.1);
}

.chip-warn {
  color: #ffe3a8;
  border-color: rgba(255, 190, 92, 0.42);
  background: rgba(255, 190, 92, 0.14);
}

.chip-success {
  color: #b9ffd3;
  border-color: rgba(78, 245, 141, 0.4);
  background: rgba(78, 245, 141, 0.14);
}

/* ============================================================ */
/*                  HISTORY-PAGE TIMELINE                       */
/* ============================================================ */
.timeline {
  list-style: none;
  margin: 0;
  padding: 4px 0 4px;
  display: grid;
  gap: 18px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 120px 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.timeline-left {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.timeline-odo {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.timeline-odo-empty {
  opacity: 0.5;
}

/* Vertical rail with the connecting line + the dot. The line is drawn by a
   pseudo-element on the rail so it sits behind the dot and stretches into the
   next row's gap area, creating the appearance of one continuous line through
   every event in the timeline. */
.timeline-rail {
  position: relative;
  align-self: stretch;
  min-height: 28px;
}

.timeline-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  /* Reach into the row gap so the line bridges consecutive markers. */
  bottom: -18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(0, 209, 255, 0.45), rgba(0, 209, 255, 0.12));
  transform: translateX(-50%);
}

/* Cap the line at the first and last marker so it doesn't bleed past the
   timeline edges. */
.timeline-row:first-child .timeline-rail::before {
  top: 10px;
}

.timeline-row:last-child .timeline-rail::before {
  bottom: auto;
  height: 10px;
}

.timeline-dot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.16);
  z-index: 1;
}

.timeline-dot-purchase { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.22); }
.timeline-dot-service  { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(78, 245, 141, 0.20); }
.timeline-dot-plan     { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(78, 245, 141, 0.20); }
.timeline-dot-admin    { border-color: var(--warning); box-shadow: 0 0 0 3px rgba(255, 190, 92, 0.22); }

.timeline-body {
  padding-top: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-body > strong {
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.timeline-body .record-meta {
  gap: 6px;
}

.timeline-body .muted {
  margin-top: 2px;
}

@media (max-width: 720px) {
  .timeline-row {
    grid-template-columns: 80px 22px minmax(0, 1fr);
    gap: 10px;
  }
  .timeline-date { font-size: 0.78rem; }
  .timeline-odo { font-size: 0.68rem; }
}

.nav-stack {
  display: grid;
  gap: 10px;
}

.nav-link,
.garage-card,
.car-row,
.car-tile {
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav-link {
  padding: 14px 16px;
  color: var(--muted);
}

.nav-link:hover,
.garage-card:hover,
.car-row:hover,
.car-tile:hover,
.nav-link.active {
  transform: translateY(-1px);
  border-color: rgba(0, 209, 255, 0.26);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.nav-actions {
  display: grid;
  gap: 10px;
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  background: linear-gradient(160deg, rgba(0, 209, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.stats-grid,
.panel-grid {
  display: grid;
  gap: 24px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel-grid {
  grid-template-columns: 1.1fr 1fr;
}

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

.section-head h3 {
  margin: 0;
  font-size: 1.3rem;
}

.garage-list,
.car-list,
.car-grid,
.mini-list,
.record-list {
  display: grid;
  gap: 14px;
}

.garage-card,
.car-row,
.car-tile,
.record-row {
  padding: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.car-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.garage-title,
.car-heading {
  font-weight: 700;
  font-size: 1.04rem;
}

.tile-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.small-text {
  font-size: 0.92rem;
}

.empty-card {
  padding: 24px;
  border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 12px;
  justify-items: start;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
}

.button.primary {
  background: linear-gradient(135deg, var(--accent), #4ab3ff);
  color: #03141c;
}

.button.ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--text);
}

.button.ghost.danger {
  color: var(--danger);
  border-color: rgba(255, 109, 122, 0.25);
}

.button.small {
  padding: 10px 14px;
  font-size: 0.92rem;
}

.form-grid {
  display: grid;
  gap: 18px;
}

.form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .form-grid.three-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .form-grid.three-col {
    grid-template-columns: 1fr;
  }
}

/* Form section heading used to break a single form into logical groups
   (e.g. "Fillup" / "Price" / "Effective odometer"). It always spans the
   full width of the form-grid it sits inside. */
.form-section {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.form-section .eyebrow {
  margin: 0 0 4px 0;
}
.form-section h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}
.form-section .form-section-help {
  margin: 4px 0 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Compound input: <select> + <input> side-by-side inside a single .field. */
.field.compound .compound-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(0, 1fr);
  gap: 8px;
}
@media (max-width: 640px) {
  .field.compound .compound-row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: grid;
  align-content: start;
  gap: 10px;
}

.typeahead {
  position: relative;
}

.field span {
  color: var(--muted);
  font-size: 0.92rem;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(8, 16, 24, 0.78);
  color: var(--text);
  outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(0, 209, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(0, 209, 255, 0.1);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.typeahead-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(0, 209, 255, 0.18);
  background: rgba(8, 16, 24, 0.98);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.45);
}

.typeahead-option,
.typeahead-empty {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
}

.typeahead-option {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.typeahead-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.typeahead-empty {
  color: var(--muted);
  font-size: 0.92rem;
}

.field-wide {
  grid-column: 1 / -1;
}

.helper-text {
  font-size: 0.88rem;
}

.flash-stack {
  display: grid;
  gap: 10px;
}

.auth-flash {
  width: min(460px, 100%);
  margin-bottom: 16px;
}

.flash {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.flash-success {
  border-color: rgba(78, 245, 141, 0.3);
  color: #b9ffd3;
}

.flash-error {
  border-color: rgba(255, 109, 122, 0.28);
  color: #ffc5cb;
}

.auth-card {
  width: min(460px, 100%);
}

.logout-form {
  margin-top: auto;
}

.garage-photo {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 22px;
}

.compact-photo {
  max-height: 240px;
}

.inline-photo {
  padding-top: 4px;
}

.surface-note {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
}

.danger-panel {
  border-color: rgba(255, 109, 122, 0.24);
}

.top-gap {
  margin-top: 14px;
}

.warning-stack {
  display: grid;
  gap: 16px;
}

.warning-card {
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.warning-card h3,
.warning-card p {
  margin: 0 0 10px;
}

.warning-soon {
  background: rgba(255, 190, 92, 0.11);
  border-color: rgba(255, 190, 92, 0.28);
}

.warning-overdue {
  background: rgba(255, 109, 122, 0.12);
  border-color: rgba(255, 109, 122, 0.28);
}

.warning-text {
  color: #ffe3a8;
  font-weight: 700;
}

.overdue-text {
  color: #ffc1c8;
}

.interval-row {
  align-items: center;
}

.dashboard-bottom {
  grid-template-columns: 1fr 1fr;
}

.info-grid,
.detail-grid,
.split-grid,
.stats-inline {
  display: grid;
  gap: 16px;
}

.info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-grid {
  grid-template-columns: 1.2fr 0.8fr;
}

.split-grid {
  grid-template-columns: 1fr 1fr;
}

.stats-inline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-item,
.metric-card,
.stack-card,
.record-row {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.info-item,
.metric-card,
.stack-card {
  padding: 18px;
}

.info-item strong,
.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
}

.metric-card .muted,
.stack-card .muted {
  margin: 0;
}

.metric-card strong {
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}

.record-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.record-row.compact {
  flex-direction: column;
  gap: 6px;
}

.record-main {
  display: grid;
  gap: 6px;
}

.record-meta,
.stats-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-panel,
.stack-card {
  display: grid;
  gap: 16px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  width: fit-content;
}

.status-open {
  color: #ffe4ad;
  background: rgba(255, 190, 92, 0.12);
  border: 1px solid rgba(255, 190, 92, 0.26);
}

.status-done {
  color: #b9ffd3;
  background: rgba(78, 245, 141, 0.12);
  border: 1px solid rgba(78, 245, 141, 0.26);
}

.form-grid .status-pill {
  margin-top: 4px;
}

.subtle-link {
  color: var(--accent);
}

.auth-hero {
  min-height: 420px;
  display: grid;
  align-content: end;
  background:
    radial-gradient(circle at top right, rgba(0, 209, 255, 0.14), transparent 34%),
    linear-gradient(160deg, rgba(0, 209, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.calendar-panel {
  display: grid;
  gap: 20px;
}

.calendar-toolbar,
.calendar-controls,
.calendar-weekdays,
.calendar-events {
  display: flex;
}

.calendar-toolbar {
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.calendar-controls {
  gap: 10px;
  align-items: center;
}

.calendar-nav {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  font-size: 1.4rem;
  line-height: 1;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 0 4px;
  color: var(--muted);
  font-weight: 600;
}

.calendar-weekdays div {
  padding: 0 12px 8px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  overflow: hidden;
  border-radius: 24px;
}

.calendar-cell {
  min-height: 150px;
  padding: 10px 12px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.calendar-cell-muted {
  background: rgba(255, 255, 255, 0.012);
}

.calendar-cell-today .calendar-date-number {
  background: #22b8e6;
  color: #02131a;
  box-shadow: 0 10px 24px rgba(34, 184, 230, 0.35);
}

.calendar-date-row {
  display: flex;
  justify-content: flex-end;
}

.calendar-date-number {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text);
}

.calendar-cell-muted .calendar-date-number {
  color: rgba(237, 244, 255, 0.42);
}

.calendar-events {
  display: grid;
  align-content: start;
  gap: 6px;
}

.calendar-event {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  min-width: 0;
}

.calendar-event-title,
.calendar-event-car {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendar-event-title {
  font-size: 0.88rem;
  font-weight: 700;
}

.calendar-event-car {
  font-size: 0.74rem;
  color: rgba(3, 20, 28, 0.72);
}

.calendar-event-planned {
  background: rgba(109, 179, 255, 0.88);
  color: #08111a;
}

.calendar-event-soon {
  background: rgba(255, 190, 92, 0.92);
  color: #291400;
}

.calendar-event-overdue {
  background: rgba(255, 109, 122, 0.92);
  color: #2c0a0d;
}

.calendar-event-done {
  background: rgba(83, 220, 137, 0.9);
  color: #052112;
}

.calendar-more {
  padding: 2px 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .app-shell,
  .panel-grid,
  .stats-grid,
  .detail-grid,
  .split-grid,
  .stats-inline,
  .dashboard-bottom,
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .calendar-grid {
    grid-template-columns: 1fr;
    border-left: 0;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-cell {
    min-height: auto;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .app-shell,
  .auth-shell {
    padding: 16px;
  }

  .hero,
  .section-head,
  .car-row,
  .record-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-grid.two-col {
    grid-template-columns: 1fr;
  }

  .focus-card,
  .hero,
  .panel-card,
  .form-card,
  .photo-panel,
  .auth-card,
  .stat-card,
  .auth-hero,
  .sidebar {
    padding: 22px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}


.plan-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.plan-column {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
  padding: 18px;
  display: grid;
  gap: 16px;
}

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

.plan-column h4 {
  margin: 0;
  font-size: 1.1rem;
}

.status-progress {
  color: #c8f3ff;
  background: rgba(0, 209, 255, 0.13);
  border: 1px solid rgba(0, 209, 255, 0.26);
}

.note-row {
  align-items: flex-start;
}

.markdown-editor-shell {
  align-items: start;
}

.markdown-content {
  display: grid;
  gap: 12px;
  line-height: 1.7;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  margin: 0;
}

.markdown-content pre,
.markdown-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.markdown-content pre {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(8, 16, 24, 0.88);
  border: 1px solid var(--line);
  overflow-x: auto;
}

.markdown-content code {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 2px 6px;
}

.markdown-content blockquote {
  padding-left: 14px;
  border-left: 3px solid rgba(0, 209, 255, 0.35);
  color: var(--muted);
}

.markdown-preview {
  min-height: 260px;
}

[data-markdown-input] {
  min-height: 360px;
}

@media (max-width: 1100px) {
  .plan-board {
    grid-template-columns: 1fr;
  }
}


.compact-dashboard {
  display: grid;
  gap: 18px;
}

.compact-dashboard .hero,
.compact-dashboard .panel-card,
.compact-dashboard .metric-card,
.compact-dashboard .detail-panel,
.compact-dashboard .warning-card {
  padding: 20px 22px;
}

.compact-dashboard .hero {
  gap: 18px;
}

.compact-dashboard .hero h2 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.compact-dashboard .hero-actions,
.compact-dashboard .chip-row,
.compact-dashboard .record-meta,
.compact-dashboard .stats-meta {
  gap: 8px;
}

.compact-dashboard .button {
  padding: 10px 14px;
}

.compact-dashboard .button.small {
  padding: 8px 12px;
  font-size: 0.84rem;
}

.compact-dashboard .chip {
  padding: 5px 10px;
  font-size: 0.72rem;
}

.compact-dashboard .stats-inline,
.compact-dashboard .detail-grid,
.compact-dashboard .split-grid,
.compact-dashboard .plan-board {
  gap: 14px;
}

.compact-dashboard .metric-card strong {
  font-size: 1.25rem;
}

.compact-dashboard .metric-card .muted,
.compact-dashboard .record-main,
.compact-dashboard .detail-panel,
.compact-dashboard .plan-column,
.compact-dashboard .info-grid {
  gap: 10px;
}

.compact-dashboard .metric-card p,
.compact-dashboard .record-main .muted,
.compact-dashboard .info-item .muted,
.compact-dashboard .small-text {
  font-size: 0.88rem;
}

.compact-dashboard .section-head {
  margin-bottom: 14px;
}

.compact-dashboard .section-head h3 {
  font-size: 1.12rem;
}

.compact-dashboard .record-list,
.compact-dashboard .mini-list {
  gap: 10px;
}

.compact-dashboard .record-row,
.compact-dashboard .info-item,
.compact-dashboard .plan-column {
  padding: 14px;
}

.compact-dashboard .record-row {
  gap: 12px;
}

.compact-dashboard .record-row.compact {
  gap: 8px;
}

.compact-dashboard .warning-card h3 {
  font-size: 1.1rem;
}

.compact-dashboard .info-item strong,
.compact-dashboard .metric-card strong {
  margin-top: 4px;
}

@media (max-width: 720px) {
  .compact-dashboard .hero,
  .compact-dashboard .panel-card,
  .compact-dashboard .metric-card,
  .compact-dashboard .detail-panel,
  .compact-dashboard .warning-card {
    padding: 18px;
  }
}


.log-toolbar {
  align-items: flex-end;
}

.log-limit-form {
  margin: 0;
}

.compact-field {
  gap: 6px;
}

.compact-field span {
  font-size: 0.76rem;
}

.compact-field select {
  min-width: 88px;
  padding: 8px 12px;
  border-radius: 12px;
}

.log-scroll-area {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
}

.log-scroll-area::-webkit-scrollbar {
  width: 10px;
}

.log-scroll-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
}

.log-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}


.plan-work-page {
  display: grid;
  gap: 18px;
}

.plan-tracker-panel {
  display: grid;
  gap: 18px;
}

.plan-board {
  align-items: start;
}

.plan-column .record-list {
  max-height: none;
}

body.modal-open {
  overflow: hidden;
}

.modal-shell[hidden] {
  display: none !important;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 28px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 18, 0.74);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100vw - 40px));
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.plan-modal-card .section-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -2px -2px 18px;
  padding: 0 0 18px;
  background: linear-gradient(180deg, rgba(11, 18, 30, 0.98) 0%, rgba(11, 18, 30, 0.96) 100%);
}

@media (max-width: 1100px) {
  .modal-shell {
    padding: 16px;
  }

  .modal-card {
    width: min(100vw - 20px, 100%);
    max-height: calc(100vh - 24px);
  }
}


/* ============================================================ */
/*           COMPACT TECH-INNOVATION THEME OVERRIDES            */
/* ------------------------------------------------------------ */
/* Goal: denser layout, smaller type, sharper corners, mono     */
/* numerics. Keeps existing class names working — values only.  */
/* ============================================================ */

:root {
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 6px;
  --line: rgba(120, 200, 255, 0.10);
  --line-strong: rgba(120, 200, 255, 0.20);
  --accent-glow: 0 0 0 1px rgba(0, 209, 255, 0.32), 0 0 24px -4px rgba(0, 209, 255, 0.35);
  --font-sans: "Space Grotesk", "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html {
  font-size: 14px;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 209, 255, 0.08), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(78, 245, 141, 0.06), transparent 26%),
    linear-gradient(180deg, #060c14 0%, #08111c 100%);
}

.bg-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(0, 209, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 209, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* --- Layout shell densification --- */
.app-shell {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.auth-shell {
  grid-template-columns: minmax(280px, 380px) minmax(0, 440px);
  gap: 16px;
  padding: 16px;
}

.shell-card {
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
}

.sidebar {
  padding: 16px;
  gap: 16px;
  top: 14px;
  height: calc(100vh - 28px);
}

.content,
.compact-dashboard {
  gap: 12px;
}

/* Override the original `.content { display: grid }` — with grid, when the
   parent .app-shell is taller than the content (sidebar is sticky 100vh), the
   grid stretches its rows to fill leftover space, which inflated short
   children like .page-toolbar to hundreds of px tall. Flex column stacks
   items at content height with no stretch surprises. */
.content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.page-toolbar {
  flex: 0 0 auto;
}

.auth-content {
  gap: 12px;
}

/* --- Card paddings --- */
.focus-card,
.hero,
.panel-card,
.form-card,
.photo-panel,
.auth-card,
.stat-card,
.auth-hero {
  padding: 16px 18px;
  border-radius: var(--radius);
}

.compact-dashboard .hero,
.compact-dashboard .panel-card,
.compact-dashboard .metric-card,
.compact-dashboard .detail-panel,
.compact-dashboard .warning-card {
  padding: 12px 14px;
}

/* --- Typography: tighter, smaller --- */
.sidebar-title,
.hero h2,
.form-card h2,
.auth-card h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.05;
}

.compact-dashboard .hero h2 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  margin-bottom: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
}

.muted {
  line-height: 1.45;
  font-size: 0.85rem;
}

.section-head {
  margin-bottom: 10px;
}

.section-head h3,
.compact-dashboard .section-head h3 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.plan-column h4 {
  font-size: 0.92rem;
}

.warning-card h3,
.compact-dashboard .warning-card h3 {
  font-size: 0.95rem;
}

/* --- Numeric / "data" classes get the mono treatment --- */
.focus-value,
.stat-value,
.metric-card strong,
.compact-dashboard .metric-card strong,
.info-item strong,
.compact-dashboard .info-item strong {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.focus-value {
  font-size: 1.15rem;
}

/* --- Chips: pills become tight rounded squares --- */
.chip {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 500;
}

.compact-dashboard .chip {
  padding: 3px 7px;
  font-size: 0.62rem;
}

.chip-row,
.car-meta,
.tile-meta,
.hero-actions,
.actions-row,
.compact-dashboard .hero-actions,
.compact-dashboard .chip-row,
.compact-dashboard .record-meta,
.compact-dashboard .stats-meta {
  gap: 6px;
}

/* --- Status pills also go uppercase mono --- */
.status-pill {
  padding: 3px 9px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border-radius: var(--radius-pill);
}

/* --- Buttons: smaller, sharper --- */
.button {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.button.small,
.compact-dashboard .button.small {
  padding: 5px 9px;
  font-size: 0.72rem;
  border-radius: 6px;
}

.compact-dashboard .button {
  padding: 7px 11px;
}

.button.primary {
  box-shadow: 0 0 0 1px rgba(0, 209, 255, 0.4), 0 6px 18px -6px rgba(0, 209, 255, 0.5);
}

/* --- Nav links --- */
.nav-link {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
}

.nav-stack,
.nav-actions {
  gap: 6px;
}

.nav-link.active,
.nav-link:hover {
  border-color: rgba(0, 209, 255, 0.35);
  background: rgba(0, 209, 255, 0.07);
}

/* --- Cards / rows --- */
.nav-link,
.garage-card,
.car-row,
.car-tile,
.info-item,
.metric-card,
.stack-card,
.record-row,
.surface-note,
.warning-card {
  border-radius: var(--radius);
}

.garage-card,
.car-row,
.car-tile,
.record-row {
  padding: 10px 12px;
}

.compact-dashboard .record-row,
.compact-dashboard .info-item,
.compact-dashboard .plan-column {
  padding: 10px 12px;
}

.info-item,
.metric-card,
.stack-card {
  padding: 12px 14px;
}

.surface-note {
  padding: 12px 14px;
}

.warning-card {
  padding: 14px 16px;
  border-radius: var(--radius);
}

.garage-list,
.car-list,
.car-grid,
.mini-list,
.record-list,
.compact-dashboard .record-list,
.compact-dashboard .mini-list {
  gap: 8px;
}

.garage-title,
.car-heading {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.tile-actions {
  margin-top: 10px;
  gap: 6px;
}

.small-text,
.compact-dashboard .metric-card p,
.compact-dashboard .record-main .muted,
.compact-dashboard .info-item .muted,
.compact-dashboard .small-text {
  font-size: 0.78rem;
}

.helper-text {
  font-size: 0.76rem;
}

/* --- Forms --- */
.form-grid,
.compact-dashboard .stats-inline,
.compact-dashboard .detail-grid,
.compact-dashboard .split-grid,
.compact-dashboard .plan-board {
  gap: 10px;
}

.field {
  gap: 6px;
}

.field span {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-weight: 500;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select,
.field textarea {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  background: rgba(6, 12, 20, 0.86);
  border-color: var(--line-strong);
  font-family: var(--font-sans);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(0, 209, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 209, 255, 0.12);
}

.field textarea {
  min-height: 96px;
}

[data-markdown-input] {
  min-height: 280px;
}

/* --- Stats grid: 4-up but tighter --- */
.stats-grid,
.panel-grid {
  gap: 12px;
}

/* --- Plan board --- */
.plan-board {
  gap: 10px;
}

.plan-column {
  padding: 12px;
  border-radius: var(--radius);
  gap: 10px;
}

/* --- Calendar densification --- */
.calendar-panel {
  gap: 12px;
}

.calendar-cell {
  min-height: 96px;
  padding: 6px 8px 8px;
  gap: 6px;
}

.calendar-grid {
  border-radius: var(--radius);
}

.calendar-date-number {
  width: 22px;
  height: 22px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.calendar-event {
  padding: 4px 6px;
  border-radius: 6px;
}

.calendar-event-title {
  font-size: 0.74rem;
  font-weight: 600;
}

.calendar-event-car {
  font-size: 0.66rem;
}

.calendar-nav {
  width: 32px;
  height: 32px;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}

.calendar-weekdays div {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  padding: 0 8px 6px;
}

/* --- Flash messages --- */
.flash {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.flash-stack {
  gap: 6px;
}

/* --- Markdown content --- */
.markdown-content {
  gap: 10px;
  line-height: 1.55;
  font-size: 0.9rem;
}

.markdown-content pre {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

/* --- Subtle "tech" embellishments --- */
.shell-card,
.focus-card,
.hero,
.panel-card,
.form-card,
.auth-card,
.warning-card,
.plan-column {
  position: relative;
}

/* hairline accent on the top edge of major cards */
.hero::before,
.focus-card::before,
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 16px auto 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 209, 255, 0.55), transparent);
  pointer-events: none;
}

/* monospace-style readout for the focus card "signed in" section */
.focus-card .focus-value {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* numeric tabular alignment */
.focus-value,
.stat-value,
.metric-card strong,
.info-item strong,
.calendar-date-number {
  font-variant-numeric: tabular-nums;
}

/* tighter scrollbars to match */
.log-scroll-area::-webkit-scrollbar {
  width: 6px;
}

/* --- Page toolbar: compact replacement for the oversized .hero on
   action-focused pages (planner, notes list, note editor). One row,
   ~44px tall, eyebrow + title on the left, action buttons on the right. --- */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 12px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(0, 209, 255, 0.04), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(12px);
  position: relative;
}

.page-toolbar::before {
  content: "";
  position: absolute;
  inset: 0 12px auto 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 209, 255, 0.45), transparent);
  pointer-events: none;
}

.page-toolbar-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.page-toolbar-title .eyebrow {
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
}

.page-toolbar-title h2 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Plan tracker panel that doesn't use a section-head — drop the outer panel
   padding so the plan board sits flush inside the card. */
.plan-tracker-flat {
  padding: 10px !important;
}

.page-toolbar .hero-actions {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .page-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
  }

  .page-toolbar .hero-actions {
    justify-content: flex-start;
  }
}

/* --- Stats grid: 3-up by default, with explicit override for the 6-tile car
   dashboard so it forms a clean 3x2 instead of 4+2 --- */
.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Generic full-row tile for the stats grid (used by fuel cost + total spent
   to give them visual emphasis as roll-up/operating-cost summaries). */
.metric-span-row {
  grid-column: 1 / -1;
}

/* "Total spent" tile gets a subtle highlight to signal it's the aggregate */
.metric-total {
  background: linear-gradient(135deg, rgba(0, 209, 255, 0.09), rgba(78, 245, 141, 0.05));
  border-color: rgba(0, 209, 255, 0.28) !important;
  /* Span the full row so the dashboard ends with a wide rollup tile */
  grid-column: 1 / -1;
}

.metric-total strong {
  color: var(--accent);
}

@media (max-width: 1100px) {
  .stats-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact mobile breakpoint adjustments */
@media (max-width: 720px) {
  html {
    font-size: 13px;
  }

  .app-shell,
  .auth-shell {
    padding: 10px;
  }

  .focus-card,
  .hero,
  .panel-card,
  .form-card,
  .photo-panel,
  .auth-card,
  .stat-card,
  .auth-hero,
  .sidebar {
    padding: 14px;
  }

  .stats-grid-3 {
    grid-template-columns: 1fr;
  }
}

.auth-hero-logo {
  width: 112px;
  height: 112px;
  border-radius: 24px;
  display: block;
  margin-bottom: 1.5rem;
}

.auth-hero { display: flex; flex-direction: column; }
.auth-hero-logo-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.auth-hero-logo { width: 128px; height: 128px; border-radius: 26px; display: block; margin: 0; }


/* Manufacturer monogram badge (car lists) */
svg.brand-badge {
  display: block;
  flex: 0 0 auto;
}
.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}
.car-row-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.car-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Searchable multi-select rows (searchable_multiselect macro): the checkbox was
   inheriting the full-width ".field input" styling, which pushed it to the right
   and wrapped the label onto its own line. Keep the checkbox compact + aligned. */
.ms-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.ms-row input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent, #38bdf8);
}
.ms-row > span {
  flex: 1 1 auto;
  min-width: 0;
}


.chip-danger {
  color: #ffb4b4;
  border-color: rgba(255, 99, 99, 0.45);
  background: rgba(255, 99, 99, 0.14);
}


/* Plan / interval urgency (shared status scale) */
.status-overdue { color: #ffb4b4; background: rgba(255, 99, 99, 0.18); }
.status-warning { color: #ffd49a; background: rgba(255, 170, 60, 0.18); }
.record-row.row-overdue { border-left: 3px solid #ff6d7a; padding-left: 13px; }
.record-row.row-warning { border-left: 3px solid #ffbe5c; padding-left: 13px; }

/* Calendar status legend */
.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 4px 0; }
.calendar-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.calendar-legend .legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.legend-overdue { background: rgba(255, 109, 122, 0.92); }
.legend-soon { background: rgba(255, 190, 92, 0.92); }
.legend-planned { background: rgba(109, 179, 255, 0.88); }
.legend-done { background: rgba(83, 220, 137, 0.9); }


/* Form layer pass (design review): dark-themed native controls + checkbox rows */
.field input,
.field select,
.field textarea {
  color-scheme: dark;
  accent-color: var(--accent, #38bdf8);
}

/* Checkboxes/radios: natural size, anchored left of their label */
.field input[type="checkbox"],
.field input[type="radio"],
.chip-row input[type="checkbox"],
.chip-row input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent, #38bdf8);
}
.field > .chip-row,
label.chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.field > .chip-row > span,
label.chip-row > span { flex: 1 1 auto; min-width: 0; }

/* Custom select chevron to replace the OS one */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4" fill="none" stroke="%238aa0b6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}
.field select[multiple] {
  background-image: none;
  padding: 6px;
  min-height: 150px;
}
.field select[multiple] option {
  padding: 7px 9px;
  border-radius: 8px;
}

/* Styled file picker button */
.field input[type="file"] {
  width: 100%;
  color: var(--muted);
}
.field input[type="file"]::file-selector-button {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 14px;
  margin-right: 12px;
  font: inherit;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover {
  border-color: rgba(0, 209, 255, 0.4);
}


/* Promoted value on list rows (Parts etc.) */
.record-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  white-space: nowrap;
  margin-left: auto;
  padding: 0 14px;
  align-self: center;
}
.record-meta-quiet .meta-q {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}
.record-meta-quiet .meta-q + .meta-q::before {
  content: "· ";
  opacity: 0.6;
}


/* Parts: dim installed parts in the car view; tappable linked-part names */
.record-row.installed-part { opacity: 0.55; }
.record-meta-quiet a.part-link { color: var(--accent, #38bdf8); text-decoration: none; }
.record-meta-quiet a.part-link:hover { text-decoration: underline; }