:root {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel-2: #f9fafb;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --good: #087f5b;
  --good-bg: #ecfdf5;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --bad: #b91c1c;
  --bad-bg: #fef2f2;
  --sidebar: #111827;
  --sidebar-text: #e5e7eb;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(17,24,39,.06);
  --tap: 44px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.compact { margin: .15rem 0 0; font-size: .88rem; }
.top-gap { margin-top: 1rem; }
.mobile-only { display: none; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0,1fr); grid-template-rows: 72px minmax(0,1fr); grid-template-areas: "top top" "side main"; }
.topbar { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem,3vw,2rem); background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand-wrap { display: flex; align-items: center; gap: .7rem; }
.topbar h1 { font-size: 1.15rem; margin: 0; }
.vehicle-picker { display: flex; align-items: center; gap: .65rem; }
.vehicle-picker-stack { display: grid; gap: .12rem; }
.vehicle-odometer-badge { color: var(--muted); font-size: .72rem; text-align: right; font-variant-numeric: tabular-nums; }
.vehicle-picker label { color: var(--muted); font-size: .85rem; }
.vehicle-picker select { min-width: min(280px, 45vw); }
.sidebar { grid-area: side; background: var(--sidebar); color: var(--sidebar-text); padding: 1rem .75rem; display: flex; flex-direction: column; justify-content: space-between; }
.sidebar nav { display: grid; gap: .3rem; }
.nav-btn { min-height: var(--tap); border: 0; border-radius: 10px; padding: .65rem .8rem; background: transparent; color: inherit; text-align: left; display: flex; gap: .7rem; align-items: center; }
.nav-btn:hover, .nav-btn.active { background: rgba(255,255,255,.1); }
.nav-btn.active { color: #fff; font-weight: 650; }
.sidebar-footer { color: #9ca3af; font-size: .83rem; display: flex; align-items: center; gap: .5rem; padding: .7rem; }
.status-dot { color: #10b981; }
.content { grid-area: main; padding: clamp(1rem, 3vw, 2rem); min-width: 0; }
.view { display: none; max-width: 1500px; margin: 0 auto; }
.view.active { display: block; }
.view-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
h2, h3, h4 { margin-top: 0; }
h2 { margin-bottom: .15rem; font-size: clamp(1.45rem, 2vw, 2rem); }
h3 { margin-bottom: .6rem; font-size: 1.05rem; }
h4 { margin-bottom: .4rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem,2vw,1.4rem); box-shadow: var(--shadow); }
.panel-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading { margin-bottom: 1rem; }
.section-heading.small { align-items: center; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.stat-card .label { color: var(--muted); font-size: .82rem; }
.stat-card .value { display: block; font-size: clamp(1.2rem,2vw,1.7rem); font-weight: 730; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.chart-panel.wide { grid-column: 1 / -1; }
.chart-panel canvas { width: 100%; height: 280px; display: block; }
.two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.form-panel { max-width: 1100px; }
.form-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.entry-top-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.field { display: grid; gap: .35rem; min-width: 0; }
.field > span { font-weight: 620; font-size: .88rem; }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea, select, input, textarea { width: 100%; min-height: var(--tap); border: 1px solid #d1d5db; border-radius: 9px; background: #fff; color: var(--text); padding: .62rem .7rem; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(37,99,235,.14); border-color: var(--primary); }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; }
.input-suffix { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; }
.input-suffix input { border-radius: 9px 0 0 9px; }
.input-suffix span { display: grid; place-items: center; border: 1px solid #d1d5db; border-left: 0; border-radius: 0 9px 9px 0; background: var(--panel-2); padding: 0 .7rem; color: var(--muted); white-space: nowrap; }
.interval-input { display: grid; grid-template-columns: minmax(90px,.65fr) minmax(130px,1fr); gap: .45rem; }
.check-field { min-height: var(--tap); display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.check-field input { width: 20px; height: 20px; flex: 0 0 auto; }
.check-field span { display: grid; }
.check-field small { color: var(--muted); }
.dynamic-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.item-rows { display: grid; gap: .75rem; }
.item-row { display: grid; grid-template-columns: 1.1fr 1.4fr .6fr .65fr .8fr .8fr auto; gap: .55rem; align-items: end; padding: .8rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; }
.item-row .mini-field { display: grid; gap: .25rem; }
.item-row .mini-field > span { font-size: .72rem; color: var(--muted); }
.item-row .line-total { min-height: var(--tap); display: flex; align-items: center; font-variant-numeric: tabular-nums; font-weight: 650; }
.remove-btn, .icon-btn { min-width: var(--tap); min-height: var(--tap); border: 0; border-radius: 9px; background: #f3f4f6; }
.remove-btn:hover { background: var(--bad-bg); color: var(--bad); }
.failure-rows { display: grid; gap: .55rem; }
.failure-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; }
.receipt-status, .field-status, .status-banner { padding: .7rem .8rem; border-radius: 9px; margin-top: .75rem; border: 1px solid var(--line); background: var(--panel-2); }
.neutral { color: var(--muted); }
.good { color: var(--good); background: var(--good-bg); border-color: #a7f3d0; }
.warn { color: var(--warn); background: var(--warn-bg); border-color: #fde68a; }
.bad { color: var(--bad); background: var(--bad-bg); border-color: #fecaca; }
.adjustment-box, .reminder-inline { margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; padding: .8rem; background: var(--panel-2); }
summary { cursor: pointer; font-weight: 650; }
.form-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; margin-top: 1.2rem; }
.btn { min-height: var(--tap); border: 1px solid transparent; border-radius: 9px; padding: .62rem .95rem; font-weight: 650; }
.btn.small { min-height: 36px; padding: .4rem .65rem; font-size: .85rem; }
.btn.large { padding-inline: 1.4rem; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.secondary { background: #e5e7eb; color: var(--text); }
.btn.ghost { background: transparent; border-color: #d1d5db; color: var(--text); }
.btn.danger { background: var(--bad); color: #fff; }
.link-btn { border: 0; background: transparent; color: var(--primary); padding: .2rem; }
.alert { padding: .8rem 1rem; border-radius: 9px; margin-top: 1rem; }
.alert.error { background: var(--bad-bg); color: var(--bad); border: 1px solid #fecaca; }
.filter-bar { display: grid; grid-template-columns: minmax(220px,2fr) repeat(2,minmax(150px,1fr)); gap: .8rem; margin-bottom: 1rem; }
.timeline-list { display: grid; gap: .75rem; }
.timeline-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 1rem; align-items: start; }
.timeline-date { font-variant-numeric: tabular-nums; }
.timeline-date strong { display: block; }
.timeline-main h3 { margin-bottom: .2rem; }
.meta-row { color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .88rem; }
.item-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.chip { background: #eef2ff; color: #3730a3; border-radius: 999px; padding: .28rem .55rem; font-size: .78rem; }
.timeline-actions { display: flex; gap: .4rem; }
.money { font-variant-numeric: tabular-nums; font-weight: 700; }
.reminder-grid, .vehicle-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1rem; }
.reminder-card, .vehicle-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.reminder-card.due { border-color: #fca5a5; }
.reminder-card .due-label { display: inline-flex; padding: .2rem .5rem; border-radius: 999px; font-size: .75rem; background: var(--bad-bg); color: var(--bad); }
.reminder-progress { display: grid; gap: .35rem; margin-top: .7rem; color: var(--muted); }
.card-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.category-layout { align-items: start; }
.category-group { margin-bottom: 1rem; }
.category-list { display: grid; gap: .45rem; }
.category-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .65rem .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.category-row.archived { opacity: .55; }
.empty-state { color: var(--muted); text-align: center; padding: 2rem 1rem; }
.mini-list { display: grid; gap: .5rem; }
.mini-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.mini-row:last-child { border-bottom: 0; }
.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .6rem; width: min(380px, calc(100vw - 2rem)); }
.toast { background: #111827; color: #fff; padding: .8rem 1rem; border-radius: 10px; box-shadow: 0 12px 35px rgba(0,0,0,.2); animation: toastIn .2s ease-out; }
.toast.error { background: #7f1d1d; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: grid; place-items: center; z-index: 200; padding: 1rem; }
.modal { width: min(460px,100%); background: var(--panel); border-radius: var(--radius); padding: 1.3rem; box-shadow: 0 20px 60px rgba(0,0,0,.25); }

@media (max-width: 1050px) {
  .item-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .item-row .remove-btn { grid-column: 4; }
}
@media (max-width: 820px) {
  .mobile-only { display: inline-grid; place-items: center; }
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "top" "main"; grid-template-rows: 72px minmax(0,1fr); }
  .sidebar { position: fixed; z-index: 50; top: 72px; bottom: 0; left: 0; width: min(280px,85vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 10px 0 30px rgba(0,0,0,.18); }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 1rem; }
  .two-col, .chart-grid { grid-template-columns: 1fr; }
  .chart-panel.wide { grid-column: auto; }
  .form-grid, .entry-top-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .timeline-card { grid-template-columns: 1fr auto; }
  .timeline-date { grid-column: 1 / -1; display: flex; gap: .6rem; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-bar .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .topbar { padding-inline: .7rem; }
  .brand-wrap .compact { display: none; }
  .topbar h1 { font-size: 1rem; }
  .vehicle-picker label { display: none; }
  .vehicle-picker select { min-width: 0; max-width: 46vw; }
  .vehicle-odometer-badge { max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .view-heading { align-items: center; }
  .form-grid, .entry-top-grid, .filter-bar { grid-template-columns: 1fr; }
  .span-2, .span-4, .filter-bar .field:first-child { grid-column: auto; }
  .item-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .item-row .remove-btn { grid-column: 2; }
  .timeline-card { grid-template-columns: 1fr; }
  .timeline-actions { justify-content: flex-end; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chart-panel canvas { height: 230px; }
  .form-actions { justify-content: stretch; }
  .form-actions .btn { flex: 1; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 950px) {
  .form-grid, .entry-top-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .span-2 { grid-column: span 2; }
  .content { padding-block: .7rem; }
}

/* v0.3 additions */
@media (min-width: 821px) {
  .sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; align-self: start; }
}
.heading-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.stat-card.overdue { border-color: #fca5a5; background: var(--bad-bg); }
.stat-card.overdue .label, .stat-card.overdue .value { color: var(--bad); }
.stat-sub { display: block; margin-top: .25rem; color: var(--muted); font-size: .75rem; }
.soon-label { display: inline-flex; padding: .2rem .5rem; border-radius: 999px; font-size: .75rem; background: var(--warn-bg); color: var(--warn); }
.reminder-card.attention { border-color: #fcd34d; }
.import-preview { max-height: 520px; overflow: auto; }
.import-anomaly { background: var(--warn-bg); padding-inline: .6rem; border-radius: 8px; }

/* v0.3.1 searchable dropdowns */
.search-select-host { min-width: 0; position: relative; }
.search-select { position: relative; min-width: 0; }
.search-select-trigger {
  width: 100%; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between;
  gap: .65rem; padding: .62rem .75rem; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.search-select-trigger:hover { border-color: #9ca3af; }
.search-select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-select-trigger.placeholder .search-select-value { color: var(--muted); }
.search-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select-arrow { flex: 0 0 auto; color: var(--muted); }
.search-select-popover {
  position: absolute; z-index: 120; top: calc(100% + .35rem); left: 0; right: 0; min-width: min(320px, 88vw);
  padding: .45rem; border: 1px solid var(--line); border-radius: 11px; background: var(--panel);
  box-shadow: 0 16px 38px rgba(15,23,42,.18);
}
.search-select-search {
  width: 100%; margin: 0 0 .4rem; min-height: 40px; padding: .55rem .65rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit;
}
.search-select-options { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: .15rem; }
.search-select-option {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .58rem .65rem; border: 0; border-radius: 7px; background: transparent; color: var(--text);
  text-align: left; font: inherit; cursor: pointer;
}
.search-select-option:hover, .search-select-option:focus-visible { background: var(--panel-2); outline: none; }
.search-select-option.selected { background: rgba(37,99,235,.11); color: var(--accent); }
.search-select-option.custom { border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.search-select-option small { color: var(--muted); white-space: nowrap; }
.search-select-empty { padding: .75rem; color: var(--muted); text-align: center; }
.item-row:focus-within { position: relative; z-index: 5; }

@media (max-width: 560px) {
  .search-select-popover { position: fixed; left: .75rem; right: .75rem; top: 18vh; min-width: 0; max-height: 64vh; }
  .search-select-options { max-height: 50vh; }
}

/* v0.4 dashboard, timeline, appearance and combobox refinements */
:root {
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --event-service-bg: #ecfdf5; --event-service-text: #065f46;
  --event-refuel-bg: #eff6ff; --event-refuel-text: #1e3a8a;
  --event-modification-bg: #f5f3ff; --event-modification-text: #5b21b6;
  --event-inspection-bg: #fff7ed; --event-inspection-text: #9a3412;
}
body { font-family: var(--font-family); }
button, input, select, textarea { font-family: var(--font-family); }
.field input, .field select, .field textarea, select, input, textarea { background: var(--panel); }
.three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.dashboard-panel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.dashboard-panel-grid .wide { grid-column:1 / -1; }
.dashboard-editor { margin-bottom:1rem; border-style:dashed; }
.dashboard-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.45rem; }
.compact-choice { min-height:38px; padding:.4rem .55rem; }
.dashboard-drag-handle { display:none; color:var(--muted); float:right; cursor:grab; letter-spacing:-.2rem; }
.dashboard-editing .dashboard-drag-handle { display:inline-block; }
.dashboard-editing > * { outline:2px dashed color-mix(in srgb, var(--primary) 45%, transparent); cursor:grab; }
.dashboard-editing .dragging { opacity:.45; }

.timeline-year { display:grid; gap:.65rem; }
.timeline-year-header { width:100%; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:11px; padding:.8rem 1rem; display:flex; align-items:center; justify-content:space-between; text-align:left; box-shadow:var(--shadow); }
.timeline-year-header span:first-child { display:grid; gap:.15rem; }
.timeline-year-header small { color:var(--muted); font-weight:400; }
.timeline-year-arrow { font-size:1.2rem; color:var(--muted); }
.timeline-year-events { display:grid; gap:.75rem; }
.timeline-list { gap:1rem; }

.event-themed.event-service { background:var(--event-service-bg); color:var(--event-service-text); }
.event-themed.event-refuel { background:var(--event-refuel-bg); color:var(--event-refuel-text); }
.event-themed.event-modification { background:var(--event-modification-bg); color:var(--event-modification-text); }
.event-themed.event-inspection { background:var(--event-inspection-bg); color:var(--event-inspection-text); }
.event-themed .muted, .event-themed .meta-row { color:inherit; opacity:.76; }
.event-themed .money { color:inherit; }
.mini-row.event-themed { border:1px solid color-mix(in srgb,currentColor 18%,transparent); border-radius:9px; padding:.65rem .7rem; }

.appearance-type-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.appearance-type-card { border:1px solid var(--line); background:var(--panel-2); border-radius:11px; padding:.8rem; }
.appearance-type-card input[type="color"], .field input[type="color"] { padding:.2rem; min-height:44px; }

/* Searchable combobox: visible text input + explicit arrow, one click opens full list. */
.search-select-control { display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:stretch; }
.search-select-input { min-width:0; border-radius:9px 0 0 9px !important; border-right:0 !important; }
.search-select-arrow-btn { border:1px solid #d1d5db; border-radius:0 9px 9px 0; background:var(--panel-2); color:var(--muted); font-size:1rem; }
.search-select-arrow-btn:hover { color:var(--text); background:color-mix(in srgb,var(--panel-2) 70%,var(--primary) 8%); }
.search-select-input[aria-expanded="true"] { border-color:var(--primary); outline:3px solid rgba(37,99,235,.14); }
.search-select-popover { top:calc(100% + .25rem); }

@media (max-width:1050px) {
  .three-col { grid-template-columns:1fr 1fr; }
  .appearance-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .dashboard-panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Dashboard panel sizes are written inline by app.js.
   * On a one-column mobile layout, force every panel back
   * into the single available column so span-2 panels do not
   * create an implicit second grid column.
   */
  .dashboard-panel-grid > [data-panel-id] {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
  }

  .dashboard-panel-grid .wide {
    grid-column: 1 / -1 !important;
  }

  .dashboard-editor-grid,
  .three-col {
    grid-template-columns: 1fr;
  }
}
@media (max-width:560px) {
  .appearance-type-grid { grid-template-columns:1fr; }
  .timeline-year-header { padding:.7rem .8rem; }
}

/* v0.5 authentication, Data Lab and resizable dashboard */
.auth-gate { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1rem; background:linear-gradient(135deg,#0f172a,#1e3a8a); }
.auth-card { width:min(460px,100%); background:var(--panel,#fff); color:var(--text,#111827); border-radius:16px; padding:1.4rem; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.auth-card form { display:grid; gap:.8rem; }
.auth-locked { filter:blur(3px); pointer-events:none; user-select:none; }
.topbar-actions { display:flex; gap:1rem; align-items:center; }
.auth-user-box { display:flex; gap:.55rem; align-items:center; }
.datalab-layout { align-items:start; }
#dataLabChart { width:100%; height:360px; display:block; }
.preset-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem; align-items:center; }
.dashboard-size-controls { display:none; float:right; gap:.2rem; margin-left:.5rem; }
.dashboard-editing .dashboard-size-controls { display:inline-flex; }
.dashboard-size-controls button { min-width:28px; min-height:28px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2); color:var(--text); }
.stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat-card { min-width:0; }
.dashboard-panel-grid > [data-panel-id] { min-width:0; }
.user-card .field { margin-top:.6rem; }
.eta-line { color:var(--primary); font-weight:650; }
@media (max-width: 1100px) { .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat-card { grid-column:span min(var(--widget-span,1),2) !important; } }
@media (max-width: 700px) { .topbar-actions { align-items:stretch; } .auth-user-box { display:none; } .stats-grid { grid-template-columns:1fr; } .stat-card { grid-column:1 !important; } #dataLabChart { height:280px; } }