:root {
      --bg-main: #050508;
      --panel-bg: #0b0c10;
      --border-glow: #1a1c23;
      --text-primary: #f1f5f9;
      --text-secondary: #64748b;
      --neon-blue: #00d2ff;
      --neon-green: #00ff66;
      --neon-amber: #eab308;
      --neon-red: #ef4444;
      --panel-header: #0e1017;
      --input-bg: #020204;
      --row-hover: #0d0e14;
      --soft-blue: rgba(0,210,255,.16);
      --soft-green: rgba(0,255,102,.12);
      --soft-amber: rgba(234,179,8,.12);
      --soft-red: rgba(239,68,68,.14);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
    body { background-color: var(--bg-main); color: var(--text-primary); min-height: 100vh; padding: 0; }

    @media print {
      body > * { display: none !important; }
      .modal-backdrop { display: block !important; position: static !important; background: none !important; padding: 0 !important; }
      .modal { border: none !important; box-shadow: none !important; max-height: none !important; }
      .modal-actions { display: none !important; }
      .panel-header { display: none !important; }
      .invoice-sheet { display: block !important; padding: 16px !important; }
    }

    .app-shell { width: 100%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
    @media (max-width: 1280px) { .app-shell { grid-template-columns: 1fr; } }
    @media (max-width: 820px) {
      .grid-2, .grid-3, .grid-4, .bank-vault, .metrics-grid, .control-tray, .payment-grid { grid-template-columns: 1fr !important; }
      .full-span { grid-column: span 1 !important; }
      .panel-body { padding: 14px; }
    }

    .panel { background: var(--panel-bg); border: 1px solid var(--border-glow); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
    .panel-header { background: var(--panel-header); padding: 12px 16px; border-bottom: 1px solid var(--border-glow); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
    .panel-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--neon-blue); }
    .panel-body { padding: 18px; }

    .mode-toggle-group, .tab-strip { display: flex; gap: 4px; background: #020204; padding: 2px; border-radius: 4px; border: 1px solid var(--border-glow); flex-wrap: wrap; }
    .mode-btn, .tab-btn { background: transparent; border: none; color: var(--text-secondary); font-size: 0.68rem; padding: 6px 10px; cursor: pointer; border-radius: 3px; font-weight: bold; text-transform: uppercase; }
    .mode-btn.active, .tab-btn.active { background: var(--border-glow); color: var(--neon-blue); }
    .mode-btn.active.manual-mode-on { color: var(--neon-amber); }

    .grid-2, .grid-3, .grid-4 { display: grid; gap: 14px; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .full-span { grid-column: span 2; }

    .input-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .label-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
    label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
    .badge-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .preset-badge, .status-badge, .tiny-badge { background: #111319; border: 1px solid var(--border-glow); color: #94a3b8; font-size: 0.62rem; padding: 3px 7px; border-radius: 3px; cursor: pointer; text-transform: uppercase; }
    .preset-badge:hover, .tiny-badge:hover { border-color: var(--neon-blue); color: var(--text-primary); }
    .status-badge.ok { color: #86efac; border-color: rgba(0,255,102,.25); cursor: default; }
    .status-badge.warn { color: #fcd34d; border-color: rgba(234,179,8,.3); cursor: default; }
    .status-badge.danger { color: #fca5a5; border-color: rgba(239,68,68,.3); cursor: default; }

    .input-wrapper { position: relative; display: flex; align-items: center; }
    .unit { position: absolute; left: 12px; color: #334155; font-size: 0.9rem; }
    input, textarea, select { width: 100%; background: var(--input-bg); border: 1px solid var(--border-glow); color: var(--text-primary); padding: 10px 12px 10px 24px; border-radius: 4px; font-size: 0.95rem; outline: none; transition: border-color .15s ease; }
    input.no-unit, textarea, select.no-unit { padding-left: 12px; }
    input:focus, textarea:focus, select:focus { border-color: #334155; }
    textarea { min-height: 88px; resize: vertical; }
    input:disabled, textarea:disabled, select:disabled { background: #07080c; border-color: #0b0c10; color: #27273a; cursor: not-allowed; }
    /* A field that is auto-derived (locked) but still readable — e.g. cylinders set from the engine */
    select.auto-locked:disabled { background: #0b1410; border-color: rgba(0,255,102,.28); color: #86efac; opacity: 1; cursor: not-allowed; }
    .input-invalid { border-color: rgba(239,68,68,.75) !important; box-shadow: 0 0 0 1px rgba(239,68,68,.25) inset; }

    .slider-wrapper { display: flex; align-items: center; gap: 10px; }
    input[type="range"] { padding: 0; background: #111319; height: 6px; border: none; cursor: pointer; accent-color: var(--neon-blue); }
    .slider-val { min-width: 64px; text-align: right; color: var(--neon-blue); font-size: 0.78rem; font-weight: 700; }

    .warning-box { margin-bottom: 14px; padding: 10px 12px; border: 1px solid rgba(239,68,68,.35); background: rgba(127,29,29,.18); color: #fecaca; border-radius: 4px; font-size: 0.78rem; display: none; white-space: pre-line; }

    .readout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; margin-bottom: 14px; }
    .readout-card { background: #030305; border: 1px dashed var(--border-glow); padding: 14px; border-radius: 4px; min-height: 118px; position: relative; transition: border-color 0.3s ease; }
    .readout-label { font-size: 0.65rem; color: var(--text-secondary); margin-bottom: 6px; display: block; letter-spacing: 1px; text-transform: uppercase; }
    .readout-value { font-size: 1.38rem; font-weight: 700; transition: color 0.3s ease; }
    .readout-sub { margin-top: 8px; font-size: 0.72rem; color: #94a3b8; line-height: 1.35; }

    /* Margin health indicator */
    .margin-health-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
    .margin-health-dot.good { background: var(--neon-green); box-shadow: 0 0 4px var(--neon-green); }
    .margin-health-dot.warn { background: var(--neon-amber); box-shadow: 0 0 4px var(--neon-amber); }
    .margin-health-dot.danger { background: var(--neon-red); box-shadow: 0 0 4px var(--neon-red); }

    .manual-input { background: #090a0f; border: 1px solid #222531; padding: 8px 10px; color: var(--text-primary); border-radius: 4px; font-size: 1.05rem; font-weight: bold; width: 100%; outline: none; margin-top: 8px; }
    .manual-input:focus { border-color: var(--neon-amber); }

    .control-tray { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 10px; }
    .btn-primary, .btn-secondary, .btn-danger, .utility-btn { border-radius: 4px; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; cursor: pointer; padding: 12px; border: 1px solid var(--border-glow); }
    .btn-primary { background: var(--neon-blue); color: #000; border: none; }
    .btn-primary.manual-active { background: var(--neon-amber); }
    .btn-secondary, .utility-btn { background: transparent; color: var(--text-secondary); }
    .btn-danger { background: transparent; color: #f87171; border-color: rgba(239,68,68,.4); }
    .btn-primary:hover { filter: brightness(1.1); }
    .btn-secondary:hover, .utility-btn:hover { color: var(--text-primary); border-color: #334155; }
    .btn-danger:hover { color: #fecaca; border-color: #f87171; }

    /* ===== AI FEATURE STYLES ===== */
    .ai-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(0,210,255,.14)); color: #d8b4fe; border: 1px solid rgba(168,85,247,.45); border-radius: 4px; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; padding: 7px 11px; transition: all 0.15s ease; white-space: nowrap; }
    .ai-btn:hover:not(:disabled) { color: #f3e8ff; border-color: #a855f7; box-shadow: 0 0 14px rgba(168,85,247,.35); }
    .ai-btn:disabled { opacity: 0.55; cursor: wait; }
    .ai-btn .spark { font-size: 0.8rem; line-height: 1; }
    .ai-btn.busy .spark { animation: aiPulse 0.9s ease-in-out infinite; }
    @keyframes aiPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

    .ai-entry-box { background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(0,210,255,.05)); border: 1px solid rgba(168,85,247,.3); border-radius: 6px; padding: 12px; margin-bottom: 16px; }
    .ai-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
    .ai-entry-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #c084fc; display: flex; align-items: center; gap: 6px; }
    .ai-entry-box textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border-glow); border-radius: 4px; color: var(--text-primary); padding: 9px; font-size: 0.82rem; resize: vertical; min-height: 46px; font-family: ui-monospace, monospace; }
    .ai-entry-box textarea:focus { outline: none; border-color: rgba(168,85,247,.55); }
    .ai-entry-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
    .ai-entry-hint { font-size: 0.64rem; color: var(--text-secondary); line-height: 1.4; }

    .ai-status { font-size: 0.66rem; padding: 2px 0; line-height: 1.4; }
    .ai-status.err { color: #f87171; }
    .ai-status.ok { color: var(--neon-green); }
    .ai-status.working { color: #c084fc; }

    .ai-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #c084fc; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.35); border-radius: 3px; padding: 2px 6px; }

    .ai-toast { position: fixed; bottom: 22px; right: 22px; max-width: 340px; background: #0b0c10; border: 1px solid rgba(168,85,247,.5); border-left: 3px solid #a855f7; border-radius: 6px; padding: 12px 14px; z-index: 9999; box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: 0.76rem; line-height: 1.45; color: var(--text-primary); transform: translateY(140%); opacity: 0; transition: all 0.35s cubic-bezier(.2,.8,.2,1); }
    .ai-toast.show { transform: translateY(0); opacity: 1; }
    .ai-toast .t-title { font-weight: 700; color: #c084fc; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.66rem; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
    .ai-toast.err { border-color: rgba(239,68,68,.5); border-left-color: #ef4444; }
    .ai-toast.err .t-title { color: #f87171; }

    .ai-review { background: var(--input-bg); border: 1px solid rgba(168,85,247,.35); border-radius: 4px; padding: 9px 11px; margin-top: 8px; font-size: 0.8rem; line-height: 1.5; color: #e9d5ff; white-space: pre-wrap; }
    .ai-review-actions { display: flex; gap: 8px; margin-top: 8px; }
    .mini-btn { font-size: 0.66rem; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid var(--border-glow); background: transparent; color: var(--text-secondary); }
    .mini-btn.accept { color: var(--neon-green); border-color: rgba(0,255,102,.4); }
    .mini-btn.accept:hover { background: rgba(0,255,102,.1); }
    .mini-btn:hover { color: var(--text-primary); }

    .template-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .template-bar select { flex: 1; min-width: 140px; background: var(--input-bg); border: 1px solid var(--border-glow); border-radius: 4px; color: var(--text-primary); padding: 7px 9px; font-size: 0.78rem; font-family: ui-monospace, monospace; }

    .sync-status-box { display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--border-glow); border-radius: 4px; padding: 9px 11px; font-size: 0.76rem; color: var(--text-secondary); }
    .sync-status-box.linked { border-color: rgba(0,255,102,.4); color: #86efac; }
    .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0; }
    .sync-status-box.linked .sync-dot { background: var(--neon-green); box-shadow: 0 0 8px rgba(0,255,102,.6); }
    .sync-status-box.unsupported { border-color: rgba(234,179,8,.4); color: #fde68a; }
    .sync-status-box.unsupported .sync-dot { background: var(--neon-amber); }
    .sync-saving { font-size: 0.66rem; color: var(--neon-green); opacity: 0; transition: opacity 0.2s; margin-left: 4px; }
    .sync-saving.show { opacity: 1; }

    .quick-part-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; background: rgba(0,210,255,.05); border: 1px solid var(--border-glow); border-radius: 5px; padding: 9px 11px; }
    .quick-part-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--neon-blue); white-space: nowrap; }
    .quick-part-bar select { flex: 1; min-width: 180px; background: var(--input-bg); border: 1px solid var(--border-glow); border-radius: 4px; color: var(--text-primary); padding: 8px 10px; font-size: 0.82rem; font-family: ui-monospace, monospace; cursor: pointer; }
    .quick-part-bar select:focus { outline: none; border-color: var(--neon-blue); }

    .bank-vault { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
    .vault-box, .metric-card { background: #0b0c10; border: 1px solid var(--border-glow); border-radius: 6px; padding: 16px; min-width: 0; }
    .vault-label, .metric-label { color: var(--text-secondary); font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
    .vault-val, .metric-value { font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
    .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }

    .metric-bar-wrap { margin-top: 8px; height: 4px; background: #111319; border-radius: 2px; overflow: hidden; }
    .metric-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; width: 0%; }
    .metric-bar-fill.blue { background: var(--neon-blue); }
    .metric-bar-fill.green { background: var(--neon-green); }
    .metric-bar-fill.amber { background: var(--neon-amber); }
    .metric-bar-fill.red { background: var(--neon-red); }

    .metric-graph { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: 8px; position: relative; }
    .metric-graph-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; cursor: pointer; }
    .metric-graph-bar { width: 100%; background: var(--neon-blue); border-radius: 2px 2px 0 0; min-height: 2px; opacity: 0.5; transition: opacity 0.15s ease; }
    .metric-graph-col:hover .metric-graph-bar { opacity: 1; }
    .metric-graph-day { font-size: 8px; color: var(--text-secondary); text-align: center; line-height: 1; }

    .day-popup { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0b0c10; border: 1px solid #1a1c23; border-radius: 5px; padding: 8px 10px; min-width: 160px; max-width: 220px; z-index: 100; display: none; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
    .metric-graph-col:hover .day-popup { display: block; }
    .day-popup-date { font-size: 0.65rem; color: var(--neon-blue); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #1a1c23; }
    .day-popup-job { font-size: 0.7rem; color: #94a3b8; padding: 3px 0; border-bottom: 1px solid #0e1017; line-height: 1.35; }
    .day-popup-job:last-child { border-bottom: none; }
    .day-popup-job strong { color: #cbd5e1; display: block; font-weight: 600; }
    .day-popup-empty { font-size: 0.7rem; color: var(--text-secondary); font-style: italic; }

    /* Parts summary bar */
    .parts-summary-bar { display: flex; gap: 16px; margin-top: 8px; padding: 8px 12px; background: #030305; border: 1px solid var(--border-glow); border-radius: 4px; font-size: 0.72rem; flex-wrap: wrap; }
    .parts-summary-item { display: flex; gap: 5px; align-items: center; }
    .parts-summary-item .lbl { color: var(--text-secondary); }
    .parts-summary-item .val { font-weight: 700; }

    .telemetry-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #111319; font-size: 0.84rem; }
    .telemetry-row span:first-child { color: var(--text-secondary); }

    .section-sep { height: 1px; background: var(--border-glow); margin: 16px 0; }

    .parts-table-wrap, .ledger-wrapper, .customer-wrapper { max-height: 380px; overflow: auto; border: 1px solid var(--border-glow); border-radius: 4px; background: var(--input-bg); }
    table { width: 100%; border-collapse: collapse; font-size: 0.79rem; text-align: left; }
    th { background: var(--panel-header); color: var(--text-secondary); padding: 10px; font-weight: 600; position: sticky; top: 0; border-bottom: 1px solid var(--border-glow); letter-spacing: 0.5px; white-space: nowrap; z-index: 1; }
    td { padding: 10px; border-bottom: 1px solid #0e1017; color: #94a3b8; vertical-align: top; }
    tr:hover td { color: var(--text-primary); background: var(--row-hover); }

    .parts-table input[type="text"], .parts-table input[type="number"], .parts-table select { padding: 8px 8px; font-size: 0.82rem; border-radius: 3px; }
    .parts-table td { padding: 8px; }
    .parts-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

    .pill { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 0.66rem; border: 1px solid var(--border-glow); background: #111319; color: #cbd5e1; text-transform: uppercase; }
    .pill.green { color: #86efac; border-color: rgba(0,255,102,.22); }
    .pill.blue { color: #67e8f9; border-color: rgba(0,210,255,.25); }
    .pill.amber { color: #fcd34d; border-color: rgba(234,179,8,.3); }
    .pill.red { color: #fca5a5; border-color: rgba(239,68,68,.3); }

    .search-input { width: 100%; background: var(--bg-main); border: 1px solid var(--border-glow); color: var(--text-primary); padding: 8px 10px; border-radius: 4px; font-size: 0.76rem; outline: none; margin-bottom: 10px; }
    .job-row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
    .tiny-btn { background: transparent; border: 1px solid var(--border-glow); color: var(--text-secondary); border-radius: 4px; padding: 4px 7px; font-size: 0.66rem; text-transform: uppercase; cursor: pointer; }
    .tiny-btn:hover { color: var(--text-primary); border-color: #334155; }
    .tiny-btn.danger { color: #f87171; border-color: rgba(239,68,68,.35); }
    .tiny-btn.danger:hover { color: #fecaca; border-color: #f87171; }
    .notes-mini { color: #64748b; font-size: 0.72rem; margin-top: 4px; line-height: 1.35; }
    .muted { color: var(--text-secondary); }
    .money-blue { color: var(--neon-blue); font-weight: 700; }
    .money-green { color: var(--neon-green); font-weight: 700; }
    .money-amber { color: var(--neon-amber); font-weight: 700; }

    .filters-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }

    .customer-card { padding: 12px; border-bottom: 1px solid #0e1017; cursor: pointer; }
    .customer-card:hover { background: var(--row-hover); }
    .customer-name { font-weight: 700; color: #cbd5e1; }
    .customer-sub { color: var(--text-secondary); font-size: 0.74rem; margin-top: 3px; }
    .customer-metrics { margin-top: 6px; font-size: 0.72rem; color: #94a3b8; display: flex; gap: 12px; flex-wrap: wrap; }

    .payment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .hidden { display: none !important; }

    /* Pay status suggestion banner */
    .pay-suggest { display: none; margin-top: 8px; padding: 7px 10px; border: 1px solid rgba(0,255,102,.3); background: rgba(0,255,102,.07); color: #86efac; border-radius: 4px; font-size: 0.74rem; cursor: pointer; }
    .pay-suggest:hover { background: rgba(0,255,102,.12); }

    /* Category color badges in ledger */
    .cat-badge { font-size: 0.62rem; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; font-weight: 700; }
    .cat-diag { background: rgba(0,210,255,.12); color: #67e8f9; }
    .cat-tune { background: rgba(0,255,102,.1); color: #86efac; }
    .cat-brake { background: rgba(239,68,68,.12); color: #fca5a5; }
    .cat-susp { background: rgba(167,139,250,.12); color: #c4b5fd; }
    .cat-oil { background: rgba(234,179,8,.1); color: #fcd34d; }
    .cat-elec { background: rgba(251,191,36,.1); color: #fde68a; }
    .cat-eng { background: rgba(239,68,68,.14); color: #fca5a5; }
    .cat-trans { background: rgba(167,139,250,.14); color: #c4b5fd; }
    .cat-tires { background: rgba(148,163,184,.1); color: #cbd5e1; }
    .cat-other { background: rgba(100,116,139,.1); color: #94a3b8; }

    /* Editing row highlight */
    .ledger-editing td { background: rgba(234,179,8,.04) !important; border-left: 2px solid var(--neon-amber); }

    /* SVG donut chart */
    .donut-chart-wrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; margin-top: 6px; }
    .donut-chart-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .donut-chart-item svg { overflow: visible; }
    .donut-cat-label { font-size: 0.62rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; max-width: 58px; line-height: 1.3; }
    .donut-pct { font-size: 0.7rem; font-weight: 700; }

    /* Empty state */
    .empty-state { padding: 32px 16px; text-align: center; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.6; }
    .empty-state strong { color: #475569; display: block; margin-bottom: 6px; }

    /* Auto-pay suggestion */
    .auto-pay-toast { display: none; padding: 8px 12px; background: rgba(0,255,102,.08); border: 1px solid rgba(0,255,102,.25); border-radius: 4px; color: #86efac; font-size: 0.74rem; margin-top: 8px; cursor: pointer; }
    .auto-pay-toast:hover { background: rgba(0,255,102,.15); }

    .modal-backdrop { position: fixed; inset: 0; background: rgba(2,6,12,.78); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 9999; }
    .modal-backdrop.open { display: flex; }
    .modal { width: min(980px, 100%); max-height: 92vh; overflow: auto; background: var(--panel-bg); border: 1px solid var(--border-glow); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

    .invoice-sheet { background: #fff; color: #111827; padding: 32px; min-height: 900px; font-family: Arial, Helvetica, sans-serif; }
    .invoice-sheet * { font-family: Arial, Helvetica, sans-serif; }
    .invoice-top { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
    .invoice-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; }
    .invoice-meta { font-size: 0.92rem; line-height: 1.5; color: #374151; }
    .invoice-box { border: 1px solid #d1d5db; border-radius: 6px; padding: 14px; margin-bottom: 18px; }
    .invoice-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.92rem; }
    .invoice-table th, .invoice-table td { border-bottom: 1px solid #e5e7eb; padding: 10px; text-align: left; color: #111827; background: transparent; position: static; }
    .invoice-summary { margin-left: auto; width: min(360px, 100%); margin-top: 20px; border: 1px solid #d1d5db; border-radius: 6px; padding: 14px; }
    .invoice-summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.95rem; }
    .invoice-summary-row:last-child { border-bottom: none; font-weight: 700; font-size: 1.05rem; }
    .invoice-notes { margin-top: 20px; font-size: 0.9rem; line-height: 1.5; color: #374151; white-space: pre-wrap; }

    .modal-actions { padding: 14px 18px; border-top: 1px solid var(--border-glow); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--panel-header); }

    /* Shop profile panel */
    .shop-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Highlight editing job in ledger */
    tr.currently-editing td { border-left: 2px solid var(--neon-amber) !important; }

    /* Subtle number update flash */
    @keyframes numFlash { 0% { opacity: 0.5; } 100% { opacity: 1; } }
    .num-flash { animation: numFlash 0.25s ease-out; }

    /* Display-size control (floating, top-right) */
    .display-size-ctrl { position: fixed; top: 10px; right: 12px; z-index: 9000; display: flex; align-items: center; gap: 6px; background: rgba(11,12,16,.92); border: 1px solid var(--border-glow); border-radius: 20px; padding: 4px 8px; box-shadow: 0 2px 10px rgba(0,0,0,.4); backdrop-filter: blur(4px); }
    .display-size-ctrl .ds-label { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.5px; }
    .ds-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-glow); background: var(--input-bg); color: var(--neon-blue); font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
    .ds-btn:hover { background: var(--neon-blue); color: #000; }
    .ds-val { font-size: 0.68rem; color: var(--text-primary); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

    /* Payment alert banner */
    .payment-alert-banner { background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(234,179,8,.08)); border: 1px solid rgba(239,68,68,.45); border-left: 4px solid var(--neon-red); border-radius: 8px; padding: 12px 16px; margin-bottom: 4px; }
    .pab-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pab-icon { font-size: 1.1rem; }
    .pab-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fca5a5; }
    .pab-count { background: var(--neon-red); color: #fff; border-radius: 99px; font-size: 0.72rem; font-weight: 700; padding: 1px 9px; }
    .pab-count.amber { background: var(--neon-amber); color: #000; }
    .pab-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
    .pab-row { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; padding: 6px 9px; background: rgba(0,0,0,.25); border-radius: 5px; cursor: pointer; transition: background 0.12s; }
    .pab-row:hover { background: rgba(0,0,0,.45); }
    .pab-row .pr-name { font-weight: 600; color: var(--text-primary); flex: 1; }
    .pab-row .pr-amount { color: #fca5a5; font-weight: 700; font-variant-numeric: tabular-nums; }
    .pab-row .pr-due { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
    .pab-row .pr-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
    .pab-row .pr-tag.overdue { background: rgba(239,68,68,.25); color: #fca5a5; }
    .pab-row .pr-tag.soon { background: rgba(234,179,8,.22); color: #fde68a; }
    .pab-more { font-size: 0.72rem; color: var(--text-secondary); margin-top: 4px; font-style: italic; }
    /* due indicators in the ledger */
    .due-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; margin-left: 5px; vertical-align: middle; }
    .due-badge.overdue { background: rgba(239,68,68,.25); color: #fca5a5; border: 1px solid rgba(239,68,68,.4); }
    .due-badge.soon { background: rgba(234,179,8,.2); color: #fde68a; border: 1px solid rgba(234,179,8,.4); }

    /* Job tier badges */
    .tier-badge { display:inline-block; font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:1px 6px; border-radius:3px; vertical-align:middle; }
    .tier-basic { background: rgba(0,210,255,.1); color:#67e8f9; border:1px solid rgba(0,210,255,.25); }
    .tier-standard { background: rgba(0,255,102,.1); color:#86efac; border:1px solid rgba(0,255,102,.22); }
    .tier-major { background: rgba(234,179,8,.12); color:#fcd34d; border:1px solid rgba(234,179,8,.3); }
    .tier-custom { background: rgba(148,163,184,.1); color:#cbd5e1; border:1px solid var(--border-glow); }

    /* Pay-type tag (CP / Warranty / Internal) */
    .pay-tag { display:inline-block; font-size:0.56rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:1px 5px; border-radius:3px; margin-left:5px; vertical-align:middle; }
    .pay-warranty { background: rgba(168,85,247,.15); color:#d8b4fe; border:1px solid rgba(168,85,247,.3); }
    .pay-internal { background: rgba(234,179,8,.14); color:#fcd34d; border:1px solid rgba(234,179,8,.3); }

    /* Monthly targets panel */
    .target-row { margin-bottom:14px; }
    .target-row:last-child { margin-bottom:0; }
    .target-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; }
    .target-name { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); }
    .target-figures { font-size:0.78rem; font-variant-numeric:tabular-nums; }
    .target-figures .tgt-cur { font-weight:700; color:var(--text-primary); }
    .target-figures .tgt-goal { color:var(--text-secondary); }
    .target-pct { font-size:0.64rem; font-weight:700; margin-left:6px; }
    .target-bar-wrap { height:7px; background:#111319; border-radius:4px; overflow:hidden; }
    .target-bar-fill { height:100%; border-radius:4px; width:0%; transition:width .5s ease; }
    .target-bar-fill.met { background: var(--neon-green); }
    .target-bar-fill.mid { background: var(--neon-blue); }
    .target-bar-fill.low { background: var(--neon-amber); }
    .targets-editor { margin-top:4px; }
    .targets-editor summary { cursor:pointer; font-size:0.66rem; color:var(--neon-blue); text-transform:uppercase; letter-spacing:0.5px; list-style:none; padding:4px 0; }
    .targets-editor summary::-webkit-details-marker { display:none; }
    .targets-editor .te-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
    .targets-unset { font-size:0.74rem; color:var(--text-secondary); line-height:1.5; }

    /* Vehicle history / deferred work */
    .veh-history { border:1px solid rgba(0,210,255,.3); border-radius:6px; background:rgba(0,210,255,.04); padding:12px; margin-bottom:16px; }
    .veh-history.has-declined { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.05); }
    .vh-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
    .vh-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--neon-blue); }
    .vh-count { font-size:0.62rem; color:var(--text-secondary); }
    .vh-meta { font-size:0.66rem; color:var(--text-secondary); margin-bottom:8px; padding-bottom:8px; border-bottom:1px dashed var(--border-glow); }
    .vh-declined { margin-bottom:10px; padding:8px 10px; border:1px solid rgba(239,68,68,.4); background:rgba(127,29,29,.18); border-radius:5px; }
    .vh-declined-title { font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#fca5a5; margin-bottom:5px; display:flex; align-items:center; gap:5px; }
    .vh-declined-item { font-size:0.74rem; color:#fecaca; line-height:1.4; padding:2px 0; }
    .vh-list { display:flex; flex-direction:column; gap:4px; max-height:190px; overflow:auto; }
    .vh-job { display:flex; align-items:center; gap:8px; font-size:0.74rem; padding:5px 8px; background:rgba(0,0,0,.25); border-radius:4px; cursor:pointer; }
    .vh-job:hover { background: rgba(0,0,0,.4); }
    .vh-job .vhj-date { color:var(--text-secondary); white-space:nowrap; font-size:0.66rem; }
    .vh-job .vhj-desc { flex:1; color:#cbd5e1; min-width:0; }
    .vh-job .vhj-amt { font-weight:700; color:var(--neon-blue); font-variant-numeric:tabular-nums; white-space:nowrap; }
    .vh-job.same-vehicle { border-left:2px solid var(--neon-blue); }
    .engine-year-hint { font-size:0.68rem; line-height:1.45; color:#94a3b8; padding:2px 0; }
    .engine-year-hint.warn { color:#fcd34d; }
    .engine-year-hint .eyh-tag { font-weight:700; color:var(--neon-blue); }
    .engine-year-hint.warn .eyh-tag { color:var(--neon-amber); }

    /* Collapsible form sections */
    .form-section { border:1px solid var(--border-glow); border-radius:6px; margin-bottom:12px; background:#0a0b0f; overflow:hidden; }
    .form-section > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--panel-header); font-size:0.72rem; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--text-primary); user-select:none; }
    .form-section > summary::-webkit-details-marker { display:none; }
    .form-section > summary::before { content:'▸'; color:var(--neon-blue); font-size:0.8rem; transition:transform .15s ease; display:inline-block; }
    .form-section[open] > summary::before { transform:rotate(90deg); }
    .form-section > summary:hover { background:#12141c; }
    .form-section > summary .fs-ico { font-size:0.98rem; filter:saturate(.85); }
    .form-section > summary .fs-hint { margin-left:auto; font-size:0.6rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--text-secondary); white-space:nowrap; }
    .form-section .section-body { padding:14px; }
    @media print { .form-section > summary { display:none !important; } .form-section { border:none; } }

    /* Pinned floating Save button */
    .floating-save { position:fixed; bottom:20px; right:20px; z-index:9500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--neon-blue); color:#000; border:none; border-radius:30px; font-weight:700; font-size:0.82rem; padding:11px 22px; cursor:pointer; box-shadow:0 6px 22px rgba(0,210,255,.4); text-transform:uppercase; letter-spacing:0.5px; transition:filter .12s ease, background .2s ease; }
    .floating-save:hover { filter:brightness(1.08); }
    .floating-save.manual { background:var(--neon-amber); box-shadow:0 6px 22px rgba(234,179,8,.4); }
    .floating-save .fsv-total { font-size:0.64rem; font-weight:700; opacity:.78; letter-spacing:0; }
    @media print { .floating-save { display:none !important; } }
    @media (max-width: 820px) { .floating-save { bottom:12px; right:12px; padding:10px 16px; } }

    /* Draft crash-recovery banner */
    .draft-recover { border:1px solid rgba(0,210,255,.45); border-left:3px solid var(--neon-blue); background:rgba(0,210,255,.06); border-radius:6px; padding:11px 13px; margin-bottom:14px; }
    .draft-recover .dr-head { display:flex; align-items:center; gap:8px; }
    .draft-recover .dr-icon { font-size:1rem; color:var(--neon-blue); }
    .draft-recover .dr-title { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#67e8f9; }
    .draft-recover .dr-body { font-size:0.78rem; color:#cbd5e1; margin:6px 0 9px; line-height:1.45; }
    .draft-recover .dr-actions { display:flex; gap:8px; }

    /* Workflow status badges + Work Board */
    .wf-badge { display:inline-block; font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:1px 6px; border-radius:3px; vertical-align:middle; border:1px solid transparent; }
    .work-board { display:flex; flex-direction:row; gap:10px; overflow-x:auto; padding-bottom:4px; align-items:stretch; }
    .wb-col { flex:1 1 0; min-width:158px; border:1px solid var(--border-glow); border-radius:6px; background:var(--input-bg); overflow:hidden; display:flex; flex-direction:column; transition:border-color .12s, background .12s; }
    .wb-col.wb-col-over { border-color:var(--neon-blue); background:rgba(0,210,255,.07); }
    .wb-col-head { display:flex; align-items:center; gap:7px; padding:7px 10px; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border-glow); }
    .wb-col-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .wb-col-count { margin-left:auto; background:#111319; border-radius:99px; padding:1px 8px; font-size:0.62rem; color:#cbd5e1; }
    .wb-jobs { display:flex; flex-direction:column; gap:5px; padding:6px; min-height:54px; flex:1; }
    .wb-job { display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; padding:7px 9px; font-size:0.74rem; background:var(--panel-bg); border:1px solid var(--border-glow); border-left:3px solid var(--wb-accent, var(--border-glow)); border-radius:4px; cursor:grab; }
    .wb-job:hover { border-color:var(--neon-blue); }
    .wb-job.wb-dragging { opacity:.4; cursor:grabbing; }
    .wb-job .wbj-name { flex:1; color:#cbd5e1; font-weight:600; min-width:0; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .wb-job .wbj-meta { color:var(--text-secondary); font-size:0.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .wb-job .wbj-next { font-size:0.62rem; padding:1px 6px; border:1px solid var(--border-glow); border-radius:4px; color:var(--neon-blue); background:transparent; cursor:pointer; white-space:nowrap; font-weight:700; flex-shrink:0; }
    .wb-job .wbj-next:hover { border-color:var(--neon-blue); background:rgba(0,210,255,.08); }
    .wb-job .wbj-bay { flex:0 0 100%; display:flex; align-items:center; gap:5px; margin-top:1px; padding-top:5px; border-top:1px dashed var(--border-glow); color:var(--neon-blue); font-size:0.63rem; font-weight:600; min-width:0; }
    .wb-job .wbj-bay .lift-ico { flex-shrink:0; }
    .wb-job .wbj-bay-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ===== PERFORMANCE / TUNER TOOLS ===== */
    .perf-card { border:1px solid var(--border-glow); border-radius:8px; padding:12px; margin-bottom:12px; background:rgba(0,210,255,.03); }
    .perf-card:last-child { margin-bottom:0; }
    .perf-card-title { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--neon-blue); margin-bottom:10px; }
    .perf-card-sub { font-size:0.62rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-secondary); margin-left:6px; }
    .perf-grid { display:grid; gap:8px; }
    .perf-grid-4 { grid-template-columns:repeat(4, 1fr); }
    .perf-grid-3 { grid-template-columns:repeat(3, 1fr); }
    @media (max-width:900px) { .perf-grid-4, .perf-grid-3 { grid-template-columns:repeat(2, 1fr); } }
    .perf-field { display:flex; flex-direction:column; gap:3px; min-width:0; }
    .perf-field label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-secondary); }
    .perf-field input, .perf-field select { width:100%; background:var(--input-bg); border:1px solid var(--border-glow); border-radius:5px; color:var(--text-primary); padding:7px 8px; font-family:inherit; font-size:0.8rem; }
    .perf-field input:focus, .perf-field select:focus { outline:none; border-color:var(--neon-blue); }
    .perf-out { background:#0d1016; border:1px dashed var(--border-glow); border-radius:5px; padding:7px 8px; font-size:0.85rem; font-weight:700; color:var(--neon-green); }
    .perf-result { margin-top:10px; padding:8px 10px; border-radius:5px; background:#0d1016; border-left:3px solid var(--neon-blue); font-size:0.76rem; color:var(--text-primary); line-height:1.45; }
    .perf-result strong { color:var(--neon-green); }
    body.light .perf-card { background:rgba(3,105,161,.05); }
    body.light .perf-out, body.light .perf-result { background:#f1f5f9; }

    /* ===== COMMAND DECK (Palantir-style ops dashboard) ===== */
    #viewCommand .cmd-deck{--ac:var(--neon-blue);--pnl:var(--panel-bg);--pnl2:var(--input-bg);--ln:var(--border-glow);--ln2:#2a2f3a;--tx:var(--text-primary);--mut:var(--text-secondary);--hi:var(--text-primary);--am:var(--neon-amber);--gn:var(--neon-green);--rd:var(--neon-red);--bl:#38bdf8;--nu:#2a3038;font-family:inherit;background:var(--bg-main);color:var(--tx);border:1px solid var(--ln);border-radius:6px;padding:14px;position:relative;min-height:520px;}
    #viewCommand .cmd-deck *{box-sizing:border-box;}
    #viewCommand .cmd-hud{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ln);padding-bottom:9px;margin-bottom:11px;}
    #viewCommand .cmd-t{font-size:12px;letter-spacing:1px;color:var(--hi);display:flex;align-items:center;gap:8px;text-transform:uppercase;}
    #viewCommand .cmd-t b{color:var(--mut);font-weight:400;}
    #viewCommand .cmd-live{width:6px;height:6px;border-radius:50%;background:var(--gn);animation:cmdPulse 2.6s infinite;}
    @keyframes cmdPulse{0%,100%{opacity:1}50%{opacity:.4}}
    #viewCommand .cmd-clk{font-size:12px;color:var(--tx);letter-spacing:.5px;text-align:right;}
    #viewCommand .cmd-clk .cmd-d{font-size:10px;color:var(--mut);letter-spacing:1px;}
    #viewCommand .cmd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px;}
    #viewCommand .cmd-stat{background:var(--pnl);border:1px solid var(--ln);border-radius:4px;padding:8px 10px;}
    #viewCommand .cmd-stat .l{font-size:10px;color:var(--mut);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;}
    #viewCommand .cmd-stat .v{font-size:20px;color:var(--hi);letter-spacing:.5px;}
    #viewCommand .cmd-stat .v small{color:var(--mut);font-size:13px;}
    #viewCommand .cmd-stat .bar{height:2px;background:var(--ln);margin-top:8px;overflow:hidden;}
    #viewCommand .cmd-stat .bar i{display:block;height:100%;width:0;background:var(--ac);transition:width .9s ease-out;}
    #viewCommand .cmd-main{display:grid;grid-template-columns:1.5fr 1fr;gap:9px;}
    #viewCommand .cmd-col{display:flex;flex-direction:column;gap:9px;}
    #viewCommand .cmd-card{background:var(--pnl);border:1px solid var(--ln);border-radius:4px;padding:10px;}
    #viewCommand .cmd-ch{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:var(--mut);text-transform:uppercase;margin-bottom:9px;border-bottom:1px solid var(--ln);padding-bottom:6px;}
    #viewCommand .cmd-ch b{color:var(--ac);font-weight:400;}
    #viewCommand .cmd-bays{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
    #viewCommand .cmd-bay{--ac2:var(--nu);border:1px solid var(--ln);border-left:2px solid var(--ac2);border-radius:3px;padding:7px 9px;background:var(--pnl2);cursor:pointer;transition:background .12s;}
    #viewCommand .cmd-bay:hover{background:var(--row-hover);}
    #viewCommand .cmd-bay.sel{background:rgba(0,210,255,.07);border-color:var(--ln2);border-left-color:var(--ac2);}
    #viewCommand .cmd-bay .bh{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.5px;color:var(--mut);}
    #viewCommand .cmd-bay .bid{color:var(--tx);}
    #viewCommand .cmd-bay .dot{width:6px;height:6px;border-radius:1px;background:var(--ac2);}
    #viewCommand .cmd-bay .stage{height:30px;display:flex;align-items:center;margin:6px 0 5px;}
    #viewCommand .cmd-bay .car{color:var(--ac2);}
    #viewCommand .cmd-bay .jb{font-size:11px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #viewCommand .cmd-bay .st{font-size:9px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #viewCommand .cmd-bay.working{--ac2:var(--am)}#viewCommand .cmd-bay.ready{--ac2:var(--gn)}#viewCommand .cmd-bay.waiting{--ac2:var(--bl)}#viewCommand .cmd-bay.queued{--ac2:var(--ac)}
    #viewCommand .cmd-bay.empty{--ac2:var(--nu)}#viewCommand .cmd-bay.empty .car{opacity:.4}#viewCommand .cmd-bay.empty .jb{color:var(--mut)}
    #viewCommand .cmd-dyno{border:1px solid var(--ln);border-radius:4px;padding:10px;background:var(--pnl);}
    #viewCommand .cmd-dyno-body{display:flex;align-items:center;gap:12px;}
    #viewCommand .cmd-dyno-read{font-size:26px;color:var(--hi);letter-spacing:.5px;white-space:nowrap;}
    #viewCommand .cmd-dyno-read em{font-size:12px;color:var(--mut);font-style:normal;margin-left:3px;}
    #viewCommand .cmd-dyno-bar{flex:1;height:6px;background:var(--ln);border-radius:1px;overflow:hidden;}
    #viewCommand .cmd-dyno-bar i{display:block;height:100%;width:0;background:var(--ac);transition:width .6s ease-out;}
    #viewCommand .cmd-pull{font-family:inherit;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--tx);background:transparent;border:1px solid var(--ln2);border-radius:3px;padding:6px 11px;cursor:pointer;white-space:nowrap;transition:.12s;}
    #viewCommand .cmd-pull:hover{border-color:var(--ac);color:var(--ac);}
    #viewCommand .cmd-gauge{align-items:center;}
    #viewCommand .cmd-gauge svg{display:block;margin:2px auto;}
    #viewCommand .cmd-pipe{display:flex;gap:6px;}
    #viewCommand .cmd-pnode{flex:1;text-align:center;background:var(--pnl2);border:1px solid var(--ln);border-top:2px solid var(--nu);border-radius:3px;padding:8px 4px;}
    #viewCommand .cmd-pnode .pn{font-size:18px;color:var(--hi);}
    #viewCommand .cmd-pnode .pl{font-size:9px;color:var(--mut);letter-spacing:.5px;text-transform:uppercase;margin-top:3px;}
    #viewCommand .cmd-pnode.a{border-top-color:var(--am)}
    #viewCommand .cmd-pnode.r{border-top-color:var(--gn)}
    #viewCommand .cmd-feed{display:flex;flex-direction:column;gap:5px;}
    #viewCommand .cmd-feed .fr{display:flex;gap:8px;align-items:baseline;font-size:11px;color:var(--tx);border-left:2px solid var(--ln2);padding-left:8px;line-height:1.4;}
    #viewCommand .cmd-feed .fr b{color:var(--ac);font-weight:400;min-width:50px;text-transform:uppercase;font-size:10px;letter-spacing:.5px;}
    #viewCommand .cmd-feed .fr.lo{border-left-color:var(--am);}
    #viewCommand .cmd-feed .fr.lo b{color:var(--am);}
    @media(max-width:760px){#viewCommand .cmd-main{grid-template-columns:1fr}#viewCommand .cmd-stats{grid-template-columns:1fr 1fr}}
    .wb-col-empty-drop { font-size:0.6rem; color:var(--text-secondary); text-align:center; padding:12px 4px; opacity:.5; border:1px dashed var(--border-glow); border-radius:4px; }
    .work-board-empty { font-size:0.76rem; color:var(--text-secondary); padding:12px 4px; line-height:1.5; }
    body.light .wb-job { background:#ffffff; }

    /* Parts inventory */
    .inventory-wrapper { max-height:340px; overflow:auto; border:1px solid var(--border-glow); border-radius:4px; background:var(--input-bg); }
    .inventory-wrapper table { width:100%; border-collapse:collapse; font-size:0.79rem; }
    .inventory-wrapper input { padding:6px 7px; font-size:0.8rem; border-radius:3px; }
    .inventory-wrapper td { padding:7px 8px; }
    tr.inv-low td { background:rgba(239,68,68,.06); }
    tr.inv-low .inv-stock-cell input { color:var(--neon-red); font-weight:700; }
    .inv-low-alert { margin-bottom:10px; padding:8px 11px; border:1px solid rgba(239,68,68,.4); border-left:3px solid var(--neon-red); background:rgba(127,29,29,.16); border-radius:5px; font-size:0.76rem; color:#fecaca; line-height:1.45; }
    .inventory-empty { padding:24px 12px; text-align:center; color:var(--text-secondary); font-size:0.78rem; line-height:1.5; }

    /* Appointment scheduler */
    .appt-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
    .cal-week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:14px; }
    @media (max-width:1100px){ .cal-week{ grid-template-columns:repeat(4,1fr);} }
    @media (max-width:720px){ .cal-week{ grid-template-columns:repeat(2,1fr);} }
    @media (max-width:460px){ .cal-week{ grid-template-columns:1fr;} }
    .cal-day { border:1px solid var(--border-glow); border-radius:6px; background:var(--input-bg); min-height:92px; display:flex; flex-direction:column; overflow:hidden; }
    .cal-day.today { border-color:var(--neon-blue); box-shadow:0 0 0 1px rgba(0,210,255,.3) inset; }
    .cal-day-head { padding:6px 9px; font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-secondary); border-bottom:1px solid var(--border-glow); display:flex; justify-content:space-between; align-items:center; gap:6px; }
    .cal-day.today .cal-day-head { color:var(--neon-blue); }
    .cal-day-add { cursor:pointer; color:var(--text-secondary); border:1px solid var(--border-glow); border-radius:3px; padding:0 6px; font-size:0.8rem; line-height:1.3; }
    .cal-day-add:hover { color:var(--neon-blue); border-color:var(--neon-blue); }
    .cal-appts { display:flex; flex-direction:column; gap:4px; padding:6px; flex:1; }
    .cal-appt { background:#0b0c10; border:1px solid var(--border-glow); border-left:3px solid var(--neon-blue); border-radius:4px; padding:5px 7px; cursor:pointer; }
    .cal-appt:hover { border-color:#334155; background:var(--row-hover); }
    .cal-appt-time { font-size:0.63rem; font-weight:700; color:var(--neon-blue); }
    .cal-appt-cust { font-size:0.74rem; color:#cbd5e1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cal-appt-meta { font-size:0.63rem; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cal-appt-bay { color:#94a3b8; font-weight:400; }
    .cal-empty-day { font-size:0.66rem; color:#475569; padding:8px; text-align:center; }

    /* ===== SIDEBAR NAVIGATION ===== */
    #navSidebar {
      position: fixed; left: 0; top: 0; width: 180px; height: 100vh;
      background: #07080c; border-right: 1px solid var(--border-glow);
      display: flex; flex-direction: column; z-index: 500; overflow-y: auto;
    }
    .nav-logo {
      padding: 18px 16px 14px; font-size: 0.78rem; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase; color: var(--neon-blue);
      border-bottom: 1px solid var(--border-glow); margin-bottom: 8px; line-height: 1.2;
    }
    .nav-logo-sub { font-size: 0.6rem; color: var(--text-secondary); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; display: block; margin-top: 3px; }
    .nav-btn {
      background: transparent; border: none; border-left: 3px solid transparent;
      color: var(--text-secondary); text-align: left; padding: 11px 14px 11px 13px;
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
      cursor: pointer; font-family: inherit;
      display: flex; align-items: center; justify-content: space-between;
      transition: all 0.12s; width: 100%;
    }
    .nav-btn:hover { color: var(--text-primary); background: var(--row-hover); border-left-color: #334155; }
    .nav-btn.active { color: var(--neon-blue); border-left-color: var(--neon-blue); background: rgba(0,210,255,.07); }
    .nav-badge {
      font-size: 0.6rem; background: var(--neon-red); color: #fff;
      border-radius: 999px; padding: 1px 5px; font-weight: 700; min-width: 16px;
      text-align: center; display: none;
    }
    .nav-badge.show { display: inline-block; }
    .nav-sep { height: 1px; background: var(--border-glow); margin: 6px 12px; }
    .nav-version {
      margin-top: auto; padding: 12px 16px 14px; font-size: 0.6rem;
      color: var(--text-secondary); letter-spacing: 1px; opacity: 0.6;
      border-top: 1px solid var(--border-glow);
    }

    /* ===== VIEW SYSTEM ===== */
    body { padding-left: 180px; }
    #mainContent { max-width: 1440px; padding: 20px; }
    .view { display: none; }
    .view.active { display: block; }
    .analytics-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
    @media (max-width: 1100px) { .analytics-layout { grid-template-columns: 1fr; } }

    /* ===== CALENDAR JOB ENTRIES ===== */
    .cal-job {
      background: rgba(0,255,102,.06); border: 1px solid rgba(0,255,102,.2);
      border-left: 3px solid var(--neon-green); border-radius: 3px;
      padding: 4px 6px; margin-top: 3px; cursor: pointer; font-size: 0.68rem;
    }
    .cal-job:hover { border-color: rgba(0,255,102,.5); background: rgba(0,255,102,.1); }
    .cal-job-cust { color: #cbd5e1; font-weight: 600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cal-job-meta { color: var(--text-secondary); font-size: 0.62rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cal-section-sep { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.4px; color: #334155; margin: 5px 0 3px; border-top: 1px solid #0d0e14; padding-top: 4px; }

    /* ===== VEHICLE AUTOFILL HINT ===== */
    .veh-autofill-hint { display:none; margin:4px 0 10px; padding:7px 10px; border:1px solid rgba(0,255,102,.28); background:rgba(0,255,102,.05); color:#86efac; border-radius:4px; font-size:0.72rem; cursor:pointer; }
    .veh-autofill-hint.show { display:block; }

    @media print { #navSidebar { display: none !important; } body { padding-left: 0 !important; } }

    /* ============================================================
       LIGHT / BRIGHT THEME  (same font, high-contrast for daylight / bright bays)
       Activated by body.light — remaps the variable palette, then patches
       the selectors that use hardcoded dark hex so nothing stays dark.
       ============================================================ */
    body.light {
      --bg-main: #eef1f6;
      --panel-bg: #ffffff;
      --border-glow: #d4dae3;
      --text-primary: #0f172a;
      --text-secondary: #475569;
      --neon-blue: #0369a1;
      --neon-green: #15803d;
      --neon-amber: #b45309;
      --neon-red: #dc2626;
      --panel-header: #f4f6fa;
      --input-bg: #ffffff;
      --row-hover: #eef2f7;
      --soft-blue: rgba(3,105,161,.10);
      --soft-green: rgba(21,128,61,.10);
      --soft-amber: rgba(180,83,9,.12);
      --soft-red: rgba(220,38,38,.10);
    }
    /* Structural backgrounds that were hardcoded dark */
    body.light #navSidebar { background:#f4f6fa; }
    body.light .mode-toggle-group, body.light .tab-strip { background:#e6eaf1; }
    body.light .preset-badge, body.light .status-badge, body.light .tiny-badge { background:#eef2f7; color:#475569; }
    body.light input:disabled, body.light textarea:disabled, body.light select:disabled { background:#eef1f5; border-color:#dfe4ec; color:#94a3b8; }
    body.light select.auto-locked:disabled { background:#e8f7ee; border-color:rgba(21,128,61,.35); color:#15803d; }
    body.light input[type="range"] { background:#dfe4ec; }
    body.light .readout-card { background:#f6f8fb; }
    body.light .manual-input { background:#ffffff; border-color:#cbd3de; color:var(--text-primary); }
    body.light .ai-toast { background:#ffffff; color:var(--text-primary); box-shadow:0 8px 30px rgba(15,23,42,.18); }
    body.light .vault-box, body.light .metric-card { background:#f6f8fb; }
    body.light .metric-bar-wrap, body.light .target-bar-wrap { background:#e2e7ef; }
    body.light .day-popup { background:#ffffff; border-color:#d4dae3; box-shadow:0 4px 16px rgba(15,23,42,.16); }
    body.light .day-popup-date { border-bottom-color:#d4dae3; }
    body.light .day-popup-job { color:#475569; border-bottom-color:#eef2f7; }
    body.light .parts-summary-bar { background:#f6f8fb; }
    body.light .telemetry-row { border-bottom-color:#e2e7ef; }
    body.light td { border-bottom-color:#e8ecf2; color:#334155; }
    body.light .pill { background:#eef2f7; color:#334155; }
    body.light .customer-card { border-bottom-color:#e8ecf2; }
    body.light .form-section { background:#f8fafc; }
    body.light .form-section > summary:hover { background:#eef2f7; }
    body.light .wb-col-count { background:#e2e7ef; color:#334155; }
    body.light .wb-job { border-bottom-color:#e8ecf2; }
    body.light .cal-appt { background:#f6f8fb; }
    body.light .cal-appt:hover { border-color:#94a3b8; }
    body.light .cal-empty-day { color:#94a3b8; }
    body.light .nav-btn:hover { border-left-color:#94a3b8; }
    body.light .cal-section-sep { color:#64748b; border-top-color:#e2e7ef; }
    /* Secondary text that was light-on-dark slate → dark-on-light slate */
    body.light .wb-job .wbj-name,
    body.light .vh-job .vhj-desc,
    body.light .draft-recover .dr-body,
    body.light .cal-appt-cust,
    body.light .cal-job-cust { color:#1e293b; }
    body.light .wb-job .wbj-bay { color:#0369a1; }
    body.light .cal-appt-bay, body.light .engine-year-hint { color:#475569; }
    /* Colored badges/labels — repoint pastel-on-dark text to readable-on-light */
    body.light .tier-basic { color:#0369a1; }
    body.light .tier-standard, body.light .veh-autofill-hint { color:#15803d; }
    body.light .tier-major, body.light .pay-internal, body.light .engine-year-hint.warn { color:#b45309; }
    body.light .tier-custom { color:#475569; }
    body.light .pay-warranty { color:#7c3aed; }
    body.light .due-badge.overdue { color:#b91c1c; }
    body.light .due-badge.soon { color:#b45309; }
    body.light .draft-recover .dr-title { color:#0369a1; }
    body.light .vh-declined-title, body.light .vh-declined-item, body.light .inv-low-alert { color:#b91c1c; }

    /* Theme toggle control (Preferences) */
    .theme-toggle-group { display:inline-flex; gap:4px; background:var(--input-bg); border:1px solid var(--border-glow); border-radius:5px; padding:3px; }
    .theme-opt { background:transparent; border:none; color:var(--text-secondary); font-family:inherit; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:6px 14px; border-radius:3px; cursor:pointer; transition:all 0.12s; }
    .theme-opt.active { background:var(--neon-blue); color:#fff; }

    /* VIN decode / scan */
    .vin-row { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
    .vin-field { flex:1 1 200px; min-width:160px; }
    #vinInput { width:100%; text-transform:uppercase; letter-spacing:1.5px; }
    .vin-btn { background:#111319; border:1px solid var(--border-glow); color:var(--neon-blue); font-family:inherit; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:0 16px; border-radius:4px; cursor:pointer; transition:all .12s; }
    .vin-btn:hover { border-color:var(--neon-blue); background:rgba(0,210,255,.08); }
    .vin-btn:disabled { opacity:0.5; cursor:wait; }
    .vin-btn-scan { color:var(--neon-green); }
    .vin-btn-scan:hover { border-color:var(--neon-green); background:rgba(0,255,102,.08); }
    .vin-status { font-size:0.7rem; line-height:1.4; min-height:13px; margin:0 0 10px; color:var(--text-secondary); }
    .vin-status.ok { color:var(--neon-green); }
    .vin-status.warn { color:var(--neon-amber); }
    body.light .vin-btn { background:#eef2f7; }
    .vin-btn-recall { color:var(--neon-amber); }
    .vin-btn-recall:hover { border-color:var(--neon-amber); background:rgba(234,179,8,.08); }
    /* Labor Guide (self-building) */
    .labor-guide { border:1px solid rgba(0,210,255,.3); background:rgba(0,210,255,.05); border-radius:6px; padding:12px 14px; margin-bottom:12px; }
    .lg-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
    .lg-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--neon-blue); }
    .lg-source { font-size:0.64rem; color:var(--text-secondary); }
    .lg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
    .lg-stat { display:flex; flex-direction:column; gap:2px; }
    .lg-stat-label { font-size:0.58rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); font-weight:700; }
    .lg-stat-val { font-size:1.05rem; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
    .lg-parts { font-size:0.66rem; color:var(--text-secondary); margin-bottom:10px; line-height:1.6; }
    .lg-part { display:inline-block; background:var(--input-bg); border:1px solid var(--border-glow); border-radius:999px; padding:1px 8px; margin:0 4px 4px 0; color:var(--text-primary); }
    .lg-noparts { font-style:italic; }
    .lg-actions { display:flex; gap:6px; flex-wrap:wrap; }
    .lg-btn { background:#111319; border:1px solid var(--border-glow); color:var(--text-primary); font-family:inherit; font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:7px 12px; border-radius:4px; cursor:pointer; transition:all .12s; }
    .lg-btn:hover { border-color:var(--neon-blue); }
    .lg-btn-primary { background:var(--neon-blue); color:#04121a; border-color:var(--neon-blue); }
    .lg-btn-primary:hover { filter:brightness(1.1); }
    body.light .lg-btn { background:#eef2f7; }
    body.light .lg-btn-primary { color:#fff; }

    /* Quick-fee library */
    .fee-lib { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px; }
    .fee-lib-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); font-weight:700; }
    .fee-chips { display:flex; gap:5px; flex-wrap:wrap; }
    .fee-chip { background:#111319; border:1px solid var(--border-glow); color:var(--neon-green); font-family:inherit; font-size:0.63rem; font-weight:700; padding:3px 9px; border-radius:999px; cursor:pointer; transition:all .12s; }
    .fee-chip:hover { border-color:var(--neon-green); background:rgba(0,255,102,.08); }
    .fee-chip.removing { color:var(--neon-red); border-color:rgba(239,68,68,.5); text-decoration:line-through; }
    .fee-empty { font-size:0.66rem; color:var(--text-secondary); }
    .fee-lib-btn { background:transparent; border:1px solid var(--border-glow); color:var(--text-secondary); font-family:inherit; font-size:0.63rem; font-weight:700; padding:3px 9px; border-radius:4px; cursor:pointer; }
    .fee-lib-btn:hover { border-color:var(--neon-blue); color:var(--neon-blue); }
    .fee-lib-btn.active { border-color:var(--neon-red); color:var(--neon-red); }
    body.light .fee-chip { background:#eef2f7; }

    /* Parts Price Finder */
    .pf-search { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
    .pf-search #pfQuery { flex:1; min-width:200px; }
    .pf-vehtoggle { font-size:0.66rem; color:var(--text-secondary); display:flex; align-items:center; gap:5px; white-space:nowrap; cursor:pointer; }
    .pf-vehtoggle input { width:auto; }
    .pf-vehnote { font-size:0.66rem; color:var(--text-secondary); margin-bottom:8px; min-height:12px; }
    .pf-vehnote strong { color:var(--neon-blue); font-weight:700; }
    .pf-google { display:block; text-align:center; text-decoration:none; background:var(--neon-blue); color:#04121a; font-weight:700; font-size:0.8rem; padding:11px; border-radius:5px; margin-bottom:8px; transition:filter .12s; }
    .pf-google:hover { filter:brightness(1.1); }
    .pf-google.pf-disabled { opacity:.4; pointer-events:none; }
    body.light .pf-google { color:#fff; }
    .pf-fetch { display:block; width:100%; text-align:center; background:transparent; border:1px solid var(--neon-green); color:var(--neon-green); font-family:inherit; font-weight:700; font-size:0.74rem; padding:9px; border-radius:5px; margin-bottom:8px; cursor:pointer; transition:all .12s; }
    .pf-fetch:hover { background:rgba(0,255,102,.08); }
    .pf-fetch:disabled { opacity:.5; cursor:wait; }
    .pf-results { margin-bottom:10px; }
    .pf-msg { font-size:0.7rem; color:var(--text-secondary); line-height:1.45; padding:2px 0; }
    .pf-result { display:flex; align-items:center; gap:8px; border:1px solid var(--border-glow); border-radius:4px; padding:6px 9px; margin-bottom:5px; background:var(--input-bg); }
    .pf-result.pf-cheapest { border-color:var(--neon-green); border-left:3px solid var(--neon-green); }
    .pf-result-title { flex:1; font-size:0.68rem; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .pf-result-price { font-size:0.8rem; font-weight:700; color:var(--neon-green); font-variant-numeric:tabular-nums; white-space:nowrap; }
    .pf-result-add { background:#111319; border:1px solid var(--border-glow); color:var(--neon-blue); font-family:inherit; font-size:0.6rem; font-weight:700; text-transform:uppercase; padding:4px 9px; border-radius:4px; cursor:pointer; white-space:nowrap; }
    .pf-result-add:hover { border-color:var(--neon-blue); }
    body.light .pf-result-add { background:#eef2f7; }
    .pf-or { text-align:center; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); margin-bottom:8px; }
    .pf-suppliers { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
    .pf-supplier { background:#111319; border:1px solid var(--border-glow); color:var(--text-primary); font-family:inherit; font-size:0.66rem; font-weight:700; text-decoration:none; padding:7px 12px; border-radius:4px; transition:all .12s; display:inline-block; }
    .pf-supplier:hover { border-color:var(--neon-blue); color:var(--neon-blue); }
    .pf-supplier.pf-disabled { opacity:.4; pointer-events:none; }
    body.light .pf-supplier { background:#eef2f7; }
    .pf-compare { border-top:1px solid var(--border-glow); padding-top:10px; }
    .pf-compare-head { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); margin-bottom:8px; }
    .pf-subhint { font-weight:400; text-transform:none; letter-spacing:0; color:#475569; }
    .pf-rows { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:6px; margin-bottom:8px; }
    .pf-row { display:flex; align-items:center; gap:6px; border:1px solid var(--border-glow); border-radius:4px; padding:4px 8px; background:var(--input-bg); }
    .pf-row.pf-cheapest { border-color:var(--neon-green); background:rgba(0,255,102,.06); }
    .pf-row-name { font-size:0.66rem; color:var(--text-secondary); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pf-row input { width:64px; padding:4px 6px; font-size:0.74rem; }
    .pf-best { font-size:0.72rem; color:var(--neon-green); min-height:14px; margin-bottom:8px; font-weight:700; }

    /* Recall results */
    .recall-results { margin:0 0 10px; }
    .recall-msg { font-size:0.72rem; line-height:1.45; margin-bottom:6px; color:var(--text-secondary); }
    .recall-msg.ok { color:var(--neon-green); }
    .recall-msg.warn { color:var(--neon-amber); }
    .recall-item { border:1px solid var(--border-glow); border-left:3px solid var(--neon-amber); border-radius:4px; padding:8px 10px; margin-bottom:6px; background:var(--input-bg); }
    .recall-head { font-size:0.72rem; font-weight:700; color:var(--text-primary); display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
    .recall-camp { font-size:0.62rem; color:var(--text-secondary); font-weight:400; }
    .recall-body { font-size:0.68rem; color:var(--text-secondary); line-height:1.45; margin-top:4px; }
    .recall-remedy { font-size:0.68rem; color:var(--text-secondary); line-height:1.45; margin-top:4px; }

    /* Technician time-clock */
    .job-timer { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; padding:9px 14px; border:1px solid var(--border-glow); border-radius:6px; background:var(--input-bg); }
    .job-timer.running { border-color:var(--neon-green); }
    .jt-left { display:flex; align-items:center; gap:9px; }
    .jt-dot { width:8px; height:8px; border-radius:50%; background:var(--text-secondary); flex-shrink:0; }
    .job-timer.running .jt-dot { background:var(--neon-green); animation:jtPulse 1.1s ease-in-out infinite; }
    @keyframes jtPulse { 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
    .jt-label { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-secondary); }
    .jt-display { font-size:1.2rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:1px; color:var(--text-primary); min-width:72px; }
    .job-timer.running .jt-display { color:var(--neon-green); }
    .jt-actions { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
    .jt-btn { background:#111319; border:1px solid var(--border-glow); color:var(--text-primary); font-family:inherit; font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:6px 12px; border-radius:4px; cursor:pointer; transition:all .12s; }
    .jt-btn:hover { border-color:var(--neon-blue); }
    .jt-toggle { color:var(--neon-green); border-color:rgba(0,255,102,.3); }
    .jt-toggle.running { color:#fff; background:var(--neon-red); border-color:var(--neon-red); }
    .jt-reset:hover { border-color:var(--neon-red); }
    .jt-compare { flex-basis:100%; font-size:0.66rem; color:var(--text-secondary); min-height:12px; }
    body.light .jt-btn { background:#eef2f7; }

    /* Voice dictation */
    .lr-actions { display:flex; gap:6px; align-items:center; }
    .ai-btn.listening { color:#fff; background:var(--neon-red); border-color:var(--neon-red); animation:jtPulse 1.2s ease-in-out infinite; }

    /* Inspection map (clickable car) */
    .car-diagram-wrap { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
    #carDiagram { width:170px; max-width:46vw; flex-shrink:0; }
    .car-body { fill:rgba(148,163,184,.05); stroke:var(--border-glow); stroke-width:2; }
    .car-zone { fill:rgba(148,163,184,.06); stroke:var(--border-glow); stroke-width:1; cursor:pointer; transition:fill .12s, stroke .12s; }
    .car-zone:hover { fill:rgba(0,210,255,.2); stroke:var(--neon-blue); }
    .car-zone.marked { fill:rgba(239,68,68,.45); stroke:var(--neon-red); }
    .insp-side { flex:1; min-width:200px; }
    .insp-title { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-secondary); margin-bottom:6px; }
    .insp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:18px; }
    .insp-chip { font-size:0.66rem; background:var(--soft-red); color:#fecaca; border:1px solid rgba(239,68,68,.4); border-radius:999px; padding:3px 10px; cursor:pointer; }
    .insp-chip:hover { text-decoration:line-through; }
    .insp-empty { font-size:0.7rem; color:var(--text-secondary); }
    .insp-clear:disabled { opacity:.4; cursor:default; }
    body.light .insp-chip { color:#b91c1c; }

    /* Solo-mechanic mode hides shop-only fields */
    body.solo .field-techcost, body.solo .field-bay { display:none; }

    /* ===== EXPERIENCE LEVEL ===== */
    /* EASY — strips advanced clutter and enlarges text for older / new users */
    body.level-easy .ai-entry-box,
    body.level-easy .mode-toggle-group,
    body.level-easy .job-timer,
    body.level-easy details[data-section="templates"],
    body.level-easy details[data-section="inspection"],
    body.level-easy details[data-section="pricefinder"],
    body.level-easy .field-techcost,
    body.level-easy .input-group:has(#tax),
    body.level-easy .input-group:has(#defaultMarkupSlider),
    body.level-easy .input-group:has(#jobTier),
    body.level-easy .input-group:has(#payType),
    body.level-easy .input-group:has(#engineCode),
    body.level-easy .input-group:has(#cylinders),
    body.level-easy .input-group:has(#workflowStatus),
    body.level-easy .field-bay,
    body.level-easy .input-group:has(#declinedWork),
    body.level-easy .input-group:has(#authConfirmation),
    body.level-easy .nav-btn[data-view="analytics"],
    body.level-easy .nav-btn[data-view="inventory"] { display:none !important; }
    body.level-easy label { font-size:0.8rem; }
    body.level-easy input, body.level-easy select, body.level-easy textarea { font-size:1rem; }
    body.level-easy .nav-btn { font-size:0.82rem; padding:14px 14px; }
    body.level-easy .panel-title { font-size:0.9rem; }
    body.level-easy .btn-primary { font-size:0.95rem; padding:14px; }
    body.level-easy summary { font-size:0.86rem; }
    body.level-easy .ai-entry-hint, body.level-easy .field-hint { font-size:0.78rem; }
    /* A friendly banner only Easy mode shows */
    .easy-banner { display:none; }
    body.level-easy .easy-banner { display:block; margin-bottom:14px; padding:11px 14px; border:1px solid rgba(0,210,255,.3); background:rgba(0,210,255,.06); border-radius:6px; font-size:0.84rem; color:var(--text-primary); line-height:1.5; }
    /* PRO — power-user surfaces (hidden until Pro) */
    .pro-only { display:none; }
    body.level-pro .pro-only { display:block; }
    /* VIN camera-scan overlay (built in JS on demand) */
    .vin-scan-overlay { position:fixed; inset:0; background:rgba(2,3,8,.9); z-index:9998; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; }
    .vin-scan-box { width:min(520px,92vw); position:relative; border:1px solid var(--neon-blue); border-radius:10px; overflow:hidden; background:#000; box-shadow:0 0 40px rgba(0,210,255,.25); }
    .vin-scan-box video { width:100%; display:block; }
    .vin-scan-reticle { position:absolute; left:8%; right:8%; top:42%; height:16%; border:2px solid var(--neon-green); border-radius:6px; pointer-events:none; }
    .vin-scan-hint { color:#cbd5e1; font-size:0.78rem; text-align:center; max-width:520px; line-height:1.5; }
    .vin-scan-cancel { background:#111319; border:1px solid var(--border-glow); color:#f1f5f9; font-family:inherit; font-weight:700; text-transform:uppercase; font-size:0.7rem; letter-spacing:0.5px; padding:9px 22px; border-radius:5px; cursor:pointer; }
    .vin-scan-cancel:hover { border-color:var(--neon-red); }

    /* =====================================================================
       INTERACTIVITY LAYER (v4.3.0+) — motion & feedback polish.
       Purely additive: amplifies the existing tactical-HUD feel.
       All new motion is disabled under prefers-reduced-motion (see bottom).
       ===================================================================== */

    /* Toast success / info variants (base .ai-toast is purple/AI-themed) */
    .ai-toast.ok { border-color: rgba(0,255,102,.5); border-left-color: var(--neon-green); }
    .ai-toast.ok .t-title { color: var(--neon-green); }
    .ai-toast.info { border-color: rgba(0,210,255,.5); border-left-color: var(--neon-blue); }
    .ai-toast.info .t-title { color: var(--neon-blue); }

    /* Card hover-lift + accent glow. Layered on top of existing card rules. */
    .vault-box, .metric-card { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
    .vault-box:hover, .metric-card:hover { transform: translateY(-2px); border-color: rgba(0,210,255,.35); box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 1px rgba(0,210,255,.12); }
    .readout-card { transition: border-color .3s ease, transform .16s ease, box-shadow .16s ease; }
    .readout-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.4); }
    .wb-job { transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
    .wb-job:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
    #viewCommand .cmd-bay { transition: background .12s, transform .14s ease, box-shadow .14s ease, border-left-color .14s ease; }
    #viewCommand .cmd-bay:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.5); }
    #viewCommand .cmd-bay[data-jobid] { cursor: pointer; }
    #viewCommand .cmd-pnode { transition: transform .14s ease, border-top-color .14s ease, box-shadow .14s ease; }
    #viewCommand .cmd-pnode:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.45); }
    #viewCommand .cmd-stat { transition: transform .14s ease, border-color .14s ease; }
    #viewCommand .cmd-stat:hover { transform: translateY(-2px); border-color: rgba(0,210,255,.3); }

    /* Tactile button press — momentary depress on click */
    .btn-primary:active, .btn-secondary:active, .btn-danger:active, .utility-btn:active,
    .ai-btn:active:not(:disabled), .mini-btn:active, .cmd-pull:active, .jt-btn:active { transform: translateY(1px); }
    .btn-primary, .btn-secondary, .btn-danger, .utility-btn, .ai-btn, .mini-btn { transition: transform .08s ease, filter .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }

    /* Live readout micro-flash already has .num-flash; add a value "pop" for count-ups */
    @keyframes numPop { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
    .num-pop { animation: numPop .35s cubic-bezier(.2,.8,.2,1); display: inline-block; }

    /* Monthly-target celebration — a one-shot glow ring on the Command gauge */
    @keyframes goalHitPulse {
      0%   { filter: drop-shadow(0 0 0 rgba(0,255,102,0)); }
      30%  { filter: drop-shadow(0 0 14px rgba(0,255,102,.85)); }
      100% { filter: drop-shadow(0 0 0 rgba(0,255,102,0)); }
    }
    #viewCommand .cmd-gauge.goal-hit svg { animation: goalHitPulse 1.4s ease-out 2; }

    /* View-enter fade so switching screens feels alive (not a hard cut) */
    @keyframes viewFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .view.active { animation: viewFade .22s ease-out; }

    /* Respect users who prefer reduced motion — neutralize all of the above */
    @media (prefers-reduced-motion: reduce) {
      .vault-box, .metric-card, .readout-card, .wb-job,
      #viewCommand .cmd-bay, #viewCommand .cmd-pnode, #viewCommand .cmd-stat,
      .btn-primary, .btn-secondary, .btn-danger, .utility-btn, .ai-btn, .mini-btn { transition: none !important; }
      .vault-box:hover, .metric-card:hover, .readout-card:hover, .wb-job:hover,
      #viewCommand .cmd-bay:hover, #viewCommand .cmd-pnode:hover, #viewCommand .cmd-stat:hover,
      .btn-primary:active, .btn-secondary:active, .btn-danger:active, .utility-btn:active,
      .ai-btn:active:not(:disabled), .mini-btn:active, .cmd-pull:active, .jt-btn:active { transform: none !important; }
      #viewCommand .cmd-gauge.goal-hit svg, .view.active, .num-pop, .num-flash { animation: none !important; }
    }

    /* =====================================================================
       POWERTRAIN (Tuner Mode) + VEHICLE HOLOGRAM
       ===================================================================== */
    /* Tuner-only powertrain fields: hidden until Tuner Mode is switched on */
    .tuner-only { display: none; }
    body.tuner-on .tuner-only { display: flex; }
    .tuner-tag { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #c084fc; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.35); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
    #powertrainSummaryWrap:has(.powertrain-summary:empty) { display: none; }
    .powertrain-summary { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.4px; color: var(--neon-blue); background: rgba(0,210,255,.06); border: 1px solid rgba(0,210,255,.25); border-radius: 5px; padding: 8px 11px; display: flex; align-items: center; gap: 7px; }
    .powertrain-summary:empty { display: none; }
    .powertrain-summary .pts-ico { color: #c084fc; font-size: 0.9rem; }
    /* Keep Easy mode clean — fold the transmission picker away with the engine fields */
    body.level-easy .input-group:has(#transmission) { display: none !important; }

    /* Wireframe vehicle hologram */
    .veh-holo-wrap { position: relative; grid-column: span 2; height: 156px; border: 1px solid var(--border-glow); border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 130%, rgba(0,210,255,.12), rgba(2,3,8,0) 68%), #04060a; display: flex; align-items: center; justify-content: center; margin: 2px 0; }
    .veh-holo-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,210,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,210,255,.06) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 55%, transparent 85%); mask-image: radial-gradient(ellipse at 50% 60%, #000 55%, transparent 85%); }
    .veh-holo-stage { position: relative; width: 76%; max-width: 360px; }
    .holo-line { fill: none; stroke: var(--neon-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    .holo-line.thin { stroke-width: 1.3; opacity: 0.7; }
    .holo-body { fill: rgba(0,210,255,.06); stroke: var(--neon-blue); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    .holo-glass { fill: rgba(0,210,255,.16); stroke: var(--neon-blue); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .holo-tire { fill: rgba(2,6,12,.55); stroke: var(--neon-blue); stroke-width: 2.6; vector-effect: non-scaling-stroke; }
    .holo-hub { fill: none; stroke: var(--neon-blue); stroke-width: 2; opacity: 0.85; vector-effect: non-scaling-stroke; }
    .holo-shadow { fill: rgba(0,210,255,.12); }
    .veh-holo-stage.ev { filter: drop-shadow(0 0 7px rgba(0,255,102,.6)); }
    .veh-holo-stage.ev .holo-line, .veh-holo-stage.ev .holo-hub, .veh-holo-stage.ev .holo-body, .veh-holo-stage.ev .holo-glass, .veh-holo-stage.ev .holo-tire { stroke: var(--neon-green); }
    .veh-holo-stage.ev .holo-body { fill: rgba(0,255,102,.06); }
    .veh-holo-stage.ev .holo-glass { fill: rgba(0,255,102,.16); }
    .veh-holo-stage.ev .holo-shadow { fill: rgba(0,255,102,.12); }
    .veh-holo-wrap.empty .veh-holo-stage { opacity: 0.28; }
    .veh-holo-wrap::after { content: ''; position: absolute; left: 0; right: 0; top: -16%; height: 16%; background: linear-gradient(rgba(0,210,255,.22), rgba(0,210,255,0)); pointer-events: none; animation: holoScan 3.4s linear infinite; }
    .veh-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; color: var(--text-secondary); opacity: 0.65; }
    .veh-ph svg { opacity: 0.8; }
    .veh-ph span { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 1px; }
    .veh-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
    .veh-holo-wrap.has-photo .veh-holo-grid { display: none; }
    .veh-holo-wrap.has-photo::after { display: none; }
    .veh-holo-wrap.has-photo .veh-holo-meta { left: 0; right: 0; bottom: 0; padding: 18px 12px 9px; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
    .veh-holo-wrap.has-photo .veh-holo-title, .veh-holo-wrap.has-photo .veh-holo-sub { color: #fff; }
    .veh-holo-wrap.drag { outline: 2px dashed var(--neon-blue); outline-offset: -5px; }
    .veh-photo-tools { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 5px; }
    .veh-photo-btn { background: rgba(11,12,16,.82); border: 1px solid var(--border-glow); color: var(--text-secondary); font-family: inherit; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 8px; border-radius: 4px; cursor: pointer; backdrop-filter: blur(3px); }
    .veh-photo-btn:hover { color: var(--neon-blue); border-color: var(--neon-blue); }
    .veh-photo-btn.danger:hover { color: #fca5a5; border-color: var(--neon-red); }
    .veh-auto-badge { display: none; position: absolute; top: 8px; left: 8px; z-index: 4; font-size: 0.55rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #021018; background: var(--neon-blue); padding: 2px 7px; border-radius: 4px; }
    .veh-holo-wrap.auto-photo .veh-auto-badge { display: inline-block; }
    .veh-photo-loading { display: none; position: absolute; left: 12px; bottom: 30px; z-index: 4; align-items: center; gap: 6px; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--neon-blue); }
    .veh-holo-wrap.photo-loading .veh-photo-loading { display: inline-flex; }
    .vpl-spin { width: 10px; height: 10px; border: 2px solid var(--border-glow); border-top-color: var(--neon-blue); border-radius: 50%; animation: vplSpin 0.7s linear infinite; }
    @keyframes vplSpin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .vpl-spin { animation: none; } }
    .veh-holo-meta { position: absolute; left: 12px; bottom: 9px; z-index: 3; display: flex; flex-direction: column; gap: 1px; pointer-events: none; }
    .veh-holo-title { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); letter-spacing: 0.4px; }
    .veh-holo-sub { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: var(--neon-blue); }
    .veh-holo-stage.ev ~ .veh-holo-meta .veh-holo-sub { color: var(--neon-green); }
    @keyframes holoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    @keyframes holoScan { 0% { top: -16%; } 100% { top: 116%; } }
    body.light .veh-holo-wrap { background: radial-gradient(ellipse at 50% 130%, rgba(2,132,199,.12), rgba(255,255,255,0) 68%), #eef3f8; border-color: #d7dee8; }
    body.light .holo-line, body.light .holo-hub, body.light .holo-body, body.light .holo-glass, body.light .holo-tire { stroke: #0284c7; }
    body.light .holo-body { fill: rgba(2,132,199,.07); }
    body.light .holo-glass { fill: rgba(2,132,199,.15); }
    body.light .holo-tire { fill: rgba(255,255,255,.5); }
    body.light .veh-holo-title { color: #0f172a; }
    @media (prefers-reduced-motion: reduce) {
      .veh-holo-stage { animation: none !important; }
      .veh-holo-wrap::after { display: none !important; }
    }

    /* =====================================================================
       INVENTORY — "parts wall" shop-front: bins on a pegboard, each with a
       stock-level fill gauge. Replaces the old flat table.
       ===================================================================== */
    .inv-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--border-glow); border-radius: 8px;
      background:
        radial-gradient(circle at center, rgba(0,210,255,.10) 1.4px, transparent 1.6px) 0 0 / 20px 20px,
        linear-gradient(180deg, #08090d, #050608); }
    .inv-empty { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 28px 10px; font-size: 0.82rem; line-height: 1.6; }
    .inv-bin { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 11px 11px 10px; border-radius: 6px; border: 1px solid var(--border-glow); border-top: 3px solid var(--neon-green);
      background: linear-gradient(180deg, #0e1016, #0a0b10); box-shadow: inset 0 -10px 18px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.35); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
    .inv-bin:hover { transform: translateY(-2px); box-shadow: inset 0 -10px 18px rgba(0,0,0,.35), 0 7px 18px rgba(0,0,0,.5); }
    .inv-bin.low { border-top-color: var(--neon-amber); }
    .inv-bin.out { border-top-color: var(--neon-red); }
    .inv-bin-head { display: flex; align-items: center; gap: 6px; }
    .inv-bin-name { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px dashed var(--border-glow); color: var(--text-primary); font-weight: 700; font-size: 0.84rem; padding: 2px 2px 4px; border-radius: 0; }
    .inv-bin-name:focus { border-bottom-color: var(--neon-blue); }
    .inv-bin-del { flex-shrink: 0; width: 22px; height: 22px; line-height: 1; border-radius: 4px; border: 1px solid var(--border-glow); background: transparent; color: var(--text-secondary); font-size: 1rem; cursor: pointer; padding: 0; }
    .inv-bin-del:hover { color: #fca5a5; border-color: rgba(239,68,68,.5); }
    .inv-bin-sku { background: var(--input-bg); border: 1px solid var(--border-glow); color: var(--text-secondary); font-size: 0.68rem; letter-spacing: 0.5px; padding: 4px 7px; border-radius: 4px; text-transform: uppercase; }
    .inv-bin-sku:focus { border-color: var(--neon-blue); color: var(--text-primary); }
    .inv-bin-gauge { height: 9px; border-radius: 5px; background: #04060a; border: 1px solid var(--border-glow); overflow: hidden; }
    .inv-bin-gauge > span { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, rgba(0,255,102,.5), var(--neon-green)); box-shadow: 0 0 8px rgba(0,255,102,.5); transition: width .35s ease; }
    .inv-bin.low .inv-bin-gauge > span { background: linear-gradient(90deg, rgba(234,179,8,.5), var(--neon-amber)); box-shadow: 0 0 8px rgba(234,179,8,.5); }
    .inv-bin.out .inv-bin-gauge > span { background: var(--neon-red); box-shadow: 0 0 8px rgba(239,68,68,.5); }
    .inv-bin-stock { display: flex; align-items: center; gap: 5px; }
    .inv-step { width: 26px; height: 28px; flex-shrink: 0; border-radius: 5px; border: 1px solid var(--border-glow); background: var(--input-bg); color: var(--neon-blue); font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
    .inv-step:hover { background: var(--neon-blue); color: #000; }
    .inv-step:active { transform: translateY(1px); }
    .inv-bin-stock > input { width: 46px; text-align: center; background: var(--input-bg); border: 1px solid var(--border-glow); color: var(--text-primary); font-weight: 700; font-size: 0.95rem; padding: 5px 4px; border-radius: 5px; }
    .inv-bin-status { margin-left: auto; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #86efac; white-space: nowrap; }
    .inv-bin.low .inv-bin-status { color: #fcd34d; }
    .inv-bin.out .inv-bin-status { color: #fca5a5; }
    .inv-bin-foot { display: flex; gap: 8px; }
    .inv-bin-foot label { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); }
    .inv-bin-foot input { width: 100%; min-width: 0; background: var(--input-bg); border: 1px solid var(--border-glow); color: var(--text-primary); font-size: 0.78rem; padding: 5px 6px; border-radius: 4px; }
    .inv-bin-foot input:focus { border-color: var(--neon-blue); }
    .inv-cost-unit { color: #334155; }
    body.light .inv-shelf { background: radial-gradient(circle at center, rgba(2,132,199,.12) 1.4px, transparent 1.6px) 0 0 / 20px 20px, #eef2f7; border-color: #d7dee8; }
    body.light .inv-bin { background: linear-gradient(180deg, #ffffff, #f4f7fb); box-shadow: 0 2px 6px rgba(15,23,42,.08); }
    body.light .inv-bin-name { color: #0f172a; }
    @media (prefers-reduced-motion: reduce) { .inv-bin, .inv-bin-gauge > span { transition: none !important; } .inv-bin:hover { transform: none !important; } }

    /* =====================================================================
       THEME MANAGER — Claude-inspired palettes. Each theme just re-defines the
       core CSS variables (the Command deck + most components read them), so the
       whole app re-skins. A few hardcoded surfaces get targeted overrides.
       ===================================================================== */
    .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    .theme-grid .theme-opt { padding: 8px 6px; }

    /* ---- Claude Night: warm, low-glare dark with a clay accent ---- */
    body.theme-claude-night {
      --bg-main: #1c1b19; --panel-bg: #262421; --panel-header: #2b2825; --border-glow: #3a362f;
      --text-primary: #f4f0e7; --text-secondary: #a8a293; --input-bg: #1a1815; --row-hover: #2f2b26;
      --neon-blue: #d97757; --neon-green: #8aa872; --neon-amber: #d9a441; --neon-red: #e07a5f;
      --soft-blue: rgba(217,119,87,.16); --soft-green: rgba(138,168,114,.14); --soft-amber: rgba(217,164,65,.14); --soft-red: rgba(224,122,95,.16);
    }
    body.theme-claude-night #navSidebar { background: #211f1c; }
    body.theme-claude-night .readout-card { background: #211f1c; }
    body.theme-claude-night .manual-input { background: #1a1815; }
    body.theme-claude-night .preset-badge, body.theme-claude-night .status-badge, body.theme-claude-night .tiny-badge { background: #2b2825; }
    body.theme-claude-night .vault-box, body.theme-claude-night .metric-card { background: #262421; }
    body.theme-claude-night .inv-shelf { background: radial-gradient(circle at center, rgba(217,119,87,.10) 1.4px, transparent 1.6px) 0 0 / 20px 20px, #211f1c; }
    body.theme-claude-night .inv-bin { background: linear-gradient(180deg, #2a2724, #232120); }
    body.theme-claude-night .btn-primary { color: #1c1b19; }
    body.theme-claude-night #viewCommand .cmd-deck { --pnl2: #211f1c; --ln2: #45403a; --bl: #c98c6a; --nu: #3a362f; }

    /* ---- High-Vis Day: warm, high-contrast light for a bright garage ---- */
    body.theme-claude-day {
      --bg-main: #e7e3d8; --panel-bg: #fbfaf6; --panel-header: #f2efe6; --border-glow: #cabfa8;
      --text-primary: #1a1815; --text-secondary: #5c574e; --input-bg: #ffffff; --row-hover: #f1ede2;
      --neon-blue: #bd5a39; --neon-green: #2c7a4b; --neon-amber: #9a6b0f; --neon-red: #b23a2a;
      --soft-blue: rgba(189,90,57,.14); --soft-green: rgba(44,122,75,.12); --soft-amber: rgba(154,107,15,.12); --soft-red: rgba(178,58,42,.14);
    }
    body.theme-claude-day #navSidebar { background: #efe9db; border-right: 1px solid #d8cdb6; }
    body.theme-claude-day .readout-card { background: #f7f4ec; border-color: #ddd3bf; }
    body.theme-claude-day .vault-box, body.theme-claude-day .metric-card { background: #f7f4ec; }
    body.theme-claude-day .wb-job { background: #ffffff; }
    body.theme-claude-day .preset-badge, body.theme-claude-day .status-badge, body.theme-claude-day .tiny-badge { background: #f2efe6; color: #5c574e; }
    body.theme-claude-day .inv-shelf { background: radial-gradient(circle at center, rgba(189,90,57,.12) 1.4px, transparent 1.6px) 0 0 / 20px 20px, #f3efe5; border-color: #d8cdb6; }
    body.theme-claude-day .inv-bin { background: linear-gradient(180deg, #ffffff, #f6f2e8); box-shadow: 0 2px 6px rgba(26,24,21,.08); }
    body.theme-claude-day .btn-primary { color: #fff; }
    body.theme-claude-day #viewCommand .cmd-deck { --pnl2: #f3efe5; --ln2: #cabfa8; --bl: #2563a8; --nu: #d8cdb6; }
    body.theme-claude-day .veh-holo-wrap { background: radial-gradient(ellipse at 50% 130%, rgba(189,90,57,.12), rgba(255,255,255,0) 68%), #f3efe5; border-color: #d8cdb6; }
    body.theme-claude-day .holo-line, body.theme-claude-day .holo-hub, body.theme-claude-day .holo-body, body.theme-claude-day .holo-glass, body.theme-claude-day .holo-tire { stroke: #bd5a39; }

    /* =====================================================================
       DENSITY — tighter padding/margins (a shop dashboard wants info density),
       and the Command deck now fills the viewport instead of floating with a
       big void below it. Compact Mode (body.compact) tightens further.
       ===================================================================== */
    #mainContent { padding: 14px 16px; max-width: 1720px; }
    .panel { margin-bottom: 13px; }
    .panel-body { padding: 13px 14px; }
    .panel-header { padding: 9px 14px; }
    .readout-grid { margin-top: 12px; margin-bottom: 10px; gap: 10px; }
    .readout-card { min-height: 92px; padding: 11px; }
    .bank-vault { gap: 11px; margin-bottom: 14px; }
    .metrics-grid { gap: 11px; }
    .form-section .section-body { padding: 11px 12px; }
    .analytics-layout { gap: 14px; margin-top: 13px; }

    /* Command deck: its frame fills the viewport (so the area below the content
       reads as padding inside a bordered dashboard, not a dead void). Only the
       activity feed grows to soak up extra height — bays stay a sensible size. */
    #viewCommand.view.active { display: flex; flex-direction: column; }
    #viewCommand .cmd-deck { flex: 1; min-height: calc(100vh - 30px); display: flex; flex-direction: column; padding: 12px; }
    #viewCommand .cmd-main { flex: 1; align-items: start; }
    #viewCommand .cmd-col:first-child .cmd-card:first-child .cmd-bays { grid-auto-rows: minmax(92px, auto); }
    #viewCommand .cmd-col:last-child { height: 100%; }
    #viewCommand .cmd-col:last-child .cmd-card:last-child { flex: 1; display: flex; flex-direction: column; min-height: 160px; }
    #viewCommand .cmd-col:last-child .cmd-card:last-child .cmd-feed { flex: 1; }

    /* Compact Mode — systematically denser for power users / small shop PCs */
    body.compact #mainContent { padding: 10px 12px; }
    body.compact .panel { margin-bottom: 9px; }
    body.compact .panel-body { padding: 9px 10px; }
    body.compact .panel-header { padding: 7px 11px; }
    body.compact .form-section .section-body { padding: 8px 10px; }
    body.compact .grid-2, body.compact .grid-3, body.compact .grid-4 { gap: 8px; }
    body.compact input, body.compact select, body.compact textarea { padding-top: 7px; padding-bottom: 7px; font-size: 0.88rem; }
    body.compact .readout-card { min-height: 80px; padding: 9px; }
    body.compact .readout-value { font-size: 1.2rem; }
    body.compact .bank-vault, body.compact .metrics-grid { gap: 8px; }
    body.compact .vault-box, body.compact .metric-card { padding: 11px; }
    body.compact .nav-btn { padding: 8px 13px; }
    body.compact .ledger-wrapper td, body.compact .ledger-wrapper th { padding-top: 5px; padding-bottom: 5px; }

    /* =====================================================================
       RESPONSIVE — graceful reflow for tablets / smaller shop PCs so the
       vaults, metrics, Command deck, and tables don't get cramped.
       ===================================================================== */
    @media (max-width: 1240px) {
      .bank-vault { grid-template-columns: repeat(2, 1fr); }
      .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 1040px) {
      #viewCommand .cmd-main { grid-template-columns: 1fr; }
      #viewCommand .cmd-col:last-child { height: auto; }
      .readout-grid { grid-template-columns: 1fr 1fr; }
      .readout-card:nth-child(3) { grid-column: span 2; }
    }
    @media (max-width: 760px) {
      .readout-grid, .readout-card:nth-child(3) { grid-template-columns: 1fr; grid-column: auto; }
      .bank-vault, .metrics-grid { grid-template-columns: 1fr 1fr; }
      #viewCommand .cmd-stats { grid-template-columns: 1fr 1fr; }
      .theme-grid { grid-template-columns: 1fr; }
    }
    /* Wide tables always scroll horizontally instead of squashing their columns */
    .parts-table-wrap, .ledger-wrapper, .inventory-wrapper { overflow-x: auto; }

    /* ===== WHAT'S NEW / PATCH NOTES ===== */
    .patch-sheet { max-height: 62vh; overflow-y: auto; padding: 14px 16px; background: var(--input-bg); }
    .patch-rel { padding: 10px 0 12px; border-bottom: 1px dashed var(--border-glow); }
    .patch-rel:last-child { border-bottom: none; }
    .patch-rel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
    .patch-v { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; color: var(--neon-blue); background: var(--soft-blue); border: 1px solid rgba(0,210,255,.3); border-radius: 4px; padding: 2px 8px; }
    .patch-t { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
    .patch-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
    .patch-list li { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.5; }
    .patch-list li::marker { color: var(--neon-blue); }

    /* =====================================================================
       V5 LAYER — guided rail, DVI, DTC, specs, signature, timeline, money
       panels, tire hotel, command palette.
       ===================================================================== */
    /* Guided job rail */
    .job-rail { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
    .jr-step { flex: 1; min-width: 96px; background: var(--input-bg); border: 1px solid var(--border-glow); border-radius: 5px; color: var(--text-secondary); font-family: inherit; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 6px; cursor: pointer; transition: color .15s, border-color .15s; }
    .jr-step:hover { color: var(--text-primary); border-color: #334155; }
    .jr-step.done { color: var(--neon-green); border-color: rgba(0,255,102,.4); background: rgba(0,255,102,.05); }
    .jr-step.jr-save.done { color: #000; background: var(--neon-green); }
    body.level-easy .job-rail { display: none; }

    /* DVI checklist */
    .dvi-legend { display: flex; gap: 12px; align-items: center; font-size: 0.66rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
    .dvi-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; }
    .dvi-dot.g { background: var(--neon-green); } .dvi-dot.y { background: var(--neon-amber); } .dvi-dot.r { background: var(--neon-red); }
    .dvi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    @media (max-width: 900px) { .dvi-grid { grid-template-columns: 1fr; } }
    .dvi-row { display: flex; align-items: center; gap: 7px; background: var(--input-bg); border: 1px solid var(--border-glow); border-radius: 5px; padding: 6px 9px; }
    .dvi-name { flex: 1; font-size: 0.72rem; color: var(--text-primary); }
    .dvi-btn { width: 30px; height: 26px; border-radius: 4px; border: 1px solid var(--border-glow); background: transparent; cursor: pointer; font-size: 0.62rem; font-weight: 700; color: var(--text-secondary); padding: 0; }
    .dvi-btn.g.on { background: var(--neon-green); color: #000; border-color: var(--neon-green); }
    .dvi-btn.y.on { background: var(--neon-amber); color: #000; border-color: var(--neon-amber); }
    .dvi-btn.r.on { background: var(--neon-red); color: #fff; border-color: var(--neon-red); }
    .dvi-val { width: 74px; background: var(--panel-bg); border: 1px solid var(--border-glow); border-radius: 4px; color: var(--text-primary); font-size: 0.7rem; padding: 4px 6px; }
    .dvi-row.st-y { border-left: 3px solid var(--neon-amber); }
    .dvi-row.st-r { border-left: 3px solid var(--neon-red); }
    .dvi-row.st-g { border-left: 3px solid var(--neon-green); }

    /* DTC lookup */
    .dtc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .dtc-result { font-size: 0.74rem; line-height: 1.5; color: var(--text-secondary); border: 1px dashed var(--border-glow); border-radius: 5px; padding: 8px 11px; display: none; }
    .dtc-result.show { display: block; }
    .dtc-result b { color: var(--neon-blue); }
    .dtc-result .dtc-causes { color: var(--text-secondary); }

    /* Specs library */
    .specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    @media (max-width: 900px) { .specs-grid { grid-template-columns: 1fr 1fr; } }
    .specs-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.6rem; }
    .specs-grid input { padding: 7px 9px; font-size: 0.8rem; }

    /* Signature pad */
    .sig-pad { width: 100%; max-width: 560px; height: 120px; background: var(--input-bg); border: 1px dashed var(--border-glow); border-radius: 6px; cursor: crosshair; touch-action: none; }

    /* Content creator */
    .content-grid { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .content-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-primary); text-transform: none; letter-spacing: 0; cursor: pointer; background: var(--input-bg); border: 1px solid var(--border-glow); border-radius: 5px; padding: 8px 12px; }
    .content-check input { width: auto; }
    .content-grid select, .content-grid input[type="text"] { flex: 1; min-width: 140px; }

    /* Job timeline */
    .timeline { display: flex; flex-direction: column; gap: 0; }
    .tl-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0 5px 14px; border-left: 2px solid var(--border-glow); position: relative; }
    .tl-row::before { content: ''; position: absolute; left: -5px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--neon-blue); }
    .tl-when { font-size: 0.64rem; color: var(--text-secondary); white-space: nowrap; min-width: 118px; }
    .tl-what { font-size: 0.74rem; color: var(--text-primary); }

    /* V5 analytics grid + money panels */
    .v5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
    @media (max-width: 1100px) { .v5-grid { grid-template-columns: 1fr; } }
    .pnl-row { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 5px 0; border-bottom: 1px dashed var(--border-glow); }
    .pnl-row:last-child { border-bottom: none; }
    .pnl-row.net { font-weight: 700; font-size: 0.9rem; padding-top: 9px; }
    .pnl-row.net .val.pos { color: var(--neon-green); } .pnl-row.net .val.neg { color: var(--neon-red); }
    .expense-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
    .exp-row { display: grid; grid-template-columns: 96px 1fr 86px 66px 28px; gap: 6px; align-items: center; }
    .exp-row input, .exp-row select { padding: 6px 7px; font-size: 0.74rem; }
    .exp-recur { display: inline-flex; align-items: center; gap: 4px; font-size: 0.58rem; color: var(--text-secondary); text-transform: uppercase; }
    .exp-del { width: 24px; height: 26px; border-radius: 4px; border: 1px solid var(--border-glow); background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; }
    .exp-del:hover { color: #fca5a5; border-color: rgba(239,68,68,.5); }
    .tax-report .pnl-row .val { color: var(--neon-amber); font-weight: 700; }
    .overdue-list, .reminder-list { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow-y: auto; }
    .od-row, .rem-row { display: flex; align-items: center; gap: 9px; background: var(--input-bg); border: 1px solid var(--border-glow); border-left: 3px solid var(--neon-red); border-radius: 5px; padding: 7px 10px; font-size: 0.72rem; }
    .rem-row { border-left-color: var(--neon-amber); }
    .od-main, .rem-main { flex: 1; min-width: 0; }
    .od-main b, .rem-main b { color: var(--text-primary); }
    .od-main small, .rem-main small { display: block; color: var(--text-secondary); font-size: 0.64rem; }
    .copy-sms { flex-shrink: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 5px 9px; border-radius: 4px; border: 1px solid var(--border-glow); background: transparent; color: var(--neon-blue); cursor: pointer; }
    .copy-sms:hover { border-color: var(--neon-blue); }
    .empty-hint { font-size: 0.72rem; color: var(--text-secondary); padding: 8px 2px; }
    .tech-tab { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
    .tech-tab th { text-align: left; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); padding: 5px 8px; border-bottom: 1px solid var(--border-glow); }
    .tech-tab td { padding: 6px 8px; border-bottom: 1px dashed var(--border-glow); }
    .tech-eff.good { color: var(--neon-green); } .tech-eff.bad { color: var(--neon-red); }

    /* Tire hotel */
    .tire-season { padding: 10px 13px; border: 1px solid rgba(0,210,255,.35); background: var(--soft-blue); border-radius: 6px; font-size: 0.78rem; margin-bottom: 12px; }
    .tire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
    .tire-card { background: var(--panel-bg); border: 1px solid var(--border-glow); border-top: 3px solid var(--neon-blue); border-radius: 6px; padding: 11px; display: flex; flex-direction: column; gap: 7px; }
    .tire-card.winter { border-top-color: #7dd3fc; } .tire-card.summer { border-top-color: var(--neon-amber); }
    .tire-card.out { opacity: 0.55; border-top-color: var(--border-glow); }
    .tire-card input, .tire-card select { padding: 6px 8px; font-size: 0.76rem; }
    .tire-head { display: flex; gap: 6px; align-items: center; }
    .tire-head input { flex: 1; font-weight: 700; }
    .tire-treads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .tire-treads label { font-size: 0.54rem; text-align: center; display: flex; flex-direction: column; gap: 2px; }
    .tire-foot { display: flex; gap: 6px; align-items: center; }
    .tire-status { flex-shrink: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; border: 1px solid rgba(0,255,102,.4); background: transparent; color: #86efac; cursor: pointer; }
    .tire-card.out .tire-status { border-color: var(--border-glow); color: var(--text-secondary); }

    /* Command palette (Ctrl+K) */
    .cmdk-overlay { position: fixed; inset: 0; background: rgba(2,3,8,.78); z-index: 9997; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(2px); }
    .cmdk-overlay.open { display: flex; }
    .cmdk { width: min(620px, 92vw); background: var(--panel-bg); border: 1px solid rgba(0,210,255,.4); border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.7); overflow: hidden; }
    .cmdk input { width: 100%; background: var(--input-bg); border: none; border-bottom: 1px solid var(--border-glow); color: var(--text-primary); font-size: 1rem; padding: 14px 16px; border-radius: 0; }
    .cmdk-results { max-height: 46vh; overflow-y: auto; }
    .cmdk-item { display: flex; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(26,28,35,.6); }
    .cmdk-item:hover, .cmdk-item.sel { background: var(--row-hover); }
    .cmdk-kind { flex-shrink: 0; font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border-glow); color: var(--neon-blue); min-width: 52px; text-align: center; }
    .cmdk-item .t { flex: 1; font-size: 0.8rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cmdk-item .s { font-size: 0.66rem; color: var(--text-secondary); white-space: nowrap; }
    .cmdk-hint { font-size: 0.6rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 14px; border-top: 1px solid var(--border-glow); }

    /* =====================================================================
       BOOT SPLASH — typewriter intro. Sits above everything, fades itself away.
       ===================================================================== */
    #splashScreen { position: fixed; inset: 0; z-index: 99998; background: #04060a; overflow: hidden; cursor: pointer; opacity: 1; transition: opacity .55s ease; }
    #splashScreen.sp-hide { opacity: 0; pointer-events: none; }
    #splashScreen .sp-grid { position: absolute; inset: 0;
      background-image: linear-gradient(rgba(0,210,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,210,255,.05) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 40%, transparent 80%);
      mask-image: radial-gradient(ellipse at 50% 55%, #000 40%, transparent 80%); }
    .sp-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding-bottom: 8vh; }
    .sp-live { font-size: .68rem; letter-spacing: 3px; color: var(--neon-green); text-transform: uppercase; margin-bottom: 14px; animation: spFadeUp .5s ease-out both .15s; }
    .sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); margin-right: 9px; animation: cmdPulse 1.2s ease-in-out infinite; }
    .sp-title { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 700; letter-spacing: 6px; color: var(--text-primary); text-transform: uppercase; text-shadow: 0 0 34px rgba(0,210,255,.45); }
    .sp-typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 3px solid var(--neon-blue); animation: spTypeIn 1.4s steps(7,end) .3s forwards, spBlink .55s step-end infinite .3s; }
    @keyframes spTypeIn { to { width: 100%; } }
    @keyframes spBlink { 0%,100% { border-color: var(--neon-blue); } 50% { border-color: transparent; } }
    .sp-sub { font-size: clamp(.7rem, 1.6vw, 1rem); letter-spacing: 10px; color: var(--neon-blue); text-transform: uppercase; margin-top: 10px; opacity: 0; animation: spFadeUp .55s ease-out both 1.8s; }
    .sp-bar { width: min(360px, 60vw); height: 3px; background: #131a24; border-radius: 3px; overflow: hidden; margin-top: 26px; opacity: 0; animation: spFadeUp .5s ease-out both 2s; }
    .sp-bar i { display: block; height: 100%; width: 0; background: var(--neon-blue); box-shadow: 0 0 12px var(--neon-blue); animation: spLoad 1.2s ease-in-out both 2.1s; }
    @keyframes spLoad { to { width: 100%; } }
    .sp-ver { font-size: .62rem; letter-spacing: 2px; color: var(--text-secondary); text-transform: uppercase; margin-top: 14px; opacity: 0; animation: spFadeUp .5s ease-out both 2.2s; }
    @keyframes spFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) { #splashScreen { display: none !important; } }

    /* =====================================================================
       MOBILE LAYER — phone-width PWA support (Android + iOS).
       The 180px left rail becomes a bottom nav bar; fixed elements move
       above it; inputs go to 16px so iOS Safari doesn't zoom on focus.
       ===================================================================== */
    @media (max-width: 640px) {
      /* --- bottom nav bar (replaces left sidebar) --- */
      body { padding-left: 0; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
      #navSidebar {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; height: auto;
        flex-direction: row; align-items: stretch;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-right: none; border-top: 1px solid var(--border-glow);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        scrollbar-width: none;
      }
      #navSidebar::-webkit-scrollbar { display: none; }
      .nav-logo, .nav-version { display: none; }
      .nav-sep { width: 1px; height: auto; margin: 10px 2px; flex: 0 0 1px; }
      .nav-btn {
        flex: 0 0 auto; width: auto;
        border-left: none; border-top: 3px solid transparent;
        padding: 14px 13px 13px; min-height: 54px;
        font-size: 0.68rem; letter-spacing: 0.5px;
        justify-content: center; gap: 5px; white-space: nowrap;
      }
      .nav-btn.active { border-left-color: transparent; border-top-color: var(--neon-blue); }
      body.level-easy .nav-btn { font-size: 0.74rem; padding: 14px 13px 13px; }

      /* --- fixed elements ride above the bottom nav --- */
      .floating-save { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); right: 10px; padding: 10px 16px; }
      .ai-toast { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); right: 10px; left: 10px; max-width: none; }
      .display-size-ctrl { display: none; }

      /* --- content + touch ergonomics --- */
      #mainContent { padding: 10px 10px 16px; }
      .panel-body { padding: 12px 10px; }
      .panel-header { padding: 10px 10px; }
      button, .mode-btn, .tab-btn, .preset-badge { min-height: 38px; }
      .mode-btn, .tab-btn { padding: 9px 12px; }
      /* 16px inputs prevent iOS Safari focus-zoom */
      input, textarea, select { font-size: 16px; }

      /* --- wide content scrolls instead of overflowing --- */
      table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .inventory-wrapper { overflow-x: auto; }

      /* --- modals become bottom sheets --- */
      .modal-backdrop { padding: 0; align-items: flex-end; }
      .modal {
        width: 100%; max-height: 94vh;
        border-radius: 14px 14px 0 0;
        border-left: none; border-right: none; border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }

      /* --- command palette + overlays --- */
      .cmdk-overlay { padding-top: 4vh; }
      .analytics-layout { grid-template-columns: 1fr; }
      .cal-week { grid-template-columns: 1fr; }
      .specs-grid { grid-template-columns: 1fr; }
      .perf-grid-4, .perf-grid-3 { grid-template-columns: 1fr; }
      #viewCommand .cmd-stats { grid-template-columns: 1fr 1fr; }
    }