.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1rem; box-shadow:var(--shadow-sm); }
.card.soft { background:var(--surface-2); box-shadow:none; }
.card.interactive { transition:.18s ease; }
.card.interactive:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.hero-card { background:linear-gradient(135deg, #0f172a, #1e3a8a); color:#fff; border:0; }
.hero-card .muted { color:#cbd5e1; }
.vehicle-head { display:flex; gap:.9rem; align-items:center; }
.vehicle-avatar { flex:0 0 auto; width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:rgb(255 255 255 / .12); font-size:1.5rem; }
.vehicle-title { font-weight:800; font-size:1.05rem; }
.muted { color:var(--muted); }
.metric { display:grid; gap:.15rem; }
.metric-value { font-size:1.7rem; font-weight:800; letter-spacing:-.04em; }
.metric-label { color:var(--muted); font-size:.82rem; }
.badge { display:inline-flex; align-items:center; gap:.35rem; width:max-content; padding:.25rem .55rem; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--surface-2); color:var(--text); }
.badge.success { color:var(--success); background:#ecfdf3; }
.badge.warning { color:var(--warning); background:#fff7ed; }
.badge.danger { color:var(--danger); background:#fef2f2; }
.badge.info { color:var(--info); background:#f0f9ff; }
.progress { height:8px; overflow:hidden; background:var(--surface-2); border-radius:999px; }
.progress > span { display:block; height:100%; border-radius:inherit; background:var(--primary-2); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:42px; border:1px solid transparent; border-radius:12px; padding:.65rem .9rem; font-weight:750; text-decoration:none; }
.btn.primary { background:var(--primary); color:#fff; }
.btn.secondary { border-color:var(--line); background:var(--surface); color:var(--text); }
.btn.ghost { background:transparent; color:var(--primary); }
.btn.danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.quick-action { border:1px solid var(--line); background:var(--surface); border-radius:var(--r-md); min-height:88px; padding:.8rem; text-align:left; display:grid; gap:.35rem; align-content:center; }
.quick-action strong { font-size:.9rem; }
.quick-icon { font-size:1.25rem; }
.list { display:grid; gap:.65rem; }
.list-item { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:0; }
.list-main { min-width:0; }
.list-title { font-weight:750; }
.list-meta { color:var(--muted); font-size:.82rem; margin-top:.1rem; }
.searchbox { display:flex; align-items:center; gap:.65rem; padding:.75rem .9rem; border:1px solid var(--line); background:var(--surface); border-radius:14px; }
.searchbox input { width:100%; border:0; outline:0; background:transparent; }
.field { display:grid; gap:.35rem; }
.field label { font-size:.8rem; font-weight:700; }
.field input, .field select, .field textarea { width:100%; min-height:44px; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:.7rem .8rem; color:var(--text); }
.field textarea { min-height:110px; resize:vertical; }
.form-grid { display:grid; gap:.85rem; }
.vehicle-selector { max-width:100%; min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:.58rem .75rem; color:var(--text); text-overflow:ellipsis; }
.state-panel { display:grid; place-items:start; gap:.7rem; padding:1.1rem; border:1px dashed var(--line); border-radius:var(--r-md); background:var(--surface); }
.state-icon { font-size:1.6rem; }
.kpi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.timeline { display:grid; gap:0; }
.timeline-item { position:relative; padding:0 0 1rem 1.5rem; }
.timeline-item::before { content:""; position:absolute; left:.35rem; top:.38rem; width:.55rem; height:.55rem; border-radius:50%; background:var(--primary-2); }
.timeline-item::after { content:""; position:absolute; left:.6rem; top:1rem; bottom:0; width:1px; background:var(--line); }
.timeline-item:last-child::after { display:none; }
.timeline-date { font-size:.75rem; color:var(--muted); }
.segmented { display:flex; gap:.25rem; padding:.25rem; background:var(--surface-2); border-radius:14px; overflow:auto; }
.segmented a { flex:0 0 auto; padding:.55rem .75rem; border-radius:10px; text-decoration:none; font-size:.82rem; font-weight:700; color:var(--muted); }
.segmented a.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.ai-box { display:grid; gap:.8rem; }
.ai-answer { background:var(--surface-subtle); border-left:4px solid var(--primary-2); padding:.9rem; border-radius:0 12px 12px 0; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:.45rem .7rem; font-size:.78rem; }
.toast-root { position:fixed; right:1rem; bottom:5.5rem; z-index:100; display:grid; gap:.5rem; width:min(360px, calc(100vw - 2rem)); }
.toast { padding:.8rem 1rem; border-radius:12px; background:var(--primary); color:#fff; box-shadow:var(--shadow-md); animation:toastin .18s ease-out; }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
table { width:100%; border-collapse:collapse; min-width:640px; }
th, td { padding:.75rem; border-bottom:1px solid var(--line); text-align:left; font-size:.84rem; }
th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }

/* CODE-5 local-first/sync */
.sync-strip{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.badge[disabled],button[disabled]{opacity:.55;cursor:not-allowed}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82em}

/* CODE-6 grounded AI runtime */
.ai-mode { display:flex; gap:.5rem; flex-wrap:wrap; }
.ai-mode .active { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%, transparent); }
.ai-runtime-note { font-size:.86rem; }
.ai-section { border-top:1px solid var(--line); margin-top:.8rem; padding-top:.8rem; }
.ai-section p { margin:.45rem 0 0; line-height:1.55; }
.ai-candidate { display:grid; grid-template-columns:1fr auto; gap:.3rem .6rem; padding:.65rem 0; border-bottom:1px solid var(--line); }
.ai-candidate small { grid-column:1/-1; color:var(--muted); }
.ai-sources { margin-top:.8rem; border-top:1px solid var(--line); padding-top:.8rem; }
.ai-sources summary { cursor:pointer; font-weight:700; }
.ai-actions { margin-top:.85rem; }
.ai-feedback { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin-top:.9rem; padding-top:.75rem; border-top:1px solid var(--line); }
.inline-alert { display:grid; gap:.25rem; margin-top:.7rem; padding:.7rem .8rem; border-radius:10px; background:var(--surface-2,#fff7ed); border:1px solid var(--line); }


/* CODE-7 Explore + Workshop Ecosystem */
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.category-grid a{color:inherit;text-decoration:none}.explore-context-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}.workshop-list{display:grid;gap:.85rem}.workshop-card{display:grid;gap:.8rem}.workshop-title-row{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.workshop-title-row h3{margin:0;font-size:1.05rem}.workshop-metrics{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}.workshop-metrics small{font-size:.72rem}.explore-results-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.map-placeholder{min-height:180px;border:1px dashed var(--line);border-radius:var(--r-md);display:grid;place-items:center;background:var(--surface-2);text-align:center;padding:1rem}@media(min-width:768px){.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.workshop-list{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* CODE-8 Workshop Business + Monetization */
.business-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.business-kpis .metric-value{font-size:1.35rem}.business-role{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.table-wrap select{min-height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:.35rem .5rem}@media(min-width:900px){.business-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* CODE-9 Community */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1rem}.tabs a{padding:.55rem .8rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text)}
.tag-row{display:flex;gap:.5rem;flex-wrap:wrap}.chat-thread{display:flex;flex-direction:column;gap:.75rem;max-height:58vh;overflow:auto}.chat-message{border-bottom:1px solid var(--border);padding:.35rem 0}.chat-message:last-child{border-bottom:0}.chat-message p{margin:.25rem 0}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--muted)}

/* CODE-10 Touring */
.code-block{white-space:pre-wrap;word-break:break-word;max-height:28rem;overflow:auto;background:var(--surface-subtle,#f6f7f9);padding:1rem;border-radius:.75rem;font-size:.82rem}

/* CODE-11 authentication */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,var(--surface-2,#f8fafc),var(--surface,#fff));}
.auth-card{width:min(100%,460px);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:20px;padding:28px;display:grid;gap:22px;box-shadow:0 20px 50px rgba(15,23,42,.08)}
.auth-brand{font-size:1.25rem}.account-summary{display:grid;gap:4px}
.sidebar-user{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--border,#e2e8f0)}.sidebar-user a{text-decoration:none}.sidebar-user .muted{font-size:.78rem;overflow:hidden;text-overflow:ellipsis}


/* CODE-14 Design System & UX hardening */
.card { position:relative; }
.card > :first-child { margin-top:0; }
.card > :last-child { margin-bottom:0; }
.card.interactive, a.card { color:inherit; text-decoration:none; }
.card.interactive:hover, a.card:hover { border-color:var(--muted); }

.badge { min-height:24px; }
.badge.success { background:var(--success-soft); color:var(--success); }
.badge.warning { background:var(--warning-soft); color:var(--warning); }
.badge.danger { background:var(--danger-soft); color:var(--danger); }
.badge.info { background:var(--info-soft); color:var(--info); }

.btn { min-height:var(--control-md); transition:background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.btn:hover:not([disabled]) { transform:translateY(-1px); }
.btn:active:not([disabled]) { transform:translateY(0); }
.btn.primary:hover:not([disabled]) { background:var(--primary-hover); }
.btn.secondary:hover:not([disabled]), .btn.ghost:hover:not([disabled]) { background:var(--surface-2); }
.btn[aria-busy="true"] { cursor:progress; }
.icon-btn { width:44px; height:44px; flex-shrink:0; border:1px solid var(--line); border-radius:12px; display:inline-grid; place-items:center; background:var(--surface); color:var(--text); }
.icon-btn:hover { background:var(--surface-2); }

.field label { color:var(--text-strong); }
.field small,.help-text { color:var(--muted); font-size:.78rem; }
.field input,.field select,.field textarea { outline:none; transition:border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast); }
.field input:hover,.field select:hover,.field textarea:hover { border-color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 14%,transparent); }
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"] { border-color:var(--danger); }

.state-panel { min-height:128px; align-content:center; }
.state-panel h1,.state-panel h2,.state-panel h3,.state-panel p { margin:0; }
.state-panel.error { border-color:color-mix(in srgb, var(--danger) 35%, transparent); background:var(--danger-soft); }
.state-panel.warning { border-color:color-mix(in srgb, var(--warning) 35%, transparent); background:var(--warning-soft); }
.state-panel.success { border-color:color-mix(in srgb, var(--success) 35%, transparent); background:var(--success-soft); }
.state-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

.inline-alert { background:var(--warning-soft); }
.inline-alert.info { background:var(--info-soft); border-color:color-mix(in srgb, var(--info) 35%, transparent); }
.inline-alert.success { background:var(--success-soft); border-color:color-mix(in srgb, var(--success) 35%, transparent); }
.inline-alert.danger { background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }

.skeleton { position:relative; overflow:hidden; background:var(--surface-2); color:transparent!important; border-radius:var(--r-sm); }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgb(255 255 255 / .65),transparent); animation:skeleton 1.3s infinite; }
.skeleton-line { height:.9rem; width:100%; }
.skeleton-line.short { width:55%; }
@keyframes skeleton { to { transform:translateX(100%); } }

.toast-root { pointer-events:none; }
/* Fixed dark surface, not var(--text-strong): toast text below is a fixed
   #fff, and --text-strong flips to a light color in dark mode (it's a
   heading-text token elsewhere) which would put white text on a near-white
   toast. Toasts stay dark-on-white-text in both themes by design. */
.toast { pointer-events:auto; display:flex; align-items:flex-start; gap:.6rem; background:#0f172a; }
.toast.success { background:#14532d; }
.toast.warning { background:#78350f; }
.toast.danger { background:#7f1d1d; }
.toast .toast-message { flex:1; }
.toast .toast-close { color:inherit; border:0; background:transparent; padding:0 .2rem; font-size:1.1rem; }

.table-wrap { scrollbar-gutter:stable; }
th { position:sticky; top:0; background:var(--surface); z-index:1; }
tbody tr:hover { background:var(--surface-subtle); }

.app-status { display:flex; gap:.65rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:.65rem .8rem; border:1px solid var(--line); border-radius:12px; font-size:.82rem; background:var(--surface); }
.app-status.warning { background:var(--warning-soft); border-color:color-mix(in srgb, var(--warning) 35%, transparent); }
.app-status.danger { background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.app-status .status-main { display:flex; gap:.45rem; align-items:center; }
.status-dot { width:.55rem; height:.55rem; border-radius:50%; background:currentColor; }

/* Mobile navigation drawer: the same sidebar as desktop (brand, full nav,
   sync/account footer), presented as a left-edge slide-in panel instead of a
   static column. Opened/closed via the topbar hamburger; see app.js's
   openDrawer()/closeDrawer(). */
.mobile-drawer { position:fixed; inset:0 auto 0 0; margin:0; width:min(84vw,320px); max-width:320px; height:100dvh; max-height:100dvh; padding:0; border:0; border-radius:0 var(--r-lg) var(--r-lg) 0; background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg); transform:translateX(-100%); transition:transform var(--motion-slow) var(--ease-standard); }
.mobile-drawer.is-open { transform:translateX(0); }
.mobile-drawer::backdrop { background:rgb(15 23 42 / 0); transition:background var(--motion-slow) var(--ease-standard); }
.mobile-drawer.is-open::backdrop { background:rgb(15 23 42 / .45); }
.mobile-drawer-inner { display:flex; flex-direction:column; height:100%; padding:1rem 1rem max(1rem,env(safe-area-inset-bottom)); overflow-y:auto; }
.mobile-drawer-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.75rem; }
.mobile-drawer-head .brand { min-width:0; }
.mobile-drawer-nav { display:grid; gap:.15rem; }
.mobile-drawer-nav .nav-item { display:flex; align-items:center; justify-content:flex-start; grid-template:none; gap:.7rem; padding:.68rem .75rem; min-height:48px; font-size:.9rem; text-align:left; }
.mobile-drawer-nav .nav-item .nav-icon { font-size:1.05rem; }
.mobile-drawer-footer { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); display:grid; gap:.75rem; }

.connection-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:var(--r-pill); font-size:.75rem; font-weight:700; border:1px solid var(--line); background:var(--surface); }
.connection-pill.success { color:var(--success); }
.connection-pill.warning { color:var(--warning); }

.card-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.empty-inline { color:var(--muted); padding:.35rem 0; }

@media (max-width: 767px) {
  .page-header { align-items:stretch; }
  .page-header > .btn, .page-header > .btn-row { align-self:flex-start; }
  .table-wrap { margin-inline:-.25rem; }
  .card { padding:.9rem; }
  .btn-row .btn { flex:1 1 auto; }
}

/* Google sign-in (auth card) */
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:.25rem 0;color:var(--muted);font-size:.85rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;border-top:1px solid var(--line)}
.google-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%}
.google-btn .google-g{width:18px;height:18px;flex:none}

/* Language switcher (sidebar footer / mobile drawer / auth card) */
.lang-switch{display:inline-flex;gap:.25rem;padding:.2rem;border:1px solid var(--line);border-radius:999px;margin-bottom:.5rem}
.lang-btn{border:0;background:transparent;font:inherit;font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;cursor:pointer;color:inherit;opacity:.7}
.lang-btn.active{background:var(--primary);color:#fff;opacity:1}

/* Theme switcher (sidebar footer / mobile drawer): same shape as .lang-switch above. */
.theme-switch{display:inline-flex;gap:.25rem;padding:.2rem;border:1px solid var(--line);border-radius:999px;margin-bottom:.5rem}
.theme-btn{border:0;background:transparent;font:inherit;font-size:.85rem;line-height:1;padding:.3rem .55rem;border-radius:999px;cursor:pointer;color:inherit;opacity:.7}
.theme-btn.active{background:var(--primary);color:#fff;opacity:1}

/* Record Service: repeatable item+price rows (garage.js serviceItemRowHtml). */
[data-service-items]{display:grid;gap:.5rem}
.service-item-row{align-items:stretch}
.service-item-row input[name="itemName[]"]{flex:1 1 auto;min-width:0}
.service-item-row input[name="itemPrice[]"]{flex:0 0 auto;width:9rem}
.service-item-row input{min-height:44px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:.6rem .7rem;color:var(--text)}
.service-item-row [data-remove-item-row]{flex:0 0 auto;width:44px;min-height:44px;padding:0}