/* ============================================================
   Kontrak Auto — Beta gating styles
   Layers on top of theme.css + app.css (uses Kontrak CSS vars).
   ============================================================ */

.auto-beta-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background:
    radial-gradient(ellipse at top, rgba(16, 185, 129, 0.08), transparent 60%),
    var(--bg-app, #0a0a0a);
}

.auto-beta-page .brand-header {
  position: absolute;
  top: 24px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-1, #fff);
  font-size: 0.95rem;
}

.auto-beta-page .brand-header .brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-green, #10b981);
  box-shadow: 0 0 12px var(--accent-green, #10b981);
}

.auto-beta-page .brand-header .brand-auto {
  color: var(--accent-green, #10b981);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.auto-beta-page .card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-card, #111);
  border: 1px solid var(--border-2, #222);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.auto-beta-page .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--badge-green-bg, rgba(16, 185, 129, 0.13));
  color: var(--badge-green-fg, #4caf50);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.auto-beta-page h1 {
  font-size: 1.85rem;
  color: var(--text-1, #fff);
  margin: 0 0 12px 0;
  font-weight: 700;
  line-height: 1.2;
}

.auto-beta-page .lead {
  color: var(--text-2, #ccc);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 0 28px 0;
}

.auto-beta-page .state-block {
  border-top: 1px solid var(--border-2, #222);
  padding-top: 22px;
  margin-top: 6px;
}

.auto-beta-page .state-block p {
  color: var(--text-2, #ccc);
  margin: 0 0 14px 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.auto-beta-page .state-block .muted {
  color: var(--text-3, #999);
  font-size: 0.85rem;
}

.auto-beta-page .signed-in-as {
  font-size: 0.85rem;
  color: var(--text-3, #999);
  margin-bottom: 12px;
}

.auto-beta-page .signed-in-as strong {
  color: var(--text-1, #fff);
  font-weight: 600;
}

.auto-beta-page .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.auto-beta-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
}

.auto-beta-page .btn:active { transform: translateY(1px); }

.auto-beta-page .btn-primary {
  background: var(--accent-green, #10b981);
  color: #052e22;
  border-color: var(--accent-green, #10b981);
}

.auto-beta-page .btn-primary:hover {
  background: #0ea271;
  border-color: #0ea271;
}

.auto-beta-page .btn-secondary {
  background: var(--btn-secondary-bg, #1a1a1a);
  color: var(--btn-secondary-fg, #fff);
  border-color: var(--btn-secondary-border, #333);
}

.auto-beta-page .btn-secondary:hover {
  background: #222;
}

.auto-beta-page .footnote {
  margin-top: 28px;
  font-size: 0.78rem;
  color: var(--text-4, #666);
  text-align: center;
}

.auto-beta-page .footnote a {
  color: var(--text-3, #999);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-4, #666);
}

.auto-beta-page .footnote a:hover { color: var(--accent-green, #10b981); }

/* ---- Sidebar "Auto Beta" nav item highlight ---- */
.sidebar a.nav-auto-beta {
  position: relative;
}
.sidebar a.nav-auto-beta .beta-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--badge-green-bg, rgba(16, 185, 129, 0.13));
  color: var(--badge-green-fg, #4caf50);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Small screens */
@media (max-width: 520px) {
  .auto-beta-page .card { padding: 28px 22px; }
  .auto-beta-page h1 { font-size: 1.5rem; }
  .auto-beta-page .brand-header { left: 18px; top: 18px; font-size: 0.85rem; }
}

/* ============================================================
   Auto App Shell — sidebar, topbar, layout, common UI
   ============================================================ */

.auto-app {
  display: flex;
  min-height: 100vh;
  background: var(--bg-app, #0a0a0a);
  color: var(--text-1, #fff);
}

.auto-app .auto-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg, #111);
  border-right: 1px solid var(--sidebar-border, #222);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.auto-app .auto-sidebar .auto-brand {
  padding: 22px 20px 18px 20px;
  border-bottom: 1px solid var(--border-2, #222);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 1rem;
}

.auto-app .auto-sidebar .auto-brand .brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-green, #10b981);
  box-shadow: 0 0 12px var(--accent-green, #10b981);
}

.auto-app .auto-sidebar .auto-brand .brand-auto {
  color: var(--accent-green, #10b981);
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-left: 2px;
}

.auto-app .auto-sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.auto-app .auto-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--sidebar-text, #999);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 2px;
  transition: background 0.12s ease, color 0.12s ease;
}

.auto-app .auto-sidebar nav a:hover {
  color: var(--sidebar-text-active, #fff);
  background: var(--bg-hover, #161616);
}

.auto-app .auto-sidebar nav a.active {
  color: var(--sidebar-text-active, #fff);
  background: var(--sidebar-bg-active, #1a1a1a);
  font-weight: 600;
}

.auto-app .auto-sidebar nav a .nav-icon {
  width: 18px;
  display: inline-flex;
  justify-content: center;
}

.auto-app .auto-sidebar .auto-user {
  padding: 14px 16px;
  border-top: 1px solid var(--border-2, #222);
  font-size: 0.82rem;
  color: var(--sidebar-user-text, #666);
}

.auto-app .auto-sidebar .auto-user .user-email {
  color: var(--text-2, #ccc);
  word-break: break-all;
  margin-bottom: 8px;
}

.auto-app .auto-sidebar .auto-user .logout-link {
  background: none;
  border: 1px solid var(--border-3, #333);
  color: var(--text-3, #999);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
}

.auto-app .auto-sidebar .auto-user .logout-link:hover {
  background: var(--bg-hover, #161616);
  color: var(--text-1, #fff);
}

.auto-app .auto-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.auto-app .auto-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border-2, #222);
  background: var(--bg-1, #111);
  gap: 16px;
}

.auto-app .auto-topbar .page-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.auto-app .auto-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auto-app .beta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--badge-green-bg, rgba(16, 185, 129, 0.13));
  color: var(--badge-green-fg, #4caf50);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auto-app .auto-content {
  flex: 1;
  padding: 24px 28px 48px;
  overflow-y: auto;
}

/* Beta banner above content */
.auto-beta-banner {
  background: var(--badge-green-bg, rgba(16, 185, 129, 0.13));
  color: var(--badge-green-fg, #4caf50);
  border-bottom: 1px solid rgba(16, 185, 129, 0.25);
  text-align: center;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.auto-beta-banner strong { color: var(--accent-green, #10b981); }

/* Offline indicator */
.auto-offline-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-3, #999);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-3, #333);
}
.auto-offline-indicator.online    { color: var(--accent-green, #10b981); border-color: rgba(16,185,129,0.4); }
.auto-offline-indicator.offline   { color: var(--accent-amber, #f59e0b); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
.auto-offline-indicator .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}

/* Stats cards (dashboard) */
.auto-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.auto-stat-card {
  background: var(--bg-card, #111);
  border: 1px solid var(--border-2, #222);
  border-radius: 12px;
  padding: 18px 18px;
}
.auto-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-3, #999);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.auto-stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-1, #fff);
}
.auto-stat-card .stat-sub {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-4, #666);
}

/* Section cards */
.auto-section {
  background: var(--bg-card, #111);
  border: 1px solid var(--border-2, #222);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.auto-section .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.auto-section .section-head h2 {
  font-size: 1rem;
  margin: 0;
  color: var(--text-1, #fff);
}
.auto-section .section-head .section-sub {
  font-size: 0.82rem;
  color: var(--text-3, #999);
}

/* Tables */
.auto-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.auto-table th, .auto-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-2, #222);
  vertical-align: top;
}
.auto-table th {
  color: var(--text-3, #999);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-2, #1a1a1a);
}
.auto-table tbody tr:hover { background: var(--bg-hover, #161616); }
.auto-table tbody tr.clickable { cursor: pointer; }
.auto-table td .row-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--text-4, #666);
  margin-top: 2px;
}
.auto-table .col-actions { text-align: right; white-space: nowrap; }
.auto-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Empty state */
.auto-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-3, #999);
}
.auto-empty .empty-title {
  font-size: 1.05rem;
  color: var(--text-1, #fff);
  margin-bottom: 6px;
}
.auto-empty .empty-sub { font-size: 0.9rem; }

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.status-badge.status-draft             { background: rgba(120,120,120,0.13); color: #aaa; border-color: rgba(120,120,120,0.3); }
.status-badge.status-awaiting_approval { background: rgba(245,158,11,0.13); color: #f59e0b; border-color: rgba(245,158,11,0.35); }
.status-badge.status-approved          { background: rgba(59,130,246,0.13); color: #3b82f6; border-color: rgba(59,130,246,0.35); }
.status-badge.status-in_progress       { background: rgba(139,92,246,0.13); color: #a78bfa; border-color: rgba(139,92,246,0.35); }
.status-badge.status-ready             { background: rgba(6,182,212,0.13); color: #06b6d4; border-color: rgba(6,182,212,0.35); }
.status-badge.status-paid              { background: rgba(16,185,129,0.13); color: #10b981; border-color: rgba(16,185,129,0.35); }
.status-badge.status-unpaid            { background: rgba(239,68,68,0.13); color: #ef4444; border-color: rgba(239,68,68,0.35); }
.status-badge.status-partial           { background: rgba(245,158,11,0.13); color: #f59e0b; border-color: rgba(245,158,11,0.35); }
.status-badge.status-void              { background: rgba(80,80,80,0.13); color: #777; border-color: rgba(80,80,80,0.35); }

/* Forms */
.auto-form { display: grid; gap: 14px; }
.auto-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auto-form .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.auto-form label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-3, #999);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.auto-form input,
.auto-form select,
.auto-form textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input, #1a1a1a);
  border: 1px solid var(--border-3, #333);
  border-radius: 8px;
  color: var(--text-1, #fff);
  font-size: 0.95rem;
  font-family: inherit;
}
.auto-form input:focus,
.auto-form select:focus,
.auto-form textarea:focus {
  outline: none;
  border-color: var(--accent-green, #10b981);
}
.auto-form textarea { resize: vertical; min-height: 70px; }
.auto-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* Modal */
.auto-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.auto-modal-backdrop.open { display: flex; }
.auto-modal {
  background: var(--bg-card, #111);
  border: 1px solid var(--border-3, #333);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.auto-modal.wide { max-width: 880px; }
.auto-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-2, #222);
}
.auto-modal-header h3 { margin: 0; font-size: 1.05rem; }
.auto-modal-header .close-btn {
  background: none;
  border: none;
  color: var(--text-3, #999);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.auto-modal-body { padding: 22px; }
.auto-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-2, #222);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Buttons (auto-app scope; coming-soon already has its own scoped buttons) */
.auto-app .btn,
.auto-modal .btn,
.auto-form .btn,
.auto-app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
  font-family: inherit;
}
.auto-app .btn-primary,
.auto-modal .btn-primary,
.auto-form .btn-primary,
.auto-app-btn.primary {
  background: var(--accent-green, #10b981);
  color: #052e22;
  border-color: var(--accent-green, #10b981);
}
.auto-app .btn-primary:hover,
.auto-modal .btn-primary:hover,
.auto-form .btn-primary:hover { background: #0ea271; border-color: #0ea271; }

.auto-app .btn-secondary,
.auto-modal .btn-secondary,
.auto-form .btn-secondary {
  background: var(--btn-secondary-bg, #1a1a1a);
  color: var(--btn-secondary-fg, #fff);
  border-color: var(--btn-secondary-border, #333);
}
.auto-app .btn-secondary:hover,
.auto-modal .btn-secondary:hover,
.auto-form .btn-secondary:hover { background: #222; }

.auto-app .btn-danger,
.auto-modal .btn-danger {
  background: var(--btn-danger-bg, #3a1a1a);
  color: var(--btn-danger-fg, #ff6b6b);
  border-color: var(--btn-danger-border, #5a2a2a);
}
.auto-app .btn-danger:hover { background: #4a1a1a; }

.auto-app .btn-sm { padding: 6px 10px; font-size: 0.82rem; }

/* Search bar */
.auto-search {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.auto-search input,
.auto-search select {
  padding: 9px 12px;
  background: var(--bg-input, #1a1a1a);
  border: 1px solid var(--border-3, #333);
  border-radius: 8px;
  color: var(--text-1, #fff);
  font-size: 0.92rem;
  min-width: 220px;
  font-family: inherit;
}
.auto-search input:focus,
.auto-search select:focus { outline: none; border-color: var(--accent-green, #10b981); }
.auto-search .grow { flex: 1; min-width: 240px; }

/* Detail header (e.g. customer/vehicle detail panels) */
.auto-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.auto-detail-head h2 { margin: 0 0 4px 0; font-size: 1.2rem; }
.auto-detail-head .meta { font-size: 0.85rem; color: var(--text-3, #999); }

/* Estimate line editor table */
.estimate-lines-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.estimate-lines-table th, .estimate-lines-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-2, #222);
  vertical-align: middle;
}
.estimate-lines-table th {
  font-size: 0.7rem;
  color: var(--text-3, #999);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}
.estimate-lines-table input,
.estimate-lines-table select {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-input, #1a1a1a);
  border: 1px solid var(--border-2, #222);
  border-radius: 6px;
  color: var(--text-1, #fff);
  font-size: 0.85rem;
  font-family: inherit;
}
.estimate-lines-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.estimate-lines-table .col-narrow { width: 80px; }
.estimate-lines-table .col-action { width: 36px; text-align: right; }

.totals-block {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  max-width: 360px;
  margin-left: auto;
  font-size: 0.92rem;
}
.totals-block .label { color: var(--text-3, #999); }
.totals-block .val   { color: var(--text-1, #fff); text-align: right; font-variant-numeric: tabular-nums; }
.totals-block .grand-label { color: var(--text-1, #fff); font-weight: 700; padding-top: 10px; border-top: 1px solid var(--border-2, #222); }
.totals-block .grand-val   { color: var(--accent-green, #10b981); font-weight: 700; padding-top: 10px; border-top: 1px solid var(--border-2, #222); }

/* Toast */
.auto-toast-wrap { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; }
.auto-toast {
  background: var(--bg-card, #111);
  border: 1px solid var(--border-3, #333);
  border-left: 3px solid var(--accent-green, #10b981);
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-1, #fff);
  font-size: 0.88rem;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: autoToastIn 0.18s ease;
}
.auto-toast.error { border-left-color: var(--accent-red, #ef4444); }
@keyframes autoToastIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Mobile */
@media (max-width: 880px) {
  .auto-app { flex-direction: column; }
  .auto-app .auto-sidebar { position: relative; height: auto; width: 100%; }
  .auto-app .auto-sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
  .auto-app .auto-sidebar nav a { flex: 0 0 auto; }
  .auto-app .auto-sidebar .auto-user { display: none; }
  .auto-form .grid-2,
  .auto-form .grid-3 { grid-template-columns: 1fr; }
}

/* =========================================================
   Shop document (estimate / invoice as a real document)
   ========================================================= */
.shop-document {
  background: var(--bg-card, #111);
  border: 1px solid var(--border-2, #222);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 12px 32px rgba(0,0,0,0.25);
  position: relative;
}
.shop-document + .shop-document { margin-top: 18px; }
.shop-document .doc-watermark { display: none; }

.shop-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-2, #222);
}
.shop-letterhead .brand { display: flex; align-items: center; gap: 14px; }
.shop-letterhead .brand-mark {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(16,185,129,0.05));
  border: 1px solid rgba(16,185,129,0.45);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
  color: var(--accent-green, #10b981);
  letter-spacing: 0.04em;
}
.shop-letterhead .brand-text .shop-name {
  font-size: 1.15rem; font-weight: 700; color: var(--text-1, #fff);
  letter-spacing: 0.01em; margin: 0;
}
.shop-letterhead .brand-text .shop-meta {
  font-size: 0.78rem; color: var(--text-3, #999); margin-top: 3px; line-height: 1.45;
}
.shop-letterhead .doc-title-block { text-align: right; }
.shop-letterhead .doc-kind {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--text-3, #999);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.shop-letterhead .doc-number {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-1, #fff);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.shop-letterhead .doc-status-row {
  margin-top: 8px;
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}

.doc-parties {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-2, #222);
}
.doc-parties .party {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border-2, #222);
  border-radius: 10px;
  padding: 12px 14px;
}
.doc-parties .party .party-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3, #999);
  margin-bottom: 6px;
}
.doc-parties .party .party-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1, #fff);
  margin-bottom: 2px;
}
.doc-parties .party .party-line {
  font-size: 0.82rem;
  color: var(--text-2, #bbb);
  line-height: 1.5;
}

.doc-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-2, #222);
}
.doc-meta-strip .meta-cell .label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3, #999);
  margin-bottom: 4px;
}
.doc-meta-strip .meta-cell .value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-1, #fff);
  font-variant-numeric: tabular-nums;
}

.doc-section-title {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3, #999);
  margin: 18px 0 10px;
}

.line-builder-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px;
}

.doc-lines-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.doc-lines-table thead th {
  font-size: 0.66rem;
  color: var(--text-3, #999);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-2, #222);
  background: rgba(255,255,255,0.02);
}
.doc-lines-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.doc-lines-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.doc-lines-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-lines-table .line-type-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-3, #333);
  color: var(--text-2, #bbb);
}
.doc-lines-table .line-type-pill.t-labor       { color: #a78bfa; border-color: rgba(167,139,250,0.4); background: rgba(167,139,250,0.08); }
.doc-lines-table .line-type-pill.t-part        { color: #60a5fa; border-color: rgba(96,165,250,0.4);  background: rgba(96,165,250,0.08); }
.doc-lines-table .line-type-pill.t-fee         { color: #f59e0b; border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.08); }
.doc-lines-table .line-type-pill.t-shop_supply { color: #fcd34d; border-color: rgba(252,211,77,0.4);  background: rgba(252,211,77,0.08); }
.doc-lines-table .line-desc-main { color: var(--text-1, #fff); font-weight: 500; }
.doc-lines-table .line-desc-sub  { color: var(--text-3, #999); font-size: 0.75rem; margin-top: 2px; }

.doc-lines-table.editable input,
.doc-lines-table.editable select {
  width: 100%;
  padding: 7px 9px;
  background: var(--bg-input, #1a1a1a);
  border: 1px solid var(--border-2, #222);
  border-radius: 6px;
  color: var(--text-1, #fff);
  font-size: 0.85rem;
  font-family: inherit;
}
.doc-lines-table.editable input:focus,
.doc-lines-table.editable select:focus {
  outline: none;
  border-color: var(--accent-green, #10b981);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.18);
}
.doc-lines-table.editable .col-narrow { width: 90px; }
.doc-lines-table.editable .col-check  { width: 60px; text-align: center; }
.doc-lines-table.editable .col-action { width: 36px; text-align: right; }

.doc-totals-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.doc-totals-card {
  min-width: 320px;
  max-width: 380px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-2, #222);
  border-radius: 12px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  font-size: 0.9rem;
}
.doc-totals-card .label { color: var(--text-3, #999); }
.doc-totals-card .val   { color: var(--text-1, #fff); text-align: right; font-variant-numeric: tabular-nums; }
.doc-totals-card .divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border-2, #222);
  margin: 4px 0;
}
.doc-totals-card .grand-label { color: var(--text-1, #fff); font-weight: 700; font-size: 1rem; }
.doc-totals-card .grand-val {
  color: var(--accent-green, #10b981);
  font-weight: 700; font-size: 1.15rem;
  text-align: right; font-variant-numeric: tabular-nums;
}
.doc-totals-card .paid-val   { color: #10b981; text-align: right; font-variant-numeric: tabular-nums; }
.doc-totals-card .due-label  { color: var(--text-1, #fff); font-weight: 600; }
.doc-totals-card .due-val {
  color: #f59e0b;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.doc-totals-card.paid-in-full .due-val { color: #10b981; }

.doc-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-2, #222);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.doc-footer .doc-fineprint {
  font-size: 0.78rem;
  color: var(--text-3, #888);
  max-width: 540px;
  line-height: 1.5;
}
.doc-footer .doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.payments-list {
  border: 1px solid var(--border-2, #222);
  border-radius: 10px;
  overflow: hidden;
}
.payments-list .pay-row {
  display: grid;
  grid-template-columns: 110px 100px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2, #222);
  font-size: 0.85rem;
}
.payments-list .pay-row:last-child { border-bottom: none; }
.payments-list .pay-row .pay-date { color: var(--text-2, #bbb); font-variant-numeric: tabular-nums; }
.payments-list .pay-row .pay-method {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-3, #333);
  color: var(--text-2, #bbb);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.payments-list .pay-row .pay-ref    { color: var(--text-3, #999); font-size: 0.8rem; }
.payments-list .pay-row .pay-amount { color: #10b981; font-weight: 600; font-variant-numeric: tabular-nums; }

.shop-document .auto-empty {
  padding: 28px 18px;
  background: rgba(255,255,255,0.015);
  border: 1px dashed var(--border-2, #222);
  border-radius: 10px;
  text-align: center;
}

.ro-picker {
  display: flex; gap: 10px; align-items: center;
  background: var(--bg-card, #111);
  border: 1px solid var(--border-2, #222);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 14px;
}
.ro-picker label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3, #999);
  padding-left: 4px;
}
.ro-picker select {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-1, #fff);
  font-size: 0.92rem;
  padding: 6px 4px;
  outline: none;
}

@media (max-width: 880px) {
  .shop-document { padding: 18px; }
  .shop-letterhead { flex-direction: column; align-items: flex-start; }
  .shop-letterhead .doc-title-block { text-align: left; }
  .shop-letterhead .doc-status-row { justify-content: flex-start; }
  .doc-parties { grid-template-columns: 1fr; }
  .doc-meta-strip { grid-template-columns: 1fr 1fr; }
  .doc-totals-card { min-width: 0; width: 100%; max-width: none; }
  .payments-list .pay-row { grid-template-columns: 1fr 1fr; }
  .payments-list .pay-row .pay-ref { grid-column: 1 / -1; }
}


/* =========================================================
   Print target — populated on demand, visible only when printing
   ========================================================= */
#auto-print-target { display: none; }

@media print {
  @page { size: Letter; margin: 0.4in 0.5in; }
  /* Hide every direct child of body, then reveal only the print target */
  body.auto-printing > * { display: none !important; }
  body.auto-printing > #auto-print-target {
    display: block !important;
    position: static !important;
    width: 100% !important;
    background: #ffffff !important;
    color: #111 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.auto-printing { background: #ffffff !important; color: #111 !important; }

  #auto-print-target .shop-document {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    color: #111 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  #auto-print-target .shop-document * { color: #111 !important; }
  #auto-print-target .doc-watermark,
  #auto-print-target .doc-footer .doc-actions,
  #auto-print-target .auto-modal-footer,
  #auto-print-target .auto-modal-header .close-btn,
  #auto-print-target .line-builder-toolbar,
  #auto-print-target [data-est-add-line],
  #auto-print-target .ro-picker {
    display: none !important;
  }
  #auto-print-target .shop-letterhead,
  #auto-print-target .doc-parties,
  #auto-print-target .doc-meta-strip,
  #auto-print-target .doc-footer,
  #auto-print-target .doc-lines-table thead th,
  #auto-print-target .doc-lines-table tbody td,
  #auto-print-target .doc-totals-card,
  #auto-print-target .doc-totals-card .divider,
  #auto-print-target .payments-list,
  #auto-print-target .payments-list .pay-row,
  #auto-print-target .party {
    border-color: #ddd !important;
    background: transparent !important;
  }
  #auto-print-target .shop-letterhead .brand-mark {
    background: #fff !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
  }
  #auto-print-target .doc-totals-card .grand-val { color: #10b981 !important; }
  #auto-print-target .doc-totals-card .due-val   { color: #b45309 !important; }
  #auto-print-target .doc-totals-card.paid-in-full .due-val { color: #047857 !important; }
  #auto-print-target .status-badge {
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #111 !important;
  }
  #auto-print-target .doc-lines-table .line-type-pill {
    border: 1px solid #aaa !important;
    background: #fff !important;
    color: #333 !important;
  }
  #auto-print-target .payments-list .pay-amount { color: #047857 !important; }
  #auto-print-target a { color: #111 !important; text-decoration: none !important; }
  /* Editable inputs render as plain text on print */
  #auto-print-target .doc-lines-table.editable input,
  #auto-print-target .doc-lines-table.editable select {
    border: none !important;
    background: transparent !important;
    color: #111 !important;
    padding: 2px 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  #auto-print-target .doc-lines-table.editable .col-action {
    display: none !important;
  }
  /* Avoid breaking small repeating blocks across pages, but let the whole document flow */
  #auto-print-target .doc-totals-card,
  #auto-print-target .payments-list .pay-row,
  #auto-print-target .doc-lines-table tr { page-break-inside: avoid; }

  /* Force desktop layouts inside print target so US Letter (720px) doesn't trigger the 880px mobile breakpoint */
  #auto-print-target .shop-letterhead {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-bottom: 12px !important;
  }
  #auto-print-target .shop-letterhead .doc-title-block { text-align: right !important; }
  #auto-print-target .shop-letterhead .doc-status-row { justify-content: flex-end !important; }
  #auto-print-target .doc-parties {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;
    padding: 12px 0 !important;
  }
  #auto-print-target .doc-meta-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    padding: 10px 0 !important;
  }
  #auto-print-target .payments-list .pay-row {
    display: grid !important;
    grid-template-columns: 110px 100px 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* Place totals card to the right; small bottom margin so subsequent sections sit tight */
  #auto-print-target .doc-totals-card {
    margin-left: auto !important;
    margin-bottom: 8px !important;
    max-width: 300px !important;
  }

  /* Tighten vertical rhythm so single-payment invoices fit on one Letter page */
  #auto-print-target .shop-document { padding: 0 !important; }
  #auto-print-target .doc-section-title { margin: 10px 0 6px !important; font-size: 0.7rem !important; }
  #auto-print-target .party { padding: 8px 10px !important; }
  #auto-print-target .doc-lines-table thead th,
  #auto-print-target .doc-lines-table tbody td { padding: 5px 8px !important; font-size: 0.8rem !important; }
  #auto-print-target .doc-totals-card { padding: 8px 12px !important; font-size: 0.85rem !important; }
  #auto-print-target .payments-list .pay-row { padding: 6px 10px !important; }
  #auto-print-target .doc-footer { padding-top: 6px !important; margin-top: 6px !important; font-size: 0.7rem !important; }
  #auto-print-target .doc-footer .doc-fineprint { font-size: 0.7rem !important; line-height: 1.35 !important; }
  #auto-print-target .payments-list { margin-top: 6px !important; }
  #auto-print-target .doc-notes { margin-top: 6px !important; font-size: 0.82rem !important; }
  #auto-print-target .shop-letterhead .doc-number { font-size: 1.2rem !important; }
  #auto-print-target .shop-letterhead .brand-mark { width: 36px !important; height: 36px !important; }
}

/* ============================================================
   Kontrak Auto — Phase 2 styles
   Inspections, approvals, deferred work, comm log, reminders
   ============================================================ */

/* Condition pills (R/Y/G) */
.cond-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border: 1px solid transparent;
}
.cond-green  { background: rgba(16, 185, 129, 0.15); color: #10b981; border-color: rgba(16,185,129,0.4); }
.cond-yellow { background: rgba(234, 179, 8, 0.15);  color: #eab308; border-color: rgba(234,179,8,0.4); }
.cond-red    { background: rgba(239, 68, 68, 0.15);  color: #ef4444; border-color: rgba(239,68,68,0.4); }
.cond-pending{ background: rgba(148,163,184,0.15);   color: #94a3b8; border-color: rgba(148,163,184,0.4); }

/* Approval line statuses */
.aps-PENDING  { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.4); padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; }
.aps-APPROVED { background: rgba(16,185,129,0.15);  color: #10b981; border: 1px solid rgba(16,185,129,0.4);  padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; }
.aps-DECLINED { background: rgba(239,68,68,0.15);   color: #ef4444; border: 1px solid rgba(239,68,68,0.4);   padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; }

/* Inspection editor */
.insp-line {
  display: grid;
  grid-template-columns: 180px 130px 1fr 110px;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-2, #2a2a2a);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--bg-card, #161616);
  align-items: start;
}
.insp-line .label-cell { font-weight: 600; color: var(--text-1, #fff); padding-top: 6px; }
.insp-line .cond-cell  { display: flex; gap: 6px; flex-wrap: wrap; }
.insp-line .cond-cell button { padding: 6px 10px; font-size: 0.78rem; border-radius: 999px; }
.insp-line .cond-cell button.active.cond-green  { background: #10b981; color: #000; border-color: #10b981; }
.insp-line .cond-cell button.active.cond-yellow { background: #eab308; color: #000; border-color: #eab308; }
.insp-line .cond-cell button.active.cond-red    { background: #ef4444; color: #fff; border-color: #ef4444; }
.insp-line .note-cell select,
.insp-line .note-cell textarea { width: 100%; margin-bottom: 6px; min-height: auto; }
.insp-line .note-cell textarea { min-height: 50px; }
.insp-line .actions-cell { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.insp-line .actions-cell .btn { width: 100%; }
.insp-line .photo-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.insp-line .photo-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-2,#2a2a2a); }

@media (max-width: 880px) {
  .insp-line { grid-template-columns: 1fr; }
  .insp-line .actions-cell { flex-direction: row; }
}

/* Inspection summary chips */
.insp-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.insp-summary .sum-chip {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--bg-card, #161616);
  border: 1px solid var(--border-2,#2a2a2a);
  font-size: 0.85rem;
}
.insp-summary .sum-chip strong { font-size: 1.1rem; margin-right: 4px; }

/* Customer view (photo-forward) */
.cust-insp-card { background: var(--bg-card,#161616); border: 1px solid var(--border-2,#2a2a2a); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.cust-insp-card .ci-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cust-insp-card .ci-head .label { font-weight: 700; font-size: 1.05rem; flex: 1; }
.cust-insp-card .ci-note { color: var(--text-2,#cbd5e1); margin-bottom: 8px; }
.cust-insp-card .ci-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 8px; }
.cust-insp-card .ci-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-2,#2a2a2a); }

/* Signature pad */
.sig-pad-wrap { border: 1px dashed var(--border-2,#2a2a2a); border-radius: 8px; padding: 10px; background: #0d0d0d; }
.sig-pad-canvas { display: block; width: 100%; max-width: 480px; height: 140px; background: #0a0a0a; border-radius: 6px; cursor: crosshair; touch-action: none; }
.sig-pad-row { display: flex; gap: 8px; margin-top: 8px; }

/* Approval bar inside estimate row */
.approval-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.approval-controls select { padding: 4px 8px; font-size: 0.8rem; }

/* Reminder badges */
.followup-flag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.7rem; background: rgba(239,68,68,0.15); color: #ef4444; margin-left: 6px; font-weight: 600; }
.followup-flag.warn { background: rgba(234,179,8,0.15); color: #eab308; }
.followup-flag.ok   { background: rgba(148,163,184,0.15); color: #94a3b8; }

/* Comm log */
.comm-row { padding: 10px 12px; border: 1px solid var(--border-2,#2a2a2a); border-radius: 8px; margin-bottom: 8px; background: var(--bg-card,#161616); }
.comm-row .ch-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; background: rgba(16,185,129,0.15); color: #10b981; margin-right: 8px; text-transform: uppercase; font-weight: 600; }
.comm-row .ch-pill.email { background: rgba(59,130,246,0.15); color: #3b82f6; }
.comm-row .ch-pill.call  { background: rgba(168,85,247,0.15); color: #a855f7; }
.comm-row .body { color: var(--text-2,#cbd5e1); margin-top: 4px; white-space: pre-wrap; }
.comm-row .meta { font-size: 0.78rem; color: var(--text-3,#94a3b8); margin-top: 4px; }

/* ============================================================
   Phase 3 — Sync status pill (auto-offline-slot)
   ============================================================ */
.auto-sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #e6e9ef; cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auto-sync-pill:hover { background: rgba(255,255,255,0.12); }
.auto-sync-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.85;
}
.auto-sync-pill .sync-icon { font-size: 11px; }
.auto-sync-pill .sync-last { opacity: 0.7; font-weight: 400; font-size: 11px; margin-left: 4px; }
.auto-sync-pill.ok      { color: #6ee7b7; border-color: rgba(110,231,183,0.35); }
.auto-sync-pill.syncing { color: #93c5fd; border-color: rgba(147,197,253,0.35); }
.auto-sync-pill.pending { color: #fcd34d; border-color: rgba(252,211,77,0.35); }
.auto-sync-pill.error   { color: #fca5a5; border-color: rgba(252,165,165,0.45); }
.auto-sync-pill.offline { color: #9ca3af; border-color: rgba(156,163,175,0.35); }
.auto-sync-pill.local   { color: #c4b5fd; border-color: rgba(196,181,253,0.35); }
.auto-sync-pill.syncing .sync-icon { animation: auto-spin 1.1s linear infinite; }
@keyframes auto-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Recoverable error banner */
.auto-sync-banner {
  display: none;
  margin: 10px 16px 0;
  padding: 10px 14px;
  background: rgba(252,165,165,0.10);
  border: 1px solid rgba(252,165,165,0.45);
  color: #fecaca;
  border-radius: 8px;
  font-size: 13px;
  align-items: center;
  gap: 12px;
}
.auto-sync-banner.visible { display: flex; }
.auto-sync-banner .msg { flex: 1; }
.auto-sync-banner button {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.auto-sync-banner button:hover { background: rgba(255,255,255,0.18); }

/* Diagnostics panel */
.auto-diag-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-top: 12px;
}
.auto-diag-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px; padding: 12px;
}
.auto-diag-card h4 { margin: 0 0 6px; font-size: 12px; opacity: 0.7; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.auto-diag-card .val { font-size: 20px; font-weight: 600; }
.auto-diag-card .sub { font-size: 11px; opacity: 0.6; margin-top: 4px; }
.auto-diag-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.auto-diag-table th, .auto-diag-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.auto-diag-table th { opacity: 0.7; font-weight: 500; }