:root { --ink:#123328; --muted:#60756b; --paper:#f3f7ef; --card:#fff; --line:#dce7d8; --accent:#a3e635; --navy:#174c3a; --shadow:0 12px 30px rgba(19,76,58,.10); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; padding-bottom:96px; } button, input, select, textarea { font:inherit; } button { cursor:pointer; }
.welcome-screen { position:fixed; z-index:20; inset:0; display:grid; align-items:stretch; overflow:auto; min-height:100dvh; padding:calc(env(safe-area-inset-top, 0px) + 20px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px); background:#e9eff0; }
.welcome-content { display:flex; flex-direction:column; width:min(100%, 620px); min-height:100%; margin:auto; }
.welcome-brand { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:20px; font-weight:750; }
.welcome-copy { margin:clamp(48px, 10vh, 92px) 0 26px; }
.welcome-eyebrow { margin:0 0 12px; color:#b84928; font-size:11px; font-weight:800; letter-spacing:1.2px; }
.welcome-copy h1 { max-width:560px; margin:0; color:var(--ink); font-family:Georgia, serif; font-size:clamp(38px, 9vw, 60px); font-weight:500; line-height:1.02; letter-spacing:0; }
.welcome-copy p:last-child { max-width:440px; margin:17px 0 0; color:#536071; font-size:16px; line-height:1.5; }
.welcome-photo { position:relative; flex:1; min-height:188px; max-height:330px; overflow:hidden; border-radius:8px; background:#172033; }
.welcome-photo::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg, rgba(23,32,51,.24), transparent 65%); }
.welcome-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.welcome-actions { display:grid; gap:12px; margin-top:26px; }
.welcome-login { min-height:54px; border:0; border-radius:8px; background:var(--navy); color:#fff; font-size:15px; font-weight:750; }
.welcome-explore { justify-self:center; border:0; background:transparent; color:#536071; font-size:13px; font-weight:700; padding:7px 10px; }
.welcome-explore:hover { color:var(--accent); }
.welcome-note { margin:12px 0 0; color:#697386; font-size:11px; text-align:center; }
@media (min-width:700px) { .welcome-screen { padding:42px; background:linear-gradient(90deg, #dce5e7 0 18%, #e9eff0 18% 82%, #dce5e7 82%); }.welcome-content { min-height:calc(100vh - 84px); }.welcome-copy { margin-top:clamp(70px, 12vh, 120px); }.welcome-photo { max-height:360px; } }
.topbar-actions { display:flex; align-items:center; gap:3px; }.more-button { display:grid; place-items:center; width:38px; height:35px; padding:6px 8px; }.menu-icon { display:block; width:17px; height:14px; background:linear-gradient(currentColor 0 2px,transparent 2px 6px,currentColor 6px 8px,transparent 8px 12px,currentColor 12px 14px); }.more-button:hover { border-radius:8px; background:#eef1f5; }.delete-entry { align-self:center; border:0; border-radius:50%; width:29px; height:29px; flex:0 0 29px; color:var(--muted); background:transparent; font-size:21px; line-height:1; }.delete-entry:hover { color:#b42318; background:#fff0ee; }
.fleet-panel { margin:0 0 37px; }.fleet-panel .section-heading { margin-bottom:12px; }.fleet-add { border:0; border-radius:8px; background:var(--navy); color:#fff; padding:9px 11px; font-size:12px; font-weight:750; }.vehicle-picker { color:var(--muted); font-size:12px; }.vehicle-picker select { margin-top:5px; padding:10px 12px; font-size:14px; font-weight:700; }.fleet-summary { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:12px 0; }.fleet-summary article { min-width:0; border:1px solid var(--line); border-radius:8px; background:#fff; padding:11px; }.fleet-summary strong { display:block; overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.fleet-summary span { color:var(--muted); font-size:11px; }.fleet-list { display:grid; gap:7px; }.fleet-vehicle { display:grid; grid-template-columns:31px 1fr auto; align-items:center; gap:9px; width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:10px; text-align:left; }.fleet-vehicle.active { border-color:var(--accent); background:#fff8f5; }.fleet-vehicle > span:first-child { font-size:19px; }.fleet-vehicle strong,.fleet-vehicle small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.fleet-vehicle strong { font-size:13px; }.fleet-vehicle small,.fleet-vehicle time { color:var(--muted); font-size:11px; }.fleet-vehicle time { white-space:nowrap; }.menu-language { grid-template-columns:38px 1fr auto; cursor:default; }.language-buttons { display:flex; overflow:hidden; border:1px solid var(--line); border-radius:7px; }.language-buttons button { border:0; background:#fff; color:var(--muted); font-size:12px; font-weight:750; min-width:34px; padding:8px 7px; }.language-buttons button + button { border-left:1px solid var(--line); }.language-buttons button.active { background:var(--navy); color:#fff; }
.remove-vehicle { margin:10px 0 0; border:0; background:transparent; color:#b42318; font-size:12px; font-weight:700; padding:4px 0; }.remove-vehicle:disabled { color:var(--muted); cursor:not-allowed; }.app-menu-content { padding:25px; }.menu-option { display:grid; grid-template-columns:38px 1fr; gap:11px; width:100%; align-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:13px; text-align:left; }.menu-option + .menu-option { margin-top:9px; }.menu-option > span:first-child { display:grid; place-items:center; width:38px; height:38px; border-radius:8px; background:#f4f6f9; font-size:20px; }.menu-option strong,.menu-option small { display:block; }.menu-option strong { font-size:14px; }.menu-option small { margin-top:3px; color:var(--muted); font-size:12px; }.workshop-finder { margin:0 0 37px; }.locate-button { border:0; border-radius:8px; background:var(--navy); color:#fff; padding:9px 11px; font-size:12px; font-weight:750; }.workshop-filters { display:flex; gap:7px; overflow:auto; margin:0 0 12px; }.workshop-filter { border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); padding:7px 11px; font-size:12px; font-weight:700; white-space:nowrap; }.workshop-filter.active { border-color:var(--navy); background:var(--navy); color:#fff; }.workshop-status { color:var(--muted); font-size:13px; line-height:1.45; margin:0 0 12px; }.workshop-map { display:none; width:100%; height:220px; border:1px solid var(--line); border-radius:8px; }.workshop-map.visible { display:block; }.workshop-results { display:grid; gap:8px; margin-top:12px; }.workshop-result { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:12px; text-decoration:none; }.workshop-result strong,.workshop-result small { display:block; }.workshop-result strong { font-size:14px; }.workshop-result small { color:var(--muted); font-size:12px; line-height:1.4; margin-top:3px; }.workshop-result em { color:var(--accent); font-size:12px; font-style:normal; font-weight:750; white-space:nowrap; }.map-attribution { margin:8px 0 0; color:var(--muted); font-size:10px; }
.app-shell { max-width:680px; margin:auto; padding:env(safe-area-inset-top, 20px) 20px 20px; }.topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 0 28px; }.brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:750; letter-spacing:-.5px; }.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:#fff; background:var(--accent); border-radius:10px; font-family:Georgia,serif; font-weight:bold; }.icon-button,.filter-button,.close { background:transparent; border:0; color:var(--ink); }.icon-button { font-size:19px; letter-spacing:2px; padding:8px; }.customize-home { font-size:23px; line-height:1; padding:6px 8px; }.vehicle-card { color:#fff; background:var(--navy); border-radius:25px; min-height:172px; padding:27px; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow); }.eyebrow { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:1.15px; margin:0 0 7px; }.vehicle-card .eyebrow { color:#aeb7c6; }.vehicle-card h1 { font-size:28px; margin:0 0 5px; letter-spacing:-1px; }.vehicle-card p:last-child { margin:0; color:#ccd2dc; }.car-illustration { background:#26334b; border:0; border-radius:17px; font-size:51px; width:108px; height:100px; transition:transform .15s; }.car-illustration:hover { transform:rotate(-2deg) scale(1.04); }.summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:15px 0 37px; }.summary article { background:var(--card); border:1px solid var(--line); border-radius:17px; padding:16px; color:var(--muted); font-size:13px; }.summary-number { display:block; color:var(--ink); font-weight:750; font-size:19px; margin-bottom:3px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:17px; }.section-heading h2,.dialog-heading h2 { margin:0; font-size:22px; letter-spacing:-.6px; }.filter-button { color:var(--accent); font-weight:700; padding:7px 0; }.filter-row { display:flex; gap:8px; overflow:auto; padding-bottom:17px; }.hidden { display:none !important; }.chip { background:#fff; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 13px; font-size:13px; white-space:nowrap; }.chip.active { color:#fff; border-color:var(--navy); background:var(--navy); }.entries { display:grid; gap:10px; }.entry { display:grid; grid-template-columns:45px 1fr auto; gap:13px; align-items:center; padding:15px; background:var(--card); border:1px solid var(--line); border-radius:18px; }.entry-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; font-size:21px; background:#fff0eb; }.entry-icon.service { background:#eaf4ed; }.entry-icon.tire { background:#f2effb; }.entry-icon.other { background:#eef2f7; }.entry-main h3 { margin:0 0 4px; font-size:15px; letter-spacing:-.15px; }.entry-main p { margin:0; color:var(--muted); font-size:13px; }.entry-date { text-align:right; color:var(--muted); font-size:12px; white-space:nowrap; }.entry-date strong { display:block; color:var(--ink); font-size:14px; margin-bottom:4px; }.empty-state { text-align:center; padding:45px 25px; color:var(--muted); }.empty-state span { display:grid; place-items:center; background:#fff0eb; color:var(--accent); width:48px; height:48px; border-radius:16px; margin:0 auto 13px; font-size:23px; }.empty-state h3 { color:var(--ink); margin:0 0 6px; }.empty-state p { font-size:14px; margin:0; }.add-button { position:fixed; z-index:1; bottom:max(22px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); color:#fff; background:var(--accent); border:0; box-shadow:0 8px 22px rgba(236,110,60,.35); border-radius:999px; font-weight:750; padding:15px 22px; font-size:15px; }.add-button span { font-size:19px; vertical-align:-1px; } dialog { width:min(100% - 24px, 520px); border:0; border-radius:24px; padding:0; color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.25); } dialog::backdrop { background:rgba(23,32,51,.45); backdrop-filter:blur(3px); } form { padding:25px; }.dialog-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:24px; }.close { font-size:30px; line-height:22px; color:var(--muted); } label { display:block; font-weight:700; font-size:13px; margin:0 0 16px; } input,select,textarea { width:100%; border:1px solid #dfe4eb; color:var(--ink); margin-top:6px; background:#fff; border-radius:11px; padding:12px; outline-color:var(--accent); } textarea { resize:vertical; min-height:76px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.optional { color:var(--muted); font-weight:400; }.save-button { border:0; border-radius:12px; background:var(--navy); color:#fff; width:100%; padding:14px; font-weight:750; margin-top:2px; }
@media (min-width:700px) { body { background:linear-gradient(90deg,#eef0f3 0 20%,var(--paper) 20% 80%,#eef0f3 80%); }.app-shell { background:var(--paper); min-height:100vh; padding-left:36px; padding-right:36px; } }
@media (max-width:390px) { .vehicle-card { padding:22px; }.car-illustration { width:83px; font-size:39px; }.vehicle-card h1 { font-size:24px; } }
/* A clear 3 × 3 grid for the home-widget customizer. */
.customize-home { display:grid; place-items:center; width:38px; height:35px; line-height:1; padding:6px 8px; }
.widget-grid-icon { display:block; width:4px; height:4px; background:currentColor; box-shadow:6px 0 currentColor,12px 0 currentColor,0 6px currentColor,6px 6px currentColor,12px 6px currentColor,0 12px currentColor,6px 12px currentColor,12px 12px currentColor; transform:translate(-6px,-6px); }
.customize-home:hover { border-radius:8px; background:#eef1f5; }
.customize-home:focus-visible { outline:3px solid rgba(236,110,60,.35); outline-offset:2px; border-radius:8px; }

/* Preserve the vertical home layout while giving wider screens more room. */
@media (min-width:900px) { body { background:linear-gradient(90deg,#eef0f3 0 8%,var(--paper) 8% 92%,#eef0f3 92%); }.app-shell { max-width:920px; } }
.decoder { background:#fff; border:1px solid var(--line); border-radius:21px; padding:21px; margin:0 0 38px; box-shadow:0 5px 18px rgba(25,35,53,.035); }.decoder-heading { display:flex; align-items:start; justify-content:space-between; }.decoder-heading h2 { margin:0; font-size:21px; letter-spacing:-.6px; }.decoder-badge { background:#eef2f7; color:#536071; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; letter-spacing:.8px; }.decoder-intro { color:var(--muted); font-size:14px; line-height:1.45; margin:12px 0 15px; }.decoder-form { display:flex; gap:8px; }.decoder-form input { margin:0; font-weight:750; letter-spacing:.8px; text-transform:uppercase; }.decoder-form button { flex:0 0 auto; background:var(--navy); color:#fff; border:0; border-radius:11px; padding:0 15px; font-weight:750; }.input-hint { color:var(--muted); font-size:11px; margin:9px 0 0; }.decode-result { border-top:1px solid var(--line); margin-top:18px; padding-top:17px; }.result-topline { display:flex; align-items:center; gap:8px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.6px; }.result-code { background:#fff0eb; padding:4px 7px; border-radius:7px; }.decode-result h3 { margin:9px 0 7px; font-size:17px; letter-spacing:-.3px; }.decode-result p { margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--muted); }.decode-detail { margin:15px 0; }.decode-detail h4 { margin:0 0 7px; color:var(--ink); font-size:13px; }.decode-detail ul { margin:0; padding-left:19px; color:var(--muted); font-size:14px; line-height:1.45; }.decode-detail li + li { margin-top:5px; }.next-step { background:#f4f6f9; color:var(--ink) !important; padding:11px; border-radius:10px; }.save-dtc { border:0; color:var(--accent); background:transparent; padding:5px 0 0; font-weight:750; font-size:13px; }
.reminder-panel { margin:0 0 37px; }.reminder-panel .section-heading { margin-bottom:12px; }.reminder-list { display:grid; gap:8px; }.reminder { display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; padding:11px; }.reminder > span { display:grid; place-items:center; width:38px; height:38px; border-radius:8px; background:#f4f6f9; font-size:18px; }.reminder strong,.reminder small { display:block; }.reminder strong { font-size:14px; }.reminder small { color:var(--muted); font-size:12px; margin-top:3px; }.reminder.urgent { border-color:#e7b4a4; background:#fff8f5; }.reminder.urgent > span { background:#fff0eb; }.dialog-help { color:var(--muted); font-size:13px; line-height:1.45; margin:-8px 0 18px; }.entry-note { display:block; color:var(--muted); font-size:12px; line-height:1.35; margin-top:5px; }.attachment-button { border:0; background:transparent; color:var(--accent); font-size:12px; font-weight:700; padding:6px 0 0; }.attachment-dialog-content { padding:25px; }.attachment-list { display:grid; gap:8px; }.attachment-file { display:grid; grid-template-columns:32px 1fr auto; gap:9px; align-items:center; width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:11px; text-align:left; }.attachment-file > span { font-size:18px; }.attachment-file strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.attachment-file small { color:var(--accent); font-size:12px; }
.add-attachment-button { width:100%; border:1px solid var(--line); border-radius:8px; background:#fff8f5; color:var(--accent); font-size:13px; font-weight:750; padding:11px; margin:-5px 0 12px; }.add-attachment-button:disabled { cursor:wait; opacity:.65; }
.widget-choice { display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; margin-bottom:9px; }.widget-choice span { min-width:0; }.widget-choice strong,.widget-choice small { display:block; }.widget-choice strong { font-size:14px; }.widget-choice small { color:var(--muted); font-size:12px; font-weight:400; margin-top:3px; }.widget-choice input { width:22px; height:22px; margin:0; accent-color:var(--accent); }.home-widget { width:100%; }
.log-section { margin-bottom:37px; }
.info-dialog-content { padding:25px; }.info-dialog-content > p { color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 15px; }.account-status { border:1px solid var(--line); border-radius:8px; background:#f4f6f9; padding:13px; margin:18px 0; }.account-status strong,.account-status span { display:block; }.account-status strong { font-size:14px; }.account-status span { color:var(--muted); font-size:13px; line-height:1.4; margin-top:4px; }.save-button:disabled { background:#9aa4b2; cursor:not-allowed; }.legal-content h3 { font-size:15px; margin:20px 0 7px; }.legal-content h3:first-of-type { margin-top:0; }
.back-button { display:block; border:0; background:transparent; color:var(--accent); font-size:31px; line-height:18px; padding:0 0 11px; }
.dialog-heading:has(.menu-back) { display:grid; grid-template-columns:29px 1fr auto; gap:9px; align-items:start; }.menu-back { border:0; background:transparent; color:var(--accent); font-size:31px; line-height:22px; padding:0; }
.menu-option.menu-language { grid-template-columns:38px minmax(0, 1fr) auto; }.menu-option.menu-language .language-buttons { justify-self:end; }
.registration-lookup { display:flex; gap:8px; }.registration-lookup input { min-width:0; margin:0; text-transform:uppercase; }.lookup-button { flex:0 0 auto; border:0; border-radius:8px; background:var(--navy); color:#fff; font-size:13px; font-weight:750; padding:0 12px; }.lookup-status { min-height:18px; color:var(--muted); font-size:12px; line-height:1.35; margin:-8px 0 13px; }
.auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.auth-actions .save-button { width:100%; margin:0; }.secondary-button { border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-size:14px; font-weight:750; padding:13px; }
.account-links { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:13px; }.account-links button { border:0; background:transparent; color:var(--accent); font-size:12px; font-weight:700; padding:0; text-align:left; }
.verification-code { font-size:24px; font-weight:750; letter-spacing:6px; text-align:center; }

/* Lime and forest-green palette for legacy component colors. */
.welcome-screen { background:#e8f1dd; }.welcome-eyebrow,.welcome-explore:hover { color:#4d7c0f; }.welcome-copy p:last-child { color:#426154; }.welcome-photo { background:#174c3a; }.welcome-photo::after { background:linear-gradient(90deg,rgba(18,51,40,.35),transparent 65%); }.welcome-note { color:#60756b; }
.topbar-actions .more-button:hover,.customize-home:hover { background:#e4f0d9; }.vehicle-card { background:#174c3a; }.vehicle-card .eyebrow { color:#c9dfa8; }.vehicle-card p:last-child { color:#d8e8d0; }.car-illustration { background:#27634c; }
.fleet-vehicle.active { border-color:#84cc16; background:#f4fbe8; }.fleet-add,.locate-button,.save-button,.decoder-form button,.welcome-login { background:#174c3a; }.workshop-filter.active,.chip.active,.language-buttons button.active { border-color:#174c3a; background:#174c3a; }.filter-button,.workshop-result em,.attachment-button,.account-links button,.back-button,.menu-back,.save-dtc { color:#4d7c0f; }
.entry-icon { background:#f2fbe4; }.entry-icon.service { background:#e8f6df; }.entry-icon.tire { background:#edf6e7; }.entry-icon.other,.decoder-badge,.reminder > span,.menu-option > span:first-child,.account-status,.next-step { background:#edf5e9; }.empty-state span { background:#eff9dd; color:#4d7c0f; }.add-button { background:#84cc16; box-shadow:0 8px 22px rgba(101,163,13,.30); }.result-code { background:#eff9dd; color:#3f6212; }.reminder.urgent { border-color:#b7d78e; background:#f7fcea; }.reminder.urgent > span { background:#eaf7d8; }
.add-attachment-button { border-color:#cae1b8; background:#f4fbe8; color:#4d7c0f; }.widget-choice input { accent-color:#65a30d; }.customize-home:focus-visible { outline-color:rgba(132,204,22,.42); }
@media (min-width:700px) { .welcome-screen { background:linear-gradient(90deg,#dcebd3 0 18%,#e8f1dd 18% 82%,#dcebd3 82%); } body { background:linear-gradient(90deg,#e6eee1 0 20%,var(--paper) 20% 80%,#e6eee1 80%); } }
@media (min-width:900px) { body { background:linear-gradient(90deg,#e6eee1 0 8%,var(--paper) 8% 92%,#e6eee1 92%); } }